Tag: Webdesign

2 articoli

Angoli arrotondati senza immagini

Come arrotondare gli angoli di un box di una pagina HTML senza far uso di alcuna immagine, ma solo dei tag CSS.

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.
Leggi tutto “Angoli arrotondati senza immagini”

Tipografia e Web: Typetester

typetester_1.png

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.

typetester_2.png

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

typetester_3.png

typetester_4.png

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.

typetester_5.png

Un servizio davvero molto utile. ;)