All Annotations of Most used CSS tricks | StylizedWeb.com[Preview]

saved by53 people, first byRay on 2008-03-13, last byArt ist on 2008-08-12

• Most used CSS tricks

• 3. Tableless forms

  
  

  
  

  
  <form>
  
  <label for=”name”>Name</label>
  
  <input id=”name” name=”name”><br>
  
  <label for=”address”>Address</label>
  
  <input id=”address” name=”address”><br>
  
  <label for=”city”>City</label>
  
  <input id=”city” name=”city”><br>
  
  </form>
  

  
  

  label,input {
  
  display: block;
  
  width: 150px;
  
  float: left;
  
  margin-bottom: 10px;
  
  }
  

  
  

  label {
  
  text-align: right;
  
  width: 75px;
  
  padding-right: 20px;
  
  }
  

  
  

  br {
  
  clear: left;
  
  }

• Tableless forms

  
  

  
  

  
  <form>
  
  <label for=”name”>Name</label>
  
  <input id=”name” name=”name”><br>
  
  <label for=”address”>Address</label>
  
  <input id=”address” name=”address”><br>
  
  <label for=”city”>City</label>
  
  <input id=”city” name=”city”><br>
  
  </form>
  

  
  

  label,input {
  
  display: block;
  
  width: 150px;
  
  float: left;
  
  margin-bottom: 10px;
  
  }
  

  
  

  label {
  
  text-align: right;
  
  width: 75px;
  
  padding-right: 20px;
  
  }
  

  
  

  br {
  
  clear: left;
  
  }
  

• 4. Double blockquote

• Gradient text effect

  
  

  
  

  
  <h1><span></span>CSS Gradient Text</h1>
  

  
  

  h1 {
  
  font: bold 330%/100% “Lucida Grande”;
  
  position: relative;
  
  color: #464646;
  
  }
  
  h1 span {
  
  background: url(gradient.png) repeat-x;
  
  position: absolute;
  
  display: block;
  
  width: 100%;
  
  height: 31px;
  
  }
  

  
  

  <!–[if lt IE 7]>
  
  <style>
  
  h1 span {
  
  background: none;
  
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient.png’, sizingMethod=’scale’);
  
  }
  
  </style>
  
  <![endif]–>

• 6. Vertical centering with line-height

• Rounded corners with images

  
  

  
  

  
  <div class=”roundcont”>
  
  <div class=”roundtop”>
  
  <img src=”tl.gif” alt=”"
  
  width=”15″ height=”15″ class=”corner”
  
  style=”display: none” />
  
  </div>
  

  
  

  CONTENT
  

  
  

  <div class=”roundbottom”>
  
  <img src=”bl.gif” alt=”"
  
  width=”15″ height=”15″ class=”corner”
  
  style=”display: none” />
  
  </div>
  
  </div>
  

  
  

  .roundcont {
  
  width: 250px;
  
  background-color: #f90;
  
  color: #fff;
  
  }
  

  
  

  .roundcont p {
  
  margin: 0 10px;
  
  }
  

  
  

  .roundtop {
  
  background: url(tr.gif) no-repeat top right;
  
  }
  

  
  

  .roundbottom {
  
  background: url(br.gif) no-repeat top right;
  
  }
  

  
  

  img.corner {
  
  width: 15px;
  
  height: 15px;
  
  border: none;
  
  display: block !important;
  
  }

• 9. Center horizontally
• 10. CSS Drop Caps

• Prevent line breaks in links, oversized content to brake

  
  

  
  

  
  a{
  
  white-space:nowrap;
  
  }
  

  
  

  #main{
  
  overflow:hidden;
  
  }

• Show firefox scrollbar, remove textarea scrollbar in IE

  
  

  
  

  
  html{
  
  overflow:-moz-scrollbars-vertical;
  
  }
  

  
  

  textarea{
  
  overflow:auto;
  
  }