Post

Archivio della categoria 'Articoli'

CSS: proprietà list-style-type

La proprietà CSS list-style-type permette di modificare il punto o il numero elenco di una lista <ul> o <ol>.

Il valore più usato è none, che permette di disattivare del tutto il punto elenco in modo da usare poi una immagine come punto elenco. I valori possibili sono:

none: nessun punto elenco

circle: un cerchio vuoto

disc: un cerchio pieno

square: un quadrato

decimal: 1, 2, 3, …

decimal-leading-zero: 01, 02, 03, …

lower-roman: i, ii, iii, …

upper-roman: I, II, III, …

lower-greek: α, β, γ, …

lower-alpha: a, b, c, …

upper-alpha: A, B, C, …

armenian: Ա Բ, Գ, …

georgian: ა, ბ, გ, …

Ne trovate una dimostrazione qui.

CSS: proprietà border-style

La proprietà CSS border-style permette di impostare lo stile dei bordi di un elemento; si può anche impostare separatamente per ciascun lato usando

border-top-style

border-right-style

border-bottom-style

border-left-style

rispettivamente per il bordo superiore, destro, inferiore e sinistro. I valori possibili sono:

none: nessun bordo

solid: bordo continuo

dotted: puntinato (per i bordi più spessi di 1px, in Firefox viene visualizzato come dei “trattini” quadrati, mentre in Explorer vengono resi dei cerchi)

dashed: tratteggiato

double: doppio, con due righe continue affiancate (ha senso solo per i bordi più spessi di 6px)

groove: inciso, reso con due colori e con un’ombra sul lato superiore e sinistro (in Firefox i due colori sono due sfumature del colore impostato, mentre in Explorer viene usato il colore impostato insieme al nero; dato che ciascun lato ha due colori, ha senso solo per bordi più spessi di 6px)

ridge: in rilievo, reso con due colori come per groove ma con i lati invertiti

inset: inciso, reso con due colori, di cui uno viene usato per i lati superiore e sinistro, l’altro per quelli inferiore e destro (in Firefox i due colori sono due sfumature del colore impostato, mentre in Explorer viene usato il colore impostato insieme al nero)

outset: in rilievo, reso con due colori come per inset ma con i lati invertiti

Qui trovate una dimostrazione dei vari stili del bordo, da controllare con i diversi browser :)

Box con angoli stondati e larghezza fissa

Spesso ci serve di creare un box con gli angoli stondati; se il box è di larghezza fissa è facile farlo in CSS usando solo due div opportunamente posizionati:

<div id="top">
<div id="bottom">
testo testo testo
</div>
</div>

L’idea è quella di inserire come sfondo del div top l’immagine che formerà il bordo superiore del box, e come sfondo del div bottom l’immagine che formerà il bordo inferiore. Il div top quindi avrà un padding-top pari all’altezza dell’immagine in alto, mentre dovrà avere padding-bottom pari a zero.

div#top {
width: 232px;
background-image: url(right-top.jpg);
background-repeat: no-repeat;
background-position: top left;
margin-left: 0px;
margin-bottom: 10px;
}

div#bottom {
width: 232px;
background-image: url(bottom.jpg);
background-repeat: no-repeat;
background-position: bottom left;
background-color: #7c2613;
padding: 0px 0px 0px 0px;
position: relative;
top: 14px;
text-align: center;
}

Qui trovate una dimostrazione

CSS: proprietà white-space

La proprietà CSS white-space permette di impostare, in qualsiasi elemento, come vengono gestiti gli spazi bianchi inseriti nel codice. Di default, se nel codice vengono inseriti più spazi bianchi, questi vengono visualizzati come uno spazio solo, ed eventuali a capo non vengono considerati. Possiamo gestire questa cosa in HTML usando i tag <pre> o <code>. La stessa cosa può essere gestita con la proprietà CSS white-space, che ha i seguenti valori possibili:

normal: il default. Più spazi nel codice vengono considerati uno solo. Se il testo arriva alla fine del suo contenitore, viene mandato a capo. Eventuali spazi iniziali non vengono considerati. Eventuali a capo nel codice non vengono considerati.

pre: Viene tutto reso come formattato nel codice: più spazi nel codice vengono resi singolarmente. Se il testo arriva alla fine del suo contenitore non viene mandato a capo. Eventuali spazi iniziali vengono considerati. Eventuali a capo nel codice vengono considerati.

nowrap: come normal, ma non manda a capo il testo alla fine del contenitore (non fa il wrap).

pre-wrap e pre-line: in Firefox resi come normal.

Trovate qui una dimostrazione dei vari valori.

CSS - metodo di debug

Capita spesso che il CSS (e l’HTML!) che scriviamo non faccia quello che vogliamo. Cosa fare per risolvere la cosa? Beh, “fare delle prove” in genere funziona, ma qualche volta ci fa perdere un sacco di tempo. Ecco quindi un metodo “comprovato” per risparmiare tempo e soprattutto incavolature ;)

  1. Cosa voglio fare? Chiariamoci. Spesso pensare razionalmente a cosa vogliamo fare ci fa “scattare la scintilla” ;)
  2. Quali sono gli elementi HTML che sono coinvolti?
    1. Identificarli attraverso la Web Developer Toolbar
  3. Gli elementi HTML coinvolti sono scritti correttamente nel codice HTML?
    1. Quali sono i selettori CSS che devo usare per richiamarli?
    2. C’è qualche errore di scrittura?
    3. Validare il codice HTML
  4. La proprietà CSS che ho impostato non funziona come credevo. Cosa credevo? O meglio, cosa mi aspetto che faccia la proprietà CSS che ho impostato?
    1. Controllare sullo standard se ho ragione
    2. Validare il CSS
  5. Se ancora non funziona come vorrei, forse è coinvolta qualche altra proprietà
    1. Controllare con la developer toolbar quali proprietà CSS ho
    2. Controllare se ci sono altri selettori che mi influiscono
    3. Controllare se l’elemento eredita qualche proprietà che non avevo considerato
    4. Accentuare l’effetto della proprietà per capire se viene visualizzata (es. aumentare a dismisura i bordi)
    5. Controllare se gli elementi vicini (genitori, figli, vicini) hanno qualche proprietà che può influire
    6. Modificare altre proprietà che possano avere una qualche influenza, e per ognuna di queste modifiche ricominciare da 1 :)

Dove trovare le immagini

Personalmente, una delle cose che trovo più difficile è scegliere l’immagine “adatta” ad un sito (non per niente questo non ne ha ;) ). E’ utile quindi poter accedere a siti da cui poter scaricare immagini con una licenza che ne permette l’uso. Eccone alcuni:

Gratuiti (attenzione, non tutte le immagini sono utilizzabili!):
Flickr (con una comoda ricerca per tipologia di licenza)
MyPhotos

A pagamento (ma a basso costo):
Shutterstock (solo su abbonamento)
Fotolia
123rf
Dreamstime
Bigstockphoto
Istockphoto

Cosa è Lorem Ipsum

Si tratta di un riempitivo standard usato in tipografia; viene scelto perché si tratta di un testo con il quale il lettore che deve esaminare la struttura della pagina non venga distratto dal contenuto, ed è tratto dalle sezioni 1.10.32 e 1.10.33 di “de Finibus Bonorum et Malorum”, un’opera di Marco Tullio Cicerone dedicata a Bruto, in cui si tratta “dei limiti del Bene e del Male”. Il testo originale sarebbe:

[32] Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
[33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Archivi e link