CSS, Webdesign

Trasformazioni sui link con CSS

C0E0DA1B-C8AE-4FF2-96ED-AB937C106B65.jpg

Quando si passa su un link, l’elemento si anima e si inclina verso sinistra o destra. Gli effetti sono stati creati solo con i CSS.

Vengono utilizzate le funzionalità di transizione specifiche per ogni browser tramite hack CSS (dato che ciascuno ha il proprio prefisso). La durata della transizione è impostata su 250 millisecondi e la scala/rotazione è impostata ad un valore predefinito.
Sempre tramite CSS, allo stato hover dei link viene assegnato un colore di sfondo, gli angoli arrotondati per migliorare l’effetto e la scala/rotazione modificati per inclinare l’elemento.

Foglio di stile CSS

.cpojer-links a	{
  display: inline-block;
  padding: 4px;
  outline: 0;
  color: #3a599d;
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  -webkit-transform: scale(1) rotate(0);
  -moz-transform: scale(1) rotate(0);
  -o-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
}
.cpojer-links a:hover {
  background: #3a599d;
  text-decoration: none;
  color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-transform: scale(1.05) rotate(-1deg);
  -moz-transform: scale(1.05) rotate(-1deg);
  -o-transform: scale(1.05) rotate(-1deg);
  transform: scale(1.05) rotate(-1deg);
}
.cpojer-links a:nth-child(2n):hover {
  -webkit-transform: scale(1.05) rotate(1deg);
  -moz-transform: scale(1.05) rotate(1deg);
  -o-transform: scale(1.05) rotate(1deg);
  transform: scale(1.05) rotate(1deg);
}

Fonte David Walsh Blog e demo.

Potrebbero Interessarti

  • Drop Shadows con CSS312 Luglio 2010 Drop Shadows con CSS3 Funziona su tutte le ultime versioni di Opera, Chrome, Safari e Firefox, anche se su Opera e Firefox le trasformazioni non sono proprio ottime come Webkit, motore di Safari e Google Chroem. Pagine HTML Foglio di stile CSS3 Fonte Nimbupani Designs e demo.
  • Colonne adattabili a layout liquido con CSS e jQuery18 Dicembre 2009 Colonne adattabili a layout liquido con CSS e jQuery Twittando mi sono ritrovato a leggere un post che analizzava il problema di avere un layout costituito da colonne "liquid" adattabile alle dimensioni della finestra del browser. In un layout fisso imposteremo una dimensione fissa per ogni colonna, occuperemo tutta la larghezza della […]
  • Applicare CSS ad un semplice elenco7 Novembre 2008 Applicare CSS ad un semplice elenco Lista verticale HTML <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item […]
  • Creare una lista a due colonne: fissa + liquida18 Dicembre 2009 Creare una lista a due colonne: fissa + liquida Questo tutorial risolverà la maggior parte dei problemi CSS che si hanno in generale quando si vuole realizzare un effetto come da titolo: una lista a due colonne di cui la prima di larghezza fissa e la seconda che occupa tutta la parte rimanente nel browser. Si crea prima la […]

Potrebbero interessarti

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.