Angoli arrotondati senza immagini

aldolat@gmail.com (Aldo Latino) — Fri, 06 Jun 2008 12:57:02 +0000

Quando si vuole creare un box con gli angoli arrotondati, generalmente si crea – in base all’uso – una immagine già pronta oppure una serie di piccole immagini ognuna contenente uno dei quattro angoli richiesti (come nel caso di questo blog). Ma c’è un sistema, ancora in fase di bozza, per far generare al browser i quattro angoli necessari per il layout senza l’uso di alcuna immagine.

La funzione si chiama border-radius e ha questi valori:

border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

In attesa che la funzione entri nelle specifiche ufficiali degli standard CSS, i software di casa Mozilla e quelli che usano Webkit già consentono l’uso di questo comando, diversamente, invece, da Explorer.

Implementazione Mozilla

Per l’uso con le applicazioni Mozilla queste sono le specifiche della funzione:

-moz-border-radius: <top-left top-right bottom-right bottom-left>
-moz-border-radius-topleft: <valore>
-moz-border-radius-topright: <valore>
-moz-border-radius-bottomright: <valore>
-moz-border-radius-bottomleft: <valore>

Implementazione Webkit

Le applicazioni che usano webkit (come Safari) utilizzano questa implementazione:

-webkit-border-radius: <top-left top-right bottom-right bottom-left>
-webkit-border-top-left-radius: <valore>
-webkit-border-top-right-radius: <valore>
-webkit-border-bottom-right-radius: <valore>
-webkit-border-bottom-left-radius: <valore>

Esempi

Ecco qualche esempio con relativo codice. Ovviamente, in attesa che la funzione diventi operativa, potete usare assieme l’implementazione Mozilla e quella Webkit.

I quattro angoli con solo il bordo a 10px

Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div style="border: 1px solid #555;
padding: 5px 5px 5px 15px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;">
Lorem ipsum dolor sit amet...
</div>

I quattro angoli a 20px con riempimento e senza bordo

<div style="background-color: #555;
padding: 5px 5px 5px 15px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;">
Lorem ipsum dolor sit amet...
</div>

I quattro angoli a 10px con riempimento e senza bordo

<div style="background-color: #555;
padding: 5px 5px 5px 15px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;">
Lorem ipsum dolor sit amet...
</div>

Superiore sinistro a 10px

Lorem ipsum dolor sit amet.

<div style="background-color: #555;
padding: 5px 5px 5px 15px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;">
Lorem ipsum dolor sit amet.
</div>

Superiore destro a 10px

Lorem ipsum dolor sit amet.

<div style="background-color: #555;
padding: 5px 5px 5px 15px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;">
Lorem ipsum dolor sit amet.
</div>

Inferiore destro a 10px

Lorem ipsum dolor sit amet.

<div style="background-color: #555;
padding: 5px 5px 5px 15px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;">
Lorem ipsum dolor sit amet.
</div>

Inferiore sinistro a 10px

Lorem ipsum dolor sit amet.

<div style="background-color: #555;
padding: 5px 5px 5px 15px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;">
Lorem ipsum dolor sit amet.
</div>

Fonti:

Non sono un webdesigner né tantomeno un esperto di codice HTML&Co.: se ho scritto inesattezze, segnatale pure nei commenti. Grazie per la pazienza! 🙂

L'articolo Angoli arrotondati senza immagini è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

Tipografia e Web: Typetester

aldolat@gmail.com (Aldo Latino) — Sat, 01 Sep 2007 07:28:27 +0000

Vorrei segnalare a coloro che sono soliti modificare il file CSS del proprio blog o crearne da zero che esiste un bel servizio di test delle impostazioni dei caratteri: Typetester.

Il servizio ci permette di mettere rapidamente a confronto diverse impostazioni del testo per verificarne la leggibilità: si può provare il corpo del carattere, l’interlinea, il tracking, l’allineamento, il colore dello sfondo e del testo, ecc.

Lo spazio della pagina è suddiviso in tre colonne in modo da poter confrontare rapidamente, in un colpo d’occhio, quale sia la migliore soluzione.

Lungo la colonna, poi, possiamo confrontare anche le varianti stilistiche del carattere scelto, come il regular, il grassetto, il corsivo, e così via. Alla fine delle nostre prove, una volta soddisfatti del risultato, Typetester ci permette di visionare il CSS relativo alla colonna desiderata.
Con un copia e incolla lo possiamo trasferire al file del nostro CSS e applicarne le modifiche.

Un servizio davvero molto utile. 😉

L'articolo Tipografia e Web: Typetester è uno scritto di aldolat.it. Rispettane le condizioni di licenza.

Aldolat.it — Post con tag Webdesign

Angoli arrotondati senza immagini

Implementazione Mozilla

Implementazione Webkit

Esempi

I quattro angoli con solo il bordo a 10px

I quattro angoli a 20px con riempimento e senza bordo

I quattro angoli a 10px con riempimento e senza bordo

Superiore sinistro a 10px

Superiore destro a 10px

Inferiore destro a 10px

Inferiore sinistro a 10px

Tipografia e Web: Typetester