miércoles, 1 de abril de 2015

UN MENÚ CURIOSO EN CSS




 Ya conocéis esta pagina ¿verdad? pues buscando cosas interesantes me tope con este menú, me gustó el efecto y su fácil adaptación, según sea el espacio donde se coloque el se acoplará automáticamente . 
Os indicare más o menos las cosas que podéis cambiar y las que debéis cambiar.
Los códigos los encontrareis en uno de los enlaces de este ejemplo, solo teneis que copiar en el mismo orden .
Bien, vayamos por parte en el codigo html, estais obligados para que os sea útil a poner vuestros enlaces:


<ul class="sonarmenu">
<li><a href="aquí colocareis vuestra URL o acción"(target="blank" esto es opcional por si queréis que se abra en otra pagina)>aquí como lo queréis llamar</a></li>

Estos cambios los realizareis en cada uno de los li.

Una aclaración, el tipo de letra que utiliza el menu por defecto realmente se encuentra en la primera linea del css <link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'> probar a cambiar el numero.

En el código CSS se pueden realizar multitud de cambios os indicaré algunos de ellos, tambien podéis investigar vosotros.


CÓDIGO CSS:


  • <link href='http://fonts.googleapis.com/css?family=Raleway:600 (Este es el numerito que podeis cambiar para la letra)' rel='stylesheet' type='text/css'>


<style>

ul.sonarmenu{ /* Inspired by http://tympanus.net/codrops/2013/08/06/creative-link-effects */

  • list-style: none; (seguido de esto podéis rellenar todo el menú de un color poniendo background :#el color que deseéis no os olvidéis del punto y coma si no no funcionará;)

}

ul.sonarmenu li{
 display: inline;
}

ul.sonarmenu a{
position: relative;
display: inline-block;

  •         color: black; /* podéis colocar el codigo de color que mas os gustefont color */

text-decoration: none;
margin: 10px 20px;
  • text-transform: uppercase; (lowercase  minúsculas)

font-family: 'Raleway', sans-serif; /* font style (uses Google fonts) */

  • font-size: 22px; /* (es casi obvio, el tamaño de la letrafont size */

letter-spacing: 2px; /* letter spacing */

  • border-bottom: 2px solid transparent; /* (este cambio puede resultar curioso, quitar el transparente y variar el numero y veréisBottom border style */

}

ul.sonarmenu a:hover, ul.sonarmenu a:focus{
outline: none;

  • border-bottom: 2px solid #eee; /* (cuando pasas el raton variar el número y el color hace un efecto diferente)Bottom border style on hover */

}

ul.sonarmenu a::before, ul.sonarmenu a:after{ /* shared style for two circles */

  • En esta zona podeis variar varias cosas no tengais miedo a probar.

position: absolute;
top: 50%;
left: 50%;
width: 70px; /* width of outer circle */
height: 70px; /* height of outer circle */
border: 12px double rgba(0,0,0,0.1); /* style and color of circles */

  • border-radius: 50%; /* (poner px seguido del numero y os sorprenderéis) */

content: '';
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%) scale(0.2);
-moz-transform: translateX(-50%) translateY(-50%) scale(0.2);
transform: translateX(-50%) translateY(-50%) scale(0.2);
}

ul.sonarmenu a:after{ /* inner circle specific CSS */
width: 60px; /* width of inner circle */
height: 60px; /* width of inner circle */

  • border-width: 6px;/*(el grosor del efecto )*/

-webkit-transform: translateX(-50%) translateY(-50%) scale(0.8);
-moz-transform: translateX(-50%) translateY(-50%) scale(0.8);
transform: translateX(-50%) translateY(-50%) scale(0.8);
}

ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{

  • -webkit-animation: pulsate 1.2s infinite; /* (la duración del efecto)animation name duration loop etc */
..........  El resto del código está en la pagina a la que os dirijo en el menú de ejemplo.

Y esto es todo por hoy, espero que haya quedado claro, esta ha sido por lo menos mi intención.

4 comentarios :

  1. y que nadie me deja un comentario jjooooo

    ResponderEliminar
  2. Anabel, yo no podría dejarte comentario alguno al respecto, porque lo único que he entendido ha sido el primer párrafo y la última frase :P Eso sí, se ve que te has pegado una currada para explicarlo todo detalladamente. Pero es que me llevo fatal con todo esto, y no es que yo no quiera, eh... Pero lo veo tan complicado que se me hace muy cuesta arriba. Imagina, tengo un blog, en el que escribo muy de vez en cuando, que, aparte de ser muy sencillo (más bien básico, de principiante podríamos decir :P ), no soy capaz de corregirle algunas cosillas que le pasan, como por ejemplo que he dejado de ver los comentarios. Sí, me dejaron dos, los contesté, y luego nada de nada. Hasta que me dijeron "oye, ¿Qué no lees los comentarios o qué, que te he dejado varios?". Y no han vuelto a verse nunca más. Así que imagínate lo que he podido entender yo de todo lo que has escrito aquí de códigos y todo eso :P Pero reconozco que, para el que entienda un poco, tienen que ser muy útiles todos esos consejos ;) Un saludo.

    ResponderEliminar
  3. créeme es más sencillo de lo que parece solo hay que copiar y seguir las instrucciones...un poquito de paciencia...

    ResponderEliminar