CSS3 Navegación-un bello ejemplo de navegación CSS3 (2 / 3 paso)

Paso 2: Los códigos de CSS de la barra de navegación de CSS3

Propiedades CSS3 la he utilizado para crear esta barra de navegación de CSS3 son frontera-radius de CSS3, degradado CSS3, CSS3 box, sombra de texto, etc.. Creo que no es necesario para poder explicar el código de cada estilo. Sin embargo, todavía hay algunas notas para explicar las partes principales de la barra de navegación de CSS3 (cada nota está en negrita); Espero que será útil para usted.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

menú de .main {}
auto de margen: 50px;
width: 910px;
}

/ * La parte superior Logo * /
{} de la placa
texto-alinee: Centro;
width: 908px;
altura: 48px;
altura de línea: 48px;
border: 1px solid rgb(25,25,25);
frontera-radio: 4px 4px 0 0;
posición: pariente;
Background:-WebKit-linear-gradient(Top,RGB(49,50,52),RGB(12,13,14));
Background:-moz-linear-gradient(Top,RGB(49,50,52),RGB(12,13,14));
Background:linear-gradient(Top,RGB(49,50,52),RGB(12,13,14));
caja-sombra: inserción 0 1px 0 rgb (62,63,65), recuadro 1px 0 0 rgba(75,75,80,0.4);
}
Placa grupo de .btn {posición: absolute; top: 0; izquierda: 8px;}
placa .search-campo {posición: absolute; top: 0; derecha: 20px;}

/ * El signo de y parte de registro * /
placa botón {}
altura: 27px;
relleno: 0 15px;
línea-altura: 25px;
border: 1px solid rgb(15,15,15);
50%,rgb(15,16,17)) de background:-WebKit-linear-gradient(Top,RGB(67,68,68),RGB(41,42,43);
50%,rgb(15,16,17)) de background:-moz-linear-gradient(Top,RGB(67,68,68),RGB(41,42,43);
50%,rgb(15,16,17)) de background:linear-gradient(Top,RGB(67,68,68),RGB(41,42,43);
color:RGB(200,200,200);
Box-shadow: inserción 0 1px 0 rgb (77,77,78), 1px 0 rgb(42,43,44) 0;
fuente-peso: 500;
texto-sombra: 1px 1px 0 rgb(15,15,16);
-webkit-transition: color 300ms facilidad;
-moz-transición: color 300ms facilidad;
transición: color 300ms facilidad;
}
placa en .sign {frontera-radio: 14px 0 0 14px; border-derecha: 0 none;}
placa .register {frontera-radio: 0 14px 14px 0;}

/ * La insignia * /
placa .logo {}
color:RGB(255,255,255);
fuente-tamaño: 25px;
font-weight: más audaces;
texto-sombra: 0-1px 0 rgb(111,111,111), 0 - 2px 0 rgb(32,33,34);
}

/ * El cuadro de búsqueda * /
placa entrada {en}
anchura: 140px;
altura: 26px;
frontera: ninguno;
relleno: 0 0 0 30px;
frontera-radio: 13px;
color:RGB(255,255,255);
background-color:RGB(0,0,0);
Box-shadow: 0 1px 0 rgb(43,44,45);
}
placa .search-icono {}
posición: absoluto;
Display: block;
izquierda: 10px;
Top: 0;
fuente-familia: icono-búsqueda;
fuente-tamaño: 13px;
color:RGB(100,100,100);
cursor: pointer;
-webkit-transition: color 300ms facilidad;
-moz-transición: color 300ms facilidad;
transición: color 300ms facilidad;
}
/ * El efecto Hover * /
placa botón: hover {color:rgb(255,255,255);}
placa botón: active {background:-*-linear-gradient(top,rgb(15,16,17),rgb(41,42,43) 50%,rgb(67,68,68))};
placa .search-icono: hover {color:rgb(255,255,255);}

/ * La parte de la barra de navegación de CSS3 * /
NAV {fondo-color: rgb (175,175,175); border-radius: 0 4px 0 4px;}
NAV > li {flotante: izquierda;}

/ * Los elementos y botones de la barra de navegación * /
NAV > li > a {}
Display: block;
color:RGB(50,50,50);
altura: 38px;
fuente-tamaño: 13px;
font-weight: bold;
línea-altura: 38px;
relleno: 0 20px;
border: 1px solid;
margen-derecho: 1px;
border-color:RGB(254,254,254) rgb(227,227,227) rgb(210,210,210);
Background:-WebKit-linear-gradient(Top,RGB(248,248,248),RGB(184,184,184));
Background:-moz-linear-gradient(Top,RGB(248,248,248),RGB(184,184,184));
Background:linear-gradient(Top,RGB(248,248,248),RGB(184,184,184));
sombra: 0 1px 0 rgb(229,229,229);
}
NAV > li:first-niño un {frontera-radio: 0 0 0 4px;}
NAV > li:last-niño {posición: relative;}
NAV > li:last-niño > un {}
frontera-radio: 0 4px 0 0;
relleno: 0 32px 0 22px;
margen: 0;
}

