Giovanni Bisanti – www.giovannibisanti.com

Giovanni Bisanti è un fotografo di Varese che ha l’obiettivo di catturare immagini uniche ed irripetibili che rappresentino tutti i momenti emozionanti del matrimonio grazie allo stile reportagistico.

La proprietà CSS3 che tratterò in questo articolo è: Gradient e rappresenta una delle più rivoluzionarie proprietà introdotte (non ancora in forma definitiva) nel W3C per alleggerire il nostro sito, andando a sostituire immagini di sfondo composte con gradienti di più colori, con due righe di codice css.

Vediamo subito come si presenta una sfumatura di tipo linear:

La sintassi è la seguente:

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

A prima vista sembra molto complessa perchè nonostante questa proprietà sia supportata dalla maggior parte dei browser, quest’ultimi hanno bisogno della solita sintassi proprietaria almeno fino a quando la proprietà Gradient non verrà standardizzata.
Più avanti vi fornirò il link ad un utilissimo strumento web per realizzare grandienti in CSS3 utilizzando una tavolozza come quella di Photoshop, ma prima voglio mostrare un’esempio di un’altro tipo di gradiente che si può creare con questa funzione.

Ecco un’esempio di sfumatura radial:

La sintassi è la seguente:

background: #1e5799; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #1e5799 0%, #a9cbe5 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(100%,#a9cbe5)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #1e5799 0%,#a9cbe5 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #1e5799 0%,#a9cbe5 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #1e5799 0%,#a9cbe5 100%); /* IE10+ */
background: radial-gradient(center, ellipse cover,  #1e5799 0%,#a9cbe5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#a9cbe5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

La gradazione lineare può essere orizzontale, verticale e obliqua mentre la gradazione radiale ha origine al centro e si estende verso l’esterno.

Due ottimi web tools gratuiti che hanno lo scopo di facilitare la realizzazioni di effetti di questo tipo sono ColorZilla, che presenta una grafica che ricorda molto quella di Photoshop e CSS3 Gradient Generator.

Tra i due personalmente preferisco ColorZilla e voi? Provateli e poi lasciatemi un commento!

Ogni tema WordPress segue una struttura ben ordinata per la corretta visualizzazione del sito. Nelle ultime versioni è diventato sempre più semplice configurare il proprio template grazie alla gerarchia di WordPress.
C’è da precisare che l’unico file necessario al funzionamento del tema è index.php.

Nel corso della realizzazione di un template personalizzato può tornare molto utile conoscere l’ordine che WordPress usa per visualizzare le varie pagine del blog.

La seguente immagine sintetizza proprio questa gerarchia:

Da questa immagine si deduce, ad esempio, che se la pagina home.php esiste il blog userà quel file come prima pagina del sito, altrimenti utilizzerà il file denominato index.php nella directory del tema scelto.

Se l’articolo è stato utile o avete domande in merito potete lasciare un commento di seguito.

Torniamo a parlare di CSS e di nuove Proprietà CSS3 interessantissime, come quella di oggi.

La proprietà CSS3 di oggi è Transform: consente di ruotare, scalare, inclinare e muovere orizzontalmente un elemento, ma prendiamo in considerazione una funzione per volta:

CSS3 Transform:Rotate

Come dice la parola stessa consente la rotazione di un’elemento mediante un valore espresso in gradi:

#ruota {
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
}

CSS3 Transform: Scale

Tramite l’utilizzo di un valore assoluto questa funzione permette di scalare un’elemento:

#scala {
    transform: scale(0.5,1.0);
    -webkit-transform: scale(0.5,1.0);
    -o-transform: scale(0.5,1.0);
    -moz-transform: scale(0.5,1.0);
}

Il primo valore riguarda il ridimensionamento orizzontale e il secondo valore il ridimensionamento verticale.

CSS3 Transform: Skew

Utilizziamo questa funzione per inclinare l’elemento attribuendo un valore espresso in gradi.

#distorci {
    transform: skew(10deg, 5deg);
    -webkit-transform: skew(10deg, 5deg);
    -o-transform: skew(10deg, 5deg);
    -moz-transform: skew(10deg, 5deg);
}

CSS3 Transform: Translate

Consente di muovere un elemento di un certo numero di pixel sull’asse orizzontale

#sposta {
   transform-origin: 10px 30px;
   -moz-transform-origin: 10px 30px;
   -webkit-transform-origin: 100% 30%;
   -o-transform-origin: 10px 30px
}

Con la nascita dell’HTML5, questa proprietà sarà sempre più usata e abbinata alla proprietà CSS3 Transition, un’altra proprietà CSS3 che abbiamo trattato il mese scorso necessaria a far muovere gli elementi per creare interessanti animazioni e presto standardizzata per tutti i browser, nel frattempo per una corretta visualizzazione vanno utilizzati i soliti prefissi proprietari.

