W3C home > Mailing lists > Public > www-style@w3.org > October 2011

RE: [css3-images] simplifying radial gradients - ListStyleImage example

From: Brian Manthos <brianman@microsoft.com>
Date: Sun, 9 Oct 2011 05:45:35 +0000
To: Brad Kemper <brad.kemper@gmail.com>, Sylvain Galineau <sylvaing@microsoft.com>, Alan Gresley <alan@css-class.com>, Chris Lilley <chris@w3.org>, Tab Atkins Jr. <jackalmage@gmail.com>, "www-style@w3.org" <www-style@w3.org>
Message-ID: <9710FCC2E88860489239BE0308AC5D17F009FA@TK5EX14MBXC266.redmond.corp.microsoft.com>
"Fancy" bullets, with hover light-up.

Not supported by Brad's proposal.

-Brian


<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<style>
	li
	{
		list-style-image: -moz-radial-gradient(0% 50%, 100% 50%, violet, blue 100%, transparent);
		list-style-image: -ms-radial-gradient(0% 50%, 100% 50%, violet, blue 100%, transparent);
		list-style-image: -o-radial-gradient(0% 50%, 100% 50%, violet, blue 100%, transparent);
		list-style-image: -webkit-radial-gradient(0% 50%, 100% 50%, violet, blue 100%, transparent);
		list-style-image: radial-gradient(0% 50%, 100% 50%, violet, blue 100%, transparent);
	}
	li:hover
	{
		list-style-image: -moz-radial-gradient(0% 50%, 100% 50%, red, blue 100%, transparent);
		list-style-image: -ms-radial-gradient(0% 50%, 100% 50%, red, blue 100%, transparent);
		list-style-image: -o-radial-gradient(0% 50%, 100% 50%, red, blue 100%, transparent);
		list-style-image: -webkit-radial-gradient(0% 50%, 100% 50%, red, blue 100%, transparent);
		list-style-image: radial-gradient(0% 50%, 100% 50%, red, blue 100%, transparent);
	}
</style>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</body>
</html>



Received on Sunday, 9 October 2011 05:46:41 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:45 GMT