CSS Rounded Corners Without Images

Friday, February 24, 2006

I found a neat trick the other day at http://www.cssplay.co.uk/boxes/snazzy.html. It's not new, but its CSS2, cross-browser compatable, and uses no scripting.

For those interested, the illusion is accomplished by placing graduated 2px and 1px tall div tags, with specific border attributes, below one another.

<style type="text/css">
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:1em;}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}

.xb1, .txb2, .txb3, .txb4,
.bxb2, .bxb3, .bxb4 {display:block; overflow:hidden;}

.xb1, .txb2, .txb3,
.bxb2, .bxb3{height:1px;}
.txb2, .txb3, .txb4 {background:#d4d4d4; border-left:1px solid #000000; border-right:1px solid #767676;}
.bxb2, .bxb3, .bxb4 {background:#d4d4d4; border-left:1px solid #000000; border-right:1px solid #767676;}

.xb1 {margin:0 5px; background:#767676;}
.txb2 {margin:0 3px; border-width:0 2px;}
.txb3 {margin:0 2px;}
.txb4 {height:2px; margin:0 1px;}
.bxb2 {margin:0 3px; border-width:0 2px;}
.bxb3 {margin:0 2px;}
.bxb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; background-color:#d4d4d4; border:0 solid #767676; border-width:0 1px;}

<!--Somewhere In The Document-->
<div id="xsnazzy" style="width:75px;">
  <div class="xtop">
    <div class="xb1"></div>
    <div class="txb2"></div>
    <div class="txb3"></div>
    <div class="txb4"></div>

<div class="xboxcontent" style="height:65px;">
<table cellpadding=0 cellspacing=0 border=0 width="100%" height="100%" valign="center"><tr><td align="center">Test</td></tr></table>

  <div class="xbottom">
    <div class="bxb4"></div>
    <div class="bxb3"></div>
    <div class="bxb2"></div>
    <div class="xb1"></div>

Word Scrambling Fun

Sunday, February 19, 2006

I am a very briong prseon. To porve to eoyrvene that I sepak the turth I will dcseribe the way I sepnt a few munties of my life Sudnay ngiht.

A wihle back I read an actrile aobut how well popele can dhpcieer smlcbared wrods. It truns out that ppoele can sitll uarsntdend a srmcblaed word as long as you keep the frist and last letetrs the same.
I find this very inseettring from a pocsyholgy pecesrtpive. But, that is nteiher here nor tehre. I diecded I sohuld wirte a pgroram to do it for me. Why would I "watse" my time doing siheotmng so folvroius, uelsess, and "sutpid"? I wtaned to. So I sat down and hrmemaed out the prgroam in C# 2.0. (I cohose C# 2.0 because it was at hand, nhtiong more.) I would conidser it ftfeien munties well spent.

private void replace(ref string s, int startpos,string newvalue)
StringBuilder sb = new StringBuilder();
if(startpos > 0) sb.Append(s.Substring(0, startpos));
if (startpos + newvalue.Length < s.Length) sb.Append(s.Substring(startpos + newvalue.Length));
s = sb.ToString();

private string scramblestring(string s)
if (s.Length > 3)
StringBuilder sb = new StringBuilder();
Random r = new Random();
sb = new StringBuilder();
int val = 0;
List ca = new List(s.ToCharArray(1, s.Length - 2));
while (ca.Count > 0)

val = r.Next(0, ca.Count-1);
}while(s.Length > 4 && sb.ToString() == s);
return sb.ToString();
return s;

private string scramble(string s)
Regex r = new Regex(@"\b[^\W\d]{4,}\b");
MatchCollection m = r.Matches(s);
if (m.Count > 0)
foreach (Match ma in m)
replace(ref s, ma.Index, scramblestring(ma.Value));
return s;