Per finire voglio segnalare questo bellissimo tools 3Dtrasforms realizzato da Western Civilisation, per realizzare un codice pulito e un risultato ottimale.

Ecco di nuovo l’appuntamento mensile con Font Design, nel quale presentiamo un nuovo font da scaricare gratuitamente.

Il Font Design di oggi è: Jagged (download)

Il font Jagged realizzato da Hanifa Rinaldi è squadrato e ha la particolarità di avere degli angoli alle estremità destra e sinistra nel lato superiore della singola lettera.

Ecco tutti i caratteri di questo font:

Nel file Jagged.zip che avete scaricato troverete il font in formato .tff, c’è da precisare che questo font presenta solo caratteri maiuscoli, numeri e alcuni simboli.

“Sono soddisfatto del mio nuovo sito, rappresenta molto meglio la mia attività di medico professionista. La presenza su Facebook, Twitter e LinkedIn mi dà una visibilità molto maggiore rispetto a prima. La comunicazione con Simone è stata ottima, sempre disponibile e pronto a revisionare il progetto in base alle mie esigenze.”

Dr. Roccalto Salvatore – www.roccaltosalvatore.com

Il dottor Roccalto Salvatore è uno specialista ortopedico e chirurgo vertebrale umbro che opera nella provincia di Terni.

Torna anche oggi, come ogni mese, la rubrica dedicata alle nuove Proprietà CSS3.

La proprietà CSS3 di oggi è: Transition, forse uno dei più apprezzati strumenti della nuova versione dei CSS. A differenza delle altre proprietà che vengono quasi tutte usate per sostituire le immagini, la proprietà CSS3 transitions viene usata in sostituzione di animazioni in flash o javascript. La parola stessa lascia intendere una transizione da una condizione a un’altra, ma anche un movimento di oggetti da un posto a un’altro.

Vediamo subito come si presenta, posiziona il mouse su box qui sotto per vedere l’animazione:

Effetto animato con CSS3 Transition

La sintassi:

#movimento {
	display: inline-block;
	border: 1px solid #000;
	padding: 10px;
	background: #91C8FF;
	height: 20px;
	opacity: 0.3;
	-moz-transition: all 1s ease-out;
	-webkit-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
 
#movimento:hover {
	margin-left: 40px;
	opacity: 1;
}

Analizzando questo esempio possiamo notare 2 cose: la prima è la transazione del colore di sfondo da un’opacità del 30% a un’opacità al 100%, la seconda è il movimento del box di 40px verso destra.
Queste due transazioni sono state possibili grazie alla proprietà transition alla quale ho attribuito i seguenti valori: “all 1s ease-out;”

• Il primo valore indica le caratteristiche da modificare, nel nostro esempio specificando all la transazione terrà in considerazione tutte le caratteristiche nella transazione.
• Il secondo valore è il tempo di transazione, nell’esempio precedente 1s indica che la transazione durerà un secondo
• Il terzo valore è la funzione di timing ovvero la velocità della transazione durante la sua durata, nel nostro esempio abbiamo scelto ease-out che indica una partenza veloce e un’arrivo lento, gli altri valori sono:
  ease: partenza e arrivo lenti, velocità maggiore a metà dell’animazione;
  ease-in: partenza lenta e arrivo veloce (effetto opposto a ease-out);
  ease-in-out: molto simile all’effetto “ease”;
  linear: nessuna variazione di velocità;

Il w3c ha rilasciato la lista delle proprietà css interessate alle animazioni con transition.

• Vuoi iscriverti ai commenti per questo post?
• Condividi su Facebook
• Tweetalo!
• Pubblicalo su Google Buzz
• Pubblicalo su MySpace
• Condividi su del.icio.us
• Condividi su OkNotizie
• Vuoi segnalarlo via mail ad un amico?
Get Shareaholic
]]> http://www.simonedesign.it/blog/css3-transition-animazioni-senza-flash/feed/ 0 http://www.simonedesign.it/blog/css3-transition-animazioni-senza-flash/ http://feedproxy.google.com/~r/Simonedesign/~3/QkU_yhpt4tQ/ http://www.simonedesign.it/blog/inviare-sms-gratis-google/#comments Wed, 21 Sep 2011 15:20:26 +0000 Simone Forti http://www.simonedesign.it/blog/?p=1871

Da qualche tempo a questa parte Google si è imposto anche sul mercato dei telefoni mobili e di conseguenza anche sui servizi di messaggistica tramite cellulare.

Con Google Calendar ad esempio è possibile ricevere sul proprio cellulare SMS che ci ricordano i nostri impegni, riunioni, eventi, ecc… Basta associare il proprio numero telefonico all’account GMail e il gioco è fatto.

Recentemente ho scoperto un’ulteriore servizio di Google relativo alle mappe per comunicare un determinato indirizzo o località geografica ad amici e parenti gratuitamente tramite SMS. Basta cercare il luogo o l’indirizzo che ci interessa inviare via SMS dal sito maps.google.it, cliccare sul simbolo rosso che identifica la zona scegliere “altro” appena e poi invia, come raffigurato nella seguente immagine:



 

