Bordi perfetti sulle immagini
Martedì 25 Marzo 2008 - 09:34
di Cesare Lamanna
Come il post precedente, anche questo è a suo modo una segnalazione per un ripasso.
Sono intanto d’accordo con la premessa messa in testa al piccolo tutorial di DZone: sul web un bel bordo intorno alle immagini è un gran guadagno in termini estetici e di resa visiva. E metterlo con i CSS è un’operazione più che semplice. Volendo ottenere un effetto ‘doppio bordo’ (esterno e interno) basta sfruttare il padding:
img {
padding:3px;
border:1px solid #000;
}
In questo modo la parte interna delle cornice assumerà come colore quello di sfondo definito per l’elemento in cui è contenuta l’immagine. Volendo assegnare un colore diverso basterà impostare un colore di sfondo per l’immagine:
img {
background-color: #ff0;
padding:3px;
border:1px solid #000;
}
In fondo al tutorial il link ad una pagina di CSS3.info che documenta l’implementazione su Safari 3 della proprietà border-image, tramite la quale sarà possibile impostare come bordi di un elemento anche elementi grafici.
sponsor
Commenti
1
Bravo, è un ottimo tutorialino per chi comincia ed è alle prime armi, posso ripubblicarlo (con i dovuti credits) su italianwebdesign?
2
io la uso spessissimo questa tecnica già da parecchio tempo. mi sembra strano che se ne parli ancora oggi..
3
beh paolo, è una base del css, ma se non lo spieghi a chi ancora non lo conosce, può essere “vecchia” quanto vuoi… :D
4
scusate, ma che tecnica è?!? mi sembra un normalissimo utilizzo dei CSS. come l’altro Paolo non mi pare niente di particolarmente eccezionale: normale routine di css…
5
concordo sul fatto che se non si spiega in molti potrebbero non saperlo fare, ma credo che ci siano decine e decine di guide come questa. Che tra l’altro come detto sopra, non fa niente di così eccezionale..Resta comunque una buona guida e una buona idea per i neofiti.
6
Concordo con Paolo, non è che ci porti qualcosa di nuovo quest’articolo.
7
Vabbè dai, non sempre c’è qualcosa di importantissimo o di nuovissimo da scrivere.
Come succede nei giornali e tg, quando non ci sono notizie, si fanno dei servizi ;)
8
Sono molto utili guide di questo tipo per i neofiti…
Nel tutorial non è però specificato che Internet Explorer in Quirks Mode non accetta padding sulle immagini e quindi è necessario usare un appropriato doctype per attivare la standard mode.
Per il target dell’articolo mi sembra importante sottolinearlo visto che non pochi all’inizio ci sbatteranno la testa :)
9
Paolo e gli altri, qualche giorno pubblicherò una selezione delle mail che mi arrivano (per il blog e per la guida ai CSS che ho scritto anni fa per HTML.it). A quel punto avrete un’idea più chiara di cosa significa avere un pubblico tanto variegato, ecco diciamo che quello del neofita è spesso un livello avanzato :)
10
E il minimo che deve sapere un web designer, banale direi.
questo http://www.pixelpusher.biz/exa.....es/dotted/
e già qualcosa di più interesante.
http://www.pixelpusher.biz/arc......asp?id=31# - postato da Avasilcai Daniel - 25 Marzo 2008 - 22:34