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;
}
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
Im using Colorzilla gradient generator(http://www.colorzilla.com/gradient-editor/) to create a radial gradient for my site and I wanted to have the ellipse at the bottom.
From
background: #667de8; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2NjdkZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxNSUiIHN0b3AtY29sb3I9IiM1NDZlYmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MSUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjgzYzVkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #667de8 0%, #546ebf 15%, #283c5a 63%, #283c5a 91%, #283c5d 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, bottom bottom, 100%, color-stop(0%,#667de8), color-stop(15%,#546ebf), color-stop(63%,#283c5a), color-stop(91%,#283c5a), color-stop(100%,#283c5d)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* W3C */
To
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2NjdkZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxNSUiIHN0b3AtY29sb3I9IiM1NDZlYmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MSUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjgzYzVkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(bottom, ellipse cover, #667de8 0%, #546ebf 15%, #283c5a 63%, #283c5a 91%, #283c5d 100%); /* FF3.6+ */
background: -webkit-gradient(radial, bottom bottom, 0px, bottom bottom, 100%, color-stop(0%,#667de8), color-stop(15%,#546ebf), color-stop(63%,#283c5a), color-stop(91%,#283c5a), color-stop(100%,#283c5d)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(bottom, ellipse cover, #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(bottom, ellipse cover, #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* Opera 12+ */
background: -ms-radial-gradient(bottom, ellipse cover, #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* IE10+ */
background: radial-gradient(ellipse at bottom, #667de8 0%,#546ebf 15%,#283c5a 63%,#283c5a 91%,#283c5d 100%); /* W3C */
So I changed every occurrence of center to bottom, then I successfully generated a radial gradient with ellipse located at the bottom.
However in IE9 it fails to render bottom ellipse, and then I found out that the following code below needs also to be modified:
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2NjdkZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxNSUiIHN0b3AtY29sb3I9IiM1NDZlYmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2MyUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI5MSUiIHN0b3AtY29sb3I9IiMyODNjNWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjgzYzVkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
So is there any way to modify the code(Data URI) to make the ellipse at the bottom?
If it's impossible, how can I make the ellipse locate at the bottom part?
Any thoughts would be greatly appreciated.
background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */
please use ms filter IE9 beta 1.
and any IE problem please visit this link http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/
So this JSFiddle example works in Chrome, but not in Firefox. Pixels seem to work for Firefox, but Is there a way for me to use percentage for Firefox?
http://jsfiddle.net/ayjay/gVetP/2/
background-image: -webkit-radial-gradient(150px 150px, 85% 30%, yellow, blue ); /*Chrome*/
background-image: -moz-radial-gradient(150px 150px, 85% 30%, yellow, blue ); /*Mozilla*/
background-image: -radial-gradient(150px 150px, 85% 30%, yellow, blue ); /*default*/
I recomend to use: http://colorzilla.com/gradient-editor/ in this cases...
I recommend in general all online tools.. :P
As you can see, that is very useful:
background: #ffff00; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMGZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #ffff00 0%, #0000ff 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffff00), color-stop(100%,#0000ff)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #ffff00 0%,#0000ff 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #ffff00 0%,#0000ff 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #ffff00 0%,#0000ff 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #ffff00 0%,#0000ff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#0000ff',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
JSFiddle: http://jsfiddle.net/gVetP/6/
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.