CSS

Layout risoluzione-dipendenti: device-width, min-width e max-width Differentemente chiamati “layout risoluzione-dipendenti”. Vediamo come realizzare un singolo sito utilizzando differenti fogli stile a seconda delle dimensioni disponibili.

Una breve introduzione all’uso dei gradienti con CSS3 I gradienti CSS3 sono sicuramente una delle rivoluzioni più interessanti dei nuovi fogli stile. Ci permettono infatti con delle righe brevi di codice, di creare l’effetto di immagini sfumate (linearmente o radialmente) con indubbi vantaggi rispetto ai vecchi metodi.

Utilizzando la seguente combinazione possiamo rendere l’opacità di un elemento cross-browser, visibile quindi da tutti. .classe { filter:alpha(opacity=50); /*ie7*/ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*ie8*/ -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } Opacity è lo standard e funziona su Firefox, Safari e Opera, filter:alpha serve per IE, -moz per le versioni vecchie di Mozilla e khtml per quelle di…

Realizzare sprite css in modo rapido senza utilizzare la proprietà background-image

Se anche tu ti sei ritrovato a sviluppare templates di siti destinati ad un target piuttosto ampio o che comunque comprenda una larga fascia di utenti utilizzatori di Internet Explorer, sicuramente ti sarai imbattuto nei più comuni problemi di compatibilità uscendone magari con trick pazzeschi per riuscire a dare una parvenza di decenza al tutto….

Lo sapevi che nel codice CSS è possibile utilizzare dei selettori come questi? ul > li p+p Che cosa fanno questi selettori CSS? Andiamo ad analizzarli brevemente aiutandoci con delle immagini (tratte da css-trick.com). Selettore Figlio Analizziamo l’esempio proposto in figura per capire la differenza tra ul li{} e ul > li {}: Come si…