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>
Related
How can generate rectangular using gradient in CSS?
My expectation is like this picture
you can try this code to make rectangle by making a div and class as rectangle,
.rectangle {
width: 400px;
height: 200px;
background: linear-gradient(to left bottom, rgb(84, 255, 84), #329600, rgb(124, 124, 124));
}
you can change the direction of color also.
I guess that what you are looking for is a linear gradient. I recomand you to try this web site : https://cssgradient.io/ to easly visualize the render of the css property
background: linear-gradient
I tried to reproduce what was on your exemple and I get this css code
.exemple{
width:200px;
height: 150px;
background: rgb(40,83,62);
background: -moz-linear-gradient(150deg, rgba(40,83,62,1) 5%, rgba(156,200,151,1) 80%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(150deg, rgba(40,83,62,1) 5%, rgba(156,200,151,1) 80%, rgba(255,255,255,1) 100%);
background: linear-gradient(150deg, rgba(40,83,62,1) 5%, rgba(156,200,151,1) 80%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#28533e",endColorstr="#ffffff",GradientType=1);
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<body>
<div class="exemple"></div>
</body>
</html>
Hope this helps !!
So say I have <div> and I want it to look like a shiny, matte surface like this album cover
I can slap a linear-gradient on that div, no problem at all. But it just looks like a gradient - artificial. The shine is curved and unrealistic, there's no texture, it just looks fake.
So other than photoshop, how could I recreate this effect?
I think you can get close using CSS gradients and filter: blur. Here's my example, which isn't quite there but might be the right direction:
.matte{
width: 150px;
height: 150px;
background-color: black;
}
.finish{
background: -moz-linear-gradient(top, rgba(124,124,124,0.5) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(124,124,124,0.5) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(124,124,124,0.5) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
width: 100%;
height: 100%;
opacity: 0.3;
filter: blur(10px)
}
<div class="matte">
<div class="finish">
</div>
</div>
<div class="border"></div>
.border {
width: 100%;
height: 6px;
background: -webkit-linear-gradient(left, #2F2727 20%, #1a82f7 80%);
}
The above code produces the line but its fading out the first color than fading in the other one. But i want line like the above one. So help me
.border {
background: -webkit-linear-gradient(left, #2F2727 20%, #1a82f7 20%);
}
Trick is to start the second color right where first color ends. In this example #2F2727 color is ending at 20% and #1a82f7 color is starting from 20%.
You will need to create two separate DOM elements in order to have achieve the multi coloured line. Please see below:
HTML:
<div class="border">
<div></div>
<div></div>
</div>
CSS:
.border {
height:6px
width:100%;
display:block;
overflow:hidden;
}
.border div {
height:6px;
}
.border div:first-child {
width:30%;
background-color:orange;
float:left;
}
.border div:last-child {
width:70%;
background-color:black;
float:left
}
See it in action: http://jsfiddle.net/NvQ7B/2/
could you not just do something like this:
.border {
height:3px;
border-left:200px solid #2F2727;
background-color:#1a82f7;
}
http://www.colorzilla.com/gradient-editor/#ff0000+0,ff0000+30,0a0e0a+30,0a0809+100;Custom
background: #ff0000; /* Old browsers */
background: -moz-linear-gradient(left, #ff0000 0%, #ff0000 30%, #0a0e0a 30%, #0a0809 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(30%,#ff0000), color-stop(30%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #ff0000 0%,#ff0000 30%,#0a0e0a 30%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #ff0000 0%,#ff0000 30%,#0a0e0a 30%,#0a0809 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #ff0000 0%,#ff0000 30%,#0a0e0a 30%,#0a0809 100%); /* IE10+ */
background: linear-gradient(to right, #ff0000 0%,#ff0000 30%,#0a0e0a 30%,#0a0809 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#0a0809',GradientType=1 ); /* IE6-9 */
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;
}