Molti programmatori, pur essendo dei geni, sono timidi.

Sono a proprio agio davanti a un pc, ma appena lasciano la postazione si sentono come dei pesci fuor d'acqua, come dei supplì lontano dalla friggitrice, come lo yin senza lo yang, come Cip senza Ciop.

up!

 

L'AVATAR TIMIDO

 É per loro che ho inventato L'AVATAR TIMIDO! (non si può sempre lavorare...)

L'avatar timido funziona così:

di default, nell'avatar si vedono solo i capelli del soggetto (chi ce li ha) che sta evidentemente lavorando a capo chino sulla tastiera.

Ma se ci passate sopra con il vostro mouse, ecco che il nerd trasale per vedere chi lo sta disturbando, per poi tornare  subito al suo lavoro al piano di sotto.

Ecco il codice:

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
<div class="circle1">
<div class="circle2">
  <img src="/images/avatar-google-sm.jpg" alt="up!">
</div>
</div>
</body>
</html>

CSS

.circle2
{
width: 300px;
height: 300px;
margin: 0 auto;
margin-top:50px;    
position: relative;
z-index: 100;
border-radius: 50%;
overflow: hidden;
}
.circle2 img {
  margin-top: 220px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}
.circle2 img:hover {
  margin-top: 0px;
}
.circle1
{
width: 300px;
height: 300px;
margin: 0 auto;
margin-top:50px;    
background-color: #3579CE;
position: relative;
z-index: 1000;
border-radius: 50%;
}

Ora, questo codice lo potete usare, copiare, vendere, spacciare come vostro ed arricchirvi a dismisura (non sarà facile), ma fatemi la cortesia, non andate a dire in giro che l'ho fatto io. Sapete, SONO TIMIDO!