I'm triying to create a shadow for a DIV, but it is no ordinary box shadow, is a shadow that looks like a Radial Shadow or someting.
I've tried with box-shadow but it doesn't work. What can i use?
Try this:
<div class="box">
<div class="shadow">Heading</div>
</div>
.shadow { background:#fff;padding:10px; border:solid 1px #ccc }
.box { position:relative; width:100%; margin-top:30px; z-index:0}
.box .shadow:after{
bottom: -5px;
content: " ";
height: 8px;
display:block;
text-indent: -9999px;
width: 100%;
left:0;
position:absolute;
z-index:-1;
background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNhYWFhYWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);0eT0iMSIvPgogIDwvcmFkaWFsR3JhZGllbnQ+CiAgPHJlY3QgeD0iLTUwIiB5PSItNTAiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTAxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background-image: -ms-radial-gradient(center top, ellipse farthest-side, #aaaaaa 0%, #FFFFFF 100%);
background-image: -moz-radial-gradient(center top, ellipse farthest-side, #aaaaaa 0%, #FFFFFF 100%);
background-image: -o-radial-gradient(center top, ellipse farthest-side, #aaaaaa 0%, #FFFFFF 100%);
background-image: -webkit-gradient(radial, center top, 0, center top, 490, color-stop(0, #aaaaaa), color-stop(1, #FFFFFF));
background-image: -webkit-radial-gradient(center top, ellipse farthest-side, #aaaaaa 0%, #FFFFFF 100%);
background-image: radial-gradient(center top, ellipse farthest-side, #aaaaaa 0%, #FFFFFF 100%);
}
Taken from: http://der-auftritt.de/testcase/gradientshadow.html
p.s. if you want the shadow at the top as well, use the :before selector with the same code
p.p.s. for some really cool gradients use this tool: Gradient Editor
Related
I am working on a rectangular background which is divided into 2 triangles by a line from top left to bottom right, as shown in the pic.
What I want to achieve is color transition in each triangle:
In triangle ABD: pink becomes darker from left to right
In triangle ACD: blue becomes darker from left to right
Note: The width and height are not fixed to 600 and 250. I just use them for demo purpose.
HTML code:
<div class="background-wrapper">
<p class="float-left">A</p>
<p class="float-right">B</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p class="float-left">C</p>
<p class="float-right">D</p>
</div>
CSS code:
.background-wrapper {
position: relative;
width: 600px;
height: 250px;
color: #FFFFFF;
padding: 20px 50px 80px 50px;
background: linear-gradient(to left bottom, pink 50%, blue 50%);
}
.float-left {
float: left;
}
.float-right {
float: right;
}
Demo jsfiddle here
One posibility, that is cross-browser but that gives washed colors, is to overlay the triangles with a semitransparent gradient that is white on one side and black in the other.
This effect gets much better using blend modes, but the support is lower.
.test {
width: 400px;
height: 300px;
background-image: linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,0) 40%,
rgba(255,255,255,0) 60%, rgba(255,255,255,.5)),
linear-gradient(to top right, blue 50%, fuchsia 50%);
}
<div class="test"></div>
I modified your code quite a bit from the original. I added two new elements to act as the background. May not be the solution you're looking for but off the top of my head this is what works.
Fiddle
.background-wrapper {
position: relative;
width: 600px;
height: 250px;
color: #FFFFFF;
padding: 20px 50px 80px 50px;
overflow: hidden;
}
.triangle {
position: absolute;
top: -65%;
right: -30%;
width: 125%;
height: 125%;
transform: rotate(26.5deg);
background: linear-gradient(to right, pink, #f44274);
}
.triangle.bottom {
top: initial;
right: initial;
left: -30%;
bottom: -64.8%;
background: linear-gradient(to right, blue, navy);
}
<div class="background-wrapper">
<div class="triangle top"></div>
<div class="triangle bottom"></div>
</div>
You can use more colors after you define the linear-gradient position, so you can do stuff like:
background: linear-gradient(to left bottom, deeppink 0%, pink 50%, blue 50%,midnightblue 100%);
Check your updated fiddle
.background-wrapper {
position: relative;
width: 800px;
height: 450px;
background: #ffffff;
/* Old Browsers */background: -moz-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
/* FF3.6+ */background: -webkit-gradient(left bottom, right top, color-stop(0%, #ffffff), color-stop(49%, #6176ff), color-stop(50%, #ff80d9), color-stop(100%, #ffffff));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
/* IE 10+ */background: linear-gradient(45deg, #ffffff 0%, #6176ff 49%, #ff80d9 50%, #ffffff 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
.float-left {
float: left;
}
.float-right {
float: right;
}
you can specify the angle in the gradient. Try the above code. it works with width and height.
I use a <div class="menu"></div> and I set a background color with a gradient.
It floats from red in the top to white in the Bottom. Here is my .css code:
.menu {
background-color: #FFF;
background-image: -webkit-gradient(linear, left top, left bottom, from(#791014), to(#FFF));
background-image: -webkit-linear-gradient(top, #791014, #FFF);
background-image: -moz-linear-gradient(top, #791014, #FFF);
background-image: -ms-linear-gradient(top, #791014, #FFF);
background-image: -o-linear-gradient(top, #791014, #FFF);
background-image: linear-gradient(top, #791014, #FFF);
clear: both;
}
I like the starting and end color. My question is, if there is a way that I can change how it flows from red (top) to white (bottom)
For example that it switches very much earlier to white, so that I have the dark red at the beginning of the top but in the middle it is already much more white.
In other words, I want to change how fast it transitions from red to white.
If you want the transition between the colors to happen quicker than normal , just change the point by where the transition should be fully completed. When just two colors are given without any color-stop percentage then the first color starts at 0% and the in between colors are calculated such that second color is reached at 100% mark (100% = container's height by default or background-size in Y-axis if specified). Instead of that give a lower value for the white color. In the below snippet, I have given it as 60% and so the background reaches white color by the time it reaches 60% of the container's height.
Note:
100% = Container's height (default) or background-size in Y-axis (if it is specified) for a vertical gradient.
100% = Container's width (default) or background-size in X-axis (if it is specified) for horizontal gradient.
div {
float: left;
height: 100px;
width: 200px;
line-height: 100px;
text-align: center;
margin-right: 5px;
}
.menu-60 {
background-color: #FFF;
background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: -moz-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: -ms-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: -o-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: linear-gradient(top, #791014 0%, #FFF 60%);
}
.menu-40 {
background-color: #FFF;
background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: -moz-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: -ms-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: -o-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: linear-gradient(top, #791014 0%, #FFF 40%);
}
.menu-80 {
background-color: #FFF;
background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: -moz-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: -ms-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: -o-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: linear-gradient(top, #791014 0%, #FFF 80%);
}
br {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3>Red to White at 60%</h3>
<div class='menu-60'>Text</div>
<div class='menu-60'>Text</div>
<div class='menu-60'>Text</div>
<br/>
<h3>Red to White at 40%</h3>
<div class='menu-40'>Text</div>
<div class='menu-40'>Text</div>
<div class='menu-40'>Text</div>
<br/>
<h3>Red to White at 80%</h3>
<div class='menu-80'>Text</div>
<div class='menu-80'>Text</div>
<div class='menu-80'>Text</div>
You can use colour stops to achieve this like
background: -moz-linear-gradient(top, #791014 0%, #ffffff 28%);
background: -webkit-linear-gradient(top, #791014 0%,#ffffff 28%);
background: linear-gradient(to bottom, #791014 0%,#ffffff 28%);
You could use a tool like http://www.colorzilla.com/gradient-editor/ to easily tweak this visually and have the code generated for you.
http://colorzilla.com/gradient-editor/#791014+0,ffffff+28
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.
my photoshop design have gradient colors,have 64 opacity and it have pattern i' m have already succeeded in do gradient and low it opacity like my code example in topic but my Question is how i can add to it the pattern
display: block;
position: relative;
width:100%;
height:100%;
background: rgba(137,206,157,1);
background: -moz-linear-gradient(top, rgba(137,206,157,1) 0%, rgba(74,187,154,0.64) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(137,206,157,1)), color-stop(100%, rgba(74,187,154,0.64)));
background: -webkit-linear-gradient(top, rgba(137,206,157,1) 0%, rgba(74,187,154,0.64) 100%);
background: -o-linear-gradient(top, rgba(137,206,157,1) 0%, rgba(74,187,154,0.64) 100%);
background: -ms-linear-gradient(top, rgba(137,206,157,1) 0%, rgba(74,187,154,0.64) 100%);
background: linear-gradient(to bottom, rgba(137,206,157,1) 0%, rgba(74,187,154,0.64) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89ce9d', endColorstr='#4abb9a', GradientType=0 );
1) #your box {
background-image: url('XX.gif');
/* here your code /*
}
2)
<div id="box">
<div id="your_box">
</div>
</div>
#box {
background-image: url('XX.gif'); /* or put here a css3 grandient effect instead
background-color: #XY;
display: block;
position: relative;
width:100%;
height:100%;
overflow:hidden;
}
#box #your_box {
here your code
}
http://jsfiddle.net/ZMfBv/
hr {
border: 0;
border-color:blue;
background-color:blue;
color:blue;
height: 4px;
background:#fff;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,hsla(0,0%,0%,0)), color-stop(50%,hsla(0,0%,0%,.75)), color-stop(100%,hsla(0,0%,0%,0)));
background: -webkit-linear-gradient(left, hsla(0,0%,0%,.75) 10%, hsla(0,0%,0%,0) 100%);
background: -moz-linear-gradient(left, hsla(0,0%,0%,.75) 10%, hsla(0,0%,0%,0) 100%);
background: -ms-linear-gradient(left, hsla(0,0%,0%,.75) 10%, hsla(0,0%,0%,0) 100%);
background: -o-linear-gradient(left, hsla(0,0%,0%,.75) 10%, hsla(0,0%,0%,0) 100%);
background: linear-gradient(left, hsla(0,0%,0%,.75) 10%, hsla(0,0%,0%,0) 100%);
}
I wish to change the hr's color to blue.Clearly, the color, background-color setting is not working, how can I do this?
update: Here is a black background with a white to gray gradient hr
body {background-color: black;}
hr {
height: 4px;
border: 0;
background: -webkit-linear-gradient(left, #f3ffff, #555555);
background: -moz-linear-gradient(left,#f3ffff, #555555);
background: -o-linear-gradient(left, #f3ffff, #555555);
background: linear-gradient(left, #f3ffff, #555555);
}
http://jsfiddle.net/ZMfBv/3
background: linear-gradient(to right, rgba(3,0,221,0.75) 10%, rgba(255,255,255,1) 100%);
Use blue as the color, rather than black. You can use this for creating css gradients.
I guess, you want a solid blue color, right ?
I so then here is the simplest solution.
hr {
border: 0;
border-color:red;
color:red;
height: 4px;
background: blue;
}
http://jsfiddle.net/ZMfBv/13/