I want to draw the below ripple using css.
The closest I darw was something like this.
display: block;
width: 126px;
height: 180px;
background-color: rgba(99, 83, 196, 0.38);
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
Does anyone have an idea on how to draw a half ripple ?
I think it is just two concentric circles that are masked by the rounded rectangle. You can achieve this with a circular gradient background:
#out {
background: #ddd;
padding: 10px;
width: 200px;
}
#in {
background: #fff;
background: radial-gradient(circle at 180px 10px, rgba(146,136,193,1) 30px, rgba(183,178,214,1) 30.5px, rgba(183,178,214,1) 50px, rgba(255,255,255,1) 50.5px);
background-repeat: no-repeat;
border-radius: 8px;
color: #6456BD;
font-family: sans-serif;
font-size: 20px;
font-weight: 700;
height: 40px;
padding: 30px 20px;
}
<div id="out">
<div id="in">
Usage<br>balances
</div>
</div>
Related
I want to create a zig-zag border in css which is responsive, i.e. the zig-zag border must adjust itself to fit perfectly according to width of the container.
I was able to create this:
But on changing the width it's output is :
I want to perfectly fit the zig-zag pattern like above image on changing the width of the container.
It would be helpful if I could also add some radius at peak points like this :
Here is the code so far
.container {
width: 664px;
}
.sub-container {
border: 2px solid black;
border-bottom: 0;
padding: 40px;
height: 200px;
}
.upper-zigzag {
background: linear-gradient(135deg, #ffffff 25%, transparent 25%) 0px 0,
linear-gradient(225deg, #ffffff 25%, transparent 25%) 0px 0;
background-size: 60px 60px;
background-color: black;
height: 32px;
background-repeat: repeat-x;
border-left: 2px solid black;
border-right: 2px solid black;
}
.lower-zigzag {
position: relative;
background:
linear-gradient(315deg, #ffffff 25%, transparent 25%) -28px -30px,
linear-gradient(45deg, #ffffff 25%, transparent 25%) -28px -30px;
background-size: 60px 60px;
background-color: transparent;
height: 30px;
background-repeat: repeat-x;
margin-top: -30px;
z-index: 1;
}
<div class="container">
<div class="sub-container"></div>
<div class="upper-zigzag"></div>
<div class="lower-zigzag"></div>
</div>
Thanks!
I'm trying to create two half circles (each with a different color) which together form one circle. Something like this
DEMO
I created this using 2 elements and a bit of css:
<span class="circle-part half-left-circle"></span>
<span class="circle-part half-right-circle"></span>
and
$size: 100px;
$border: 20px;
...
.half-right-circle {
border-top-right-radius: $size + $border;
border-bottom-right-radius: $size + $border;
border: $border solid green;
border-left: 0;
}
.half-left-circle {
border-top-left-radius: $size + $border;
border-bottom-left-radius: $size + $border;
border: $border solid red;
border-right: 0;
}
Although this is exactly what I need, I was wondering if this can be achieved with just one html element (without pseudo elements of course :) ?
Here is a working snippet of what I'll do, using border:
% values instead of px for border-radius, it simplifies a lot!
border-color to add the correct color for each side.
transform: rotate(45deg); to turn it like you want.
body{
background: #ccc;
}
.halves-circle{
background: #fff;
height: 200px;
width: 200px;
border: 20px solid;
border-radius: 50%;
border-color: green green red red;
transform: rotate(45deg);
}
<div class="halves-circle">
⋅
⋅
⋅
We could use some CSS variables too, if you want to make many of them:
body{
background: #ccc;
}
.halves-circle{
background: #fff;
height: var(--size);
width: var(--size);
border: var(--border) solid;
border-radius: 50%;
border-color: green green red red;
transform: rotate(45deg);
}
#hc1{
--size: 100px;
--border: 20px;
}
#hc2{
--size: 60px;
--border: 30px;
}
#dot{ /* We can even do this! */
--size: 0px;
--border: 20px;
}
<div class="halves-circle" id="hc1"></div>
<div class="halves-circle" id="hc2"></div>
<div class="halves-circle" id="dot"></div>
Hope it helps.
Here is a more simple solution with only 2 gradient and less of code:
.circle {
margin:20px;
border-radius:50%;
width:200px;
height:200px;
background:
radial-gradient(circle at center,white 60%,transparent 60.5%),
linear-gradient(to right,red 50%,green 0);
}
body {
background-color:pink;
}
<div class="circle">
</div>
Please try this code
body {
background: #ccc;
}
.circle {
margin: 25px 0;
width: 200px;
height: 200px;
border-radius: 50%;
border: 12px solid transparent;
background-size: 100% 100%, 100% 50%,100% 100%, 100% 50%;
background-repeat: no-repeat;
background-image: linear-gradient(white, white),
linear-gradient(360deg, green 100%, lightgrey 100%),
linear-gradient(360deg, red 100%, lightgrey 100%);
background-position: center center, left top, right top, left bottom, right bottom;
background-origin: content-box, border-box, border-box, border-box, border-box;
background-clip: content-box, border-box, border-box, border-box, border-box;
transform: rotate(90deg);
}
<div class="circle">
</div>
Fiddle: http://jsfiddle.net/66r7nj4x/
I saw this question and answer: CSS Gradient arrow shape with inner shadow and gradient border and I'm looking to create the same thing but with an arrow on each side.
Here is what the final result would looks like:
I would do it in 3 steps:
create a normal rectangular element with a background gradient (e.g. from orange to red)
create a pseudo element ::before with a background color, the gradient is starting with (e.g. orange)
create a pseudo element ::after with a background color, the gradient is ending with (e.g. red)
Now you just need to position the pseudo elements properly and use the border property to create the triangle shape:
div {
position: relative;
display: inline-block;
text-transform: uppercase;
color: white;
height: 3em;
min-width: 10em;
line-height: 3em;
font-family: Arial;
font-size: 1.5em;
font-weight: bold;
text-align: center;
background: linear-gradient(to right, orange, red);
padding: 0 1em;
margin: 0 1em;
}
div::before,
div::after {
content: '';
position: absolute;
height: 0;
width: 0;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
}
div::before {
left: -1em;
border-right: 1em solid orange;
}
div::after {
right: -1em;
border-left: 1em solid red;
}
<div>Exemple</div>
What about a solution with only gradient and no pseudo element:
.arrow {
text-transform: uppercase;
color: white;
width: 200px;
line-height: 3em;
font-family: Arial;
font-size: 1.5em;
font-weight: bold;
text-align: center;
background:
linear-gradient(to top left ,orange 50%,transparent 51%) top left /20px 50%,
linear-gradient(to bottom left ,orange 50%,transparent 51%) bottom left /20px 50%,
linear-gradient(to top right,red 50%,transparent 51%) top right /20px 50%,
linear-gradient(to bottom right,red 50%,transparent 51%) bottom right/20px 50%,
linear-gradient(to right, orange, red) 20px 0/calc(100% - 40px) 100% ;
background-repeat:no-repeat;
margin: 20px;
}
<div class="arrow">Exemple</div>
<div class="arrow">work with <br>2 lines</div>
And here is another one with clip-path:
.arrow {
text-transform: uppercase;
color: white;
width: 200px;
line-height: 3em;
font-family: Arial;
font-size: 1.5em;
font-weight: bold;
text-align: center;
background: linear-gradient(to right, orange, red);
margin: 20px;
clip-path: polygon(90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%, 10% 0);
}
<div class="arrow">Exemple</div>
<div class="arrow">work with <br>2 lines</div>
You Can also write css without using gradient background
Step 1: write html
<span class="right-arrow" style="
background-color: red;
width: 16%;
display: -webkit-box;
padding: 10px 10px;
color: #fff;
font-size: 16px;
font-weight: 600;
position: relative;
">
Example
</span>
Step 2: Write css
span{
background-color: red;
width: 180px;
display: -webkit-box;
padding: 10px 10px;
color: #fff;
font-size: 16px;
font-weight: 600;
position: relative;
}
span.right-arrow:after {
content: '';
width: 0;
height: 0;
border-top: 21px solid transparent;
border-left: 21px solid red;
border-bottom: 21px solid transparent;
position: absolute;
right: -21px;
top: 0;
}
Now it working fine
W3Schools has a great example of gradients in CSS: https://www.w3schools.com/css/css3_gradients.asp
background: linear-gradient(direction, color-stop1, color-stop2, ...)
background: linear-gradient(to right, red , yellow);
For the shape of your div, W3Schools also has a great page for creating geometric shapes: https://www.w3schools.com/howto/howto_css_shapes.asp
But to paste the same code twice:
div {
position: relative;
display: inline-block;
height: 3em;
min-width: 10em;
background: linear-gradient(to right, orange, red);
padding: 0 1em;
margin: 0 2em;
}
div::before,
div::after {
content: '';
position: absolute;
height: 0;
width: 0;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
}
div::before {
left: -1em;
border-right: 1em solid orange;
}
div::after {
right: -1em;
border-left: 1em solid red;
}
I've been trying to make responsive colored eye focus icon, but so far all I've tried has been unsuccessful.
I was trying to somewhat replicate the colors of a real eye.
I used border, box shadow, to get the colors, but that part is not scaling. Tried with outline too, but failed as well, that one wasn't even round.
The height of the div is currently static, but I would like it to be responsive. So the whole eye scales properly across different sizes.
Here's my code:
<div class="paragraph eye-focus">
<div class="eye1" width="80%">
<div class="eye2"></div>
</div>
</div>
.eye1 {
height: 200px;
height: calc(attr(width) / 2.5);
width: 75%;
background-color: white;
border-radius: 50%;
position: relative;
margin: auto;
}
.eye2 {
background-color: black;
width: 8%;
height: 12%;
border-radius: 50%;
border: 0.5em solid #a50;
box-shadow: 0 0 0 1.5em #080;
position: absolute;
top: 40%;
left: 45%;
}
.eye-focus {
position: relative;
}
jsfiddle if you'd prefer https://jsfiddle.net/xcxdp92q/
I'd like to put my solution out there.
You can use background radial-gradient to create the eye in a single element.
When adding padding in %, it is based on the width of the element. Use that to your advantage to make it responsive. If padding equals width, the element will be a square.
.eye-focus {
box-sizing: content-box;
height: 0;
width: 75%;
padding: 30% 0 0 0;
margin: 0 auto;
border-radius: 50%;
background-color: #fff;
background-image: radial-gradient(circle, #000 8%, #a50 8%, #0b0 17%, #080 33%, transparent 33%);
}
<div class="paragraph">
<div class="eye-focus"></div>
</div>
jsfiddle
If you're only supporting browsers that support gradients (and current browsers most do) then you can just use one div and do all the colors in a radial gradient. I used vw to size it like Suthan Bala suggested in their comment.
body {
background: #EEE;
}
.eye {
border-radius: 50%;
background: -moz-radial-gradient(center, ellipse cover, #000000 17%, #aa5500 18%, #008800 40%, #ffffff 41%);
background: -webkit-radial-gradient(center, ellipse cover, #000000 17%, #aa5500 18%, #008800 40%, #ffffff 41%);
background: radial-gradient(ellipse at center, #000000 17%, #aa5500 18%, #008800 40%, #ffffff 41%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff', GradientType=1);
width: 35vw;
height: 35vw;
}
<div class="eye">
</div>
I used the Color Gradient Generator by Colorzilla.
Try using this CSS:
.eye1 {
height: 4vw;
width: 4vw;
background-color: white;
border-radius: 50%;
position: relative;
margin: auto;
}
.eye2 {
background-color: black;
width: 6vw;
height: 6vw;
border-radius: 50%;
border: 1em solid #a50;
box-shadow: 0 0 0 3vw #080;
position: relative;
top: 8vw;
left: 43%;
}
.eye-focus {
position: relative;
}
I've been using vw a lot lately (for a year now). Very handy!
Below is the image I am trying for, I managed to get a square using CSS, but I am trying for horizontal and vertical line in a square.
.hub{
width: 119px;
height: 101px;
background: #b5adad;
}
<div class="hub"></div>
There are many ways to do this and one would be to use gradients like below: (the image in question was actually a rectangle.)
The approach is very simple - we use 2 linear gradients to create two thin solid colored lines and then position the images such that they match our needs. Linear gradients are used even though it creates only a solid color because it is easier to control size and position of an image than background color.
div {
height: 100px;
width: 200px;
border: 1px solid red;
background-image: linear-gradient(to bottom, red, red), linear-gradient(to right, red, red);
background-repeat: no-repeat;
background-size: 1px 100%, 100% 1px;
background-position: 20px 0px, 0px 10px;
}
<div></div>
We can also create an output which has a fade-out or shadow effect like in the image in question:
div {
height: 100px;
width: 200px;
border: 1px solid;
background-color: gray;
background-image: linear-gradient(to bottom, black, black), linear-gradient(to right, red, transparent), linear-gradient(to right, black, black), linear-gradient(to bottom, red, transparent);
background-repeat: no-repeat;
background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
background-position: 20px 0px, 21px 0px, 0px 10px, 0px 11px;
box-shadow: inset 0px 0px 3px red;
}
<div></div>
Another way is to use :before and :after pseudo-elements:
.hub{
width: 119px;
height: 101px;
background: #b5adad;
position: relative;
padding: 18px 0 0 18px;
}
.hub:after, .hub:before {
content: " ";
background: black;
display: block;
position: absolute;
}
.hub:after {
width: 1px;
height: 100%;
left: 15px;
top: 0;
}
.hub:before {
width: 100%;
height: 1px;
top: 15px;
left: 0;
}
<div class="hub">Lorem ipsum dolor amet</div>