23.1.12

Border radius: arrotondo un div

23.1.12 4 Commenti
Attenzione! Ti ricordo che sono web designer completamente autodidatta, di conseguenza è difficile che troverai qui scritti termini appropriati... Quindi, se mastichi il mio stesso web-designeresco, allora sei il benvenuto. Se ti si drizza il pelo sulle braccia per i termini da ignorante e tutto ciò ti fa senso... puoi restare lo stesso
E' uno stile che mi fa impazzire, non solo perchè lo trovo molto bello da vedere, lì dove è bello da vedere, ma sopratutto perchè non ricordo mai i comandi che gli devo dare per far sì che esca come dico io!

Se hai notato la follia che mi prende ogni due giorni per il cambio della grafica (ma giuro che per ora sto buona, buona ) ti sei accorta che questo mi porta alla ricerca di novità da aggiungere al mio blog. Quindi mi sono ritrovata a 'ricercare' i border-radius, accompagnati da -moz e -webkit, ecc...

E allora ho pensato di farmi un bel post, che serva innanzitutto a me come pro-memoria e poi a chi, come me, non si ricorda mai un'acca quando è necessario.

bottone
-webkit-border-radius: 1em; -moz-border-radius: 1em;

tabs
-webkit-border-top-right-radius: 24px; -webkit-border-top-left-radius: 24px;-moz-border-radius-topright: 2em; -moz-border-radius-topleft: 2em;

fogliolina
-moz-border-radius: 2em 0; -webkit-border-radius: 24px 0; border-radius: 24px 0;

in rilievo
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);

roteato
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-transform: rotate(-5deg);

allungato
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-transform: skew(5deg,5deg);

effetto supposta
-webkit-border-top-right-radius: 50px 30px;
-webkit-border-bottom-right-radius: 50px 30px;

4 commenti:

  1. Magari potrà esserti utile questo tool: http://border-radius.com/
    :)

    RispondiElimina
  2. è molto utile!!!!!!!! grazie Rici!!!!!!!!!

    RispondiElimina
  3. Grazie mille, è davvero utilissimo :D

    RispondiElimina

buzzoole code
Copyright © La Creative Room.