/ * El marcador de triángulo del menú Drop-down * /
NAV > li:last-niño > un: antes de {}
contenido:'';
posición: absoluto;
derecha: 15px;
parte superior: 18px;
frontera: 5px solid transparentes;
border-color:RGB(50,50,50) transparente transparente transparente;
}
/ * El efecto activo de los artículos/botones de navegación y Hover * /
NAV > li:hover > un {}
border-color:RGB(255,255,255) rgb(240,240,240) rgb(221,221,221);
Background:-*-linear-gradient(Top,RGB(255,255,255),RGB(203,203,203));
}
NAV > li:not(:last-child) > a: active {background:-*-linear-gradient(top,rgb(203,203,203),rgb(255,255,255));}
NAV > li:hover ul {display: block;}

/ * El Drop-down Menu * /
más deporte {}
posición: absoluto;
ancho: 478px;
parte superior: 100%;
derecha: 0;
margen-parte superior: 13px;
relleno: 46px 0 61px 0;
border: 1px solid;
border-color:RGB(250,250,250) rgb(226,226,226) rgb(234,234,234);
frontera-radio: 4px;
Background:-WebKit-linear-gradient(Top,RGB(227,227,227),RGB(193,193,193));
Background:-moz-linear-gradient(Top,RGB(227,227,227),RGB(193,193,193));
Background:linear-gradient(Top,RGB(227,227,227),RGB(193,193,193));
color:RGB(0,0,0);
Mostrar: ninguno;
}

/ * Rellena el espacio entre la barra de navegación y menú desplegable * /
más deporte: antes de {}
contenido:'';
posición: absoluto;
anchura: 100%;
altura: 14px;
fondo: 100%;
izquierda: 0;
}

/ * Crear el marcador triángulo * /
más deporte: después de {}
contenido:'';
posición: absoluto;
fondo: 100%;
derecha: 40px;
anchura: 0;
altura: 0;
frontera: 5px solid transparentes;
color del borde: rgb(227,227,227) transparente transparente transparente;
}

/ * Uso de display: inline-block para realizar diseños de varias columnas * /
más deporte li {}
Display: inline-block;
anchura: 153px;
vertical-align: top;
}

/ * estilo de etiqueta de elemento de cada columna * /
más deporte li a {}
Display: block;
margen-izquierdo: 13px;
color:RGB(0,0,0);
fuente-tamaño: 13px;
font-weight: bold;
padding: 2px 5px;
sombra: 0 1px 0 rgb(240,240,240);
frontera-radio: 7px;
}

/ * encabezado * /
más deporte .header {}
Display: block;
posición: absoluto;
Top: 0;
izquierda: 0;
margen-izquierdo: 18px;
línea-altura: 48px;
color:RGB(33,33,33);
sombra: 0 1px 0 rgb(246,246,246);
}

/ * pie de página * /
más deporte .footer {}
Display: block;
posición: absoluto;
parte inferior: 0;
izquierda: 0;
anchura: 100%;
color:RGB(145,145,145);
texto-sombra: 0 1px 0 rgb(242,242,242);
línea-altura: 49px;
background-color:RGB(228,228,228);
frontera-radio: 0 0 3px 3px;
texto-guión: 20px;
}

/ * El botón pie de página * /
más deporte .footer {un}
posición: absoluto;
derecha: 10px;
Top: 50%;
margen superior:-15px;
color:RGB(50,50,50);
texto-sombra: 0 1px 0 rgb(247,247,247);
altura: 28px;
línea-altura: 28px;
relleno: 0 12px;
texto-guión: 0;
border: 1px solid rgb(200,200,200);
frontera-radio: 4px;
Background:-WebKit-linear-gradient(Top,RGB(252,252,252),RGB(234,234,234));
Background:-moz-linear-gradient(Top,RGB(252,252,252),RGB(234,234,234));
Background:linear-gradient(Top,RGB(252,252,252),RGB(234,234,234));
Box-shadow: inserción 0 1px 0 rgb (255,255,255), rgb(210,210,210) de 3px de 1px 0;
-webkit-transition: todos de 300ms de facilidad;
-moz-transición: todos de 300ms de facilidad;
transición: todos de 300ms de facilidad;
}

/ * La effectof de suspender los elementos * /
más deporte li a: hover {}
color:RGB(0,31,99);
Background:RGB(150,150,150);
}

/ * La libración y el efecto activo de los botones * /
más deporte .footer un: hover {color:rgb(0,31,99);}
más deporte .footer a: active {background:-*-linear-gradient(top,rgb(234,234,234),rgb(252,252,252));}

/ * icono * /
{
font-family: 'búsqueda de icono';
Fuente: url('font/icon-search.eot');
Fuente: url('font/icon-search.eot?#iefix') format('embedded-opentype'),
URL('font/Icon-Search.woff') format('woff'),
URL('font/Icon-Search.ttf') format('truetype'),
format('svg') de URL('font/Icon-Search.svg#Icon-search');
font-weight: normal;
estilo de fuente: normal;
}

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Artículos Relacionados

