Yahoo! User Interface Blog (YUIBlog)

Granični CSS trikovi sa srušenih Kutije

Ti trikovi pomoći će vam u postizanju dizajna bez pribjegavanja uporabi slike, CSS3 gradijenta ili stranih označni. Do urušavanja polja s nula line-height i height vrijednosti, možete prikazati sadržaj izvan sadržaja okvira, preko granica.

Bi-boja pozadine

Ovaj primjer ne uključuje IE 6/7 radna rješenja (pogledajte izvorni kod ovog demo stranice za IE popravci).

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

Točkice i cijevi između stavki popisa

Ovaj primjer prikazuje ispravno preko preglednicima nakon nekoliko jednostavnih IE popravci.

 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> 

Lijevi i desnu trokuta

Ovaj primjer ne uključuje IE 6/7 radna rješenja (pogledajte izvorni kod ovog demo stranice za IE popravci).

 #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 i granice transparentnost

IE 6 ne podržava ključna riječ " transparent "za granice boji. Kada koristite ovu vrijednost, IE 6 privlači crni obrub.

Fix za to je korištenje kromatsku filter koji prikazuje određenu boju sadržaja od objekta kao transparentni. Na primjer, stvoriti pravu strelicu možete koristiti ovo pravilo:

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

Font-size deklaracija je još jedan workaround za IE 6. To je kako bi provjerili da ovaj preglednik ne povećava visinu okvira.

! Stop preše sam naučio novi trik (hvala Chungho Fang):

Čarobna [stvoriti graničnog transparentnost u IE] je postaviti "graničnog stilu 'to bilo isprekidane ili nižu

To je to! Ovo je samo još jedan način da koriste granice kako bi se postigla slika manje dizajn.

Daljnje čitanje

• Proučavanje pravilnih poligona
• slantastic
• Kosinama

Nađi razgovore: Bloglines | technorati

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!