ho un tot di anni durante i quali ho fatto taaaaante cose, tipo fare due figli che sono la gioia della mia esistenza. Sono blogger dal 2007, ma dal 2008 lo sono un po' più seriamente... ci ho creduto di più dai.
Volevo fare la stilista, vestire persone, ma oggi mi piace quasi definirmi stilista del web, perchè vesto i blog con abiti su misura appositamente per le bloggers che decidono di collaborare con me, affidandomi i loro tessssori.
Perchè il blog è un nostro tesssssoro, vero?
Seguimi su Pinterest! Tanti pin per ispirare la tua moodboard e la tua creatività!
Seguimi su Pinterest! Tanti pin per ispirare la tua moodboard e la tua creatività!

23.1.12

Border radius: arrotondo un div

23.1.12

4 comm
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;
Iscriviti alla mia newsletter per ricevere consigli sul blogging, il design, la pianificazione e pdf gratuiti per gli iscritti alla newsletter ♥
(Ma prima leggi la mia informativa sulla privacy.)
si, iscrivimi!

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

Lasciando un commento dichiari di aver letto la mia Privacy Policy