Quando realizziamo un sito potremmo volere dei contenuti che compaiono all’interno di un popup. Sul web esistono soluzioni efficaci che richiedono l’uso di librerie esterne, ma vediamo come realizzare un popup lightweight senza installare plugin aggiuntivi.
Oggi vorrei parlarvi di come sia possibile rendere il nostro sito fruibile da ciascun dispositivo mobile facendolo adattare nel modo più appropriato al display in cui sono visualizzati, sfruttando una novità di CSS3: i rem.
Uno degli elementi più interessanti nell’ambito del web design è il tooltip. Questo genere di elemento serve spesso a fornire informazioni per chiarire un tipo di funzionalità o avvisare l’utente di una reazione legata ad una sua azione (di solito un click).
Ritorniamo a parlare di conversione di una proposta grafica in una pagina HTML + CSS funzionale. Di tempo ne è passato, in questo anno tanti strumenti sono cambiati e sono emersi diversi modi di affrontare il flusso di lavoro per ottenere risultati differenti. Sono tuttavia convinto che il metodo di approccio che abbiamo visto nei post precedenti sia ancora un buon inizio per prendere confidenza con gli strumenti.
In questi giorni è uscita la versione 5.0 di Firefox, che aggiunge supporto alle animazioni CSS e miglioramenti all’interfaccia. Ho quindi deciso di dedicare un’articolo a questo browser, per quanto personalmente continui a ritenere WebKit superiore.
Oggi vi voglio proporre un piccolo esperimento che sfrutta alcune interessanti proprietà CSS che al momento sono disponibili solo su browser WebKit e senza l’apporto di codice JavaScript.
In particolare sfrutteremo le animazioni CSS e la proprietà -webkit-mask-image oltre ai gradienti CSS che invece sono supportati anche da altri brows
Nel mio ultimo post avevo accennato al blog di Lea Verou che ha realizzato una gallery di pattern CSS3. Si tratta di composizioni grafiche che possono tornare utili e che fino a qualche tempo fa avremmo dovuto applicare alle nostre pagine web tramite immagini. Ora invece possiamo iniziare a pensare di utilizzare CSS3 per tali operazioni, ricordandoci, però, di applicare una immagine di fallback per IE.
L’anno scorso avevamo analizzato la proprietà CSSgradient spiegando come realizzare un gradiente cross-browser senza l’utilizzazione di immagini.
Oggi voglio, oltre a presentare una nuova regola introdotta dal team di webkit, analizzare alcune particolari tecniche per sfruttare i gradient CSS per scopi appariscenti.
In passato il navigatore del web poteva incappare in alcuni siti internet che riportassero nel footer l’indicazione “sito ottimizzato per x alla risoluzione y” dove x era il nome di un browser (Internet Explorer, Netscape, poco altro…) e y il valore di una risoluzione grafica del monitor. Questa indicazione era spesso esclusiva e non lasciava spazio a corrette visualizzazioni su piattaforme differenti da quella indicata. E’ passato qualche anno, il problema delle visualizzazioni differenti tra browser si è notevolmente assottigliato, non cessato; la questione delle risoluzioni anche oggi può essere significativa per le varie tipologie di piattaforme in commercio.
Di questi tempi sulla rete si fa un gran parlare di Internet Explorer 9 e dell’elevato livello di supporto per gli standard web verso cui esso è stato ideato e realizzato. Uno degli eventi che la Microsoft, nel vivo di tutta questa agitazione, ha programmato, e che si svolgerà martedì 15 marzo, è un web camp intitolato “We Love Web Standards” nella descrizione del quale viene addirittura azzardato un “E con il nuovo Internet Explorer 9, tutte le potenzialità del Web possono realizzarsi in pieno!”. Preso da incontenibile euforia, dopo aver letto tutte queste belle notizie in una volta sola, decido di documentarmi meglio sul web e scoprire se effettivamente IE9 supporta gli standard.
Questo sito utilizza cookie, anche di terze parti, per inviarti pubblicità e servizi in linea con le tue preferenze. Chiudendo questo banner, scorrendo questa pagina o cliccando qualunque suo elemento acconsenti all'uso dei cookie. Read more
The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.