Dopo di che si aprirà un pop-up nel quale selezioneremo la voce “SMS”; l’unica cosa che rimane da fare sarà quella di inserire il numero telefonico della persona a cui intendiamo comunicare l’indirizzo:



 

Il messaggio inviato è gratuito e la persona che lo riceverà leggerà come mittente “Google” e il messaggio sarà simile al seguente:

“Google Maps per cellulari
Anfiteatro Flavio – Colosseo
Piazza del Colosseo, 1
00184 – Roma
http://m.google.com/u/m/url”
• Vuoi iscriverti ai commenti per questo post?
• Condividi su Facebook
• Tweetalo!
• Pubblicalo su Google Buzz
• Pubblicalo su MySpace
• Condividi su del.icio.us
• Condividi su OkNotizie
• Vuoi segnalarlo via mail ad un amico?
Get Shareaholic
]]> http://www.simonedesign.it/blog/inviare-sms-gratis-google/feed/ 0 http://www.simonedesign.it/blog/inviare-sms-gratis-google/ http://feedproxy.google.com/~r/Simonedesign/~3/NZz38wcyxFs/ http://www.simonedesign.it/blog/font-design-morning-glory/#comments Tue, 13 Sep 2011 14:41:37 +0000 Simone Forti http://www.simonedesign.it/blog/?p=1897

Anche questo mese ritorna l’appuntamento con Font Design, nel quale viene presentato mensilmente un nuovo font da scaricare gratuitamente.

Il Font Design di oggi è: Morning Glory (download)

La realizzazione di questo font è opera del pittore, grafico e designer tipografico Armesilla Luis.
La particolarità di questo carattere è l’incastro di due o più elementi allo scopo di formare ogni lettera. Sicuramente idoneo per titoli sgarcianti, ma non certo per testi o sottotitoli.

Ecco alcuni esempi:



Possono essere usate una grandissima varietà di combinazioni di colori per un design accattivante come mostra il seguente video di presentazione al font Morning Glory in full HD:

• Vuoi iscriverti ai commenti per questo post?
• Condividi su Facebook
• Tweetalo!
• Pubblicalo su Google Buzz
• Pubblicalo su MySpace
• Condividi su del.icio.us
• Condividi su OkNotizie
• Vuoi segnalarlo via mail ad un amico?
Get Shareaholic
]]> http://www.simonedesign.it/blog/font-design-morning-glory/feed/ 0 http://www.simonedesign.it/blog/font-design-morning-glory/ http://feedproxy.google.com/~r/Simonedesign/~3/LZDU4OdKVPc/ http://www.simonedesign.it/blog/doodle-google-belli-2011/#comments Mon, 05 Sep 2011 09:37:01 +0000 Simone Forti http://www.simonedesign.it/blog/?p=1624

Da un anno a questa parte il motore di ricerca di Mountain View ci ha abituato a continue sorprese relative al design del logo “Google” in occasione di eventi particolari, ad esempio l’8 e 9 ottobre 2011 inaugura il primo doodle video per festeggiare i 70 anni di Jonh Lennon e in seguito sviluppo loghi animati sempre più complessi con l’ausilio di HTML5, CSS e JavaScript come ad esempio il doogle animato del 41° Earth Day.

Google conserva tutti i doodle che sviluppa, per vederli tutti clicca qui

Ecco una carrellata dei migliori Google doodle del 2011:

 

8 Febbraio 2011 – 183° Compleanno di Jules Verne



 

11 Febbraio 2011 – 164° Complanno di Thomas Edison



 

15 Marzo 2011 – 150° Anniversario dell’Unità d’Italia



 

31 Marzo 2011 – 200° Compleanno di Robert Bunsen



 

12 Aprile 2011 – 50th Anniversary of the First Man in Space



 

16 Aprile 2011 – 122° Compleanno di Charlie Chaplin



 

22 Aprile 2011 – Il Giorno della Terra



 

1 Maggio 2011 – 160° Anniversario della Prima Esposizione Universale



 

11 Maggio 2011 – 117° Compleanno di Martha Graham



 

9 Giugno 2011 – 96° Compleanno di Les Paul



 

Sinceramente il mio preferito è il doodle dell’11 Maggio per festeggiare il compleanno di Martha Graham, e a voi quale doodle piace di più?

• Vuoi iscriverti ai commenti per questo post?
• Condividi su Facebook
• Tweetalo!
• Pubblicalo su Google Buzz
• Pubblicalo su MySpace
• Condividi su del.icio.us
• Condividi su OkNotizie
• Vuoi segnalarlo via mail ad un amico?
Get Shareaholic
]]> http://www.simonedesign.it/blog/doodle-google-belli-2011/feed/ 1 http://www.simonedesign.it/blog/doodle-google-belli-2011/