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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:05 UTC

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