I'm trying to reproduce (as close as possible) in CSS a gradient I've seen.
I managed to get close to it but I can't do better.
Here is the image of the gradient:
Gradient to reproduce
And here is my HTML / CSS code:
*, *:before, *:after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body {display: flex; align-items: center; justify-content: center;}
.logo {
background:
radial-gradient(circle farthest-corner at 10% 90%, #FFF200, transparent 50%),
radial-gradient(circle farthest-corner at 10% 130%, #FFF200, transparent 50%),
radial-gradient(circle farthest-corner at 150% 150%, #ed4444, transparent),
radial-gradient(circle farthest-corner at 170% 170%, #ed4444, transparent),
linear-gradient(#627AFF 40%, transparent);
border-radius: 50%;
font-size: 250px;
height: 1em;
position: relative;
width: 1em;
}
.logo:before {
content: "D";
color: white;
position: absolute;
left: 67px;
top: 17px;
font-size: 175px;
}
<div class='logo'></div>
Thank you in advance,
the best i can do for you, wish it helps you.
good luck,
.logo {
background:
radial-gradient(circle farthest-side at 50% 180%, white 15%, transparent 20%),
radial-gradient(closest-corner at 121% 84%, #ef5d5d 190%, transparent 307%),
radial-gradient(closest-side at 40% 77%, #fff64d 76%, transparent 185%),
linear-gradient(#9933ff 10%, transparent);
border-radius: 50%;
font-size: 250px;
height: 1em;
position: relative;
width: 1em;
}
.logo:before {
font-family: 'Brush Script MT', cursive;
content: "D";
color: white;
position: absolute;
left: 67px;
top: 17px;
font-size: 175px;
}
<div class='logo'></div>
Related
I need to create a responsive triangle <div>. I was able to create it using css skewed, but it is not responsive, when I change the screen width it gets messed up. Can someone help me? Thank you very much in advance!
Here is what I want:
This is the code I have so far:
.skewed-box-one:before {
background-color: red;
content: '';
height: 100px;
width: 30.05%;
display: block;
visibility: visible;
position: absolute;
top: -40px;
transform: skewY(8deg);
border-top: 3px solid #BBDEFB;
}
.skewed-box-one:after {
background-color: red;
content: '';
height: 130px;
width: 70%;
display: block;
visibility: visible;
position: absolute;
top: -46px;
right: 0;
transform: skewY(-4deg);
border-top: 3px solid #BBDEFB;
}
<div class="skewed-box-one"></div>
You could use CSS clip-path, do note that broswer support is limited. With this tool you can generate the shape you want.
.triangle1 {
clip-path: polygon(50% 0%, 100% 84%, 100% 100%, 0 100%, 0 84%);
background: red;
width: 100%;
height: 100%;
}
.triangle2 {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);;
background: red;
width: 100%;
height: 100%;
}
.container {
width: 50%;
height: 300px;
margin-bottom: 20px;
}
<div class="container">
<div class="triangle1">1</div>
</div>
<div class="container">
<div class="triangle2">2</div>
</div>
I could solve this problem with #SuperDJ help, usingclip-path. I also find this website that helps to draw shapes:
https://bennettfeely.com/clippy/
Here is the final code i used:
.triangle1 {
position: absolute;
-webkit-clip-path: polygon(21% 96%, 0 54%, 100% 54%);
clip-path: polygon(21% 96%, 0 54%, 100% 54%);
background: #BBDEFB;
width: 100%;
height: 200px;
margin-top: -40px;
}
Thanks very much everybody that tryed to help and a special thanks to #SuperDJ!
Here is another idea more supported than clip-path using background coloration
.box-down {
height:80px;
padding-bottom:50px;
background:
linear-gradient(to bottom right,red 48%, transparent 50%) bottom right/30% 50px,
linear-gradient(to bottom left ,red 48%, transparent 50%) bottom left/70.1% 50px,
red content-box;
background-repeat:no-repeat;
}
.box-up {
height:80px;
padding-top:50px;
background:
linear-gradient(to top right,red 48%, transparent 50%) top right/70% 50px,
linear-gradient(to top left ,red 48%, transparent 50%) top left /30.1% 50px,
red content-box;
background-repeat:no-repeat;
margin-top:20px;
}
<div class="box-down"></div>
<div class="box-up"></div>
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!
I have problem when I tried to get this type of zigzag I tried a lot but unfortunately it didn't work.
I tried this way of coding
CSS
.zigzag:before {
content: "";
display: block;
position: absolute;
top: -10px;
width: 100%;
height: 10px;
}
.container2:before {
background:
linear-gradient(
45deg, transparent 33.333%,
#E2E2E2 33.333%, #E2E2E2 66.667%,
transparent 66.667%
),
linear-gradient(
-45deg, transparent 33.333%,
#E2E2E2 33.333%, #E2E2E2 66.667%,
transparent 66.667%
);
background-size: 20px 40px;
}
but i get like rectangle zigzag but what i need is like line not rectangle
i want like this
div{
height: 50px;
background:
linear-gradient(135deg, white 35%, transparent 25%) -25px 0,
linear-gradient(225deg, white 35%, transparent 25%) -25px 0,
linear-gradient(315deg, white 35%, transparent 25%),
linear-gradient(45deg, white 35%, transparent 25%);
background-size: 50px 50px;
background-color: black;
}
http://jsfiddle.net/4ay1uduz/
Simply change all 50px to your element's height, and change all 25px to half its height.
Take a look JsFiddle here. Hope this will help you.
HTML:
<div class="container4 zigzag"></div>
CSS:
.zigzag {
position: relative;
width: 100%;
height: 200px;
}
.zigzag:before {
content: "";
display: block;
position: absolute;
top: -10px;
width: 100%;
height: 10px;
}
.container4 {
background: #CCC;
}
.container4:before {
background:
linear-gradient(
45deg, transparent 33.333%,
#CCC 33.333%, #CCC 66.667%,
transparent 66.667%
),
linear-gradient(
-45deg, transparent 33.333%,
#CCC 33.333%, #CCC 66.667%,
transparent 66.667%
);
background-size: 20px 40px;
}
Html:
<div class="container1">
</div>
<div class="container2">
</div>
Css:
.container1 {
background: white;
}
.container1:after {
background: linear-gradient(-45deg, black 16px, transparent 0), linear-gradient(45deg, black 16px, transparent 0);
background-position: left-bottom;
background-repeat: repeat-x;
background-size: 32px 32px;
content: " ";
display: block;
bottom: 0px;
left: 0px;
width: 100%;
height: 32px;
}
.container2 {
margin-top: -27px;
}
.container2:after {
background: linear-gradient(-45deg, white 16px, transparent 0), linear-gradient(45deg, white 16px, transparent 0);
background-position: left-bottom;
background-repeat: repeat-x;
background-size: 32px 32px;
content: " ";
display: block;
bottom: 0px;
left: 0px;
width: 100%;
height: 32px;
}
Here is a fiddle.
Can anybody help me styling a textbox border like in image only by css.I have tried the following css but not working perfectly
.addfolder-input {
border: medium none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-bottom: 20px;
width: 100%;
padding: 0 10px;
border-top: 0;
border-right: 0;
border-bottom: solid 2px #3c5a9a;
border-left: 0;
border-radius:5px;
}
This is one possible approach by using a container element around the text box and then adding an absolutely positioned pseudo-element to the container which is rotated along the X-axis with a bit of perspective.
Rotating along the X-axis with perspective makes the rectangle look as though it sides are going away from each other as we go from bottom of the rectangle to its top. The top-border of the pseudo-element is nullified as we don't need it.
Whatever width is required for the text-box should be set to the container as both the pseudo-element and the text-box derive their `width (100%) from their container.
.addfolder-input {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-bottom: 20px;
width: 100%;
padding: 0 10px;
border: none;
outline: none;
}
.container {
position: relative;
width: 100px;
}
.container:after {
position: absolute;
content: '';
bottom: 48%;
left: 6px;
width: 100%;
height: 6px;
border: 2px solid #3c5a9a;
border-top: none;
-webkit-transform: perspective(10px) rotateX(-10deg);
-moz-transform: perspective(10px) rotateX(-10deg);
transform: perspective(10px) rotateX(-10deg);
}
<div class="container">
<input type="text" class="addfolder-input" value="Type Something..."/>
</div>
Here is another alternate using multiple backgrounds, linear-gradients and background positioning. This can also work but in some browsers the angular edges/borders become a bit jagged.
.addfolder-input {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin-bottom: 20px;
width: 85%;
padding: 0 10px;
border: none;
outline: none;
position: relative;
left: 6px;
}
.container {
position: relative;
width: 120px;
}
.container:after {
position: absolute;
content: '';
bottom: 48%;
left: 6px;
width: 100%;
height: 6px;
background: -webkit-linear-gradient(45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), -webkit-linear-gradient(-45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), -webkit-linear-gradient(0deg, transparent 9%, #3c5a9a 9%, #3c5a9a 95%, transparent 11%) no-repeat;
background: -moz-linear-gradient(45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), -moz-linear-gradient(-45deg, transparent 3%, #3c5a9a 3%, #3c5a9a 6%, transparent 6%), -moz-linear-gradient(90deg, transparent 9%, #3c5a9a 9%, #3c5a9a 86%, transparent 86%) no-repeat;
background: linear-gradient(45deg, transparent 9%, #3c5a9a 9%, #3c5a9a 12%, transparent 12%), linear-gradient(-45deg, transparent 3%, #3c5a9a 3%, #3c5a9a 6%, transparent 6%), linear-gradient(90deg, transparent 9%, #3c5a9a 9%, #3c5a9a 86%, transparent 86%) no-repeat;
background-position: 0px 6px, 107px 6px, 0px 4px;
}
<div class="container">
<input type="text" class="addfolder-input" value="Type Something..." />
</div>
I'm currently designing a website, and for the footer I've created a "zigzag" border on top.
To create some depth in the website, I wanted to add a drop shadow on the triangles in the "zigzag", and this is where I'm currently stuck.
Here is an example of the footer as I have it right now: http://jsfiddle.net/CwXp4/
body {
background: url(http://i.imgur.com/R1yaNOy.png);
}
#footer {
position: absolute;
width: 100%;
height: 200px;
bottom: 0;
background-color: #333;
}
#footer:before {
content: "";
display: block;
position: relative;
top: -21px;
height: 21px;
background: linear-gradient( 45deg, #333 50%, transparent 50%) 0 0, linear-gradient(-45deg, #333 50%, transparent 50%) 0 0;
background-repeat: repeat-x;
background-size: 40px 40px, 40px 40px;
}
<div id="footer"></div>
Is there someone out there with some tips for me on how to add a drop shadow?
You can somehow make the shadow with the same gradients that you are using to make the zigzag.
CSS
#footer:before {
content: "";
display: block;
position: relative;
top: -21px;
height: 22px;
background: linear-gradient( 45deg, #333 50%, blue 50%, transparent 55%) 0 0,
linear-gradient(-45deg, #333 50%, blue 50%, transparent 55%) 0 0;
background-repeat: repeat-x;
background-size: 40px 47px, 40px 47px;
}
body {
background: url(http://i.imgur.com/R1yaNOy.png);
}
#footer {
position: absolute;
width: 100%;
height: 200px;
bottom: 0;
background-color: #333;
}
#footer:before {
content: "";
display: block;
position: relative;
top: -21px;
height: 22px;
background: linear-gradient( 45deg, #333 50%, blue 50%, transparent 55%) 0 0, linear-gradient(-45deg, #333 50%, blue 50%, transparent 55%) 0 0;
background-repeat: repeat-x;
background-size: 40px 47px, 40px 47px;
}
<div id="footer"></div>
fiddle
You could also get the shadow with a webkit-filter shadow, but this has limited support
CSS
#footer:before {
content: "";
display: block;
position: relative;
top: -21px;
height: 22px;
background: linear-gradient( 45deg, #333 50%, transparent 50%) 0 0,
linear-gradient(-45deg, #333 50%, transparent 50%) 0 0;
background-repeat: repeat-x;
background-size: 40px 47px, 40px 47px;
-webkit-filter: drop-shadow(red 0px -5px 5px);
}
body {
background: url(http://i.imgur.com/R1yaNOy.png);
}
#footer {
position: absolute;
width: 100%;
height: 200px;
bottom: 0;
background-color: #333;
}
#footer:before {
content: "";
display: block;
position: relative;
top: -21px;
height: 22px;
background: linear-gradient( 45deg, #333 50%, transparent 50%) 0 0, linear-gradient(-45deg, #333 50%, transparent 50%) 0 0;
background-repeat: repeat-x;
background-size: 40px 47px, 40px 47px;
-webkit-filter: drop-shadow(red 0px -5px 5px);
}
<div id="footer"></div>
fiddle with filter