Matteo Bayre » selettori css

Come creare un pagina portfolio in HTML 5

Matteo Bayre — Wed, 03 Dec 2014 17:16:48 +0000

Oggi impariamo a costruire una pagina portfolio con i nostri lavori in anteprima, creando una griglia di immagini con qualche appetitoso effetto grafico. Tutto attraverso il codice HTML 5 e il CSS 3.

La griglia di immagini sarà responsive, cioè sarà in grado di adattarsi alle dimensioni dello schermo, e quindi sarà ottimizzata per i dispositivi mobili come tablet e smartphone.

La griglia

Impostiamo un file HTML 5 standard index.html (vedi qui come costruire una pagina) con una sezione a tutto schermo e dei tag article con un id numerato.



	
		
		 
		
  

		Portfolio
		
		
		
	
	
          
              Pagina Portfolio

Aggiungiamo per ogni article un collegamento, un’immagine, un titolo e una descrizione, che corrispenderà all’anteprima del lavoro del nostro portfolio.


         
         
         
            Primo lavoro
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in massa ultrices 
            diam lobortis convallis quis in risus. Phasellus a augue vitae sapien condimentum 
            condimentum quis at eros. In nisl lacus, pharetra nec commodo quis, accumsan ac sapien.

Al solito creiamo le cartelle css, img e js rispettivamente per i fogli di stile, le immagini e il files javascript.

Il CSS

Creiamo ora il file css stile.css inserendo alcuni tag di reset (una serie di regole css che portano alla stato standard le regole dei fogli di stile):

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

*, *:after, *:before { 

	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
}
body, html { 
	font-size: 100%; 
	padding: 0; margin: 0;
}


body {
	font-family: Arial, sans-serif;
	color: #000;
	background: #B8DDE3;
}

a {
	color: #;
	text-decoration: none;
}
h1{
color:#000;	
}

Formattiamo poi lo stile generale per creare una griglia centrata con una larghezza e una posizione relativa. Stilizziamo article affiancando i box con display: inline-block, con larghezza 50% (per renderli adattabili alla dimensione dello schermo del browser), e impostiamo un allineamento verticale al margine superiore. Le immagini all’interno di article avranno poi una larghezza al 100%. Le immagini all’interno degli articoli avranno un’ombra impostata col box-shadow CSS 3.

section {
     max-width: 1000px;
     margin: 0 auto;
     overflow: hidden;
     position: relative;
     padding: 10px 0px 0px 10px;
   }

section article {
     vertical-align:top;
     display: inline-block;
     width:50%;
     margin-bottom:-5px;
}

