Quest’anno, per presentare miei auguri natalizi, ho deciso di creare per divertimento questa cartolina puramente in css.
{ 2 comments }
From the category archives:
CSS Tips
5 effetti di testo creati in css usando un ping trasparente come sfondo.
Con questo metodo possiamo, per esempio, evitare di usare più immagine per creare titoli con un effetto di testo riusando stessa unica immagine di sfondo e stesse regole css.
La struttura html usata:
La struttura html di base per i seguenti esempi è costituita da un titolo (elemento html <h1>) che contiene il testo da visualizzare ed un elemento <span> vuoto a quale sarà applicato l’immagine di sfondo.
<h1>ERBA<span></span></h1>
{ 4 comments }
Eh si…siamo arrivati a Dicembre ed arrivano velocemente le feste di fino d’anno.
CSS.FlepStudio.org coglie l’occasione per vi presentare i suoi auguri di Natale alla moda css.
Tra una piccola poesia, la proprietà di testo white-space e un tocco di colore, ho creato per voi testi a forme natalizio.
Ecco per primo, l’albero di natale in css
A
ug
uri a
te caro
amico che
leggi auguri
non solo per qu
esti giorni ma per
un infinità di giorni
per la vita che dovrà ve
nire, per tutto ciò che tu
desideri di più bello per la
tua e
siste
nza.
{ 2 comments }
I tooltip permettono a l’utente di visualizzare testo descrittivo o informazione supplementari al passaggio del mouse sopra un link. Tanti sono i esempi in giro per la rete. Di seguito le miei prove con 3 esempi di tooltip css (con un testo semplice, con un immagine più testo e con immagine di sfondo per creare l’effetto a ‘bolla’) e in fine la loro compatibilità.
Continua a leggere >>
{ 2 comments }
La proprietà css min-width imposta una larghezza minima a l’elemento selezionato.
Se la finestra del browser è ridimensionata da l’utente, il contenuto si ridimensionerà fino a una certa larghezza e la barra di scorrimento della finestra apparirà se più piccola del contenuto.
Questa proprietà è utile nel caso di layout fluido o quando si usa contenuto con la proprietà css float per evitare che gli elementi di blocco si spostano verso il basso in caso di mancanza di spazio.
Purtroppo il min-width non è supportato da Internet Explorer 6.
Di seguito, 2 soluzione per impostare una larghezza minima per IE6.
{ 8 comments }
Nel creare pagine HTML è importante differenziare le due categorie di elementi block e inline per evitare errore di codice ed impostare al meglio il CSS.
La traduzione delle parole inglese ‘block’ e ‘inline’ sono abbastanza esplicite.
- block: un elemento che forma un blocco separato
- inline: un elemento che rimane in linea con il resto del contenuto
{ 11 comments }
Qualche righe di css, per impostare un immagine di sfondo al 100% ridimensionabile con la finestra del browser.
Sia il corpo della pagina che l’immagine (con id=”sfondo”) hanno una larghezza e altezza di 100%.
Le loro margine (margin) e ’spazi cuscinetti’ (padding) sono azzerati per evitare tutto spazio bianco intorno.
Con la proprietà css overflow evitiamo che vengono visualizzate le barre di scorrimento della finestra del browser. Finalmente, l’immagine è posizionata in modo assoluto per toglierla del flusso naturale della pagina e potere essere ridimensionata correttamente.
{ 0 comments }
Firefox ha quella brutta abitudine di aggiungere un bordo grigio ai links cliccati, come mostra questa immagine…
{ 14 comments }
