Creare effetti e immagini con CSS3

creare-effetti-con-css3

creare-effetti-con-css3

Questo articolo vuole spiegare come costruire un post-it, senza l’uso di immagini, ma semplicemente usando il codice CSS3. Css3 ci da la possibilita’ di dare degli effetti alle nostre pagine senza l’uso e/o l’ elaborazione di immagini e questo ci entusiasma molto!

Al lavoro!

Come per tutte le pagine web, iniziamo con il codice Html:

&lt;head&gt;<br />&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;<br />&lt;title&gt;Post-it con CSS3&lt;/title&gt;<br />&lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;div id="container"&gt;<br />&lt;div&gt;<br />&lt;div&gt;&lt;/div&gt;<br />&lt;div&gt;&lt;/div&gt;<br />&lt;div&gt;&lt;/div&gt;<br />&lt;ul id="lines"&gt;<br />&lt;li&gt;&lt;/li&gt;<br />&lt;li&gt;Per favore ricordati&lt;/li&gt;<br />&lt;li&gt;di leggere tutti i giorni&lt;/li&gt;<br />&lt;li&gt;Iwebdesigner&lt;/li&gt;<br />&lt;li&gt;Grazie&lt;/li&gt;<br />&lt;li&gt;www.iwebdesigner.it&lt;/li&gt;<br />&lt;li&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;div&gt;&lt;/div&gt;<br />&lt;div&gt;&lt;/div&gt;<br />&lt;/div&gt;&lt;!--end paper--&gt;<br />&lt;/div&gt;&lt;!--end container--&gt;<br /><br />&lt;!--paper note code--&gt;<br /><br />&lt;/body&gt;

Credo che non ci sia da spiegare niente… Abbiamo richiamato il file style.css e  scritto una frase che sara’ quella visualizzata sul nostro post-it.

Questa e’ l’immagine che spiega la struttura che andremo a costruire con il CSS:

post-it-css3-spiegazione

Passiamo alla parte che piu’ ci interessa il codice del style.css:

* Reset */<br />html, body, div, span, h1, h2, h3, h4, h5, h6, p,<br />blockquote, pre, a, font, img, ul, li {<br />margin: 0;<br />padding: 0;<br />border: 0;<br />outline: 0;<br />font-size: 100%;<br />vertical-align: baseline;<br />background: transparent;<br />}<br />body {<br />line-height: 1;<br />}<br />ul {<br />list-style-type:none;<br />}<br />/* Content */<br />body {<br />background:url(bg.jpg) repeat scroll 0 0;<br />}<br />#container {<br />width:320px;<br />margin:0 auto;<br />padding-top:200px;<br /><br />}<br />.paper {<br />position:relative;<br />width:300px;<br />height:250px;<br />background-color:#faf8e5;<br />border:1px solid #e3e3e3;<br />}<br />.red-line {<br />height:250px;<br />width:1px;<br />background-color:#ef8b8b;<br />float:left;<br />margin-left:4px;<br />}<br />.first {<br />margin-left:40px;<br />}<br />ul#lines {<br />margin-top:40px;<br />}<br />ul#lines li {<br />height:28px;<br />line-height:28px;<br />color:#4d84c8;<br />font-family:Georgia;<br />font-style:italic;<br />font-size:16px;<br />width:175px;/*225*/<br />border-top:1px solid #f2f0df;<br />padding-left:75px;<br />}

Questo e’ il risultato di questa porzione di codice:

post-it-css3-senza-ornamento

Adesso abbelliamo il nostro post-it sempre e solo con l’uso di CSS3 e aggiungiamo il seguente codice su style.css:

.tape{<br />position:absolute;<br />top:-15px; right:80px;<br />width: 130px;<br />height: 35px;<br />background-color:#fff;<br />opacity:0.6;<br />border-left: 1px dashed rgba(0, 0, 0, 0.1);<br />border-right: 1px dashed rgba(0, 0, 0, 0.1);<br />-webkit-box-shadow: 0px 0px 1px 0px #cccccc;<br />-moz-box-shadow: 0px 0px 1px 0px #cccccc;<br />box-shadow: 0px 0px 1px 0px #cccccc;<br />-webkit-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);<br />-moz-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);<br />-o-transform: rotate(-2deg) skew(0,0) translate(0%,-5px);<br />transform: rotate(-2deg) skew(0,0) translate(0%,-5px);<br />}

Questo e’ il tape, il pezzo di adesivo in alto al post-it:

post-it-css3-aggiunta-adesivo

Adesso vogliamo che il nostro post-it abbia gli angoli un po’ sollevati e ombrati, per dare l’effetto del rilievo. Sempre usando il codice CSS3 inseriamo nello style css quanto segue:

.left-shadow{<br />width: 140px;<br />height: 140px;<br />bottom:-5px; left:-12px;<br />position:absolute;<br />z-index:-6;<br />display: inline-block;<br />-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);<br />-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);<br />box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);<br />-moz-transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);<br />-webkit-transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);<br />-o-transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);<br />-ms-transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);<br />transform: scale(1) rotate(274deg) translate(20px, 25px) skew(9deg, 0deg);<br />}<br />.right-shadow{<br />width: 140px;<br />height: 140px;<br />bottom:-13px; right:-4px;<br />position:absolute;<br />z-index:-6;<br />display: inline-block;<br />-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);<br />-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);<br />box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.4);<br />-moz-transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);<br />-webkit-transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);<br />-o-transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);<br />-ms-transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);<br />transform: scale(1) rotate(184deg) translate(20px, 25px) skew(9deg, 0deg);<br />}<br />

Questo e’ il codice per gli angoli destro e sinistro; ed ecco il risultato finale:

post-it-con-css3

DEMO

Spero che l’uso e la potenzialita’ del CSS3 vi appassioni e, alla prossima!

Scritto da Magoo

Magoo

Web Developer & Mobile Developer, Game Lover insomma un Nerd.
Co-founder Iwebdesigner.it, Nerdzhouse SRL.
Prendo a schiaffi la tastiera fino a quando non succede qualcosa di buono.

COMMENTA

Loading Disqus Comments ...
Loading Facebook Comments ...

ommenti

Lascia una risposta
  1. ri ciao! ^_^
    scusa per il ritardo nella risposta…
    sono una dilettante… ma mi incaponisco per fare le modifiche al mio blog…
    comunque ho inserito il css in blogger e parzialmente funziona… nel senso che il tuo funziona perfettamente ma le mie modifiche no…
    Ho voluto utilizzare il tuo css per scrivere le ricette nella parte finale del post. Ho due problemi: questo il blog di prova (http://goo.gl/bWQwO) il primo enorme che attualmente la formattazione della ricette avveniva tramite una classe #ricette (questo il blog in live http://traccedicibo.blogspot.com/) ed ora però non posso mica entrare in tutti ipost ed aggiungere l’htlm di formattazione nuovo…non è che posso in qualche modo riunire tutto lo stile css del post-it in una classe che si chiama #ricette? …se si mi aiuti?
    secondo problema… quelle stupide righette rosse sulla sinistra fanno le bizze!! mi piaciono ma non riesco a farle scendere giù… aiutino? ^_^ Graaaaazie!

    • @francesca Credo che anche blogger abbia delle pagine predefinite in PHP. Se non sbaglio vai sul tuo pannello di controllo apri il file dell’articolo in generale e da li applichi la classe. Fatto questo la stessa classe la inserisci nel CSS del tuo blog in blogger. Se non sono stato chiaro, mi puoi mandare i codici che te li sistemo al volo. Alla prossima!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *