CSS : Képeffekt (áttetsző, lekerekített keretű képek) |
Képeffekt (áttetsző, lekerekített keretű képek)
Ezzel a kóddal megadhatod, hogy az oldaladon lévő képeknek legyen-e keretük, illetve, hogy a linkelt képeknek legyen-e keret, áttetsző legyen-e. A kódot egyszerű modul Forráskódjába illeszd be, a magyarázatot nem kell kitörölnöd, a kód így működőképes, ahogy van! :)
Sajnos IE-ben a lekerekített keret nem működik (tehát egyszerű keret jelenik meg helyette), csak Mozzilában, Chromeban okés a lekerekítés..
Kód:
<style type="text/css">
img { border: 0px solid #000000;} /* link nélküli képnek keret, most 0, tehát nem ad neki keretet */
a img /* linkelt kép tulajdonságai */
{ border-style: solid; /* a linkelt kép keretének stílusa: solid: sima, dashed: szaggatott, dotted: pontozott */
border-width: 3px; /* a linkelt kép keretének vastagsága */
border-color: #000000; /* a linkelt kép keretének színe */
-moz-border-radius: 5px; /* keret lekerekítésének mértéke mozzilában */
-webkit-border-radius: 5px; /* keret lekerekítésének mértéke chrombe-ban */
filter: alpha(opacity=50); /* áttetszőség IE-ben */
opacity: 0.5; /* áttetszőség mozzilában, chrome-ban.. */
}
a:hover img /* linkelt kép tulajdonságai, ha ráviszed az egeret */
{ border-style: solid; /* a linkelt kép keretének stílusa: solid: sima, dashed: szaggatott, dotted: pontozott */
border-width: 3px; /* a linkelt kép keretének vastagsága */
border-color: #ff0000; /* a linkelt kép keretének színe */
-moz-border-radius: 5px; /* keret lekerekítésének mértéke mozzilában */
-webkit-border-radius: 5px; /* keret lekerekítésének mértéke chrome-ban */
filter: alpha(opacity=100); /* áttetszőség IE-ben */
opacity: 1.0; /* áttetszőség mozzilában, chrome-ban... */
}
</style>
|