Discuti il tutorial sul forum !

trick css piu usati

1. Rounded corners without images

<div id=”container”>
<b class=”rtop”>
<b class=”r1″></b> <b class=”r2″></b> <b class=”r3″></b> <b class=”r4″></b>
</b>
<!–content goes here –>
<b class=”rbottom”>
<b class=”r4″></b> <b class=”r3″></b> <b class=”r2″></b> <b class=”r1″></b>
</b>
</div>

.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}

2. Style your order list

<ol>
<li>
<p>This is line one</p>
</li>
<li>
<p>Here is line two</p>
</li>
<li>
<p>And last line</p>
</li>
</ol>

ol {
font: italic 1em Georgia, Times, serif;
color: #999999;
}

ol p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}

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;
}

4. Double blockquote

blockquote:first-letter {
background: url(http://www.sastgroup.com/images/open-quote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, “Times New Roman”, Times, serif;
}

5. 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

div{
height:100px;
}
div *{
margin:0;
}
div p{
line-height:100px;
}

<p>Content here</p>

7. 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;
}

8. Multiple class name

<img src=”image.gif” class=”class1 class2″ alt=”" />

.class1 { border:2px solid #666; }
.class2 {
padding:2px;
background:#ff0;
}

9. Center horizontally

<div id=”container”></div>

#container {
margin:0px auto;
}

10. CSS Drop Caps

<p class=”introduction”> This paragraph has the class “introduction”. If your browser supports the pseudo-class “first-letter”, the first letter will be a drop-cap. </p>

p.introduction:first-letter {
font-size : 300%;
font-weight : bold;
float : left;
width : 1em;
}

CSS Drop Caps

11. Prevent line breaks in links, oversized content to brake

a{
white-space:nowrap;
}

#main{
overflow:hidden;
}

12. Show firefox scrollbar, remove textarea scrollbar in IE

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

textarea{
overflow:auto;
}

Via: http://stylizedweb.com/2008/03/12/most-used-css-tricks/

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • co.mments
  • del.icio.us
  • De.lirio.us
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Reddit
  • scuttle
  • Smarking
  • Spurl
  • YahooMyWeb
  • DZone
  • Internetmedia
  • Snap2r
  • Technorati


March 14, 2008 | Scritto in tutorials, css  Letto:568 volte

Correlati


Commenti

Scrivi un commento





Commenti recenti:


Ultimi dal forum

Scaricare correttore ortografico italiano
Vari problemi
Installazione su server remoto
Installazione
Problema aggiornamento quantità prodotti carrello
Info
Bug utente + suggerimento formattazione
Problema cancellazione dalla mailing list
Problemi login
Problemi di visualizzazione nella home page
Fireworks appiattisce livelli quando salvo in png
Errore carrello
Requisiti server
Problema con le immagini
Problemi installazione