Bienvenido, invitado Ingresar o Registrarse
| | MARCADOR
| LENGUAJE:
 


marcador:
RSS 1.0     RSS 2.0

Vistas Totales: 1903 - Respuestas Totales: 5

PUBLICADO POR: ChaKaL on 10/15/2013 21:15:59


Nota: anteriormente ya habia puesto este codigo para el menu con el efecto dock pero como me an pedido un codigo para usar una imagen distinta para cada pestaña del menu lo pondre aparte pues tratare de explicar un poco el codigo para que sea mas comprensible ademas que le aumentare un pedazo de codigo mas para usar una imagen distinta en cada pestaña 


 menu dock


quien no conoce la famosa barra dock aquella que la hizo popular la empresa apple al implementarla en su sistema  creo que esa famosa barra dock es una de las cosas que mas me gusto de apple con su efecto de agrandarse y flotar hacia arriba cuando le pasabas el cursor


bueno pues basandome en esa famosa barra me dije mmmm y porque no tratar de hacer un menu con ese famoso efecto de la barra dock y pues me di a la tarea de ver si se podia logre hacer algo parecido aunque con una sola imagen  ya luego ire modificandola para tratar de usar una imagen diferente para cada pestaña del menu bueno a continuacion les dejo la imagen de como se ve y su codigo para que puedan probarlo





/* menu*/


#outer2 { 

background: transparent; 

padding-bottom:25px;

}


#outer2 .menu{

background: transparent;

background-image:url(http://i.imgur.com/FpZWVIn.png);

background-position:center;

padding:0 auto;

height:64px; 

width:64px; 

border:none;

border-radius:70px;

overflow:hidden;

-webkit-transition-duration: 0.5s;


}



#outer2 .menu2{

background: transparent;

background-image:url(http://i.imgur.com/FpZWVIn.png);

background-position:center;

border:none;

padding:0 auto;

margin:5px;

height:64px; 

width:64px; 

overflow:hidden;

border-radius:70px;

transform:scale(1.5,1.5) translateY(-25px);

-ms-transform:scale(1.5,1.5) translateY(-25px);

-webkit-transform:scale(1.5,1.5) translateY(-25px);

-webkit-transition-duration: 0.5s;


}


#outer2 .menu a { color: #FF3300; }


#outer2 .menu2 a { color: #FF0000; }







------------------------explicando el codigo--------------------------------

Primera parte del codigo

la primera parte del codigo es muy simple se refiere  a la caja o elemento donde se encuentra nuestro menu

#outer2 { 

background: transparent; 

padding-bottom:25px;

}

#outer2  es el nombre del elemento html al que le daremos estilo se le puede dar estilo a los elementos  html de tres maneras a la etiqueta en si por ejemplo el < body > "separo el nombrepara que no se borre aunque todo debe ir junto" existen igual los indentificadores ID que nos ayudan para dar estilo a una parte especifica de la pagina por ejemplo podriamos tenerun div  con un indentificador y lo podriamos llamar (en mi gran originalidad seme ocurrio llamarlo "midiv") entonces mi html quedaria asi < div =id"midiv" > tambien existen las clases  los cuales igual que los indentificadores nos ayudan para dar estilo ah una parte especifica de la pagina aunque en este caso con las clases podriamos dar estilo a un grupo de etiquetaspor ejemplo cuandole damos estilo a un menu esto nos ayuda ahorrar tiempo para no estarle dando estilo uno por uno a cada etiqueta por ejemplo podriamos darle un nombre de clase a unos parrafos para que cuando vayamos a darle color con css le  de color a todos los parrafos que tengan ese nombre de clase nuestro codigo html quedaria asi < p class ="miparrafo" > este es mi parrafo< /p > 

cuando demos estilo con css debemos tener en cuenta esto

a las etiquetas se les nombra solamente con su nombre < body >   = body

a los indentificadores ID se utiliza la almohadilla o gato segun lo conoscan antes del nombre  #midiv

y a las clases  class se utiliza un punto antes de su nombre .miparrafo


explicado esto seguimos con lo demas


background: transparent; 

padding-bottom:25px;

lo siguiente es muy simple background:transparent es muy obvioy es para dejar el fondo de ese elemento transparente

el padding  es una separacion entre el limite de la caja y el proximo elemento podemos darle padding a una parte especifica de la caja ya sea arriba  abajo izquierda o derecha

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding -left:50px;

o tambien podriamos darle padding a los cuatro lados solamente poniendo

padding:25px;

si lo que queremos es un separacion igual por los cuatro lados

en nuestro codigo usamos el padding-bottom con lo que le estamos dando una separacion a la parte de abajo de 25 pixeles si le quitaramos nuestro padding se veria dela siguiente manera


como se pueden dar cuenta al no tener padding tenemos muy pegados los dos menus

la imagen de abajo tiene 25 pixeles de padding y se nota la diferencia  pero cada quien puede cambiar estos valores segun como mejor les paresca  y se adapte mejor ah su dibujo






PUBLICADO POR: ChaKaL on 10/15/2013 23:41:44


segunda parte del codigo

aqui explicare de una manera mas simple y rapida el codigo css


#outer2 .menu{

background: transparent;

background-image:url(http://i.imgur.com/FpZWVIn.png);

background-position:center;

padding:0 auto;

height:64px; 

width:64px; 

border:none;

border-radius:70px;

overflow:hidden;

-webkit-transition-duration: 0.5s;


}


background:transparent; como vimos anteriormente nossirve para dejar el fondo transparente

background-image:url(); este es el codigo que nos sirve para colocar una imagen de fondo al elemento

background-position:center; nos  centra la imagen

