Yahoo! User Interface Blog (YUIBlog)

Trucchi di frontiera con CSS Boxes Compresso

Questi trucchi li aiuterà a realizzare progetti senza ricorrere all'uso di immagini, CSS3 gradiente o markup estranei. Con collasso scatole con zero line-height e height valori, siamo in grado di visualizzare il contenuto al di fuori della casella di contenuti, oltre i confini.

Bi-colore di sfondo

In questo esempio non include IE 6/7 soluzioni alternative (controllare il codice sorgente di questa pagina demo per le correzioni di IE).

 .parent { display:inline-block; text-align: center; border: 1px solid #cecece; } .child { display:inline-block; line-height: 0; height: 0; border-top: 1em solid #ffc; border-bottom: 1em solid #fdcf46; padding:0 .6em; vertical-align:bottom; } <ul id="menuBar-A"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

Dots e tubi tra le voci di elenco

Questo esempio mostra correttamente tutti i browser IE, dopo alcune correzioni semplici.

 ul.one, ul.two { margin-left:0; display:inline-block; *display:inline; zoom:1; height:12px; line-height:12px; padding:0; } li { float:left; display:inline; height:2px; line-height:2px; position:relative; top:.3em; } ul.two {border-left:1px solid #333;} ul.one li {border-left:2px solid #333;} ul.two li {border-right:2px solid #333;} ul.one li.first-child, ul.two li.last-child { border:0; } a { color:#000; padding:.4em .9em; *position:relative; } <div id="menuBar-B"> <ul class="us"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> </ul> <ul class="ourOffer"> <li class="services"><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> </div> 

Triangoli sinistra e verso destra

In questo esempio non include IE 6/7 soluzioni alternative (controllare il codice sorgente di questa pagina demo per le correzioni di IE).

 #box { line-height: 0; height: 0; border: .4em solid transparent; border-left-color: #333; border-right-color: #333; padding: 0 .3em; display: inline-block; } <ul id="menuBar-C"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

IE 6 e trasparenza delle frontiere

IE 6 non supporta la parola chiave " transparent "per il colore del bordo. Quando si utilizza questo valore, IE 6 disegna un bordo nero.

La correzione per questo è di utilizzare il filtro crominanza che mostra un colore specifico del contenuto dell'oggetto come trasparente. Ad esempio, per creare una freccia rivolta verso destra è possibile utilizzare questa regola:

 #Box { height: 0; width: 0; border: 10px solid transparent; font-size: 0; _border-color: pink; _filter: chroma(color="pink"); border-left-color: #333; } 

Il font-size dichiarazione è un'altra soluzione per IE 6. E 'per assicurarsi che questo browser non aumentare l'altezza della finestra.

! Arrestare le presse ho appena imparato un nuovo trucco (grazie Chungho Fang):

La magia [per creare la trasparenza delle frontiere in IE] è quello di impostare 'border-style' a uno tratteggiata o punteggiata

Questo è tutto! Questo è solo un altro modo per utilizzare i bordi per ottenere l'immagine-less design.

Ulteriori letture

• Uno studio dei poligoni regolari
• slantastic
• Slant

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!