En poursuivant votre navigation sur le site, vous acceptez l’utilisation de cookies pour : [vous identifier / personnaliser votre expérience]. Cliquez ici Pour en savoir plus.

Script CSS : Effet Hover : Bordures Ninjas

...

ConnexionSe connecterInscriptionS'inscrire
Script mis à jour le 27/11/14

Description du script CSS :

subtile d'inversement de bordures opposées au survol d'un élément en css3

Droits d'utilisations de ce script CSS :

Je peux revendre ce script
Je peux l'utiliser plusieurs fois
Je peux l'utiliser pour mes clients
Je peux modifier ce script
Je dois citer l'auteur du script
<nav class="cl-effect-14"><a href="#">Palimpsest</a><a href="#">Ineffable</a><a href="#">Lilt</a><a href="#">Mellifluous</a><a href="#">Serendipity</a></nav> /Pré-requis css*/*,*:after,*::before {    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing: border-box;} body {font-family: 'Raleway', sans-serif;background:#002;} 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;}/* Effect 14: inversement de bordures opposées */.cl-effect-14 a {padding: 0 20px;height: 45px;line-height: 45px;}.cl-effect-14 a::before,.cl-effect-14 a::after {position: absolute;width: 45px;height: 2px;background: #fff;content: '';opacity: 0.2;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;pointer-events: none;}.cl-effect-14 a::before {top: 0;left: 0;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);-webkit-transform-origin: 0 0;-moz-transform-origin: 0 0;transform-origin: 0 0;}.cl-effect-14 a::after {right: 0;bottom: 0;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform: rotate(90deg);-webkit-transform-origin: 100% 0;-moz-transform-origin: 100% 0;transform-origin: 100% 0;}.cl-effect-14 a:hover::before,.cl-effect-14 a:hover::after,.cl-effect-14 a:focus::before,.cl-effect-14 a:focus::after {opacity: 1;}.cl-effect-14 a:hover::before,.cl-effect-14 a:focus::before {left: 50%;-webkit-transform: rotate(0deg) translateX(-50%);-moz-transform: rotate(0deg) translateX(-50%);transform: rotate(0deg) translateX(-50%);}.cl-effect-14 a:hover::after,.cl-effect-14 a:focus::after {right: 50%;-webkit-transform: rotate(0deg) translateX(50%);-moz-transform: rotate(0deg) translateX(50%);transform: rotate(0deg) translateX(50%);}

Copier/coller le code

27/11/14 : Commentaires en anglais

24/11/14 : Première version du script

Questions posées fréquemment
Vous trouverez un bouton "signaler" en haut à droite de cette fiche pour avertir le créateur d'un problème.
Demande de support

Vous rencontrez une difficulté ou avez besoin d'informations supplémentaires sur le script ? N'hésitez pas à contacter l'auteur en cliquant sur le bouton ci-dessous :

GwenWeb

Inscrit le : 24 Septembre 2014

Intérêt : non-renseigné

Voir son profil >>

Nombre de visites du script : 820

Moyenne de visites des scripts : 13


Prix de vente moyen d'un script : 3 euros

// Commentaires sur ce script CSS :

Veuillez vous inscrire et/ou vous connecter pour laisser un commentaire

Il n'y a pas encore de commentaire sur ce script.
Essayez-le et soyez le premier à laisser votre avis !

Basile : Mascotte chez 1script.frSITE EN TEST PUBLIQUE :
Bonjour, je vous rappelle que le site est en phase de test. En savoir plus ?
Script par GwenWeb
Autres scripts du même membre GRATUIT

PARTAGER CE SCRIPT

Twitter Facebook Google Plus Linkedin email

SECTIONS / CATEGORIES

NEWSLETTER : S'ABONNER

BASIL VOUS EXPLIQUE TOUT

Découvrez 1script.fr en vidéo

SUIVEZ 1SCRIPT.FR

ACCÈS