<! Doctype HTML public "-// W3C // dtd xhtml 1.1 // en"
Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd>
<HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en">
<Head>
<Meta http-equiv = "Content-Type" content = "application/XHTML + XML; charset = UTF-8"/>
<Title> flyso blog -- CSS simulates different corner effects </title>
<Meta name = "author" content = "Stu Nicholls"/>
<Style type = "text/CSS">Body {Background: # e0e0e0 ;}
/* Inset 3D raised */
. Raised {Background: transparent; width: 40% ;}
. Raised H1,. Raised P {margin: 0 10px ;}
. Raised H1 {font-size: 2em; color: # FFF ;}
. Raised P {padding-bottom: 0.5em ;} . Raised. b1 ,. raised. b2 ,. raised. b3 ,. raised. b4 ,. raised. b1b ,. raised. b2B ,. raised. b3b ,. raised. b4b {display: block; overflow: hidden; font-size: 1px ;}
. Raised. B1,. Raised. B2,. Raised. B3,. Raised. B1b,. Raised. B2B,. Raised. b3b {Height: 1px ;}
. Raised. B2 {Background: # CCC; border-left: 1px solid # FFF; border-Right: 1px solid # Eee ;}
. Raised. B3 {Background: # CCC; border-left: 1px solid # FFF; border-Right: 1px solid # DDD ;}
. Raised. B4 {Background: # CCC; border-left: 1px solid # FFF; border-Right: 1px solid # AAA ;}
. Raised. b4b {Background: # CCC; border-left: 1px solid # Eee; border-Right: 1px solid #999 ;}
. Raised. b3b {Background: # CCC; border-left: 1px solid # DDD; border-Right: 1px solid #999 ;}
. Raised. B2B {Background: # CCC; border-left: 1px solid # AAA; border-Right: 1px solid #999 ;} . Raised. B1 {margin: 0 5px; Background: # FFF ;}
. Raised. B2,. Raised. B2B {margin: 0 3px; border-width: 0 2px ;}
. Raised. B3,. Raised. b3b {margin: 0 2px ;}
. Raised. B4,. Raised. b4b {Height: 2px; margin: 0 1px ;}
. Raised. B1b {margin: 0 5px; Background: #999 ;}
. Raised. boxcontent {display: block; Background: # CCC; border-left: 1px solid # FFF; border-Right: 1px solid #999 ;} /* Inset 3D curved */
. Inset {Background: transparent; width: 40% ;}
. Inset H1,. inset P {margin: 0 10px ;}
. Inset H1 {font-size: 2em; color: # FFF ;}
. Inset P {padding-bottom: 0.5em ;} . Inset. b1 ,. inset. b2 ,. inset. b3 ,. inset. b4 ,. inset. b1b ,. inset. b2B ,. inset. b3b ,. inset. b4b {display: block; overflow: hidden; font-size: 1px ;}
. Inset. B1,. inset. B2,. inset. B3,. inset. B1b,. inset. B2B,. inset. b3b {Height: 1px ;}
. Inset. B2 {Background: # CCC; border-left: 1px solid #999; border-Right: 1px solid # AAA ;}
. Inset. B3 {Background: # CCC; border-left: 1px solid #999; border-Right: 1px solid # DDD ;}
. Inset. B4 {Background: # CCC; border-left: 1px solid #999; border-Right: 1px solid # Eee ;}
. Inset. b4b {Background: # CCC; border-left: 1px solid # AAA; border-Right: 1px solid # FFF ;}
. Inset. b3b {Background: # CCC; border-left: 1px solid # DDD; border-Right: 1px solid # FFF ;}
. Inset. B2B {Background: # CCC; border-left: 1px solid # Eee; border-Right: 1px solid # FFF ;} . Inset. B1 {margin: 0 5px; Background: #999 ;}
. Inset. B2,. inset. B2B {margin: 0 3px; border-width: 0 2px ;}
. Inset. B3,. inset. b3b {margin: 0 2px ;}
. Inset. B4,. inset. b4b {Height: 2px; margin: 0 1px ;}
. Inset. B1b {margin: 0 5px; Background: # FFF ;} . Inset. boxcontent {display: block; Background: # CCC; border-left: 1px solid #999; border-Right: 1px solid # FFF ;} /* Curved cutout Borders */
. Curved {Background: transparent; width: 40% ;}
. Curved H1,. Curved P {margin: 0 10px ;}
. Curved H1 {font-size: 2em; color: # FFF ;}
. Curved P {padding-bottom: 0.5em ;} . Curved. B1,. Curved. B2,. Curved. B3,. Curved. B4 {display: block; overflow: hidden; Height: 1px; font-size: 1px ;}
. Curved. B2,. Curved. B3,. Curved. B4 {Background: # e0cea3; border-left: 1px solid # FFF; border-Right: 1px solid # FFF ;}
. Curved. B1 {margin: 0 4px; Background: # FFF ;}
. Curved. B2 {margin: 0 4px; Height: 2px ;}
. Curved. B3 {margin: 0 3px ;}
. Curved. B4 {margin: 0; Height: 1px; border-width: 0 3px 0 3px ;} . Curved. boxcontent {display: block; Background: # e0cea3; Border: 0 solid # FFF; border-width: 0 1px ;} /* Flared serif */
. Serif {Background: transparent; width: 40% ;}
. Serif H1,. serif P {margin: 0 10px ;}
. Serif H1 {font-size: 2em; color: # FFF ;}
. Serif P {padding-bottom: 0.5em ;} . Serif. B1,. serif. B2,. serif. B3,. serif. B4 {display: block; overflow: hidden; font-size: 1px ;}
. Serif. B1,. serif. B2,. serif. B3 {Height: 1px ;}
. Serif. B2,. serif. B3 {Background: # fc0; border-left: 1px solid # FFF; border-Right: 1px solid # FFF ;}
. Serif. B4 {Background: # fc0; border-left: 1px solid # FFF; border-Right: 1px solid # FFF ;} . Serif. B1 {margin: 0; Background: # FFF ;}
. Serif. B2 {margin: 0 1px; border-width: 0 2px ;}
. Serif. B3 {margin: 0 3px ;}
. Serif. B4 {Height: 2px; margin: 0 4px ;} . Serif. boxcontent {display: block; Background: # fc0; border-left: 1px solid # FFF; border-Right: 1px solid # FFF; margin: 0 5px ;} /* Pillar type */
. Pillar {Background: transparent; width: 40% ;}
. Pillar H1,. Pillar P {margin: 0 10px ;}
. Pillar H1 {font-size: 2em; color: # FFF ;}
. Pillar P {padding-bottom: 0.5em ;} . Pillar. B1,. Pillar. B2,. Pillar. B3,. Pillar. B4 {display: block; overflow: hidden; font-size: 1px ;}
. Pillar. B1,. Pillar. B2,. Pillar. B4 {Height: 1px ;}
. Pillar. B2,. Pillar. B3 {Background: # D66; border-left: 1px solid # FFF; border-Right: 1px solid # FFF ;}
. Pillar. B4 {Background: # D66; border-left: 4px solid # FFF; border-Right: 4px solid # FFF ;} . Pillar. B1 {margin: 0 2px; Background: # FFF ;}
. Pillar. B2 {margin: 0 1px; border-width: 0 1px ;}
. Pillar. B3 {Height: 2px; margin: 0 ;}
. Pillar. B4 {margin: 0 2px ;} . Pillar. boxcontent {display: block; Background: # D66; border-left: 1px solid # FFF; border-Right: 1px solid # FFF; margin: 0 5px ;} </Style>
</Head> <Body> <H2 class = "Bxs"> Krazy korners </H2>
<H3> by Stu Nicholls <Div class = "Curved">
<B class = "B1"> </B> <B class = "B2"> </B> <B class = "B3"> </B> <B class = "B4"> </B>
<Div class = "boxcontent">
<H1> Example 1 <P> A box with cutout corners </P>
</Div>
<B class = "B4"> </B> <B class = "B3"> </B> <B class = "B2"> </B> <B class = "B1"> </B>
</Div>
<P> </P> <Div class = "serif">
<B class = "B1"> </B> <B class = "B2"> </B> <B class = "B3"> </B> <B class = "B4"> </B> <Div class = "boxcontent">
<H1> Example 2 <P> corners to give a serif effect. </P>
</Div>
<B class = "B4"> </B> <B class = "B3"> </B> <B class = "B2"> </B> <B class = "B1"> </B>
</Div>
<P> </P> <Div class = "pillar">
<B class = "B1"> </B> <B class = "B2"> </B> <B class = "B3"> </B> <B class = "B2"> </B> <B class = "B4"> </B> <Div class = "boxcontent">
<H1> Example 3 <P> corners to give a rounded pillar effect. </P>
</Div>
<B class = "B4"> </B> <B class = "B2"> </B> <B class = "B3"> </B> <B class = "B2"> </B> <B class = "B1"> </B>
</Div>
<P> </P> <Div class = "Raised">
<B class = "B1"> </B> <B class = "B2"> </B> <B class = "B3"> </B> <B class = "B4"> </B>
<Div class = "boxcontent">
<H1> Example 4 <P> rounded corners with raised borders </P>
</Div>
<B class = "b4b"> </B> <B class = "b3b"> </B> <B class = "B2B"> </B> <B class = "B1b"> </B>
</Div>
<P> </P> <Div class = "Inset">
<B class = "B1"> </B> <B class = "B2"> </B> <B class = "B3"> </B> <B class = "B4"> </B>
<Div class = "boxcontent">
<H1> Example 5 <P> rounded corners with inset borders </P>
</Div>
<B class = "b4b"> </B> <B class = "b3b"> </B> <B class = "B2B"> </B> <B class = "B1b"> </B>
</Div> </Body>
</Html>
|
