Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Miscellaneous >> CSS3 Interactive Highlighted Bullets


Code Snippet </> Info


Snippet Name: CSS3 Interactive Highlighted Bullets

Description: If you use un-organized lists on your pages... then you might want to check this out!
Example: View Code Demo

Note:

Author: Yair Even-Or

Last Modified: 2015-08-26 22:47:07

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying
Copied To Clipboard!

<!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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library