Con l’avvento di alcune proprietà i CSS sono passati da semplice guida stilistica per il markup delle nostre pagine di HTML ad un vero e proprio arsenale di ispirazione per la creatività.
In questo esempio utilizzo la proprietà transform e, più esattamente, sfrutto il metodo translate().
Con un pò di esercizio possiamo imparare a sfruttare a dovere i CSS3.
Andiamo al codice, questo è l’HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Link creativi</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div class="container"> <header> <h1>Effetto link <span>Un effetto moderno per i nostri links</span></h1> </header> <section class="lista"> <nav class="effetto"> <a href="#">Limone</a> <a href="#">Fragola</a> <a href="#">Nocciola</a> <a href="#">Cioccolato</a> <a href="#">Puffo</a> </nav> </section> </div><!-- /container --> </body> </html>
Come vedete, si tratta solo di un div container con, al suo interno, un nav tag con alcuni link.
Nel foglio di stile inseriremo questi valori:
*, *:after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-family: 'Raleway', sans-serif; } nav a { position: relative; display: inline-block; margin: 15px 25px; outline: none; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 1.35em; } nav a:hover, nav a:focus { outline: none; } /* Effetto*/ .effetto a::before, .effetto a::after { display: inline-block; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; } .effetto a::before { margin-right: 10px; content: '{'; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); transform: translateX(20px); } .effetto a::after { margin-left: 10px; content: '}'; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); transform: translateX(-20px); } .effetto a:hover::before, .effetto a:hover::after, .effetto a:focus::before, .effetto a:focus::after { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); } .container > header { margin: 0 auto; padding: 2em; text-align: center; color: #89867e; } .container > header h1 { font-size: 2.625em; line-height: 1.3; margin: 0; font-weight: 300; } .container > header span { display: block; font-size: 60%; color: #ceccc6; padding: 0 0 0.6em 0.1em; } .container > section { margin: 0 auto; padding: 10em 3em; text-align: center; } .lista { background: #435a6b; }
Il risultato finale:
See the Pen Hover effect anchor tags by Eugenio (@rupertone) on CodePen.0
DEMO CSS3 LINKS
Qui trovate i files della demo
E’ tutto, bastano queste poche righe per ottenere un effetto elegante, moderno e accattivante per i nostri link 🙂
Alla prossima.