Pisake Cho's blog, my exploration through digital edge

CSS Amazing tricks

Css Round Corner

div.rounded {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  padding:10px;
  border:3px solid #f3ddac;
  background: #fff3d8;
}

the html

<div class="rounded">
<h2>The Example</h2>
</div>

Certainly, it’s perfectly work on Firfox !

Creating Link Blocks

a.blocklink {
display:block;
width:160px;
background:#f0f0f0;
color:#999;
font-family:corbel, verdana, sans-serif;
padding:4px;
text-decoration:none;
font-weight:normal;
font-size:0.72em;
border:1px solid #dadada;
}
a.blocklink strong {
font-family:georgia, helvetica, sans-serif;
display:block;
color:#656565;
font-weight:bold;
font-size:1em;
margin:0 0 3px 0;
font-style:italic;
}
a.blocklink:hover {
background:#dcdcdc;
color:#303030;
border:1px solid #adadad;
}
a.blocklink:hover strong {
color:#cb0000;
}

the html

<a href="#" class="blocklink">
<strong>Link Block Heading</strong>
This is the text contained within the link block... </a>

Mimicking Drop Shandow

img.demo2 {
padding:1px;
border:2px solid #dcdcdc;
background:#ababab;
}

Posted in: css, web practice

This entry was posted on Thursday, February 26th, 2009 at 10:51 pm and is filed under css, web practice. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.