Skip to content

Ecce Signum

Immanentize the Empathy

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

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

Post navigation

Mersenne Twister in Actionscript
Blandford Nature Center, 9 October, 2011

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Personal website of
John Winkelman

John Winkelman in a diner in San Francisco

Archives

Categories

Posts By Month

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

Twitter Feed

Retweet on TwitterJohn Winkelman Retweeted
swordsjewTalia Lavin@swordsjew·
17h

republicans: we openly want a tyranny of the white minority and will enact violence to cement it, we've been consolidating power for decades

democrats: we believe that anyone who runs a small business in a disadvantaged neighborhood for 5 years deserves a tax cut on baby formula

Reply on Twitter 1527340504094232576Retweet on Twitter 1527340504094232576861Like on Twitter 15273405040942325764676Twitter 1527340504094232576
Retweet on TwitterJohn Winkelman Retweeted
SenDuckworthTammy Duckworth@SenDuckworth·
9h

Every Senate Republican—the majority of whom don't have uteruses themselves—voted against protecting Roe v. Wade and your right to decide what happens to your own body.

Reply on Twitter 1527469474038808580Retweet on Twitter 1527469474038808580203Like on Twitter 1527469474038808580887Twitter 1527469474038808580
JohnWinkelmanJohn Winkelman@JohnWinkelman·
12h

Marked as to-read: Dream or Nightmare by Stephen Duncombe https://goodreads.com/review/show/4733884194

Reply on Twitter 1527421442752712706Retweet on Twitter 1527421442752712706Like on Twitter 1527421442752712706Twitter 1527421442752712706
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

© 2022 Ecce Signum

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