Is there a way to create a background without the use of any actual image files that has a gradient that looks like this?
Not the wood panel texture, but how the left and right are darker and then get lighter as they go inwards.
Box Shadows
You can accomplish this with box-shadow or radial-gradient. Let's look at the first option:
.box {
width: 300px; height: 300px;
box-shadow: inset 0 0 5em 1em #000;
background: url("http://lorempixel.com/300/300");
}
This uses an inset shadow which overlays the elements background image. The effect resembles your example photo:
Radial Gradients
You can do this pretty easily using several linear gradients, or a radial gradient:
html {
min-height: 100%;
background:
radial-gradient(transparent, black),
url("http://lorempixel.com/500/500");
background-size: cover;
}
Fiddle: http://jsfiddle.net/jonathansampson/t8N5M/
If your browser supports gradients, cover, and multiple backgrounds, you'll see something like this:
You can use this online editor to generate gradients of different orientation like radial, horizontal etc. you can also control the opacity of your gradient.
here is JSFiddle link http://jsfiddle.net/banded_krait/AZK5d/2/
as a web designer, i love the result of interstellarDust's code.
Reasons:
The stop points of gradients are customizable. so the radial gradients
would give me a nice & round vignette not like the square shape gradient from box shadow inset's effect.
The 0% opacity of center area help my audiences easy to focus at the center of image. (but if you plan to put an overlay bright color text, thicker opacity vignette background will make the text more readable.)
i've messed with gradients stop points and opacity of interstellarDust's code here:
#img_container{
position:relative;
z-index:-1;
width:400px;
height:400px;
}
#img_container img{
position:relative;
height:100%;
width:100%;
z-index:4;
}
.gradient{
position:absolute;
left:0px;
top:0px;
z-index:5;
height:100%;
width:100%;
/* http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+50,0.5+100 */
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vignette with background gradients</title>
</head>
<body>
<p>Original by banded_krait</p>
<div id="img_container">
<img src="http://lorempixel.com/400/400" alt="" />
<div class="gradient"></div>
</div>
</body>
</html>
Related
I am having two colors with me, red and yellow. According to Linear-gradient Format, if we insert red and yellow, automatically smooth transition occurs between them. If i dont want smooth transition, how can we represent them in code? Below code is with smooth transition, but i dont want smooth transition between those two colors. Any Help Please
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
you can
.tg {
height: 75px;
width: 400px;
background-image: linear-gradient(135deg, red 60%, yellow 60.5%);
}
<div class='tg'></div>
demo
Use this:
background: linear-gradient(to bottom, red 0%,red 50%,yellow 51%,yellow 100%);
Demo URL now returns 404
Why dont you just make 2 divs one above the other then?
#grad1 {
height: 100px;
background: red;
}
#grad2 {
height: 100px;
background: yellow;
}
See it working here: https://jsfiddle.net/eosx5cgc/
CSS3 gradient we can simply generate in online tools, like colorzilla
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff0000+0,ff0000+50,ffff00+51,ffff00+100 */
background: rgb(255,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 50%, rgba(255,255,0,1) 51%, rgba(255,255,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 51%,rgba(255,255,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 51%,rgba(255,255,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffff00',GradientType=0 ); /* IE6-9 */
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
I'm trying to make a gradient which would be faded on the left and right, but solid in the middle. Is this possible? I've made my research, but couldn't find any tutorial online.
P.S. This is for Internet Explroer
You question is a little vague but it's just a matter of applying color stops as and when required.
If you apply two color stops at different points but the color is the same at both...you get solid color in the middle.
JSFiddle Demo
CSS (unprefixed)
.box {
width:25%;
height:200px;
border:1px solid lightgrey;
display: inline-block;
}
.one {
background: linear-gradient(to right,
rgba(255,255,255,1) 0%,
rgba(0,0,255,1) 25%, /* intermediate color stop */
rgba(0,0,255,1) 75%, /* second intermediate stop */
rgba(255,255,255,1) 100%)
; /* W3C */
}
Use the Gradient Editor for this
I have this very simply CSS code.
body {
background-color: #08407A;
min-width: 1000px;
height: 500px;
}
This one doesn't work in IE at all. The background is fully colored, but I need only background for 500px. I have tried all that background-cover, behavior. But it didn't work out for me.
You shouldn't be using the body as fixed width container.
Limiting the width of body doesn't make sense, as it represents the entire browser window.
Instead, try using a block element, such as a <div> to achieve your results.
HTML:
<div class="myDiv">
This is my content
</div>
CSS:
.myDiv { background-color:#08407A; min-width:1000px; height:500px; }
Working directly with body isn't good idea. Instead, use an element:
HTML
<body>
<div id="bg"></div>
<div id="wrapper">
HTML DATA
</div>
</body>
CSS
#bg {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 500px;
background-color: #08407A;
}
#wrapper {
position: relative;
}
Check this FIDDLE DEMO.
It will not work like that.
Whatever colour you give for body will be shown across the page. To show color only for 500px you need to add a div with height 500px and give background color to it.
But if you don't want to use a div and you are using a modern browser you can try something like this using background style
http://jsfiddle.net/hZfJJ/1/
body {
background: -moz-linear-gradient(top, rgba(255,61,61,1) 0%, rgba(255,61,61,1) 40%, rgba(255,255,255,1) 40%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,61,61,1)), color-stop(40%,rgba(255,61,61,1)), color-stop(40%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,61,61,1) 0%,rgba(255,61,61,1) 40%,rgba(255,255,255,1) 40%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,61,61,1) 0%,rgba(255,61,61,1) 40%,rgba(255,255,255,1) 40%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,61,61,1) 0%,rgba(255,61,61,1) 40%,rgba(255,255,255,1) 40%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,61,61,1) 0%,rgba(255,61,61,1) 40%,rgba(255,255,255,1) 40%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3d3d', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
background-repeat : no-repeat;
height:100%;
}
html {
height: 100%;
}
Ciao,
I'm working on a web app and I'm trying to obtain a clickable div (which I realized with a <a href...> styled as "display: block" in css with a linear gradient.
No problems...
Then I wanted to insert an icon inside this <a...> and I did it with a <p> containing an iconic font...
Again no problems...
Then I tryied to insert some different text in calibri below that icon/font inside the same block and with the same style (I wanted to have an inner shadow that makes things look like they are "pressed").
Here I'm not satisfied about the results because I can hardly align these 2 elements (which I styled as <p>, should have I used <span> instead?).
As an example I'd like to obtain an effect similar to the facebook app button but with image and text aligned vertically
Facebook div/link
How can I do it? What is the best practice (iconic font + font or image styled in photoshop + font styled in css, or what?)?
PS: And what about the nice 2 lines as border of that link/div, how are they styled?
I think the best - image styled in photoshop + font styled in css
For lines try to play with gradients and box-shadow. http://jsbin.com/esasan/1/edit
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="main">
<ul class="lines">
<li class="line"></li>
<li class="line"></li>
</ul>
</div>
</body>
</html>
.main {
display:block;
position:relative;
width:150px;
height:70px;
background: #fcfcfd; /* Old browsers */
background: -moz-linear-gradient(top, #fcfcfd 0%, #eaecf2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfd), color-stop(100%,#eaecf2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfcfd 0%,#eaecf2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfcfd 0%,#eaecf2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfcfd 0%,#eaecf2 100%); /* IE10+ */
background: linear-gradient(to bottom, #fcfcfd 0%,#eaecf2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfd', endColorstr='#eaecf2',GradientType=0 ); /* IE6-9 */
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.lines{
position:relative;
width:150px;
height:64px;
margin-top:3px;
}
.lines li {
display:inline-block;
margin-top:4px;
}
.line {
width:2px;
height:60px;
background: #9fa0a3; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #9fa0a3 0%, #f4f6fc 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#9fa0a3), color-stop(100%,#f4f6fc)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #9fa0a3 0%,#f4f6fc 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #9fa0a3 0%,#f4f6fc 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #9fa0a3 0%,#f4f6fc 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #9fa0a3 0%,#f4f6fc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9fa0a3', endColorstr='#f4f6fc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
margin-right:60px;
}
I need to underline my elements (menu items) with a line which has an gradient on BOTH ends.
It can't simply be a graphic (even stretched one), since the width of elements may vary significantly.
The desired effect:
What I did, was to create a line, 1000px wide, with gradient on both ends, then append following HTML <div><div class="right"> </div></div> to every element to be underlined.
The CSS is following
#navmenu li div
{
height: 1px;
background-image: url('images/1000glight.png');
background-repeat: no-repeat;
}
#navmenu li div.right
{
width:35px;
float: right;
background-position: -965px 0;
background-image: url('images/1000glight.png');
background-color: #212121;
}
This however is not truly alpha. I need to specify the background color of "right-side" div in order to "cover" the image (1000px line) which is below.
Any ideas how could I improve it, keeping pure CSS?
Using an approach similar to this, with the gradient being the background image of a wrapping div with padding-bottom to show only the lower part of the background:
<div class="wrap">
<div class="content">Some Text!</div>
</div>
And CSS:
.wrap {
float: left;
padding-bottom: 5px;
/* IE10 */
background-image: -ms-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Opera */
background-image: -o-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #fff), color-stop(0.25, #000), color-stop(0.75, #000), color-stop(1, #fff));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
/* Proposed W3C Markup */
background-image: linear-gradient(right, #fff 0%, #000 25%, #000 75%, #fff 100%);
}
.content {
background-color: #fff;
}
Works, but does omit IE<10; which might be do-able with some kind of filter, but that'll take more reading before I can post such.
JS Fiddle demo of current implementation.
Unfortunately the DX.transform option doesn't appear able to allow for multiple stops that the above uses, reference: Simulating color stops in gradients for IE
So, perhaps you'd have to use a background-image fallback for IE<10, which is far less than ideal.
Use the border-image gradient CSS3.
div {
width:200px;
border-style:solid;
border-width:15px;
text-align: center;
-webkit-border-image:
-webkit-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 100%) 0 0 100% 0/0 0 15px 0 stretch;
}
Demo here.
This will only work with Webkit browsers (Chrome, Safari etc). There should be some vendor specific equivalents.
You can use an empty div with a CSS3 Gradient... check out the presets here: http://www.colorzilla.com/gradient-editor/ - of course you'll have to change the orientation of the gradient. I use this a lot for similar issues. It's a great alternative to images.