Codice per targhette arrotondate

~alyps~

Posted on 9/9/2012, 12:23

.

Group: Admin

Posts: 32,891

Location: Hobbiton

Status: Offline

Codice per targhette arrotondate
Senza usare programmi di grafica, Photoshop, GIMP e simili!

^{Potete prendere tranquillamente i codici, però per favore non copiate il tutorial senza un link a questa discussione.}

Per targhette con i 4 bordi arrotondati
In GRAFICA/COLORI E STILI inserire questo codice

HTML

.web a:link img, .web a:visited img {border-radius: 10px; -moz-border-radius: 10px}
.web a:hover img {border-radius: 10px; -moz-border-radius: 10px}

Per aggiungere un po' di spessore in modo che la targhetta arrotondata sembri un bottone in rilievo, basta usare questo codice
Anteprima: 0pyNY

HTML

.web a:link img, .web a:visited img {border-radius: 20px; -moz-border-radius: 20px; border-bottom: 3px solid}
.web a:hover img {border-radius: 20px; -moz-border-radius: 20px}

Per targhette con 2 bordi arrotondati (gli altri due terminano a punta)
Anteprima: ZpIYc

HTML

.web a:link img, .web a:visited img {border-radius: 0 20px 0 20px; -moz border-radius: 0 20px 0 20px}
.web a:hover img {border-radius: 0 20px 0 20px; moz border-radius: 0 20px 0 20px}

Potete modificare a piacimento i valori numerici. Più aumentate i valori più la targhetta viene stondata e allungata.
Potete anche invertire gli 0 e i 20px: le punte andranno dove prima c'era il bordo tondo e viceversa.

Per targhette con 3 bordi arrotondati (viene una specie di fumetto, con la punta in basso a destra; nel mio codice è compreso l'effetto rilievo)
Anteprima: GN0tO

HTML

.web a:link img, .web a:visited img {border-radius: 40px 40px 40px 0; border-bottom: 3px solid}
.web a:hover img {opacity: 1.0; border-radius: 40px 40px 40px 0}

Adesso un effetto un po' particolare, ma veramente semplice

Targhette arrotondate animate -le punte cambiano lentamente direzione al passaggio del mouse-

HTML

.web a:link img, .web a:visited img {border-radius: 0 20px 0 20px; moz border-radius: 0 20px 0 20px}
.web a:hover img {border-radius: 20px 0 20px 0; moz border-radius: 20px 0 20px 0; -webkit-transition: 0.4s linear; -moz-transition: 0.4s linear; -o-transition: 0.4s linear}

N.B.
Questi codici si possono combinare con
Targhette che si illuminano lentamente al passaggio del mouse
Inserire un bordo e/o un'ombra alle targhette
Effetti particolari alle targhette
Targhette allineate a destra/sinistra

Edited by ~alyps~ - 10/9/2012, 10:23

.

Clahida

Posted on 27/12/2012, 16:16

.

User deleted

Ottimo Tutorial!