Il progetto è hostato anche su GitHub, questo per avere i migliori pareri dai migliori sviluppatori e quindi migliorare il codice, renderlo il più compatibile possibile con la maggior parte dei browser e per voi avere un codice sempre aggiornato e stabile.

Segnalatemi pure eventuali bug nei vari browser, qui oppure su GitHub!

Non appena è terminato il WWDC 2013 mi si è accesa una lampadina e visto che ho trovato molto carino il background sul nuovo iPhone, ho pensato... perché no?

Quindi mi sono messo giù e lo ho realizzato completamente in CSS3 ed HTML5, ovviamente responsive (come piace a me!).

Potete scaricarvelo e fare magari le vostre prove, per osservazioni e fischi... scrivere nei commenti!

Per rimuovere l'annoso effetto ho utilizzato questa proprietà CSS3 tap-highlight-color:

In questo caso la ho applicata a qualsiasi elemento del sito tramite l'asterisco e non è proprio un rimuoverla, ma più che altro nasconderla, rendendola trasparente.

Prima di continuare so benissimo che vi starete chiedendo perché ho scritto 2018 e non altre date, ok, seguite questo blog fino al 2018 e poi lo capirete. Ma bando alle ciance e veniamo al sodo. Sono qui a chiedervi di rispondere a questo mio maxi sondaggio, ovvero quale Flat Box preferite tra le 6 combinazioni possibili che sono andato a creare.

Mi soffermo su questo argomento proprio perché mi interessa un vostro parere e credo che in primis devono essere gli utenti a giudicare se un prodotto è buono oppure no, oppure è meglio un altro piuttosto che un altro ancora.

Cercate di guardare attentamente tutti e 6 i box e giudicate quello che ritenete migliore o quello che vi piace di più. Questi box sono dei piccoli esempi ma ognuno di essi è moderno ed attuale e si differenziano l'uno dall'altro solo in qualche impercettibile cambio di ombra o di raggio.

In sintesi gli elementi che troverete in ogni box sono: colore bianco, testo, icona e foto. Andate alla Demo e poi tornate a questo articolo per dire la vostra e votare il box. Solo 1 voto consentito ovviamente e se avete consigli scrivetelo nei commenti!

Cominciamo dal tag Date, il quale può avere degli attributi di tipo min, max e step, ecco un esempio di codice nei rispettivi casi:

<input type="date" name="date" />
<input type="date" max="2013-06-01" min="2013-05-01" name="date" />
<input type="date" name="date" step="10" />

Esempio di codice per l'attributo Datetime e Datetime-local:

<input type="datetime" name="datetime" />
<input type="datetime-local" name="datetime-local" />

Se vogliamo far scegliere all'utente solo l'anno ed il mese questo è il codice giusto:

<input type="month" name="month" />

Grazie al tag Week potrete mostrare il numero della settimana, ecco il codice  giusto:

<input type="week" name="week" />

Se invece volete lavorare solo con le ore del giorno in formato 24 ore ecco il codice:

<input type="time" name="time" />

Considerazioni lato mobile

Ho testato personalmente ogni tag in esame ed ecco il risultato:

Input Date