padding:0 auto; no le dejamos separacion  al elemento y dejamos que se acomode automaticamente

height:64px;  le damos una altura de 64 pixeles al elemento estos valores podemos cambiarlo para acomodarlo a nuestra imagen

width:64px;  le damos un ancho de 64 pixeles al elemento igual podemos cambiarlo para acomodarlo a nuestra imagen

border:none;  le quitamos el borde para que no se vea ninguna linea

border-radius:70px; redondea el borde para dejarlo redondo esta propiedad pueden quitarla si usaran una imagen que no sea redonda

overflow:hidden; este codigo hace que la imagen  no sobresalga de la caja por lo tanto si la imagen es mayor que el tamaño de la caja no se saldra de ella aunque  tampoco se vera la imagen completa

-webkit-transition-duration:0.5s; esta es una nueva especificadion de css3 webkit es un prefijo para navegadores como chrome y safari para que funcione correctamente este codigo hace que tengamos un efecto mas suavizado  y no brusco al pasar el cursor y le damos una duracion  de medio segundo

Volver Arriba




PUBLICADO POR: ChaKaL on 10/24/2013 22:24:02


tercera parte del codigo

ahora explicare la tercera parte del codigo que ya me tarde realmente aqui es donde se hace la magia del efecto los codigos que se repiten no los volvere a explicar pues los mencione anteriormente


#outer2 .menu2{

background: transparent;

background-image:url(http://i.imgur.com/FpZWVIn.png);

background-position:center;

border:none;

padding:0 auto;

margin:5px;

height:64px; 

width:64px; 

overflow:hidden;

border-radius:70px;

transform:scale(1.5,1.5) translateY(-25px);

-ms-transform:scale(1.5,1.5) translateY(-25px);

-webkit-transform:scale(1.5,1.5) translateY(-25px);

-webkit-transition-duration: 0.5s;


}


dije que no mencionaria los codigos que se repiten pero aqui hare una aclaracion con el codigo donde colocamos la imagen

background-image:url(tu url); como dije anteriormente aqui ponemos el link de nuestra imagen si usamos la misma imagen  en los dos codigos veremos el efecto de como se desplaza hacia arriba nuestro menu como en la imagen de abajo

pero si cambiamos la imagen y ponemos una imagen diferente en cada codigo digamos en la primera tengo la calabaza  anaranjada y en el segundo  codigo pongo la imagen de otra calabaza pero esta vez roja al poner el cursor no solamente veremos el efecto de flotar hacia arriba si no que igual cambiaria de imagen como en la siguiente imagen

espero a ver sido claro en mi explicacion



ahora si aqui viene la magia

gracias a css3 fue posible hacer mas simple y facil este codigo


transform:scale(1.5,1.5) translateY(-25px);

-ms-transform:scale(1.5,1.5) translateY(-25px);

-webkit-transform:scale(1.5,1.5) translateY(-25px);

aclarare que los tres  codigos es lo mismo simplemente cambia su prefijo para que funcione correctamente en los diferentes navegadores

-ms-    para internet explorer

-webkit- para chrome y safari

aclarado esto explicare la  funcion del codigo en dos partes pues son dos ordenes en una sola

transform:scale(1.5,1.5)  este codigo de css3 lo que hace es escalar la imagen o para que entiendan mejor agranda la imagen 


translateY(-25px);  translate como significa translada el elemento de un lugar a otro izquierda (eje X) arriba (eje Y) como se daran cuenta uso una medida de pixeles negativos  esto se debe a que si uso un porcentaje normal 25px el elemento se moveria 25 pixeles hacia abajo de su posicion  pero como nosotros queremos moverlo hacia arriba  usaremos un porcentaje  en menos -25px eso aria que se mueva en el sentido contrario espero no haberlos confundido mucho 






Volver Arriba




PUBLICADO POR: ChaKaL on 10/25/2013 20:35:46


cuarta y quinta parte del codigo

las dos ultimas partes  no hay mucho que explicar es el codigo para poner color a nuestras letras del menu y de la misma manera como podemos cambiar una imagen por  otra al pasar el cursor las letras igual podemos hacerlas cambiar de color al pasar el cursor


#outer2 .menu a { color: #FF3300; } el primer color de nuestras letras 


#outer2 .menu2 a { color: #FF0000; } segundo color que cambia al pasar  el mouse


Volver Arriba




PUBLICADO POR: ChaKaL on 10/25/2013 21:50:18


ahora explicaremos como asignarle una imagen distinta para cada pestaña del menu  antes de css3 solo podiamos asignarle un estilo al primer hijo de un elemento con la propiedad first:child pero gracias a las nuevas propiedad de css3 ahora podemos darle estilo a todos por separado pondre una imagen del menu con su numero arriba correspondiente

como pueden ver en la imagen a cada pestaña del menu le corresponde un numero el numero uno corresponde al menu de inicio y las imagenes  las pondremos en los anteriores codigos  si vamos a usar una sola imagen  para cada menu es decir que al pasar el mouse la imagen no cambie  usaremos el siguiente codigo

#outer2 .menu:nth-child(2),#outer2 .menu2:nth-child(2) {

background-image:url(http://i.imgur.com/h98z92R.png);


background-repeat:no-repeat;


background-center:center;
}


 
Volver Arriba




PUBLICADO POR: BaNDOL3RO on 10/30/2013 23:18:23


Muy buen tutorial Chakal , rapidamente le di una chekeada al "Code" para ver como cambiaba la imagen de inicio y se ve claramente aqui "background-image:url(http://i.imgur.com/FpZWVIn.png);, no he leido todo el tutorial , pero esta entendible y ordenado

Volver Arriba
12/13/2017



*** Redplanetachat ***
redplanetachat