Cómo trabajar con tela conductora

Cómo trabajar con tela conductora

Trabajo con tela conductora es divertido y es ideal para accesorios personales, circuitos suave, e-textiles y otros proyectos que se aprovechan de sus propiedades. Aprender los conceptos básicos te ayudará a tomar decisiones de diseño y material a la
Lámpara de escritorio flotantes de brazo de Steampunk

Lámpara de escritorio flotantes de brazo de Steampunk

http://www.youtube.com/watch?v=AvsyH4dtlTEComo muchos de mis proyectos esta comenzó con el hallazgo de la posibilidad de un recipiente de latón antiguo precioso en una tienda de segunda mano. Lo pagué un dólar y salí pensando "me encanta la pátina -
Andador dinámico pasivo accionado

Andador dinámico pasivo accionado

Un robot andante es todavía un reto. Científico y los fabricantes propusieron robots basan en caminar estático (el centro de masas es siempre sobre el centro de presión), pero este tipo de marcha es muy lenta.Poca dinámica podría obtenerse utilizando
Las matemáticas y el arte en Origami - como hacer tramas geométricas

Las matemáticas y el arte en Origami - como hacer tramas geométricas

Nunca estaba intrigado por origami hasta que me topé con origami modular. Yo he doblado por algunos años ahora, y mientras no estoy todavía ningún maestro de este arte, quiero compartir al menos una parte de ella con otros. El origami es un bello eje
Pesos de mantel de puño de mono

Pesos de mantel de puño de mono

Fuertes ráfagas y ráfagas de viento pueden ser una molestia en el picnic de verano agradable o entretenimientos al aire libre. Una solución fácil y elegante es colgar pesas en el borde de un mantel para mantenerlo intacto. Aquí es cómo utilizar nudo
Reciclado plástico bandolera o cartera

Reciclado plástico bandolera o cartera

No es necesario coser!Puede utilizar una plancha para fusionar bolsas de supermercado en una lámina gruesa de plástico.Entonces puede usar ese plástico para hacer un durable, impermeable, reciclado y con estilo bandolera o cartera.He visto algunos gr
Sombra bastón navegación y gráfica de trayectorias solares.

Sombra bastón navegación y gráfica de trayectorias solares.

por tonytran2015 (Melbourne, Australia).En la década de 1950 algunos mapas tienen sus gráficos de trayectorias solares impresos junto a las brújulas rosas. Una gráfica de trayectorias solares ayuda a los usuarios del mapa (de cierta área algunos pequ
Navegación astronómica emergencia

Navegación astronómica emergencia

técnicas para ayudarle en su camino en situaciones donde no pueden utilizarse técnicas de navegación estándar y equipos.Paso 1: i. Aviso sobre el Copyright Solo estoy agregando esto para yo cubrir legalmente.Técnicas de navegación astronómica siguen
Desbloquear V7 navegación 1000 GPS

Desbloquear V7 navegación 1000 GPS

desbloquear el entorno de Windows CE en un dispositivo GPS V7 navegación 1000.El 1000 V7 es un grande, bajo costo ($300 CAN) y GPS portátil. Fuera de la caja, las características principales incluyen un sistema de navegación de MyGuide, un reproducto
Configuración del ratón para agilizar fichas navegación

Configuración del ratón para agilizar fichas navegación

le mostrará cómo configurar los botones del ratón para hacer más eficiente la navegación por pestañas. Con estas opciones que usted será capaz de moverse rápidamente entre las pestañas, crear nuevas pestañas, cerrar pestañas actuales y cerrar el webr
GoFly - parapente/muchos/deslizamiento altímetro-variómetro de su navegación para automóviles

GoFly - parapente/muchos/deslizamiento altímetro-variómetro de su navegación para automóviles

GoFly es un proyecto basado en PNA (dispositivos de navegación de coche con Windows CE), software de computadora de vuelo táctico LK8000 y variómetro (altímetro) externo de entrada basan en Arduino board y sensor de presión.¿Por qué?-Usted puede cons
Teclado con tecla de navegación

Teclado con tecla de navegación

Siendo un jugador de consola, fue duro formarme juego MAME y NES de un teclado. Así que me encontré con esta idea de añadir un joypad a mi teclado.Aquí está lo que zou necesita hacer esto:un viejo teclado de trabajoun joypad (utilicé un uno joypad de
Adaptación mapeo y navegación con iRobot Create

Adaptación mapeo y navegación con iRobot Create

este tutorial demostrará cómo hacer el mapeo y navegación con el iRobot Create para menos de $30! Y mejor aún, su diseño para ser un complemento fácil a tu robot ya existentes (robot mayordomo, alguien?).¿Por qué es cartografía útil? ¿Que siempre qui
Cómo construir un auto Robot de navegación

Cómo construir un auto Robot de navegación

este es un tutorial detallado de como realizar un robot a partir de cero y dándole la capacidad de navegar de forma autónoma en un ambiente desconocido.Se cubrirán todos los argumentos típicos involucrados en robótica: mecánica , electrónica y progra