Hello i want to have this kind of effect with an image (which is not a background image) :
Do u have any idea how i can create this effect with css ?
Look at this:
img {
width: 400px;
}
.content {
background: rgba(255, 255, 255, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(255, 255, 255, .1) 40%, rgba(255, 255, 255, .5) 75%, rgba(255, 255, 255, 1) 100%) repeat scroll 0 0;
position: relative;
margin-top: -200px;
height: 200px;
}
<img src="http://www.dl.21tech.ir/img-upload/2016/12/95092801.jpg" />
<div class="content"></div>
You can use a container with gradient, outside the img and set negative z-index of image to push it behind container.
<div class="gradient-bg">
<img src="http://img.phombo.com/img1/photocombo/1634288/hd-wallpapers-scenic-desktop-wallpaper-beautiful-fresh-nature-scenery-sunrise-1920x1080-wallpaper.jpg">
<span>Hello There</span>
</div>
.gradient-bg{
display: inline-block;
background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(249, 249, 249, 0.89) 100%);
background: -webkit-gradient(linear, left bottom, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
background: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
}
span{
position: absolute;
top: 183px;
}
img{
position:relative;
z-index:-1;
display:block;
height:200px; width:auto;
}
Use image height width and gradient accordingly.
This is sample code for the solution
Related
I am trying to give gradient effect to a div at the border level with two colors inset using css. But i am unable to get the same as shown in example.The gradient effect should be from top to middle of sqaure area.
I do have marked the area of gradient effect in image.
Please check this code
.box {
margin: 50px auto;
width: 250px;
height: 250px;
padding: 20px;
border-top: 10px solid #3e3ad5;
border-bottom: 10px solid #d53a3a;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
-webkit-background-size: 10px 100%;
-moz-background-size: 10px 100%;
background-size: 10px 100%;
background-image: -webkit-linear-gradient(top, #3e3ad5 0%, #d53a3a 100%), -webkit-linear-gradient(top, #3e3ad5 0%, #d53a3a 100%);
background-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
background-image: -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
background-image: linear-gradient(to bottom, #3e3ad5 0%, #d53a3a 100%), linear-gradient(to bottom, #3e3ad5 0%, #d53a3a 100%);
}
<div class="box"><span>Border Gradient</span></div>
I Want to color a button just like this. Is there any way i can do this by using css?
Button should look like this
You can use a linear gradient.
JSFiddle
button {
height: 50px;
width: 100px;
background: linear-gradient(-60deg, red 50%, yellow 50%);
}
<button></button>
Using something like this
.x{
height: 50px;
background: #ff3232;
background: -moz-linear-gradient(-45deg, #ff3232 0%, #ff3030 50%, #282fff 51%, #005dff 100%);
background: -webkit-linear-gradient(-45deg, #ff3232 0%,#ff3030 50%,#282fff 51%,#005dff 100%);
background: linear-gradient(135deg, #ff3232 0%,#ff3030 50%,#282fff 51%,#005dff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#005dff',GradientType=1 );
}
<div class="x">
</div>
HTML:
<button id="main"></button>
CSS:
#main {
width: 200px;
height: 50px;
border: none;
background: linear-gradient(120deg, rgb(255, 0, 144), rgb(255, 0, 144) 55%, rgb(0, 222, 255), rgb(0, 222, 255) 45%);
}
Codepen
I know i can overlay a transparent image on a div to achieve this, but the question is, is this possible only using css3?
It is actually a progress bar with yellow color has a slight light shade or gradient on it.
You can create progress bar like that with bootstrap
DEMO: https://jsfiddle.net/2Lzo9vfc/190/
HTML
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
CSS
.progress-bar {
background: rgba(237,220,109,1);
background: -moz-linear-gradient(left, rgba(237,220,109,1) 0%, rgba(237,220,109,1) 31%, rgba(255,245,180,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(237,220,109,1)), color-stop(31%, rgba(237,220,109,1)), color-stop(100%, rgba(255,245,180,1)));
background: -webkit-linear-gradient(left, rgba(237,220,109,1) 0%, rgba(237,220,109,1) 31%, rgba(255,245,180,1) 100%);
background: -o-linear-gradient(left, rgba(237,220,109,1) 0%, rgba(237,220,109,1) 31%, rgba(255,245,180,1) 100%);
background: -ms-linear-gradient(left, rgba(237,220,109,1) 0%, rgba(237,220,109,1) 31%, rgba(255,245,180,1) 100%);
background: linear-gradient(to right, rgba(237,220,109,1) 0%, rgba(237,220,109,1) 31%, rgba(255,245,180,1) 100%);
}
.progress {
background: #808080;
}
Oh got it, i used following code.
.bar :after {
content: " ";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
z-index: 1;
background-size: 220% 102px;
animation: move 2s linear infinite;
overflow: hidden;
}
I'm not sure which part to change on this radio button to make it smaller and keep the text in line with the inner button. The changes I made puts the text to the top of the radio button. Could you advise which bits are necessary to change to keep everything in line.
This is a big radio button
.button {
background: #cfe7fa;
background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cfe7fa), color-stop(100%, #6393c1));
background: -webkit-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -o-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -ms-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
border: 1px solid #6393c1;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
cursor: pointer;
display: inline-block;
font: 15px Arial, Verdana, Geneva, sans-serif;
line-height: 41px;
padding-right: 20px;
}
.button:hover .inner {
opacity: .5;
}
.button input {
display: none;
}
.button input:checked + .outer .inner {
opacity: 1;
}
.button .outer {
background: #2989d8;
background: -moz-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2989d8), color-stop(99%, #101354));
background: -webkit-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: -o-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: -ms-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
border: 1px solid black;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
display: block;
float: left;
height: 20px;
margin: 10px;
width: 20px;
}
.button .inner {
background: #e4f5fc;
background: -moz-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #e4f5fc), color-stop(50%, #bfe8f9), color-stop(51%, #9fd8ef), color-stop(100%, #2ab0ed));
background: -webkit-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: -o-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: -ms-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
display: block;
height: 14px;
margin: 3px;
opacity: 0;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
width: 14px;
}
<div style="text-align: center;">
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span>
Add Details
</label>
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span>
Choice 2
</label>
</div>
I've attempted to change what I thought but the writing is now at the top of the button and I'd like it in the centre, so I must be changing the wrong parts
HTML after changes
.button {
background: #cfe7fa;
background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cfe7fa), color-stop(100%, #6393c1));
background: -webkit-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -o-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -ms-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
border: 1px solid #6393c1;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
cursor: pointer;
display: inline-block;
font: 10px Arial, Verdana, Geneva, sans-serif;
line-height: 3px;
padding-right: 5px;
}
.button:hover .inner {
opacity: .5;
}
.button input {
display: none;
}
.button input:checked + .outer .inner {
opacity: 1;
}
.button .outer {
background: #2989d8;
background: -moz-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2989d8), color-stop(99%, #101354));
background: -webkit-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: -o-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: -ms-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
border: 1px solid black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
display: block;
float: left;
height: 10px;
margin: 5px;
width: 10px;
}
.button .inner {
background: #e4f5fc;
background: -moz-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #e4f5fc), color-stop(50%, #bfe8f9), color-stop(51%, #9fd8ef), color-stop(100%, #2ab0ed));
background: -webkit-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: -o-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: -ms-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
display: block;
height: 10px;
margin: .5px;
opacity: 0;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
width: 10px;
}
<form id="form1" runat="server">
<div>
<br />
<br />
<div style="text-align: center;">
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span>
Add Details
</label>
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span>
Choice 2
</label>
<br />
<br />
<br />
<br />
</div>
<br />
</div>
</form>
Just change the line-height: 3px; to line-height:22.5px;
See also the jsfiddle example.
I have multiple elements, their background colors are different from each other. like:
<div class="element"> Content of the DIV</div>
<div class="element2"> Content of the DIV</div>
.element{
width:100px;
height:50px;
background-color:#888888;
}
.element2{
width:100px;
height:50px;
background-color:#222222;
}
I want to make hover like:
.element:hover, .element2:hover{}
When I bring mouse over the element, only background should be little bit lighter. I don't want to use opacity: 0.4 (lightens whole div) or background-color:rgba(50,50,50,0.5); (only for one color)
JSFIDDLE
The easiest way to achieve this is to simply apply a background-image to your elements on :hover. Either using a CSS gradient (which I generated using ColorZilla's "Ultimate CSS Gradient Generator"):
.element:hover,
.element2:hover,
.element3:hover {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.5+0,0.5+100 */
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0.5)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#80ffffff', GradientType=0);
}
.element {
width: 100px;
height: 50px;
background-color: #888888;
}
.element2 {
width: 100px;
height: 50px;
background-color: #222222;
}
.element3 {
width: 100px;
height: 50px;
background-color: #ff9900;
}
.element:hover,
.element2:hover,
.element3:hover {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.5+0,0.5+100 */
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0.5)));
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#80ffffff', GradientType=0);
}
<div class="element">Content of the DIV</div>
<div class="element2">Content of the DIV</div>
<div class="element3">Content of the DIV</div>
Or using a partially-transparent image:
.element:hover,
.element2:hover,
.element3:hover {
background-image: url(http://i.stack.imgur.com/5udh0.png);
}
.element {
width: 100px;
height: 50px;
background-color: #888888;
}
.element2 {
width: 100px;
height: 50px;
background-color: #222222;
}
.element3 {
width: 100px;
height: 50px;
background-color: #ff9900;
}
.element:hover,
.element2:hover,
.element3:hover {
background-image: url(http://i.stack.imgur.com/5udh0.png);
}
<div class="element">Content of the DIV</div>
<div class="element2">Content of the DIV</div>
<div class="element3">Content of the DIV</div>
This works because of the 'stacking' order of the background properties; the background-color sits at the back and the background-image sits 'above' that layer.
References:
"Using CSS Gradients," at MDN.
Here is a Fiddle and you should wrap your content into divs so you can apply rgba(255,255,255,0.5) to them:
.element{
width:100px;
height:50px;
background-color:#888888;
position:relative;
}
.element2{
width:100px;
height:50px;
background-color:#222222;
position:relative;
}
.element:hover > div, .element2:hover > div{
/* what can we put here? */
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:rgba(255,255,255,0.5);
}
<div class="element"><div>Content of the DIV</div></div>
<div class="element2"><div>Content of the DIV</div></div>
this is a trick that uses the way stacking contents are rendered, backgrounds always below contents (even if it belongs to a higher stack):
fiddle
div {
width:100px;
height:50px;
z-index:2;
position:relative;
}
.element {
background-color:#888888;
}
.element2 {
background-color:red;
}
.element3 {
background-color:cyan;
}
div:hover:after {
content:'';
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:white;
opacity:0.5;
z-index:-2;
}
<div class="element">test</div>
<div class="element2">test</div>
<div class="element3">test</div>
if you're interested in the explanation check this answer
OR YOU CAN TRY THIS CODE ALSO
OR YOU CAN TRY THIS ONE ALSO::
<!DOCTYPE html>
<html>
<head>
<style>
.element{
width:100px;
height:50px;
background-color:#888888;
}
.element:hover {
background-color: yellow;
}
.element2{
width:100px;
height:50px;
background-color:#222222;
}
.element2:hover {
background-color: red;
}
</style>
</head>
<body>
<div class="element">
Content of the DIV
</div>
<div class="element2">
Content of the Div2
</div>
</body>
</html>