colozilla gradient generator - css

I generated gradient background in colorzilla and i put inside css file as u can see in this code and it keeps repeating me the background. I want this background to be from where it starts to the end of page.
body{
background: #1d6fa4;
background: -moz-linear-gradient(-45deg, #1d6fa4 1%, #499bc8 26%, #51abc9 52%, #3e94c1 74%, #277cad 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,#1d6fa4), color-stop(26%,#499bc8), color-stop(52%,#51abc9), color-stop(74%,#3e94c1), color-stop(100%,#277cad));
background: -webkit-linear-gradient(-45deg, #1d6fa4 1%,#499bc8 26%,#51abc9 52%,#3e94c1 74%,#277cad 100%);
background: -o-linear-gradient(-45deg, #1d6fa4 1%,#499bc8 26%,#51abc9 52%,#3e94c1 74%,#277cad 100%);
background: -ms-linear-gradient(-45deg, #1d6fa4 1%,#499bc8 26%,#51abc9 52%,#3e94c1 74%,#277cad 100%);
background: linear-gradient(135deg, #1d6fa4 1%,#499bc8 26%,#51abc9 52%,#3e94c1 74%,#277cad 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d6fa4', endColorstr='#277cad',GradientType=1 );
}


You need this
html, body {
height: 100%;
}
body {
background-position: fixed;
/* Gradient dump goes here */
}

Related

Css applying linear-gradient to body of document

I am trying to make this gradient appear on entire body of document, but instead it just shows only on the top. Is there anyway to fill it up entire body? I am using firefox if that makes difference.
body {
height: 100%;
background-image: linear-gradient(to top, blue 80%, green 0);
}

You need to define a 100% height for the html and body tags:
html,
body {
height:100%;
}
body {
background:#BAF7C8;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #BAF7C8),
color-stop(1, #5C93DB)
);
background-image: -o-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%);
background-image: -moz-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%);
background-image: -webkit-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%);
background-image: -ms-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%);
background-image: linear-gradient(to top, #BAF7C8 0%, #5C93DB 100%);
}
(gradient generated from css3factory).
Notice there is a regular background colour fallback as well.
You could generate the gradients automatically with autoprefixer.
JSFiddle

Here is the proper code to make sure you get your linear gradient.
html {
width: 100%;
height: 100%;
}
body {
background-image: linear-gradient(0deg ,white, orange);
}
This method works in almost all modern browsers. Hope this helped.

How to make css background-blend-mode work with gradients?

I have a page with multiple backgrounds: one with gradient and one with texture pattern. But background-blend-mode doesn't work. Chrome appears to show only gradient layer. When I try to blend two background-images or background-image with solid background-color it works well. But not with gradient. Is something wrong?
body {
width: 100%;
height: 100%;
background: url('../images/noisy.png');
background-color: rgba(29, 84, 140, 1);
background: -webkit-radial-gradient(center, ellipse cover, rgba(36,138,166,1) 0%,rgba(21,112,145,1) 42%,rgba(5,58,103,1) 100%);
background: radial-gradient(ellipse at center, rgba(36,138,166,1) 0%,rgba(21,112,145,1) 42%,rgba(5,58,103,1) 100%);
background-blend-mode: multiply;}
And my goal is something like that:

It does work with gradients you just need to use multiple backgrounds.
The problem with your current code is that you are only setting one background.
First you set background to an image:
background: url('../images/noisy.png');
Then you override the image and set background to a gradient:
background: radial-gradient(ellipse at center, rgba(36,138,166,1) 0%,rgba(21,112,145,1) 42%,rgba(5,58,103,1) 100%);
To assign multiple backgrounds you need to comma seperate them:
background: background1, background2, ..., backgroundN;
Using your gradient:
body {
width: 100%;
height: 100%;
background: url('http://i.stack.imgur.com/PEnJm.png');
background-color: rgba(29, 84, 140, 1);
/* ^ fallbacks for crappy IE ^ */
background: url('http://i.stack.imgur.com/PEnJm.png'), -webkit-radial-gradient(center, ellipse cover, rgba(36,138,166,1) 0%,rgba(21,112,145,1) 42%,rgba(5,58,103,1) 100%);
background: url('http://i.stack.imgur.com/PEnJm.png'), radial-gradient(ellipse at center, rgba(36,138,166,1) 0%,rgba(21,112,145,1) 42%,rgba(5,58,103,1) 100%);
background-blend-mode: multiply;
}
A gradient similar to your image example:
body {
width: 100%;
height: 100%;
background: url('http://i.stack.imgur.com/PEnJm.png'), -moz-linear-gradient(left, rgba(21,112,145,1) 0%, rgba(36,138,166,1) 100%);
background: url('http://i.stack.imgur.com/PEnJm.png'), -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(21,112,145,1)), color-stop(100%,rgba(36,138,166,1)));
background: url('http://i.stack.imgur.com/PEnJm.png'), -webkit-linear-gradient(left, rgba(21,112,145,1) 0%,rgba(36,138,166,1) 100%);
background: url('http://i.stack.imgur.com/PEnJm.png'), -o-linear-gradient(left, rgba(21,112,145,1) 0%,rgba(36,138,166,1) 100%);
background: url('http://i.stack.imgur.com/PEnJm.png'), -ms-linear-gradient(left, rgba(21,112,145,1) 0%,rgba(36,138,166,1) 100%);
background: url('http://i.stack.imgur.com/PEnJm.png'), linear-gradient(to right, rgba(21,112,145,1) 0%,rgba(36,138,166,1) 100%);
background-blend-mode: multiply;
}

