 Este menú en diapositiva, cuya explicación (en inglés) para su creación, encontramos en tympanus.net, tiene un interesante efecto slide: sus elementos se ocultan al ingresar en la página, permaneciendo semiescondidos, mostrándose en su totalidad cuando se pasa el cursor por las partes visibles de los mismos. 1.- Vamos a Editar HTML:  Para ponerlo en nuestro blog:
2.- Para obtener la librería jQuery localizamos la etiqueta </head>, poníéndola dentro del rectángulo de búsqueda (Search), y pegamos, entes de la misma, el siguiente código: 3.- Para animar el efecto agregamos el script correspondiente pegando, después del código anterior, el siguiente:
-85px corresponde a la parte de los elementos del menú que no se oculta. Si queremos ocultar más o menos, aumentamos o disminuimos esa cifra. Los números 500 corresponden a la velocidad del efecto slide que, en el caso del DEMO, es de 500 milisegundos. Podemos cambiarlos si queremos que la velocidad sea mas lenta o más rápida. 4.- Para darle estilo al menú localizamos la etiqueta ]]></b:skin>; y, antes de la misma, pegamos el siguiente código:
Las URLs resaltadas en rojo corresponden a las imágenes utilizadas en la DEMO. Las cambiamos por las URLs de nuestras imágenes. 6.- Finalmente, para que funcionen el CSS y el Script, Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript, y en este gadget pegamos el siguiente código HTML:
Reemplazamos todos los # por las URLs de las páginas enlazadas, y las descripción por una descripción resumida de las mismas, que se verá al poner el cursor sobre dada elemento.
|
Mostrando entradas con la etiqueta css. Mostrar todas las entradas
Mostrando entradas con la etiqueta css. Mostrar todas las entradas
27.3.13
Menú lateral con CSS y Jquery para Blogger
11.6.12
Menú vertical con CSS y jquery, efecto acordeón
Cómo poner en nuestro blog un menú vertical con CSS y jquery, efecto acordeón: 1.- Vamos a Editar HTML:
2.- Para obtener el script Jquery y la librería Jquery localizamos la etiqueta </head>, poiéndola dentro del rectángulo de búsqueda (Search) y, antes de la misma, pegamos el siguiente código:
3.- Para agregarle la funcionalidad al menú, con Jquery, pegamos, antes de la etiqueta </body>, el siguiente código:
4.- Para darle estilo al menú pegamos, antes de la etiqueta
En el anterior código CSS podemos hacer las modificaciones a los colores y caracteres del menú, para adaptarlo al diseño de nuestro blog. El color de los enlaces no los podemos modificar en el menú, ya que nos son dados por defecto en la plantilla; para modificarlo debemos acudir al Diseñador de plantillas. 5.- Guardamos plantilla. 6.- Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript; quedará bien en la barra lateral (Sidebar). En este gadget pegamos el siguiente código:
En todos los El anterior código lo podemos modificar agregando o quitando menús y submenús, según convenga a nuestro blog. En los blogs diseñados con plantillas nuevas (Diseñador de PLantillas) esta clase de menús pueden presentar problemas para su funcionamiento, ya que esas plantillas tienen estilos predefinidos. Si tenemos ese problema sigamos el siguiente procedimiento: 1.- Vamos a Editar HTML:
2.- Localizamos, poniendo dentro del rectángulo de búsqueda (Search) algunos caracteres de la misma, la siguiente línea:
...y eliminamos la parte resaltada; si aparece en otras líneas también la eliminamos. 3.- Localizamos la siguiente sección:
...que puede variar dependiendo de la plantilla, y eliminamos todo su contenido, excepto el encabezado:
4.- El contenido que eliminamos en la anterior sección lo reemplazamos por éste:
5.- Vista previa y Guardar plantilla.
|
6.2.11
Menú de Navegación Lateral con Efecto Slide
| Este menú en diapositiva, tiene un interesante efecto slide: sus elementos se ocultan al ingresar en la página, permaneciendo semiescondidos, mostrándose en su totalidad cuando se pasa el cursor por las partes visibles de los mismos.
Para ponerlo en nuestro blog:1.- Vamos a Editar HTML:
2.- Para obtener la librería jQuery localizamos la etiqueta </head> y pegamos, entes de la misma, el siguiente código:
3.- Para animar el efecto agregamos el script correspondiente pegando, después del código anterior, el siguiente:
-85px corresponde a la parte de los elementos del menú que no se oculta. Si queremos ocultar más o menos, aumentamos o disminuimos esa cifra. Los números 500 corresponden a la velocidad del efecto slide que, en el caso del DEMO, es de 500 milisegundos. Podemos cambiarlos si queremos que la velocidad sea mas lenta o más rápida. 4.- Para darle estilo al menú localizamos la etiqueta ]]></b:skin>; y, antes de la misma, pegamos el siguiente código:
Las URLs resaltadas en rojo corresponden a las imágenes utilizadas en la DEMO. Las cambiamos por las URLs de nuestras imágenes. 6.- Finalmente, para que funcionen el CSS y el Script, Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript, y en este gadget pegamos el siguiente código HTML:
Reemplazamos todos los # por las URLs de las páginas enlazadas, y las descripción por una descripción resumida de las mismas, que se verá al poner el cursor sobre dada elemento.
|
14.1.11
Menú vertical con CSS y jquery, efecto acordeón
| Del menú vertical con CSS y jquery, efecto acordeón, podemos ver un ejemplo aquí: ...y para ponerlo en nuestro blog, procedemos así: 1.- Vamos a Edición de HTML:  2.- Para obtener el script Jquery y la librería Jquery localizamos la etiqueta </head> y, antes de la misma, pegamos el siguiente código:
3.- Para agregarle la funcionalidad al menú, con Jquery, pegamos, antes de la etiqueta </body>, el siguiente código:
4.- Para darle estilo al menú pegamos, antes de la etiqueta
En el anterior código CSS podemos hacer las modificaciones a los colores y caracteres del menú, para adaptarlo al diseño de nuestro blog. El color de los enlaces no los podemos modificar en el menú, ya que nos son dados por defecto en la plantilla; para modificarlo debemos acudir al Diseñador de plantillas. 5.- Guardamos plantilla. 6.- Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript; quedará bien en la barra lateral (Sidebar). En este gadget pegamos el siguiente código:
En todos los El anterior código lo podemos modificar agregando o quitando menús y submenús, según convenga a nuestro blog.
|
10.1.11
Menú horizontal desplegable con CSS y Jquery
| En este menú horizontal cada elemento contiene un submenú vertical que se despliega, con un efecto relieve, proporcionado por la imagen gradiente utilizada como fondo.
1.- Para añadir la funcionalidad del menú incluimos la librería jQuery, para lo cual pegamos inmediatamente antes de la etiqueta
2.- También necesitaremos añadir el plugin backgroundPosition para jQuery, lo cual lograremos pegando, después del anterior código, éste:
3.- Para usar la función slideDown/slideUp y el evento hover y así mostrar el submenú correspondiente cuando pasemos el cursor por uno de los elementos del menú principal pegamos, después del anterior código, el siguiente:
4.- Con el siguiente código CSS lograremos mejorar el aspecto visual del menú. Funcionalmente podemos destacar varios aspectos:
]]></b:skin>:
En el anterior código resaltamos:
5.- El html empleado es una simple lista con otra lista anidada para cada submenú. El siguiente es el código correspondiente que pegaremos en Diseño ► Añadir un gadget del tipo HTML/Javacsript:
Este gadget lo ponemos debajo de la cabecera del blog. |
5.1.10
Tablas con bordes de líneas punteadas CSS
| Las Hojas de Estilo en Cascada (CSS) se pueden utilizar para crear un estilo que nos permita conseguir el efecto de las tablas HTML con bordes de líneas punteadas. Es necesario utilizar la propiedad de CSS "border-style" con el valor "dotted" (punteado en inglés). Además, podemos definir otros valores como pueden ser el color del borde o el color de fondo de la tabla. Se debe definir una clase aplicable a las tablas para que tengan el borde punteado. Una clase es una declaración de estilo que podemos utilizar en cualquier elemento de una página. Para ello se incluye el atributo class="nombre_clase" en la etiqueta HTML que deseamos que tenga dicho estilo. Para poner en nuestro blog tablas con este estilo, como éstas:
2.- Localizamos la etiqueta ]]></b:skin> y, antes de la misma, pegamos el siguiente código:
Esta clase tiene definida la siguiente serie de atributos de estilos: tipo de borde, ancho del borde, color del borde, color de fondo, tipo de letra y tamaño de la fuente. En nuestro caso el aplicable es el primero, border-style: dotted;, que define un borde punteado. Para utilizar el estilo tenemos que asignar a un elemento de HTML la clase generada antes. Para ello utilizamos el atributo class de HTML. Tal como se ha definido, la clase se puede utilizar en una tabla o una celda. 3.- Los siguientes códigos HTML los ponemos en donde queramos que aparezcan las tablas (entradas y/o gadgets).
Nota: Recordemos que las etiquetas <th> y </th> definen celdas de encabezamiento, pero algunos navegadores no las interpretan correctamente y no ubican el texto en el centro. Para asegurarnos de que el texto quede en el centro lo encerramos entre las etiquetas <center> y </center>.
|
4.1.10
Crear un menú dinámico con CSS
Es conveniente recordar, porque tiene que ver con el tema que vamos a tratar, que el estilo de los enlaces se define asignando su apariencia según sus distintos estados. Dichos estados son:
1.- Vamos a Editar HTML:
2.- Localizamos la etiqueta ]]></b:skin> y, antes de la misma, pegamos el siguiente código CSS:
3.- Vista previa y Guardar plantilla Las líneas del código correspondientes a los estados de los elementos del menú, y a los títulos de los mismos, están resaltadas con sus colores correspondientes. Podemos cambiarlos por los que deseemos.
4.- Vamos a Diseño ► Elementos de página ► Añadir un gadget del tipo HTML/JavaScript (debajo de la cabecera). En este gadget pegamos el siguiente código:
Cambiamos los signos # por los enlaces correpondientes y Opción 1, 2, 3, 4, por los títulos de los mismos. Ponerle fondo al menúPara ponerle fondo al menú arriba explicado, sencillamente colocamos el código HTML dentro de una tabla, así:
...en donde:
|
| Twittear |
23.12.09
Hojas de estilo en cascada (CSS)
| Las hojas de estilo en cascada (en inglés Cascading Style Sheets) CSS, es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación. Por ejemplo, el elemento de HTML <h1> indica que un bloque de texto es un encabezamiento y que es más importante que un bloque etiquetado como <h2>. Versiones más antiguas de HTML permitían atributos extra dentro de la etiqueta abierta para darle formato (como el color o el tamaño de fuente). No obstante, cada etiqueta <h1> debía disponer de la información si se deseaba un diseño consistente para una página y, además, una persona que lea esa página con un navegador pierde totalmente el control sobre la visualización del texto. Cuando se utiliza CSS, la etiqueta <h1> no debería proporcionar información sobre cómo va a ser visualizado, solamente marca la estructura del documento. La información de estilo separada en una hoja de estilo, especifica cómo se ha de mostrar <h1>: color, fuente, alineación del texto, tamaño y otras características no visuales como definir el volumen de un sintetizador de voz (véase Sintetización del habla), por ejemplo. La información de estilo puede ser adjuntada tanto como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style". Los tres tipos de estilos CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una página Web:
|
22.12.09
Ejemplos de código CSS
| Fuente | |
| Color de fondo y primer plano | |
| Texto | |
| Borde de los elementos | |
| Margen de los elementos | |
| Relleno de los elementos | |
| Posición de los elementos | |
| Efectos visuales | |
| Listas | |
| Selectores | |
| Pseudoelementos y Pseudoclases | |
| Contenido generado | |
Suscribirse a:
Entradas
(
Atom
)
