CSS tricks

Today I have been using a couple of very nice CSS tricks in my recent contracts, so I re-created them from scratch on the Attentive 2 Design web site:

• Rounded corners using Javascript without images. What I really wanted to do was add a dark burnt orange border around my definition box on my home page, but when I tried to do so the
  
Rico.Corner.round('a2d_description', {corners:'all', color:'#4c4c4c', border:'#ffa500', bgColor:'#ffffff', blend:'#ffa500', compact:false});

  


• Setting transparency using CSS that works in Safari, Firefox and IE - I used this for dialogs - click on the A2D logo and a description comes up in a dialog.
  
opacity: 0.5; /* ------> Mac: Safari */
-moz-opacity: 0.5; /* -----> Firefox */
filter:alpha(opacity=50); /* ---> IE */

  


• Creating a box punch is a standard printer technique, but I like the effect so I added it to the same dialog that explains how I created the A2D logo. The CSS to enable this was very simple:
  
div#punch_logo {
background-color: white;
float: left;
text-align: center;
border: 1px solid black;
border-width: 0px 1px 1px 0px;
margin: -1px 1em 0.5em -1px;
padding-left: 3px;
}

  Where the HTML looks like this:
  
<div id="punch_logo"><img src="images/a2d.png"></div>

  


• Drop shadow for text, which I used for the © copright notice at the bottom on the A2D pages. The CSS is very complicate because of browser issues, but I like the code that works in Safari:
  
text-shadow: #4c4c4c 3px 3px 3px; /* color, horizontal offset, vertical offset, blur */

  


• Dynamic Drive ToolTip II is a nice example of how to create custom tool-tips, hover help, balloon help or whatever you would like to call it. It is used for the A2D logo and for the drawn arches within the toolbar.