Skip to content
Ecce Signum

Ecce Signum

Immanentize the Empathy

  • Home
  • About Me
  • Published Works and Literary Matters
  • Laboratory

Day: October 13, 2011

Circular HTML Elements Using CSS3 Border Radius

2011-10-13 John Winkelman

If you are using a “modern” browser, you should see a box full of circles.

 

abcde fghij klmno pqrst uvwxy z

If not, you need to upgrade your browser.

The circles were created using the new CSS3 border-radius property. The markup I used looks something like this:

<div id="post-20111013-a">
<span>a</span><span>b</span><span>c</span><span>d</span><span>e</span>
<span>f</span><span>g</span><span>h</span><span>i</span><span>j</span>
<span>k</span><span>l</span><span>m</span><span>n</span><span>o</span>
<span>p</span><span>q</span><span>r</span><span>s</span><span>t</span>
<span>u</span><span>v</span><span>w</span><span>x</span><span>y</span>
<span class="s2">z</span>
</div>
#post-20111013-a {width:640px;height:480px;outline:1px solid #999;background:#ffffff;}
#post-20111013-a span {
	float:left;
	width:50px;
	height:50px;
	margin:14px;
	border:1px solid red;
	background:#999999;
	-webkit-border-radius: 27px;
	-moz-border-radius: 27px;
	border-radius: 27px;
	text-align:center;
	line-height:50px;
}
#post-20111013-a span.s2 {
	float:none;
	clear:both;
	display:block;
	margin:20px auto;
	width:100px;
	height:100px;
	line-height:100px;
	-webkit-border-radius: 54px;
	-moz-border-radius: 54px;
	border-radius: 54px;
}
#post-20111013-a span:hover {
	-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .5);
	-moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .5);
	box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .5);
}
#post-20111013-a span.s2:hover {
-webkit-box-shadow: 0px 0px 20px 20px rgba(255, 0, 0, .5);
	-moz-box-shadow: 0px 0px 20px 20px rgba(255, 0, 0, .5);
	box-shadow: 0px 0px 20px 20px rgba(255, 0, 0, .5);
}

The first block is the HTML which makes up the above demo, and the second is the style sheet. Pretty self-explanatory. I set the border radius to slightly more than half of the diameter of the circle (width/height of the element). Putting the border radius at exactly half of the diameter renders as a very slightly squarish circle. You can play around with border-radius on this page at the w3schools. You can read more about the browser compatibility and best practices at The Art of the Web.

Unfortunately the hit area for each element is still a rectangle large enough to contain the circle, so in that sense it is not much of an improvement over using a background image. Still, it is a huge step in the right direction.

Posted in Programming comment on Circular HTML Elements Using CSS3 Border Radius

Personal website of John Winkelman

Archives

Categories

Posts By Month

October 2011
S M T W T F S
 1
2345678
9101112131415
16171819202122
23242526272829
3031  
« Sep   Nov »

Twitter Feed

JohnWinkelmanJohn Winkelman@JohnWinkelman·
7 Mar

New blog post. Got some books. Felt some ennui. http://eccesignum.org/2021/03/07/march-already-and-still/
#aleksandrsolzhenitsyn #apexbookcompany #andotherstoriespublishing #parisreview #amreading #russianliterature

Reply on Twitter 1368562949296709639Retweet on Twitter 1368562949296709639Like on Twitter 1368562949296709639Twitter 1368562949296709639
JohnWinkelmanJohn Winkelman@JohnWinkelman·
7 Mar

It's been a long week.

Reply on Twitter 1368431629610459140Retweet on Twitter 1368431629610459140Like on Twitter 13684316296104591403Twitter 1368431629610459140
JohnWinkelmanJohn Winkelman@JohnWinkelman·
2 Mar

I just backed Chronicles of the Immortal Swordsmen #1 on @Kickstarter https://www.kickstarter.com/projects/1617982296/chronicles-of-the-immortal-swordsmen-1?ref=android_thanks_twitter_share

Reply on Twitter 1366742012481966080Retweet on Twitter 1366742012481966080Like on Twitter 13667420124819660801Twitter 1366742012481966080
Load More...

Links of Note

Reading, Writing
Tor.com
Locus Online
The Believer
File 770
IWSG

Watching, Listening
WYCE Electric Poetry
Writing Excuses Podcast
Our Opinions Are Correct

News, Politics, Economics
Naked Capitalism
Crooked Timber

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

© 2021 Ecce Signum

Proudly powered by WordPress | Theme: x-blog by wpthemespace.com