Related
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 need to create a dashed line with a linear gradient.
I managed to create a dashed line using <hr /> and the following styling:
line {
border: 0px;
border-bottom: 2px dashed;
}
And I also know that to achieve a gradient I need to do:
background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(black));
Based on the code in your own answer, it looks like you need a line which is a gradient in itself (from blue to green) and also have dashed pattern. This is not possible to achieve with one gradient image because spaces cannot be introduced in the middle of a gradient.
However, you can achieve the same effect without using any extra elements (real/pseudo) by using background-image stacking like in the below snippet:
.line {
margin-top: 50px;
height: 2px;
background: linear-gradient(to right, transparent 50%, #223049 50%), linear-gradient(to right, #00b9ff, #59d941);
background-size: 16px 2px, 100% 2px;
}
body{
background-color: #223049;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="line"></div>
The second gradient in the above snippet is the same as the one in your answer (except the usage of the latest standard cross-browser syntax). The first gradient is the replacement for your hr and it is nothing but a repeating gradient which is transparent for 50% of image's width and the color you need for the other 50%. The background-size of the first gradient image is set as 16px 2px where 16px is the width and 2px is the height. The width of the image determines the width of the dashes. The height (2px) determines the thickness of the line.
Thanks for help I finally got it working myself but embedding a dashed line into a div. The <hr/> has the colour of the element I want the line in, giving the effect of "hiding" part of the line. Here is the code, however if someone has a nice answer I'm curious.
.line {
height: 2px;
background: -webkit-gradient(linear, 0 0, 100% 0, from(#00b9ff), to(#59d941));
}
.dashed {
border: 0px;
border-bottom: 2px dashed;
border-color: #223049;
}
<div class="line">
<hr class="dashed"/>
</div>
jsFiddle
Using pseudo-elements you can achieve dashed-border and can customize it also, in any direction(have described for one side in my JSFiddle).
Here's my JSFiddle
HTML
<div class="dashed-border"></div>
CSS
.dashed-border {
position: relative;
border-bottom: 3px dashed #fff;
}
.dashed-border::before {
content:"";
border-top:3px dashed #FFF;
position: absolute;
top:0;
left:6px;
right:0;
width: 100%;
height: 3px;
z-index: 2;
}
.dashed-border:after {
content:"";
position: absolute;
bottom: -3px;
left: -3px;
}
.dashed-border::after {
right: -3px;
height: 3px;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, #1e5799), color-stop(50%, #2989d8), color-stop(51%, #207cca), color-stop(100%, #7db9e8));
background-image: -webkit-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -o-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
background-image: -ms-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* IE10+ */
background-image: linear-gradient(to right, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* W3C */
}
Hope it will work for you.
What i am trying to achieve is simple. A client wants this button:
http://i59.tinypic.com/207b56p.png
provided in the design PSDs replicated in html. I have been playing around with different gradients and such and have only been able to achieve this:
background-image: -webkit-gradient(linear, left top, left bottom, from(#FEC1F4), to(#FF2DFF));
background-image: -webkit-linear-gradient(top, #FEC1F4, #FF2DFF);
background-image: -moz-linear-gradient(top, #FEC1F4, #FF2DFF);
background-image: -ms-linear-gradient(top, #FEC1F4, #FF2DFF);
background-image: -o-linear-gradient(top, #FEC1F4, #FF2DFF);
background-image: linear-gradient(to bottom, #FEC1F4, #FF2DFF);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FEC1F4, endColorstr=#FF2DFF);
which is by far not even close.
Is there a way to make this button with gradients in CSS or not?
If theres not what is the proper way to use images as button backgrounds in HTML? Because not all buttons are the same size and an image background might be distorted in places. (Any best practices?)
You could do it like this:
DEMO
body {
margin: 50px;
}
div {
overflow: hidden;
position: relative;
width: 400px;
height: 50px;
background: -webkit-linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
background: -moz-linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
background: -ms-linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
background: -o-linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
background: linear-gradient(to bottom, #FF5EFF 0%, #FF5EFF 50%, #FF2DFF 51%, #FF2DFF 100%);
}
div:before, div:after {
content:'';
position: absolute;
bottom: 0;
height: 36px;
width: 36px;
margin-left: -36px;
transform-origin: 100% 100%;
transform: rotate(45deg);
background: #FEC1F4;
}
div:before {
left: 0;
}
div:after {
right: 0;
}
<div></div>
*Side note: You may need to change the colors.
Solution without using CSS 3:
Use background-image in order to recreate the 3D effect inside the button.
Use box-shadow in order to create the shadow effect around the button.
Just a quick example how your code would be:
.btn{
width:100px;
height: 50px;
background-image: url('image.png');
background-color: #cccccc;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
If you need to reuse your button with on different size inside your website, you can slice your PSD button in three parts (look image attached), HTML would be something like this.
<div class="btn">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
You can set the widht of .center as percentage and .left and .right with fixed sizes and background images.
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 );