Uno de los usos principales de las transiciones y efectos de CSS es en los elementos bรกsicos de cualquier pagina de Intenet, las barras de menu, los iconosย y demรกs elementos.
Este es el codigo HTML para crear unย css navigation menu
<nav> <ul role=navigation> <li><a href="index.html" accesskey=1 >Inicio</a></li> <li><a href="producto.html" acesskey=2 >Productos</a></li> <li><a href="contacto.html" acesskey=3 >Contacto</a></li> </ul> </nav>
El atributo accesskey especifica una tecla de acceso directo para activar / enfocar un elemento.
La primera vez que yo me tope con un menu y querรญa hacerlo horizontal tal como se ve en las paginas de internet, crรฉanme que sufrรญ muchรญsimo, yย no quiero que les pase a ustedes, asรญ que se los explicare como lo entendรญ,ย lo explicare simplemente con una linea de CSS que convierte los elementos de la navegaciรณn LI en
nav li {display: inline;}
Si asi de fรกcil era, crรฉanme que yo pase muchas horas buscando como hacerlo, claro esto fue hace mas de una decada.
Una barra de Navegaciรณn enchulada con CSS3
Intentaremos enchular una barra de navegaciรณn utilizando CSS,ย poniendo en pacto lo que hemos visto en post anteriores, agregando sombras y efectos.
<style> nav{ background: url(images/fondo1.jpg) no-repeat; padding: 1em 0;} nav a{text-decoration: none; color: white; padding: 1em; font-family: Futura, Arial, sans-serif; text-shadow: 2px 2px 1px rgba(0,0,0,0.6);} nav li {display: inline;} </style> <body> <nav> <ul role=navigation> <li><a href="index.html" accesskey=1 >Inicio</a></li> <li><a href="producto.html" acesskey=2 >Productos</a></li> <li><a href="contacto.html" acesskey=3 >Contacto</a></li> </ul> </nav> </body>
Ahora que les parece si lo hacemos con un poco mas de transiciones para darle un toque un poco mas dinamico a nuestra barra de navegaciรณn.
Ahora buscaremos la forma de darle un efecto de que cada una de las pestaรฑas que estamos viendo se vena unidas o mas bien a manera de pestaรฑas de un archivo, una detrรกs de otra sin espacio, es lo logramos dandole un margen negativo a la izquierda, asรญ como un efecto de selecciรณn con el mouseOver.
ul[role=navigation]{ background: #000; padding-top: 3.2rem; padding-bottom: 1rem; overflow: hidden; margin-top: 0; } ul[role=navigation] li{ display:inline; font-family: Futura, Arial, sans-serif; text-transform:uppercase; margin-left: -.5rem; } ul[role=navigation] li a{ position: relative; top:0; transition: 0.2s all linear; text-decoration: none; color: #fff; padding: 0.8rem 1.2rem 2rem 1.2rem; border: 1px solid #777; border-radius: 5px 5px 0 0; background: linear-gradient(to bottom, #dcf891, #776c54); box-shadow: 0 0 15px rgba(0,0,0,0.5); letter-spacing: 0.15rem; text-shadow: 0 1px 0 #000; } ul[role=navigation] li a:hover, ul [role=navigation] li a:focus { top: -0.6em; }
Crear un boton con CSS con sus animaciones, y efectos cool.
<style> .myButton { -moz-box-shadow: 3px 4px 0px 0px #8a2a21; -webkit-box-shadow: 3px 4px 0px 0px #8a2a21; box-shadow: 3px 4px 0px 0px #8a2a21; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24437)); background:-moz-linear-gradient(top, #c62d1f 5%, #f24437 100%); background:-webkit-linear-gradient(top, #c62d1f 5%, #f24437 100%); background:-o-linear-gradient(top, #c62d1f 5%, #f24437 100%); background:-ms-linear-gradient(top, #c62d1f 5%, #f24437 100%); background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%); background-color:#c62d1f; -moz-border-radius:18px; -webkit-border-radius:18px; border-radius:18px; border:1px solid #d02718; display:inline-block; cursor:pointer; color:#ffffff; font-family:arial; font-size:17px; padding:7px 25px; text-decoration:none; text-shadow:0px 1px 0px #810e05; } .myButton:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24437), color-stop(1, #c62d1f)); background:-moz-linear-gradient(top, #f24437 5%, #c62d1f 100%); background:-webkit-linear-gradient(top, #f24437 5%, #c62d1f 100%); background:-o-linear-gradient(top, #f24437 5%, #c62d1f 100%); background:-ms-linear-gradient(top, #f24437 5%, #c62d1f 100%); background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%); background-color:#f24437; } .myButton:active { position:relative; top:1px; } </style>
Este seria el Resultado