Tecnología

Inicio

Cómo hacer una pestaña lateral en CSS

Una pestaña en el lado de una página web suele ir acompañada de una secuencia de comandos que se ejecuta cuando el usuario hace clic en él, como un formulario de extracción para poder conectarse o compartir en una red social. Antes de poder hacer eso, sin embargo, se debe crear en la ficha en sí. Con la propiedad "transformar" en CSS nivel 3 (CSS3) puede crear una ficha agradable de un enlace y girarlo hacia los lados. Aunque se trata de código CSS3 hay incluso un filtro de Internet Explorer que funciona en las versiones de seis a ocho.

Instrucciones

1 Abra la página Web en un editor - Bloc de notas funciona - y añadir un nuevo div justo después de la apertura "<body>" tag:

<Div id = "pestaña">
<a> <a href="#"> pestaña
</ Div>

Dar el div un nombre de identificación, tales como "ficha" y el lugar de texto de la pestaña dentro de las "<div>" etiquetas. Se pueda hacer clic texto colocándolo dentro de un par de etiquetas de anclaje. Reemplazar el símbolo de hash en el ejemplo con una dirección URL si necesita el enlace para que apunte a otra página Web.

2 El estilo de su ficha en CSS dándole un estilo y fronteras que se ajustan el diseño de la página de texto color de fondo:

pestaña a {

background-color: azul claro;
Color: azul marino;
frontera: 2px azul marino sólido;
font-family: Arial, sans-serif;
font-weight: bold;
padding: 20px;
}

Esta regla se aplica estilo de los estilos a las etiquetas de anclaje a fin de mantener toda la pestaña puede hacer clic. Si ha añadido el relleno sólo a la propia div pestaña, menos de la superficie de la pestaña sería hacer clic.

3 Curva de las dos esquinas superiores de la ficha, si lo desea, mediante la propiedad "frontera de radio":

border-top-izquierda-radio: 20px;
border-top-derecha-radio: 20px;

Estas dos líneas de código, cuando se añade a la "#tab una" regla de estilo, harán que la parte superior de la pestaña redondeada.

4 Gire la lengüeta de lo que se hace de lado:

transform: rotar (-90deg);
-webkit-transform: rotate (-90deg);
-moz-transform: rotar (-90deg);
-o-transform: rotate (-90deg);
-ms-transform: gira (-90deg);
Filtro: progid: DXImageTransform.Microsoft.BasicImage (rotación = 3);

La primera línea se muestra más arriba es el método estándar CSS3 de rotar un elemento HTML. A septiembre de 2011 la mayoría de los navegadores necesitan código prefijado. Los prefijos especifican cada uno un navegador a excepción de "webkit", que tanto efectos Chrome y Safari. Las versiones anteriores de Internet Explorer utilizan el filtro, se muestra la última. Todo este código debe ir dentro de la "#tab una" regla.

5 Coloque la pestaña en la parte situada más a la izquierda de la pantalla del navegador y hacer que se pegue en un lugar cuando el usuario se desplaza hacia abajo la página:

position: fixed;
izquierda: 0;
superior: 50%;
margin-top: -100px;

Mientras que usted no tiene que fijar una posición desde la parte superior de la pantalla, al hacerlo le permitirá determinar la posición vertical de la pestaña. Si usted dio su pestaña de una anchura determinada, luego se corta que el ancho por la mitad y que este número sea negativo para llegar a un valor de "margin-top." Al establecer este margen negativo con una posición de 50 por ciento "de arriba" se centrará verticalmente en la ficha en la pantalla.