Skip to content

Ecce Signum

Immanentize the Empathy

  • Home
  • About Me
  • Published Works and Literary Matters
  • Indexes
  • 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

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

JohnWinkelmanJohn Winkelman@JohnWinkelman·
9h

4 of 5 stars to Imagined Communities by Benedict Anderson https://www.goodreads.com/review/show?id=4732930726

Reply on Twitter 1527257201487798272Retweet on Twitter 1527257201487798272Like on Twitter 1527257201487798272Twitter 1527257201487798272
JohnWinkelmanJohn Winkelman@JohnWinkelman·
13 May

It was withdrawn after they couldn't successfully add an exemption for wealthy white families.

Reuters@Reuters

A bill in the Louisiana legislature aiming to charge women and their doctors with murder for obtaining or providing abortion services was withdrawn from consideration amid outrage and a successful effort to amend it https://reut.rs/3w8Tn4B

Reply on Twitter 1525051129729626112Retweet on Twitter 1525051129729626112Like on Twitter 15250511297296261121Twitter 1525051129729626112
JohnWinkelmanJohn Winkelman@JohnWinkelman·
13 May

HA HA!

The Call is Coming from Inside the Nash@Nash076

Yup, figured this would happen.

Musk is now trying to cobble together a consortium of buyers to prevent having to take a loan on his Tesla stock.

So he's not so much buying Twitter as loading Twitter with debt that can't be repaid. https://finance.yahoo.com/news/elon-musk-seeks-scrap-tesla-153641078.html

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