section img {
    width:100%;
    height:auto;
    padding:0px;
     border:1px solid #000;
      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
{

Impostiamo il box delle informazioni del progetto che mostrerà le info sotto il box immagine una volta cliccata l’immagine. L’elemento fondamentale di questa griglia immagini che ci permette di cliccare sulla thumbnail e di visualizzare le informazioni nel box posto sotto l’immagine senza dover usare il codice jQuery è il selettore :target.

La sezione info è quella che dobbiamo visualizzare al click dell’immagine per cui allo stato di partenza dobbiamo nasconderla con la proprietà opacity:0.

Sfruttando il selettore :target possiamo rivelare l’informazione impostando un’altezza auto e una opacità pari a 1. Questo ci permette di visualizzare il box delle informazioni al momento del click.

Coi selettori nth-child invece possiamo selezionare le informazioni numero 1 di ogni 2 e le informazioni numero 2 di ogni 2; però, mentre la prima va bene così come è posizionata, la seconda deve essere spostata a sinistra aggiungendo un valore di -100%.

Per selezionare la quarta informazione di ogni 4 usiamo sempre il selettore nth-child. La prima rimane a un valore di 0, la seconda a un valore di -109%, la terza a un valore di -218%, la quarta -327%.

Infine evidenziamo il box al quale si riferisce l’informazione:

section .info {
      width: 180%;
      padding: 2em 0;
      margin: 0;
      position: relative;
      float: left;
      opacity: 1;
      height: 0;
      font-size: 0;
    }

    section .info h1 {
      margin-bottom: .5em;
	  color:#000;
    }
    section .info p {
      margin-bottom: 2em;
      line-height: 140%;
	  color:#000;
    }
    
    
    section .info .maggioriInfo {
      display: block;
	  margin-left:10px;
      margin-top: 0em;
      padding: .4em;
      background:#4C9ED9;
      color: white;
      text-decoration: none;
      text-transform: uppercase;
      text-align: center;
      font-size: 1em;
       -webkit-transition: 0.5s background-color;
       -moz-transition: 0.5s background-color;
       -ms-transition: 0.5s background-color;
       -o-transition: 0.5s background-color;
       transition: 0.5s background-color;
}
 
    section .info .maggioriInfo:hover {
      background-color: #000;
    }

     article:nth-child(2n+1) .info {
      left: 0;
    }
    article:nth-child(2n+2) .info {
      left: -100%;
    }

    section article:target .info {
      height: auto;
      font-size: 100%;
      opacity: 1;
      -webkit-transition: .4s .4s opacity;
    }

    section article:target img {
     border: 3px solid #4C9ED9; 
      -webkit-transition: .5s;
	  -moz-transition: .5s;
	  -o-transition: .5s;
    }


    section article:nth-child(4n+1) .info {
      left: 0;
    }
    section article:nth-child(4n+2) .info {
      left: -109%;
    }
    section article:nth-child(4n+3) .info {
      left: -218%;
    }
	section article:nth-child(4n+4) .info {
      left: -327%;
    }

Alla fine del foglio di stile inseriamo le regole valide per le risoluzioni di schermo differenti dal classico desktop attraverso le media queries. In questo caso @media only screen and (min-width: 701px) determinerà le regole per le risoluzioni maggiori di 701px di larghezza , mentre @media only screen and (max-width: 700px) determinerà le regole per le risoluzioni inferiori a 700px di larghezza.

Selezioniamo quindi le nostre immagini e inseriamo le informazioni per ogni progetto. E abbiamo realizzato il nostro portfolio responsive! Qui trovi l’esempio online.

Qui puoi trovare i files d’esempio della pagina portfolio. (zip)

The post Come creare un pagina portfolio in HTML 5 appeared first on Matteo Bayre.

Come creare un sito web in HTML 5

Matteo Bayre — Wed, 26 Nov 2014 14:02:41 +0000

Oggi impareremo a costruire un piccolo sito web con i codici HTML 5 e CSS 3.

Per cominciare vediamo che cosa è il linguaggio HTML.

L’HyperText Markup Language è un linguaggio di markup per documenti ipertestuali. È un linguaggio di pubblico dominio, la cui sintassi è stabilita dal World Wide Web Consortium (W3C). E’ la struttura portante di ogni sito web che vediamo sui nostri browser. Oggi la versione standard è l’HTML 5.

Il linguaggio di struttura HTML, che è utile per costruire siti o applicazioni web, è costituito principalmente dei cosiddetti tag: elementi racchiusi tra i simoboli <> che hanno delle caratteristiche diverse sia per il nome, funzione e scopo semantico. Per scrivere una qualsiasi pagina in HTML possiamo utilizzare un qualsiasi editor di testo come il Blocco Note di Windows o il TextEdit per Mac.

Creiamo la struttura base

Per fare in modo che il codice che andremo ad inserire nel file sia compreso dal browser, dovremo per prima cosa creare un file di testo con estensione .html. Per costruire il nostro primo sito web, quindi, creiamo un nuovo file vuoto con l’editor di testo e salviamo col nome di index.html all’intero di una nuova cartella che chiameremo “Il mio primo sito web”. All’interno della stessa cartella creaimo le sottocartelle “img” (per inserire le immagini del nostro sito), “css” (per i fogli di stile) che vedremo in seguito.

All’interno di questo file potrai inserire un gran numero di elementi (tag) ma l’elemento radice, dovrà essere l’elemento :


 
   Titolo della pagina
 
 
   Contenuto Pagina

Il tag principale è che contiene direttamente altri due tag: e . Il tag definisce la parte logistica e di servizio della pagina. All’interno di questa parte del file inseriremo infatti il titolo della pagina con il tag </code></strong>, ma anche altri elementi (principalmente codice per il funzionamento: css, javascript e tag meta, feed rss) che andranno a costruire altri aspetti della pagina in<strong> HTML 5</strong>. E’ la parte che verrà letta per prima dal browser che legge tutte le pagina dall’alto verso il basso. Il tag per definirsi funzionante deve essere chiuso così <code></head></code>.</p> <p>Successivamente abbiamo l’elemento <code><body></code>, il corpo della pagina, che contiene tutti gli elementi da visualizzare all’interno della pagina. Anche questo tag deve essere chiuso, come il tag principale del documento.</p> <p>All’interno del tag <code><body></code> possiamo già inserire un numero quasi infinito di tag: <code><header></code>, <code><nav></code>, <code></code> e <code></code> introdotti in HTML5, oppure i classici <code><div></code> o <code><p></code>.</p> <p>Per costruire la pagina quindi andiamo a inserire i tag strutturali (questi hanno un significato ben preciso soprattutto per essere compresi dai motori di ricerca):</p> <ul> <li><code><header></code> e <code><footer></code> : sono i tag che definiscono all’interno del <code><body></code> la testata e il piè di pagina (dell’intera pagina o di una singola sezione e possono essere ripetuti nella pagina);</li> <li><code><section></code> : identifica invece una sezione del documento e può contenere al suo interno <code><header></code> e <code><footer></code>;</li> <li><code><nav></code> : identifica il menu della pagina e può essere ripetuto, meglio non abusare perché è un elemento che interessa molto i motori di ricerca;</li> <li><code><aside></code> : identifica la classica barra laterale e serve per differenziare del contenuto non correlato alla pagina stessa.</li> </ul> <p>Nelle vecchie versioni del linguaggio HTML i tag che identificavano la struttura della pagina erano principalmente i <code><div></code>. Con HTML 5 sono stati adottati dei tag che hanno valore semantico per i motori di ricerca, in modo da identificare in modo univoco le varie parti del sito.</p><pre class="crayon-plain-tag"><!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-8"> <title>Titolo pagina sito web

Il nome del mio sito un eventuale sottotitolo

link1 link2 link3 Il DOCTYPE Il tag Doctype è il codice che identifica che tipo di documento è il file che stiamo costruendo. Questo tag serve per capire qual è la versione di HTML in cui è scritta la pagina. HEAD All’interno del tag , oltre al titolo della pagina, è necessario collegare il foglio di stile (CSS) che creeremo a breve: che determinerà la formattazione del documento HTML 5. È buona regola, inoltre, utilizzare come primo elemento nel , il meta tag charset per segnalare al browser che tutti i caratteri presenti nel documento devono essere trascritti seguendo la codifica denominata UTF-8: , mentre la lingua umana che utilizzeremo per i contenuti va specificata come attributo del tag : . Quest’ultima informazione è particolarmente utile per facilitare il compito dei motori di ricerca quando l’utente richiede pagine scritte in una specifica lingua. Costruiamo la testata del sito web Header Il tag è uno dei nuovi tag HTML 5. Non è obbligatorio inserirlo nella pagina come il tag . Il tag header in nel corpo della pagina può contenere per esempio il logo, il claim, i collegamenti ai social o il menù mentre in article/section/aside può contenere il titolo. Ad esempio: Il nome del mio sito un eventuale sottotitolo Il Menù di navigazione Il menu è un elemento fondamentale per le pagine web. E’ identificato in HTML 5 col tag . Al suo interno si crea tramite le classiche liste (, e ). Possiamo, ad esempio, creare una navigazione come questa: link1 link2 link3 Article & Section Le nuove pagine HTML 5 per individuare i blocchi di contenuti utilizzano i tag e per la tipologia di news e articoli (utilizzata per i blog ad esempio) il tag . Questo è il titolo dell’articolo Contenuto dell'articolo Footer articolo Un articolo può essere strutturato quindi con una propria testata (dove inserire il titolo) e un proprio footer. Il tag , invece, rappresenta una generica sezione del documento oppure un capitolo all’interno di un articolo. Questo è il titolo dell’articolo Capitolo 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum purus tincidunt quam posuere, in placerat eros viverra. Proin dictum, nisi vitae ultricies gravida. Footer articolo Aside Inseriamo poi la classica barra laterale con il tag : Archivio Gennaio Febbraio Marzo Per terminare la nostra struttura di pagina in HTML 5 inseriamo il footer dell’intera pagina: copyright 2014 - Mio Sito - numero telefono - info@miosito.com Ora salviamo la pagina index.html con l’editor di testo, salvandola nella cartella che abbiamo creato appositamente. Il foglio di stile Ora sempre con il nostro editor testuale creiamo un secondo file (stile.css) con estensione .css e salviamolo nella cartella css. Questo piccolo file ci consentira di stabilire la formattazione dei vari tag di struttura (il layout) che abbiamo inserito nella pagina html. Attraverso il semplice linguaggio di stile Cascading Style Sheets potremo infatti costruire la visualizzazione della pagina sul browser, stabilendo la posizione, le dimensioni, i colori, le gerarchie dei box, e dei testi della nostra pagina in HTML 5. Un regola CSS è composta da due blocchi: il selettore (ad esempio body), che serve a definire la parte del documento cui verrà applicata la regola, e il blocco delle dichiarazioni (qui sotto abbiamo width, margin, font-size), delimitato dalle parentesi graffe, che contiene le proprietà (un aspetto dell’elemento/selettore da modificare del selettore) e i valori di queste ultime. Stabiliremo ad esempio la larghezza, l’allineamento centrato, e la dimensione standard del font del corpo del nostro sito: body { width: 1200px; /* larghezza del body */ margin: 0 auto 0 auto; /* l'allineamento centrato */ font-size: 18px; /* dimensione font */ } Oppure le dimensioni dell’articolo e della barra laterale: article { width: 760px; height: 330px; float: left; background-color: #dcd6cd; padding: 10px; margin: 10px; } article header { width: 740px; height: 50px; background-color: #dcd6cd; padding: 10px; margin: 10px 0 0 0; } article section { width: 740px; height: 120px; background-color: #dcd6cd; padding: 10px; margin: 10px 0 0 0; } article footer { width: 740px; height: 50px; background-color: #dcd6cd; padding: 10px; margin: 10px 0 0 0; } aside { width: 360px; height: 330px; float: left; background-color: #C57600; padding: 10px; margin: 10px; } Il menù a tendina Inseriamo ora un effetto speciale nel nostro menu di navigazione. La struttura di un menu a tendina o dropdown è una lista con elementi annidati. Una lista per un menu è importante perchè i motori di ricerca leggono una lista di link e gli permettono di ottenere una sitemap (mappa del sito) in modo diretto e veloce anche se non completa (un sito può avere più menu o link all’interno della pagina). Home Chi Sono Portfolio Web Design Web Development Illustrations Blog Contatti Creiamo una lista non ordinata ovvero il tag ul (unordered list). All’interno scriviamo 5 elementi figli (si chiamano così perchè sono all’interno di un altro tag) della lista con il tag li (list item), dentro a questi tag inseriamo un ancora o link. Inseriamo poi dentro al terzo tag li un’altra lista ul con le relative voci li con altrettanti link di sottomenu. Ora stilizziamo il menu con il CSS 3 : ul { text-align: left; display: inline; margin: 0; padding: 15px 4px 17px 0; list-style: none; } ul li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: #FFC163; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } ul li a {color:#000;} ul li:hover { background: #555; color: #fff; } ul li ul { padding: 0; position: absolute; top: 48px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } ul li ul li { background: #555; display: block; color: #fff; text-shadow: 0 -1px 0 #000; } ul li ul li:hover { background: #666; } ul li:hover ul { display: block; opacity: 1; visibility: visible; } Alla prima lista impostiamo lo stile list-style: none per eliminare graficamente il punto della lista. Per affiancare le voci li impostiamo le regole display: inline-block; (il valore delle proprietà display che da all’elemento la caratteristica di blocco disponendolo orizzontalmente) e position: relative; (la proprietà position è fondamentale per la gestione della posizione degli elementi. Può avere valore static, posizione di default; relative, e in questo caso l’elemento viene posizionato relativamente al suo box contenitore, e la sua posizione viene impostata con le proprietà top, left, bottom o right; absolute, cioè quando il box dell’elemento viene rimosso dal flusso del documento ed è posizionato in base ai valori forniti con le proprietà top, left, bottom o right; e fixed, che come per absolute il box è sottratto al normale flusso del documento, ma il box contenitore è sempre la finestra principale del browser (viewport). Per creare l’effetto di transizione del colore impostiamo la regola CSS 3 transition (con le varie dichiarazioni per la compatibilità con tutti i browser). Per la seconda lista annidata (ul li ul), che è inizialmente nascosta con display: none; (regola che ci permette di non mostrare l’elemento) e visibility: hidden; e opacity:0; e in posizione assoluta (position: absolute;) impostiamo lo stato di hover con le regole display: block; e opacity:1; e visibility: visible; per creare al passaggio del mouse la sua apparizione. All’interno del codice CSS troviamo inoltre un’altro effetto grafico, introdotto insieme a border-radius (bordi arrotondati) coi CSS3, cioè la proprietà box-shadow che ci consente di ottenere un’ombra intorno ai vari box. Abbiamo così creato con il nostro codice la griglia in HTML 5 e il file CSS 3 per formattare la nostra prima pagina web in HTML 5. Trovi qui l’esempio online. Qui puoi scaricare l’esempio di pagina HTML5 con il file CSS allegato. (zip) The post Come creare un sito web in HTML 5 appeared first on Matteo Bayre.