CSS3 Interactive Highlighted Bullets - If you use un-organized lists on your pages... then you might want to check this out! Example: View Code Demo |
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Pure HTML5 CSS3 Interactive Highlighted Bullets</title>
<meta name="google" value="notranslate">
<script style="display: none !important;">
window.alert = function(){};
window.confirm = function(){};
window.prompt = function(){};
window.open = function(){};
window.print = function(){};
</script>
<style>
/* Begin Pure HTML5 CSS3 Interactive Highlighted Bullets */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* == Created by: Yair Even-Or : http://dropthebit.com/ : Creative Commons License == */
/* == Modified by: SnapBuilder : Addition - hidden LI's and Opacity Filters == */
html {height:100%;}
BODY {height:100%; font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);}
#content {margin:0; padding:0;}
a {color:#69C;text-decoration:none;}
a:hover {color:#F60;}
ul.live{
overflow:hidden;
padding-left:0;
margin-left:0;
}
ul.live li{
list-style:none;
position:relative;
float:left;
clear:left;
padding:5px 0 0 30px;
}
/* we create a hidden li for browsers that chop the first li animation top and last bottom */
ul.live li.hidden{
list-style:none;
position:relative;
float:left;
clear:left;
margin:0; /* let's not add any un-necessary space */
padding:0;
}
ul.live li::before{
display:inline-block;
content:'\2022';
height:0.2em;
width:30px;
margin-left:-30px;
text-align:center;
font-size:1.3em;
color:#007730;
line-height:0;
vertical-align:middle;
-webkit-transition-duration:0.12s;
-moz-transition-duration:0.12s;
transition-duration:0.12s;
}
ul.live li:hover::before{
font-size:4em;
font-size:2.2em \0/;
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter:alpha(opacity=50);
/* Netscape */
-moz-opacity:0.5;
/* Safari 1.x */
-khtml-opacity:0.5;
/* Good browsers */
opacity:0.5;
}
</style>
<!-- Graceful degrade for IE9 suckers -->
<!--[if lt IE 9]>
<style>ul.live li{ list-style:disc; text-indent:0; margin-left:25px; }</style>
<![endif]-->
</head>
<body onload="_l='t';">
<h3>CSS3 Interactive Highlighted Bullets</h3>
<p>Roll your cursor over the un-ordered list text below to view the list-style effect.</p>
<ul class="live">
<li class="hidden"></li> <!-- we leave this hidden for crap browsers -->
<li>This is my list #1 for you to hover your mouse over the text with.</li>
<li>This is my list #2 for you to hover your mouse over the text with.</li>
<li>This is my list #3 for you to hover your mouse over the text with.</li>
<li class="hidden"></li> <!-- we leave this hidden for crap browsers -->
</ul>
<p><code> font-size:2.2em \0/ </code><br />
Hack for IE9 only. For some reason IE9 does not render the 4em size like other modern browsers do, so we need to manually correct this.</p>
<p>Browsers Support<br />
Firefox: currently the full animations only works in Firefox, in an awesome way.<br />
Chrome: is limited and can not fully handle the transition effect for dynamicly added content.<br />
IE: works without animation on IE9 only, but needs some position adjustments.</p>
<p>Gracefull Degrade<br />
For IE users, there are two ways to degrade this method to normal bullets style. You can either use inline CSS hacks to re-enable the list-style to the default state, or you can use a conditional comment to target IE:</p>
<p>[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_221.html">Pure HTML5 CSS3 Interactive Highlighted Bullets Code Snippet</a> page. ]</p>
</body>
</html>
|
Scroll