Category Archives: css

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(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/

Form Table-less con i css

 

Ottimo articolo bene commentato su: http://jeffhowden.com/code/css/forms/

oppure semplicemente:

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

Un menu per ristoranti con i CSS, anzi due

Quella dei menu per ristoranti è una tipologia di elementi molto particolare, ma non ci sono molti articoli dedicati. Merita una segnalazione quindi il recentissimo A recipe for success, che mostra come ottenere un menu per ristoranti:

 

Davvero notevole il fatto che le descrizioni siano possibili anche su più righe... anche se in casi reali forse non si presenta la necessità.

Più di due anni fa mi sono cimentato anch'io in un articolo simile. Alcuni lettori ricorderanno forse gli esperimenti con le liste di definizione con il relativo esempio. La parte relativa ai menu per ristoranti è stata pubblicata anche su web-graphics, in How to style a restaurant menu. Proprio nell'articolo in inglese, tra i commenti ce n'era uno che criticava la scelta cromatica e tipografica dell'esempio. In effetti...

A suo tempo avevo cercato di rifare l'esempio di modo da renderlo accattivante e gradevole: questo post è stata una buona occasione per rispolverare e presentare la nuova versione, in cui tra l'altro ho osato con i nuovi font di Vista:

 

Alcuni dettagli tecnici: l'esempio (come quello originale dell'articolo) ha una buona compatibilità; è stato testato con successo su IE dalla versione 5 alla 7, oltre che sulle ultime versioni di Opera, Firefox e Safari. In questo caso però ho usato un approccio elastico per l'intero menu: vi basta ridimensionare il testo per poter notare l'effetto.

Il remake è decisamente meglio dell'originale dal punto di vista grafico, non credete?

Fonte: http://blog.html.it/archivi/2007/12/05/un-menu-per-ristoranti-con-i-css-anzi-due.php 

20 tecniche per creare tabelle mediante Ajax e CSS

 

Abbiamo trovato una bella collezione di tecniche per creare tabelle mediante ajax e css. I design sono molto differenti ed ognuna delle tecniche impiegate possiede una qualità che le fa belle. Sicuramente questa collezione ti sarà realmente utile se stavi pensando di creare tabelle per mostrare qualche tipo di informazione o statistiche nel tuo posto.

Sito web: http://www.noupe.com/javascript/21-fresh-ajax-css-tables.html