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
Related
In the site - http://www.suneeta-rao.com/albums.htm, The text "Suneeta rao" is configured using flash. Is it possible to configure the same using HTML and CSS only. The effect i am talking about is the white flash like thing moving across each letter.
Yes, you can do this in html/css only.
What you want is the :hover pseudo-class in css and a radial background gradient.
See this JSFiddle:
http://jsfiddle.net/2vqggbxj/
I generated the background gradient css mess using this site (you'll probably want to tinker with it to get it just the way you want it):
http://www.colorzilla.com/gradient-editor/
HTML:
<span class="hoverable">Hello</span>
CSS:
.hoverable:hover
{
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
body
{
background-color: black;
color: white;
}
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
I want touchscreen buttons that stay depressed while the page is active rather than revert to normal state.
Is there a simple solution to this?
Ie, you're on the main page, there are three buttons, you press a button, it takes you to the new page and shades a different color.
The code I'm working with looks like this:
HTML:
<input type="button" value="Name" class="Class" onclick="location.href='#';">
CSS:
.class {display:inline;border:solid #000 3px;margin-left:auto;margin-right:auto;padding:10px;font-family: 'helvetica neue', helvetica, arial;font-size:16px;font-weight:600;
color:#fff; -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em;
background: #aaa; /* Old browsers */
background: -moz-linear-gradient(top, #636363 0%, #ffffff 4%, #000000 75%, #ffff00 97%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#636363), color-stop(4%,#ffffff), color-stop(75%,#000000), color-stop(97%,#ffff00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #636363 0%,#ffffff 4%,#000000 75%,#ffff00 97%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #636363 0%,#ffffff 4%,#000000 75%,#ffff00 97%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #636363 0%,#ffffff 4%,#000000 75%,#ffff00 97%); /* IE10+ */
background: linear-gradient(to bottom, #636363 0%,#ffffff 4%,#000000 75%,#ffff00 97%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#636363', endColorstr='#ffff00',GradientType=0 ); /* IE6-9 */
}
.class:active {background: #bababa; /* Old browsers */
background: -moz-linear-gradient(top, #bababa 1%, #636363 69%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#bababa), color-stop(69%,#636363), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bababa 1%,#636363 69%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bababa 1%,#636363 69%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bababa 1%,#636363 69%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom, #bababa 1%,#636363 69%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
What i would do is assign some sort off 'active' class to the link (eather on the server side, of by using some javascript), and give it the same styling as your hover state. Something like this:
#menu a:hover, #menu a.active {
background: #[PressedStateColor];
}
You could add the 'active' class with some easy javascript (jQuery) like this:
// when the dom is ready
$(document).ready(function() {
// for each of the links in the #menu
$('#menu a').each(function() {
// if the href of the link matches the one for the current page
if ($(this).attr('href') == window.location.href) {
// add the class 'active' to the link
$(this).addClass('active');
}
});
});
Note that this is not foolproof, it will only work on simple url's. Personally I would go for a server side solution.
To demonstrate, I set up a little fiddle: http://jsfiddle.net/RyHse/
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.
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.