Related
Every browser is working fine for the CSS3 linear-gradient, but safari does not.
https://codepen.io/tom93ovsss/pen/rNLrgBm
Can anybody help?
Try adding -webkit-linear-gradient as below
.container {
width: 100%;
padding-top: 50px;
text-align: center;
}
.outer {
margin-top: 10px; margin-bottom: 10px;
background: linear-gradient(to top, rgba(0,0,0,.2), rgba(0,0,0,.05) 1px,
transparent);
background: -webkit-linear-gradient(to top, rgba(0,0,0,.2), rgba(0,0,0,.05)
1px, transparent);
height: 25px;
}
.inner {
height: 25px;
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(9,9,121,0)
15%, rgba(156,156,201,0) 80%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(to top, rgba(0,0,0,.2), rgba(0,0,0,.05)
1px, transparent);
}
I'm trying to create a light effect with CSS and HTML only. Just like this image
I don't know if it's possible. or how to do it.
Any help will be appreciated.
.circle {
border: 10px solid;
border-radius: 50%;
width: 200px;
height: 200px;
background-color: green;
}
<div class="circle"></div>
Here is my example
*,
*:before,
*:after {
box-sizing: border-box;
}
div {
width: 120px;
height: 120px;
border-radius: 60px;
background: linear-gradient(to bottom, #393939 0%, #151515 100%);
position: relative;
}
div:before {
content: '';
width: 106px;
height: 106px;
border-radius: 53px;
background: #19f000;
border: 1px solid black;
position: absolute;
left: 7px;
top: 7px;
}
div:after {
content: '';
width: 80px;
height: 60px;
border-radius: 50%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
position: absolute;
transform: rotate(-18deg);
left: 13px;
top: 9px;
}
<div></div>
JSfiddle Demo
You can use a second div for the highlight to try and provide a stronger 3D effect, freeing up the box-shadow to be used for the darker contouring on the edges.
.circle {
width: 164px;
height: 164px;
background-color: #19f000;
border-radius: 100%;
position: relative;
border: 10px solid #444444;
box-shadow: 0 0 15px 0 rgba(0,0,0,.8) inset;
transform: rotate(-20deg);
}
.highlight {
position: absolute;
top: 2px;
right: 0;
left: 0;
margin: auto;
width: 80%;
height: 64%;
opacity: .92;
border-radius: 100%;
/* gratuitous gradient compatibility - activate! */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
<div class="circle">
<div class="highlight"></div>
</div>
You can do with the combination of radial gradient and a pseudo element for glossy effect.
The transition from white to green can be produced through radial-gradient. The #fff color stops at 5%.
The glossy effect finish is given using the opacity on the pseudo element and has a similar shape of the parent with white background and reduced width.
JSfiddle Demo
.circle::after {
background: white none repeat scroll 0 0;
border-radius: 50%;
content: " ";
display: block;
height: 100px;
opacity: 0.15;
position: absolute;
width: 150px;
left: 20px;
}
.circle {
background-image: radial-gradient(ellipse at 50px 10px , #ffffff 0%, #fff 5%, #00ff00 100%);
border: 10px solid;
border-radius: 50%;
height: 200px;
position: relative;
width: 200px;
}
<div class="circle">
</div>
You can do it using a single element also by layering one radial-gradient image of the required size on top of an angled linear-gradient image and then positioning it appropriately. Multiple background images and layering has very good browser support (IE9+) but gradients are supported only in IE10+.
.circle {
border: 10px solid;
border-radius: 50%;
width: 200px;
height: 200px;
background: radial-gradient(ellipse at 90px 45px, rgba(255, 255, 255, 0.75) 10%, rgba(255,255,255,0.5) 30%, rgba(255,255,255,0) 32%, rgba(25,240,0,1) 45%), linear-gradient(160deg, transparent 12%, rgb(25, 240, 0) 30%);
background-size: 125% 80%, 100% 100%;
background-repeat: no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="circle"></div>
Browser Compatibility Charts:
Multiple background images and layering
Gradients
<!doctype html>
<html>
<head>
<style>
.circle {
border:10px solid;
border-radius: 50%;
width: 200px;
height: 200px;
background: rgb(25,240,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(25,240,0,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(25,240,0,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to top, rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19f000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
</style>
<head>
<body>
<div class="circle">
</div>
</body>
</html>
Please use background gradient color as mentioned above. i hope this woould helpful to you
here is the working demo.Demo
Try box shadow like this: Updated Demo
Adjust the shadow values and background gradient colors according to your need.
.circle {
border:10px solid;
border-radius: 50%;
width: 200px;
height: 200px;
background: #f8ffe8;
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4ZmZlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iIzU2YmM2YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxOTliMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f8ffe8), color-stop(17%, #56bc6c), color-stop(100%, #199b00));
background: -webkit-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
background: -o-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
background: -ms-linear-gradient(top, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
background: linear-gradient(to bottom, #f8ffe8 0%, #56bc6c 17%, #199b00 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8ffe8', endColorstr='#199b00', GradientType=0);
-webkit-box-shadow: inset -1px 60px 68px -28px rgba(255, 255, 255, 1);
-moz-box-shadow: inset -1px 60px 68px -28px rgba(255, 255, 255, 1);
box-shadow: inset -1px 60px 68px -28px rgba(255, 255, 255, 1);
}
I needed to print a textearea content (user input) and I just used css gradient to produce lines below the text. The following css did the trick for me.
.linedText {
color: #000000;
line-height: 24px;
background-color: #ffffff;
background: -webkit-gradient(linear, 2% 2%, 2% 100%, from(#000000), color-stop(1%, #ffffff)) 0 -2px;
background: -webkit-linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
background: -moz-linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
background: -ms-linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
background: -o-linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
background: linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
-webkit-background-size: 100% 24px;
-moz-background-size: 100% 24px;
-ms-background-size: 100% 24px;
-o-background-size: 100% 24px;
background-size: 100% 24px;
}
<p class="linedText">fdfdfdfdfdfdf<br>dfdfd<br>fdf<br>df</p>
And it generates like following:
Now I need to change the style to dotted. Can anyone do it for me please? I tried it for sometimes, but no luck, so thought of SO for a quick response.
Thanks.
This is an example of how you can achieve what you're trying.
It's just a matter of using two linear gradients with rgba colors = transparency and make them overlap to create a pattern to be repeated.
It's not cross browser (webkit only). Just a snippet to get you started.
background-image:
-webkit-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%),
-webkit-linear-gradient(bottom, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);
background-size: 12px 24px;
I am trying to create a div in css with an inward oval shape to it like this.
At the moment, I have a shape that is outward instead of inward (JS Fiddle Link).
.shape {
float: left;
width: 100px;
height: 50px;
border: none;
background: #CC0000;
border-radius: 0 90px 0 0;
-moz-border-radius: 0 90px 0 0;
-webkit-border-radius: 0 90px 0 0;
background-image: -webkit-gradient( linear, left top, right bottom, color-stop(0, #520C0C), color-stop(1, #CC0000) );
background-image: -o-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -moz-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -webkit-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -ms-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
}
Any ideas on how to go about this?
Have a look at my example fiddle.
I used a pseudo-element and some elliptical border-radius coupled with an inset box-shadow.
div {
position:relative;
width: 200px;height: 100px;
background: #CC0000;
background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
}
div:after {
position:absolute;content:"";
width: 100%;height: 95%;
background: #222;
box-shadow:inset 10px -10px 5px -10px #000;
border-radius: 0 0 0 200px / 100px;
}
With a little more effort, one could probably get closer to your result, but this might be a good starting point.
I have created this fiddle for you. Here is the code:
HTML
<div class="container">
<div class="shape"></div>
</div>
CSS
.container {
float: left;
width: 100px;
height: 50px;
border: none;
background: #CC0000;
background-image: -webkit-gradient( linear, left top, right bottom, color-stop(0, #520C0C), color-stop(1, #CC0000) );
background-image: -o-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -moz-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -webkit-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -ms-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
}
.shape {
width: 100px;
height: 50px;
border: none;
background: #000000;
border-radius: 0 0 0 90px;
-moz-border-radius: 0 0 0 90px;
-webkit-border-radius: 0 0 0 90px;
}
If the part of the graphic that "isn't there" doesn't have to be actually transparent, then you can just make a regular rectangle, and build a curved shape that will sit on top of the rectangle and has the same color as the background.
http://jsfiddle.net/ub8fM/1/
.shape {
float: left;
width: 100px;
height: 50px;
border: none;
background: #CC0000;
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #520C0C), color-stop(1, #CC0000));
background-image: -o-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -moz-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -webkit-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -ms-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
position:relative;
}
.shape:before {
border-radius: 0 90px 0 0;
-moz-border-radius: 0 90px 0 0;
-webkit-border-radius: 0 90px 0 0;
content:'';
position:absolute;
top:0;
left:0;
background:white;
width:100%;
height:100%;
}
Having the shadow would a bit harder and I have no solution for that yet.
Also jsfiddle has a tidy up button that's super useful.
I've asked the question before one day. And someone give me a link too. But, I can't write the proper code. I need a CSS for this background image:
In this online generator, I've tried, but I can't generate the almost left pure/solid portion of white background color:
Can you please, help me for it.
HTML Codes:
<div id="banner" class="outer">
<div class="inner"></div>
</div>
CSS code:
.outer {
width: 100%;
float: left;
}
.inner {
width: 978px;
margin: 0 auto;
text-align: left;
position: relative;
}
#banner {
display: block;
float: left;
margin: 2px 0 0 0;
padding: 12px 0 0 0;
height: 290px;
background: rgb(208,208,208); /* Old browsers */
background: -moz-linear-gradient(left, rgba(208,208,208,1) 0%, rgba(202,202,202,1) 1%, rgba(202,202,202,1) 2%, rgba(223,223,223,1) 9%, rgba(225,225,225,1) 12%, rgba(228,228,228,1) 13%, rgba(228,228,228,1) 53%, rgba(207,207,207,1) 65%, rgba(207,207,207,1) 68%, rgba(198,198,198,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(208,208,208,1)), color-stop(1%,rgba(202,202,202,1)), color-stop(2%,rgba(202,202,202,1)), color-stop(9%,rgba(223,223,223,1)), color-stop(12%,rgba(225,225,225,1)), color-stop(13%,rgba(228,228,228,1)), color-stop(53%,rgba(228,228,228,1)), color-stop(65%,rgba(207,207,207,1)), color-stop(68%,rgba(207,207,207,1)), color-stop(100%,rgba(198,198,198,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d0d0', endColorstr='#c6c6c6',GradientType=1 ); /* IE6-9 */
}
That generator isn't working because that's not a single gradient; it's two. There's a horizontal gradient on the bottom and a vertical gradient atop that. You can use multiple backgrounds for that. This is what I came up with:
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent 20%, transparent 97%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #e2e2e2, #fff 40%, #cbcbcb);
As you can see, there's a comma between the linear gradients, which means to composite the first one atop the second one. You can also see I'm using rgba and transparent on the top one so parts show through to the bottom gradient.
Take a look.
This is pretty close to your image. It uses a radial gradient and an inset shadow.
http://jsfiddle.net/daCrosby/eZN6Y/
/* Inner Shadow */
-webkit-box-shadow: inset 0px 5px 20px 5px rgba(0, 0, 0, .1);
box-shadow: inset 0px 5px 20px 5px rgba(0, 0, 0, .1);
/* Gradient */
background: #ffffff;
background: -moz-radial-gradient(40% 20%, ellipse cover, #ffffff 25%, #cccccc 60%);
background: -webkit-gradient(radial, 40% 20%, 0px, 40% 20%, 100%, color-stop(25%,#ffffff), color-stop(600%,#cccccc));
background: -webkit-radial-gradient(40% 20%, ellipse cover, #ffffff 25%,#cccccc 60%);
background: -o-radial-gradient(40% 20%, ellipse cover, #ffffff 25%,#cccccc 60%);
background: -ms-radial-gradient(40% 20%, ellipse cover, #ffffff 25%,#cccccc 60%);
background: radial-gradient(ellipse at 40% 20%, #ffffff 25%,#cccccc 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=1 );