Share
Durante i precedenti screencast di questa serie abbiamo coperto molto terreno, costruendo il nostro layout reattivo (o adattivo) con la lastra Skeleton. È ora di finire tutti i dettagli finali; probabilmente la parte più dispendiosa in termini di tempo di qualsiasi sito web!
Nel corso di questi tre screencast vedremo le colonne di nidificazione, gli incorporamenti video flessibili, gli elementi di forma e le schede di Skeleton. Ci occuperemo di ogni markup mancante e completeremo il CSS allegato. C'è molto di cui parlare; ben oltre un'ora di riprese da assorbire, quindi potresti aver bisogno di prepararti mentalmente ...
In precedenza abbiamo esaminato la struttura a sedici colonne di Skeleton e il modo in cui lo stile cambia con alcune query multimediali selezionate. Stiamo andando a guardare cosa succede quando noi nido colonne l'una dentro l'altra.
In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes o YouTube!
È ora di aggiungere un po 'di carne alla nostra barra laterale. Aggiungeremo tutti i markup necessari, quindi iniziamo a disegnare le varie sezioni. Mentre lo stiamo facendo, parleremo rapidamente dello stile di Skeleton e prendiamo alcuni font web per le nostre icone.
In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes o YouTube!
Se sei serio sul web design flessibile, avrai bisogno di sapere come gestire contenuti embedded flessibili. In questo video daremo un'occhiata a rendere elastici i nostri contenuti video. C'è ancora molto da discutere sull'argomento, ma questo approccio di base è un ottimo inizio.
Una volta esaminato questo argomento, parleremo rapidamente delle schede di Skeleton e aggiungeremo dei banner promozionali che cambiano in base alle query multimediali utilizzate.
In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes o YouTube!
L'argomento degli incorporamenti flessibili è piuttosto interessante. Qui, per la tua dissezione, ci sono i frammenti di base di cui avrai bisogno per iniziare. Prima il markup:
E poi gli stili:
/ * innanzitutto trattiamo l'elemento contenitore rendendolo relativamente posizionato e definendo la sua altezza proporzionalmente alla sua larghezza - dandoci un rapporto 16: 9 * / .embed position: relativo; padding: 0; imbottitura-fondo: 56,25%; / * Rapporto 16: 9 * / altezza: 0; overflow: nascosto; / * quindi eseguiamo l'effettivo contenuto incorporato in termini di dimensioni e posizione all'interno del container * / .embed iframe, .embed object, .embed embed position: absolute; inizio: 0; a sinistra: 0; larghezza: 100%; altezza: 100%;
Nota: Nello screencast ho impostato il altezza del contenitore .embed al 56,25%, avrei dovuto impostarlo su zero (hey, stavo stancando ...) Nella maggior parte dei casi questo non avrà effetti dannosi, ma ho pensato che ne valesse la pena :)
Alcuni link utili per approfondire ciò che è stato trattato in questi video.
Accentsconagua