Esercizi di stile
Ecco un esercizio semplice semplice che ho dovuto fare proprio ieri:
Ecco l’html:
<div class=”titolo”>
<h2><a href=”#” rel=”bookmark” title=”Titolo”>Titolo</a></h2>
</div>
e il css:
.titolo {
float: left;
display: inline;
margin-left: 6px;
padding-top: 0px;
padding-left: 20px;
background-image: url(images/tagopen.gif);
background-repeat: no-repeat;
width: 410px;
height: 35px;
}.titolo h2 a {
background-image: url(images/tagclose.gif);
background-repeat: no-repeat;
background-position: 100% 100%;
font-size: 18px;
color: #666666;
padding-bottom: 6px;
padding-right: 20px;
}
Ed ecco le due immagini usate:
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
17 Commenti
Fammi capire.
Hai preso il div .titolo e gli hai piazzato un bg a sinistra, in tal caso le ” di apertura. Poi hai preso l’href dentro il div .titolo e hai piazzato un altro sfondo, la chiusura.
Beh, indubbiamente ingegnoso, probabilmente avrei usato degli span, ma di certo non potevano cambiare colore
zì beh io sto proponendo l’esempio che ho fatto ieri e che è riproponibile anche in un titolo di post di wordpress, infatti la struttura è quella
le virgolette non potevano essere testuali? mmm…
era un font particolare…
aahha oggi ce l’avete con me? ahahahh :*
nooo giammai!
e cmq hai ragione.. la virgoletta capovolta con un font non saprei farla
c’è c’è, è il carattere html &# 8222;
scritto tutto attaccato, altrimenti me lo traduceva in virgoletta così –> „
allora l’avrei fatta testuale! hehe… però non ce l’ho con te!!!!
hihi ma no figurati.
ci sarebbe stato bisogno di un css diverso in quel caso, perchè avresti semplicemente definito colore e grandezza delle virgolette tramite uno span
il mio era un esempio applicabile anche a immagini di altro tipo
bella :*
Si poteva utilizzare la proprietà css after e before volendo e potevi risparmiare un div. Altrimenti si poteva utilizzare la prima immagine di bg sull’a come si fa sulle liste e quella di fondo sull’h2. Questo per dare delle alternative evitando di dover utilizzare il div. Ovvio che la soluzione va studiata case by case a seconda del layout/codice/pagina.
spiegaci l’after e before se ti va, può essere utile a tutti!
amch’io non ho mai utilizzato after e before, come funzionano? Sono compatibili con tutti i browser?
After e before sono due pseudoelementi css, per spiegarci come hover per il tag a dove a è elemento e hover è un pseudo elemento.Si possono quindi utilizzare con sintassi h2:before {content: url(immagine.gif)}
Hanno come scopo quello di inserire prima o dopo l’elemento un contenuto. In questo caso un’immagine. Ma è possibile inserire anche del testo o un suono nel caso si faccia un aural css.
Come compatibilità funzionano su tutti i browser eccetto ie fino alla versione 7 che io sappia per il momento. Considerato ciò utilizzerei questo metodo con un if per ie. Scusate il ritardo nella spiegazione ma è stata una luuuuuunga giornata.
Una precisazione, questo metodo può apparire meno conveniente delle due immagini di bg settate su div e tag a perchè non compatibile con ie. Ritengo però saggio valutare ogni possibile soluzione al problema, nel caso di un layout complesso o di un intervento a un sito preesistente si può essere costretti ad utilizzare altre soluzioni. Credo che il webdesigner abbia il difficile ruolo di scegliere quale tecnica sia migliore per una determinata casistica. Detto in soldoni, ricordatevi che esistono after e before oggi ie non li supporta domani magari sì.
Grazie Mauro per l’ottima risposta!
Prego, scusate il ritardo
Secondo voi non è meglio usare background in un’unica riga?
es:
background:#FFF url(immagine.jpg) 0 0 no-repeat;
Certo Mirko, in effetti hai ragione, ed è anche più completo. Io mi dimentico sempre l’ordine dei singoli valori, per quello preferisco differenziare