Input Date min e max: non lavora bene sul mobile (non c'è validazione)

Input Date step: non lavora bene sul mobile (non c'è validazione)

Input Datetime

Input Datetime-local

Input Month

Input Week: non lavora bene sul mobile (non c'è validazione ed il campo non è corretto)

Input Time

Quindi, in conclusione, possiamo dire che alcuni attributi vanno usati con cautela se parliamo di dispositivi mobili. Tenetene conto quando sviluppate anche sotto questo aspetto!

Per prima cosa andate sul vostro account di Instagram e una volta loggati andate alla sezione Developers di Instagram a questo indirizzo: http://instagram.com/developer/

Ora qui dovrete cliccare su Gestisci Client in alto a destra e creare un nuovo Client tramite il pulsante verde.

Ora immettete tutti i dati che vi chiede, compreso il nome del vostro sito.

Bravi! Ora avete i dati che ci servono!

Ora il meccanismo si fa complicato ma non mollate ok? Dobbiamo trovare il nostro Access Token su Instagram e per farlo dobbiamo analizzare la URL di instagram.

Bene, ora se avete analizzato la URL, troverete 2 paroline: TUO_CLIENT_ID e TUO_SITO_REDIRECT Alla URL di cui sopra dovrete andare a sostituire con il CLIENT ID di instagram che avete precedentemente generato ed inserire la url di redirect che avete impostato, ecco un esempio di url finita:

Ovviamente quello sopra è un CLIENT ID fatto da me spremendo al tastiera

Ora arriva il bello! Andate con la vostra url nel vostro Browser ed incollatela. Magicamente vi compare una pagina su Instagram che vi chiede di autorizzare:

Autorizzate la richiesta e magicamente verrete catapultati sul dominio che avevate impostato, il vostro sito. Ma se badate bene troverete in alto nella URL un codice strano. Segnatevelo!! E' importantissimo e rappresenta il nostro Access Token e dovete salvarlo.

Di solito la stringa Access Token si compone dall'ID del vostro Instagram e poi da una stringa di sicurezza. Ora che abbiamo i dati necessari, passiamo al lavoro più semplice!

Copiate questo codice in PHP che ho preparato per voi e mettetelo nel vostro codice, esattamente dove volete che compaia il codice con la foto di Instagram, dategli una letta perché è li che dovete mettere le informazioni necessarie e non abbiate paura a modificarlo come indicato:

Ora avete capito come ottenere la ultima foto da Instagram! Alla prossima e fatemi sapere come sempre le vostre opinioni in merito e se avete suggerimenti o consigli!

Ah! Ho anche inserito la possibilità, per chi si volesse cimentare, di inserire non solo 1 foto ma anche tutte volendo! Basta cambiare il count nella variabile iniziale!

Bene, io mi sono rotto di questo problema, quindi ho deciso di inserire ed usare una semplice funzione tramite la quale, ogni volta che farò l'upload della immagine, venga fuori Link a "Nessuno".

Aprite il vostro file functions.php ed inserite a vostro piacimento, questa funzione:

/**
 * DEFAULT NONE LINK ON MEDIA UPLOAD
 *
 * @since 0.0.1
 */
update_option('image_default_link_type','none');

Ora, ogni volta che inserirete una immagine, questa non conterrà link!

Per attributi intendo tutte quelle caratteristiche che possono venirci comode quando vogliamo dare dei parametri molto specifici a questi elementi.

La sintassi principale di un tag input di tipo "text" è la seguente:

<input type="text" name="text" />

Il tag input text accetta i seguenti parametri (elencherò quelli maggiormente compatibili ad oggi):

Autofocus: permette di focalizzare fin da subito l'attenzione su questo determinato input appena si carica la pagina web.

<input type="text" autofocus="autofocus" name="text" />

Readonly: vi permette di inserire al suo interno o un placeholder oppure un testo, ma non può essere usato dall'utente e quindi resta in modalità solo visibile.

<input type="text" name="text" placeholder="Puoi solo leggerlo..." readonly="readonly" />

Maxlenght: molto comodo per limitare il numero di caratteri che andranno inseriti. Basta specificare la lunghezza massima delle lettere con un numero.

<input type="text" maxlength="10" name="text" />

Placeholder: forse il più usato, permette di inserire un testo che guiderà l'utente nel comprendere cosa dovrà inserire in quel determinato campo di testo.

<input type="text" name="text" placeholder="Testo Placeholder..." />

Required: usando questo attributo renderete il tag input obbligatorio e quindi la validazione del from stesso sarà più facile.

<input type="text" name="text" required="" />

Ci sono altri parametri (pochi) che non ho inserito ma credo sia troppo presto per cominciare ad usarli nella sintassi HTML5, infatti molti browser non sono supportati appieno da tutti gli attributi di questo tipo.

Non poteva mancare un mio esperimento dimostrativo con tanto di stile CSS3 applicato e ovviamente vi ho inserito al suo interno qualche chicca di codice, per rendervi la vita più semplice durante il vostro design di pagine web.

Per ultimo ho verificato anche se su iphone ci fosse qualche problema del caso, ma nulla da segnalare se non che vi raccomando l'uso della regola CSS per i dispositivi mobili:

* { -webkit-appearance: none; }

che NON lascia al dispositivo la visualizzazione degli elementi, ma ottempera al CSS da noi scritto.

INDICE

• Css Reset
• Rounded Corners
• Box Shadow (esterna ed interna)
• Media Queries
• Fonts Moderni e Freschi
• Selezione del testo
• Headers
• Mostrare i link per interno con i CSS
• Link con Transition

CSS Reset

Questo Snippet ci permette di dare a tutti gli elementi che useremo nel nostro sito un adeguamento di default e fare in modo che non vi siano problemi di sorta con i nuovi tag html5 su Internet Explorer.

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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 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 { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; }
:focus { outline: 0; }
body { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

Rounded Corners

Questo codice serve per arrotondare i bordi di un determinato tag

Compatibilità:IE 8 (non compatibile)

#tuodiv {
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -o-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
}

Box Shadow (esterna ed interna)

Se volete dare un effetto carino ai vostri contenitori con delle ombre allora questi sono i codici giusti. Ho inserito anche la proprietà RGBA come valore per il colore, in questo caso il nero assoluto con opacità di 80, ma potete anche utilizzare dei valori standard HEX per i colori per esempio #000000;

Compatibilità:IE 8 (non compatibile)

.shadow_esterna {
-webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,0.8);
-moz-box-shadow: 0 0 6px 0 rgba(0,0,0,0.8);
box-shadow: 0 0 6px 0 rgba(0,0,0,0.8);
}

.shadow_interna {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
-moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
}

Media Queries

Le Media Queries sono fantastiche! Permettono di alterare  il CSS in base alla larghezza dello schermo e sono usate come la migliore delle soluzioni per rendere un sito web Responsive. Vanno utilizzate ed inserite alla fine del codice principale del sito web.

Compatibilità:IE 8 (non compatibile)

/*Desktops 1860px*/
@media only screen and (min-width : 1824px) {
/*tuo codice*/
}

/*Desktops e Portatili 1280px*/
@media only screen and (min-width : 1224px) {
/*tuo codice*/
}

/*iPad (verticale - orizzontale)*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/*tuo codice*/
}

/*iPad (orizzontale)*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/*tuo codice*/
}

