CSS : Lekerekített modulok |
Lekerekített modulok
"Border-radius"-szal menüfejléceink, moduljaink sarkait lekerekíthetjük. Előre szólunk, hogy ez a lekerekítés I.E. alatt nem fut, tehát, aki Explorert használ sima szögletes modulokat fog látni továbbra is!
Ha ennek ellenére is szeretnéd alkalmazni, olvass tovább.
-moz-border-radius: 5px; /* lekerekítés mértéke mozzilában */
-webkit-border-radius: 5px; /* lekerekítés mértéke chrome-ban */
Ezt a két sort kell a CSS kódodban oda beilleszteni, amit szeretnél lekerekíteni (zárójeles magyarázattal együtt másolhatod nyugodtan, így is működik!). Ha a menüfejlécet szeretnéd, akkor keresd meg td.modtitle részt, s a {} közé illeszd be, ha a modulok tartalmi részét szeretnéd, akkor a td.modbody-t keresd meg, s szintén {} közé illeszd be. De bárhol kipróbálhatod a CSS kódban, pl. vendégkönyv bejegyzéseinek fejlécének lekerekítése esetén a td.listheader3-hoz másold, hírek/cikkek modul bejegyzéseinek fejléce esetén td.list3 stb.
Azoknak, akik nem értenek annyira a CSS-hez, hogy maguk illesszék be a kódrészletet, íme pár variáció. Nektek csak a színkódokat kell átírni és a lekerekítés mértékén változtatni, a // között írtak a segítségedre lesznek, ezeket a magyarázatokat nem kell törölnöd, a kód így is működik!
Menüfejléc lekerekítése:
<style type="text/css">
td.modtitle
{background-color: #96a592; /* menüfejléc hátterének színe */
height: 22px; /* menüfejléc magassága */
color: #e4e4e4; /* modul nevének színe */
-moz-border-radius: 5px; /* lekerekítés mértéke mozzilában */
-webkit-border-radius: 5px; /* lekerekítés mértéke chrome-ban */}
</style>
Tartalmi rész lekerekítése:
<style type="text/css">
td.modbody
{background-color: #96a592; /* modul hátterének színe */
color: #e4e4e4; /* modul tartalmának színe */
-moz-border-radius: 5px; /* lekerekítés mértéke mozzilában */
-webkit-border-radius: 5px; /* lekerekítés mértéke chrome-ban */}
</style>
Menüfejléc és tartalmi rész lekerekítése:
<style type="text/css">
td.modtitle
{background-color: #96a592; /* menüfejléc hátterének színe */
height: 22px; /* menüfejléc magassága */
color: #e4e4e4; /* modul nevének színe */
-moz-border-radius: 5px; /* lekerekítés mértéke mozzilában */
-webkit-border-radius: 5px; /* lekerekítés mértéke chrome-ban */}
td.modbody
{background-color: #96a592; /* modul hátterének színe */
color: #e4e4e4; /* modul tartalmának színe */
-moz-border-radius: 5px; /* lekerekítés mértéke mozzilában */
-webkit-border-radius: 5px; /* lekerekítés mértéke chrome-ban */}
</style>
Lekerekítések megadása sarkanként:
Ha csak egy adott sarkot szeretnél lekerekíteni, akkor egyesével is meghatározhatod őket. Természetesen kombinálhatod ezeket kedved szerint. Mindig rakd be a mozzilás és a webkites böngészőre vonatkozó kódrészletet is.
Mozzila:
-moz-border-radius-topright << jobb felső sarok
-moz-border-radius-topleft << bal felső sarok
-moz-border-radius-bottomright << jobb alsó sarok
-moz-border-radius-bottomleft << bal alsó sarok
Webkites böngészők:
-webkit-border-top-right-radius << jobb felső sarok
-webkit-border-top-left-radius << bal felső sarok
-webkit-border-bottom-right-radius << jobb alsó sarok
-webkit-border-bottom-left-radius << bal alsó sarok
|