I have to realize this pattern for a background web site. Who can help me to realize the pattern? I don't know how it has to be developed.
I have realized the gradient with this css3 code:
background: rgb(152,152,152); /* Old browsers */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk4OTg5OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(left, rgba(152,152,152,1) 0%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(152,152,152,1)), color-stop(100%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#989898', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */
As commented, it is used as a fallback for some old browsers e.g. I.E.6
background: rgb(152,152,152); /* Old browsers */
Include an inline background image (using base64 encoding instead of a url)
background: url(data:image/svg+xml;base64,PD94bWw...);
For the -xx-linear-gradient lines, we call it vendor-specific properties.
background: -moz-linear-gradient(left, rgba(152,152,152,1) 0%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(152,152,152,1)), color-stop(100%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* W3C */
They are not necessarily to be standard W3C rules. The purpose of the existence of vendor-specific props is to allow browser vendors to add their own CSS props for providing more features than what the standard suggested to developers.
The last line is used by I.E. that supports "filter" property.
So in short, the lines below the first line are just doing the same job but they are just designed for use by different browsers. It ensures that the element with the rules applied to look the same in all major browsers.
Related
I have this background:
.background:hover {
background: #F4F4F4 url(../images/arrow_down_over.gif) no-repeat right;
}
that I would like to change into a gradient like this one :
.background:hover{
background: -moz-linear-gradient(top, #f4f4f4 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4f4f4 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4f4f4 0%,#eeeeee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f4f4f4 0%,#eeeeee 100%); /* IE10+ */
background: linear-gradient(to bottom, #f4f4f4 0%,#eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee',GradientType=0 );
} /* IE6-9 */
But I would like to keep the arrow image. I can't find a way to do it. I did try something like this:
background: -moz-linear-gradient(top, #f4f4f4 0%, #eeeeee 100%) url(../images/arrow_down_over.gif) no-repeat right; /* FF3.6+ */
or add this after the gradient properties but without any success.
background: url(../images/arrow_down_over.gif) no-repeat right;
I can't add another class so I have to deal with this CSS. Any idea how to do it?
You may try:
background: url(../images/arrow_down_over.gif), linear-gradient(...);
Multiple backgrounds must be comma-separated rather than space-separated, and they weirdly stack from top to bottom.
Also note that this is not necessarily supported by all browsers.
See http://css-tricks.com/stacking-order-of-multiple-backgrounds/ and https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds for details
This is the top row (banner) on my website:
#toprow {position: static;top:0px}
I have found the following code, which I believe will enable me to grade the color from dark blue to light blue. Despite many attempts, I have yet to find a way to build it into my banner:
#grad
{
background: -webkit-linear-gradient(rgb(0,102,255), rgb(153,204,255)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgb(0,102,255), rgb(153,204,255)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgb(0,102,255), rgb(153,204,255)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgb(0,102,255), rgb(153,204,255)); /* Standard syntax (must be last) */
}
Using this tool, you can easily achieve what you want. This will give you cross browsers solution also. See below for your colour gradation given by colorzilla:
background: #0066ff; /* Old browsers */
background: -moz-linear-gradient(top, #0066ff 0%, #99ccff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0066ff), color- stop(100%,#99ccff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0066ff 0%,#99ccff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0066ff 0%,#99ccff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0066ff 0%,#99ccff 100%); /* IE10+ */
background: linear-gradient(to bottom, #0066ff 0%,#99ccff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0066ff', endColorstr='#99ccff',GradientType=0 ); /* IE6-9 */
Now, if you place this code in #grad it suppose that you have an HTML element having id="grad".
I got this code from css graident generator, which is transparent at the bottom of the gradient
background: -moz-linear-gradient(top, rgba(248,246,247,1) 0%, rgba(248,246,247,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,246,247,1)), color-stop(100%,rgba(248,246,247,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(248,246,247,1) 0%,rgba(248,246,247,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(248,246,247,1) 0%,rgba(248,246,247,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(248,246,247,1) 0%,rgba(248,246,247,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(248,246,247,1) 0%,rgba(248,246,247,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f6f7', endColorstr='#00f8f6f7',GradientType=0 ); /* IE6-9 */
Now I want to add a background on top of the gradient background
background: url('../images/letter_head.png') left top repeat-x, #f8f6f6;
How do I combine them both?
Just prepend the url of the image to each of your rules.
background: url(someurl), -moz-linear-gradient(top, rgba(248,246,247,1) 0%, rgba(248,246,247,0) 100%); /* FF3.6+ */
Alternatively, if you don't feel like adding url(etc) to each of your rules, you could just specify a single background-image rule:
background: -moz-linear-gradient(top, rgba(248,246,247,1) 0%, rgba(248,246,247,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,246,247,1)), color-stop(100%,rgba(248,246,247,0))); /* Chrome,Safari4+ */
...
background-image:url("someurl");
CSS
.bg{
width:800px; height:750px;
background: #38BAC9 url(http://www.google.com/logos/2012/india12-hp.jpg) 10% no-repeat;
background:url(http://www.google.com/logos/2012/india12-hp.jpg) center no-repeat, -webkit-gradient(linear, 0% 0%, 0% 100%, from(#57BEED), to(#38BAC9));
background:url(http://www.google.com/logos/2012/india12-hp.jpg) center no-repeat, -moz-linear-gradient(top, #57BEED 0%, #38BAC9 100%);
}
DEMO
Check this link for more information
http://userinterfacehome.blogspot.in/2012/09/css-multiple-background.html
I added a gradient background for my .html page. Seems to work in most browsers but I would like to know if it is standard and complies to all rules.
.css
html {
/* fallback */
background-color: #65a5d1;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#65a5d1));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #fff, #65a5d1);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #fff, #65a5d1);
/* IE 10 */
background: -ms-linear-gradient(top, #fff, #65a5d1);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #fff, #65a5d1);
height: 900px;
}
If you want to generate gradients that are fully compatible you can check the Ultimate CSS Gradient Generator:
Here's the output it generates:
/* Old browsers */
background: #1e5799;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMWU1Nzk5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMjk4OWQ4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjMjA3Y2NhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
/* FF3.6+ */
background: -moz-linear-gradient(45deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
/* Chrome, Safari4+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* IE10+ */
background: -ms-linear-gradient(45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* W3C */
background: linear-gradient(45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
/* IE6-8 fallback on horizontal gradient */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );
As you see it generates bit more properties to cover even more cases.
If you want support for IE 9 you'll have to follow this... yeah I know it sucks, but...
Support for full multi-stop gradients with IE9 (using SVG):
Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
How can i make this background with css3? Image
I want to repeat it and want not use a image.
thanks for help
You can do this using CSS3 gradients:
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 49%, #eaa82c 50%, #eaa82c 80%, #bc2020 81%, #bc2020 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(49%,#ffffff), color-stop(50%,#eaa82c), color-stop(80%,#eaa82c), color-stop(81%,#bc2020), color-stop(100%,#bc2020)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 49%,#eaa82c 50%,#eaa82c 80%,#bc2020 81%,#bc2020 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#ffffff 49%,#eaa82c 50%,#eaa82c 80%,#bc2020 81%,#bc2020 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#ffffff 49%,#eaa82c 50%,#eaa82c 80%,#bc2020 81%,#bc2020 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#ffffff 49%,#eaa82c 50%,#eaa82c 80%,#bc2020 81%,#bc2020 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bc2020',GradientType=0 ); /* IE6-9 */
}
http://jsfiddle.net/gDJtD/
I suggest you have a look at http://lea.verou.me/css3patterns/ for this
Having said that, images are always going to be faster. Beware of not using css gradients just for the sake of using css gradients.