How to stop text from overlapping CSS?

Im creating a website for college and Im not sure how to stop text from overlapping when I make the web browser smaller. This is what I mean:
(not overlapping)
(overlapping)
Here is my jsfiddle: (http://jsfiddle.net/RC4Ar/)
.words {
font-family:apple;
font-size:20px;
max-width:800px;
height:190px;
margin-top:10px;
margin-left:42%;
}
Thanks in advance!

Assuming you are adding the words class to the paragraph tags (without your html, we can only guess), you simply need to remove the height declaration.
.words {
font-family: apple;
font-size: 20px;
max-width: 800px;
margin-top: 10px;
margin-left: 42%; }

For your fiddle example, I would change the title_bar to have a min height instead of a fixed height. This will allow it to be responsive instead of overlapping over the following text.
#title_bar {
margin-top:78px;
left:-17px;
width:101.5%;
min-height:30px;
background:blue;
position:relative;
top:-70px;
z-index:3;
border: 3px rgba(255, 105, 180, 1) solid;
background-image: -webkit-gradient(linear, right bottom, right top, color-stop(0, #5977FF), color-stop(1, #59C5FF));
background-image: -o-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -moz-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -webkit-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: -ms-linear-gradient(top, #5977FF 0%, #59C5FF 100%);
background-image: linear-gradient(to top, #5977FF 0%, #59C5FF 100%);
}
Fiddle

Creating gradient lines in CSS

Question, if I wanted to create gradient lines that fade out on the top and bottom, similar to the lines seen on AT&T's drop down menu that separate the menu items, how would I go about that? I want to create a similar effect on a menu that I am coding, and I would prefer not to use images. Is there a way to achieve this in CSS? Help much appreciated! Thanks.

Microsoft CSS Gradient is a GUI you can use. just copy the CSS into your code:
Example:
#div {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #00A3EF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #FFFFFF 0%, #00A3EF 100%);
}

You can create a div with 1px width then assign a gradient on it. Like that :
.line{
width:1px;
height : 25px;
margin : 0 5px;
background: rgb(125,185,232);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(125,185,232,1) 0%, rgba(30,87,153,1) 50%, rgba(125,185,232,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,1)), color-stop(50%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
background: -webkit-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: -o-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: -ms-linear-gradient(top, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
background: linear-gradient(to bottom, rgba(125,185,232,1) 0%,rgba(30,87,153,1) 50%,rgba(125,185,232,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#7db9e8',GradientType=0 );
}
Fiddle : http://jsfiddle.net/jPnXz/
Here a CSS gradient generator (i used it for the CSS) : http://www.colorzilla.com/gradient-editor/

Great documentation on CSS3 Gradients
http://www.css3files.com/gradient/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_gradients
Gradient Generators
http://www.colorzilla.com/gradient-editor/
http://gradients.glrzad.com
http://www.cssmatic.com/gradient-generator
http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/

You have repeating-gradient as well for this :
http://codepen.io/anon/pen/zbLkl
background:repeating-linear-gradient(
top ,
white 0,
white 1em,
turquoise 1em,
turquoise 1.2em) 0 2.4em;
line-height:1.2em;
Set equal line-height to gradient , so gradient will follow font-size.
the time to dig it, an old example with squares. and background-size.http://dabblet.com/gist/4750827
background:
linear-gradient(0deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent),
linear-gradient(90deg, rgba(0,0,0,0.1) 0 , rgba(0,0,0,0.1) 1px ,transparent 1px ,transparent);
background-size:1.4em 1.4em,1.4em 1.4em;
line-height:1.4em;

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: linear-gradient(to top left ,#FFA500, #DDA0DD,#FFFAF0,#bfff00,#00ffff,#A9A9A9);
}
</style>
</head>
<body>
<h1>Linear Gradient</h1>
<div id="grad1"></div>
<br/>
<div>Internet Explorer 9 and earlier versions do not support gradients</div>
</body>
</html>

CSS gradient on two-parted image

I have to accomplish following image by using CSS:
It's one image which will contain the main-navigation. So I wrote some CSS in order to do so (not the correct color-codes, I know):
#menu-block {
background: #730868;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#730868), to(#0a9f9d));
background: -webkit-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
background: -moz-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
background: -ms-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
background: -o-linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
background: linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
-pie-background: linear-gradient(top, #730868 0%, #0e70a2 76%,#0a9f9d 100%);
behavior: url(/pie/PIE.htc);
}
And this code works great! It does what it has to do except for the arrow on the end... I honestly have no idea on how to tacle this issue.
Should I create a second div in the shape of an arrow and guess the closest color?
It should support IE8...

This gets you close
It actually ends up with a solid colored "point" (equal to the end color of the gradient). It might be possible to actually get a continuation of the gradient into the triangle if it absolutely needs to (I don't have time at present to figure that out).
Here's the example (note: the example uses code generated from colorzilla for IE9 support). You need to have a fixed width for this to work (to set the left/right border of the psuedo-element), but the height can be flexible. In my example, IE8 loses the red center. Perhaps with your PIE solution, it does not.
HTML (with IE9 condition as the example has)
<!--[if gte IE 9]>
<style type="text/css">
#menu-block {
filter: none;
}
</style>
<![endif]-->
<div id="menu-block" ></div>
CSS
#menu-block {
width: 100px;
position: relative;
background: rgb(0,0,255);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,0,255,1) 0%, rgba(255,0,0,1) 50%, rgba(255,255,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,255,1)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,255,0,1)));
background: -webkit-linear-gradient(top, rgba(0,0,255,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 100%);
background: -o-linear-gradient(top, rgba(0,0,255,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,255,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 100%);
background: linear-gradient(to bottom, rgba(0,0,255,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#ffff00',GradientType=0 );
}
#menu-block:after {
content: '';
width: 0;
height: 0;
position: absolute;
left: 0;
top: 100%;
border-right: 50px transparent solid;
border-left: 50px transparent solid;
border-bottom: 0 transparent solid;
border-top: 30px #ffff00 solid;
}

Why not create the full rectangle and then position and overlay triangle images at the bottom that blend with your background to give the look of a down-pointing arrow?

Resources