/*iPad (verticale)*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/*tuo codice*/
}

/*Smartphones (verticale - orizzontale)*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/*tuo codice*/
}

/*Smartphones (orizzontale)*/
@media only screen and (min-width : 321px) {
/*tuo codice*/
}

/*Smartphones (verticale)*/
@media only screen and (max-width : 320px) {
/*tuo codice*/
}

Fonts Moderni e Freschi

Ecco un elenco di fonts moderni da utilizzare per i vostri scopi!

ul { list-type: disc; }
ul li { margin-bottom: 0.625em; }
.size_font { font-size: 1em; }
.cambria {
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
}
.constantia {
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
}
.palatino {
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
}
.frutiger {
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans serif;
}
.corbel {
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
}
.segoe {
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;
}
.impact {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif;
}
.consolas {
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}

Selezione del testo

Se non vi piace il colore azzurrino di default su ogni browser potete sempre dargli un vostro colore predefinito grazie alla funzione selection.

::selection { background: #000; color: #fff; }
::-moz-selection { background: #000; color: #fff; }
::-webkit-selection { background: #000; color: #fff; }

Headers

Qui trovate un codice che vi permette di stilizzare le Headers presenti nel sito, ma potete anche personalizzarle a seconda delle vostre esigenze.

/* Headings */
h1,h2,h3,h4,h5,h6 { /*regola generale da applicare a tutte le headers per esempio un font-weight maggiore*/ }
h1 { font-size: 2.4em; line-height: 2.8em; }
h2 { font-size: 1.9em; line-height: 2.3em; }
h3 { font-size: 1.6em; line-height: 2.0em; }
h4 { font-size: 1.4em; line-height: 1.8em; }
h5 { font-size: 1.2em; line-height: 1.6em; }

Mostrare i link per intero con CSS

Per mostrare il contenuto href di un link con i CSS utilizzare questa semplice regola con gli attributi.

a:after { content: " [" attr(href) "] "; }

Link con transition

Come su questo blog ho implementato un effetto transizione su tutti i link testuali per il colore. Qui potete modificare a piacimento la durata, oppure a quale tipo di attributo volete dare la transizione. Nel caso ho scelto il color, ma potete anche darla al background.
Compatibilità:IE 8 e Ie 9 (non compatibile)

a { text-decoration: none; color:#b60000; 
-webkit-transition: color 0.5s ease-in;
-moz-transition: color 0.5s ease-in;
-o-transition: color 0.5s ease-in;
transition: color 0.5s ease-in;
}
a:hover { color: #999; }
a:active { color: #e0e0e0;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}

Per il momento questo è tutto, ma non finisce qui. Presto altre piccole chicche da usare nelle vostre creazioni e se avete ulteriori Snippets carini suggeriteli qui nei commenti!

Per questo vi consiglio di usare questa tecnica sempre con i CSS per poter avere una immagine in background in full screen, ovvero a tutto schermo.

Per prima cosa dovete inserire un div subito dopo il tag body della vostra pagina

<div id="tuodiv"></div>

e poi inserire come qui da esempio il codice CSS necessario

#tuodiv {
width: 100%; height: 100%; top: 0; left: 0;
background: url(images/bg.jpg) no-repeat center top; position: fixed; z-index: -1;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Ecco fatto! Avete risolto il vostro problema e credo che questa sia una delle soluzioni migliori, ma come sempre se avete suggerimenti sarò lieto di accettarli e condividerli!