Foto di autore con CSS e HTLM

23 settembre 2013
Buon lunedi` a tutti oggi voglio parlarvi come inserire porzioni di codice di CSS e HTLM per fare una foto di benvenuto per autore del blog.Di certo protemmo farla con Photoshop o con Mappatura, ma aggiungendo semplici codici possiamo avere anche l´effetto delle foto  sopra.
Prima di mettervi all´opera e´ buona norma fare un backup del vostro template,onde evitare spiacevoli sorprese.

Il codice originale e´ stato preso da digital ispiration.
Dobbiamo inserire solamente due codici,il primo direttamente nel template sotto <head>
<style type='text/css'>
.picture { background-color: #FFE4C4;
border: 1px solid #CCCCCC; padding: 3px;
font: 14px/1.4em The Only Exception , sans-serif; }
.picture img { border: 1px solid #CCCCCC;
vertical-align:middle; margin-bottom: 3px; }
.right { margin: 0.5em 0pt 0.5em 0.8em; float:right; }
.left { margin: 0.5em 0.8em 0.5em 0; float:left; }
</style>
il secondo nel layout del nostro template. Aggiungendo il codice su un gadget Javascript.
<div class="picture left" style="width:250px;"> <img src="URL_della_Foto" alt="about" height="150" width="250" />
Text here.
<center>
<a href="" target="_blank"><img src="http://i43.tinypic.com/350oyeg.jpg" alt="" border="0" /></a></center></div>
Personalizzazioni:
  1. La parte in rosso puo´ essere personalizzata (qui trovi altri colori) e´ il colore del frame della Polaroid
  2. La parte in blu corrisponde alla dimensione del bordo della Polaroid
  3. La parte gialla si puo´ personalizzare con un font (qui ne trovi alcuni) a piacere.
Spero che il tutorial e´ stato molto chiaro,per varie domande sono a vostra disposizione lasciate un commento sotto questo post.

Credits: foto su devianart.com

Nessun commento

Posta un commento

LIKED VIDEOS