Imparate come rendere flessibili le immagini a larghezza fissa e come aggiungerle alle griglie fluide per creare un sito che risponda alla dimensione della viewport senza sacrificare l’estetica. Siamo lieti di presentarvi un estratto dal nuovo libro di Ethan (nonché il quarto titolo di A Book Apart): emResponsive Web Design/em.
Argomento: CSS
Uso di float in CSS
La proprietà float è una risorsa molto utile e potente a disposizione dei web designer/developer che lavorano con HTML e CSS. Purtroppo però, può anche causare frustrazione e confusione se non si comprende appieno il suo funzionamento. Mettete alla prova la vostra conoscenza o fate un ripasso con Noah Stokes, che esplora la teoria ed il comportamento del float e ci guida attraverso le insidie correlate all’uso di float.
Capire le CSS3 Transitions
Dai selettori avanzati al contenuto generato al ritorno trionfale dei web font e dai gradienti, alle ombre e ai bordi arrotondati fino alle animazioni vere e proprie, CSS3 è un universo di possibilità creative. Nessuno può guidarvi meglio tra queste galassie se non il famoso designer, autore e superstar dei CSS Dan Cederholm creatore dei noti SimpleBits e Dribbble. E’ con grande piacere che vi presentiamo un estratto dal suo nuovo libro (nonché seconda pubblicazione di A Book Apart), citeCSS3 For Web Designers./cite
Fondamenti del posizionamento in CSS
Se siete un front-end developer o un designer a cui piace programmare, i layout basati sui CSS sono il fulcro del vostro lavoro. Il designer/developer Noah Stokes esamina attentamente la proprietà codeposition/code di CSS per mostrarvi come può essere usata per creare dei layout standard-compliant e senza tabelle mediante i CSS. Mettete alla prova la vostra conoscenza o ripassate il posizionamento statico, relativo, assoluto, fisso ed inherited e come funzionano quando usati insieme per creare qualsiasi layout web che la mente umana possa concepire.
Validazione innovativa delle form
Quando gli utenti compilano una form per comprare uno dei vostri prodotti o per sottoscrivere un vostro servizio, volete che gli errori siano ridotti al minimo e che vengano guidati verso il successo. Ora, con gli input types e gli attributi delle form in HTML5, potete porre dei vincoli di validazione per controllare l’input dell’utente. Con le nuove pseudo-classi UI di CSS3, potete assegnare degli stili agli stati di validazione per rendere la compilazione della form più veloce e semplice.
L’aspetto di un libro
L’unione di due parole mediante un trattino e l’allineamento giustificato non sono più solo per la carta stampata. Armati di buon gusto, di uno speciale carattere Unicode chiamato “soft hyphen”, ed di un po’ di trucchi JavaScript, potete usare la giustificazione ed i trattini al loro meglio nelle pagine web. Padroneggiate lo “Zero Width Space” Usate la libreria Hyphenator.js per imbottigliare la fama, far fermentare la gloria e mettervi un tappo. Create pagine web che aggiungono i trattini e sistemano la giustificazione al volo, anche quando il layout si riposiziona in risposta ad un cambiamento nella dimensione della viewport.
Applicazioni vs. Web
C’è un’app per tutto e voi siete le persone che le creano. Ma dovete disegnare un’applicazione web-based o una app per l’iPhone? Entrambe gli approcci hanno vantaggi e svantaggi per non citare le legioni di religiosamente violenti supporter. Apple promuove entrambe gli approcci (hanno perfino dato al web un anno intero di vantaggio prima di cominciare a vendere app nello store) ed il browser Safari per iPhone supporta HTML5 e CSS3 e vanta un veloce engine per JavaScript. Tuttavia molte aziende e singoli sviluppatori con un’ottima conoscenza del web scelgono di creare delle app per iPhone invece che delle web app che possono fare la stessa cosa. Esplorate entrambe gli approcci ed imparate quasi tutto quello che dovete sapere se decidete di creare una app per iPhone-dal gergo al processo di sviluppo, ai trucchi che possono facilitare il percorso della creazione di un business con Apple.
Per favore, ingrandite quel background!
Le immagini di background che riempiono lo schermo elettrizzano gli uomini del marketing ma sprecano band nei device con piccole viewport e sono soggette a problemi di rifilatura ed allineamento nei monitor ad alta risoluzione e widescreen. Invece di usare una singola dimensione prefissata per il background, una suoluzione migliore sarebbe quella di scalare l’immagine per fare sì che vada bene nelle differenti dimensioni della finestra. E con i background CSS e le media query CSS3 possiamo proprio fare questo. Bobby van der Sluis ci mostra come.
Prefisso o Post-Hack
Vendor prefixes: segno premonitore o minaccia? Man mano che il supporto dei browser (incluso IE9) ci spinge a tuffarci in CSS3, i vendor prefixes come -moz-border-radius e -webkit-animation possono mettere alla prova le nostre coscienze e la nostra pazienza. Ma mentre a nessuno piace particolarmente scrivere la stessa cosa quattro o cinque volte di fila, i prefissi possono effettivamente accelerare l’avanzamento ed il perfezionamento di CSS. Il re dei CSS Eric Meyer ci spiega perché.
Approfittare di HTML5 e CSS3 con Modernizr
Anni fa, il supporto a CSS da parte dei browser era lacunoso e pieno di bachi: solo i web designers più audaci usavano i CSS per i layout. Oggi, i layout CSS sono una cosa normale e ogni browser li supporta. Ma lo stesso non vale per CSS3 e HTML5. Qui entra in gioco Modernizr di Faruk Ateş. Questa libreria JavaScript open source rende facile il supporto a differenti livelli di esperienze, basandosi sulle capacità del browser di ciascun visitatore. Scoprite come approfittare di tutto ciò che è già implementato di HTML5 e CSS3 in determinati browser, senza sacrificare il controllo sull’esperienza utente negli altri browser.
