Mostrar videos en capas superpuestas

Publicado el 15 de Febrero de 2011 en las categorías , , ,
Es posible que en alguna situación tengamos dos videos superpuestos, ya sea porque tengamos un diseño con pestañas, o que incluso tengamos alguna ventana que haga de popup y deba mostrarse por encima de un video. Para poder lograr que los videos se coloquen correctamente debemos pasarle el parametro “wmode” con el valor “transparent” de esta forma no darán ningún problema en Internet Explorer. Ahora bien para crear dos pestañas y que podamos tener ambos videos abiertos y cambiar entre ellos, podemos optar por la siguiente…
Leer más

Display inline-block e internet explorer.

Publicado el 06 de Febrero de 2010 en las categorías , , ,
La propiedad display de css (en la versión 2.1), puede contener un valor muy interesante, inline-block. Con este valor conseguimos que el elemento con esa propiedad se comporte como una caja, pero mostrandose en la misma línea, como si tuviese display: inline. ¿Y esto de qué nos sirve?, pues si no usamos esta propiedad tendríamos que añadirle a la caja un "float: left", por ejemplo, pero esto trae unas consecuencias, a veces, muy molestas. Por ejemplo, si queremos mostrar contenido dividido en cajas y que se muestren filas de 3 cajas, si éstas…
Leer más

Menú desplegable con CSS

Publicado el 29 de Diciembre de 2009 en las categorías ,
Vamos a crear un menú desplegable utilizando únicamente CSS. En principio no necesitaremos nada de javascript. Este menú funcionará en las últimas versiones de firefox, chrome, safari, opera, e internet explorer (versión 8). Para que funcione en Internet explorer 7 sólo necesitaremos añadir unos pequeños hacks. En explorer 6 necesitaremos utilizar javascript, puesto que este navegador no reconoce el selector ":hover" en elementos que no sean "a", los cuales no pueden contener elementos de tipo bloque dentro, si queremos cumplir los…
Leer más

Rendimiento de las URIs con datos

Publicado el 14 de Diciembre de 2009 en las categorías , ,
En el blog de Ravelrumba, han hecho un pequeño experimento con URIs de datos y su rendimiento en la carga de una página web. En el estudio sólo se ha utilizado Firefox 3.5 con la caché vacía.Los resultados no son interesantes por las respuestas que nos proporcionan, sino por las preguntas que hacen aparecer al respecto.En el experimento se han usado 31 imágenes y se han convertido a data URIs con CSSEmbed. En un caso adicional, se ha usado DURIS para separar todas las URIs de datos en un archivo CSS aparte, así, la etiqueta <head> se queda…
Leer más

Galería de fotos polaroid, sólo usando CSS 3

Publicado el 02 de Diciembre de 2009 en las categorías , , ,
Viendo la galería de fotos con estilo polaroid que han creado en el blog de Tutorialzine, la cual utiliza jQuery y un mínimo CSS3, que es una sombra "box-shadow" y una rotación que utiliza "-webkit-transform". Así hemos creado una galería de fotos similar pero que únicamente utiliza CSS 3, pero aplicando las diferentes opciones que permite este.El código XHTML creado, únicamente consta de una lista de imágenes (ul > li) con su respectivo pie de imagen: Globos Coche Niebla Molino de viento Bosque La hoja de estilos, la teneis…
Leer más

Haciendo páginas web atractivas y usables.

Publicado el 17 de Noviembre de 2008 en las categorías , , ,
El presente artículo ha sido traducido del publicado en http://www.lazycat.org/postcards/ Diseños abiertos y elegantes, menores costes de ancho de banda y un mantenimiento mucho más fácil. ¿Os gusta la idea? Leed este artículo para conocer pequeños trucos que puedes aplicar al código, diseño y contenidos de tus páginas web, y si alguno de los sitios web que visitas normalmente no da la talla, ¿porqué no comentarles que pueden hacer un cambio limpio, rápido y con muchas ventajas sobre lo que tiene? Muchas páginas web incluyen enlaces a artículos relacionados y más información. Envíales URLs que…
Leer más

Haciendo funcionar a las hojas de estilos alternativas

Publicado el 05 de Noviembre de 2007 en las categorías ,
Autor Original: Paul Sowden URL ORIGINAL: http://www.alistapart.com/stories/alternate/ TÍTULO ORIGINAL: A List Apart: CSS: Making Alternate Style Sheets Work Traducción al castellano: http://kusor.net/traducciones/ala.es/alternate/ Así, TIENES UN DOCUMENTO XHTML. Has sido un diseñador web bueno y utilizado hojas de estilos para controlar el aspecto de tu documento. Incluso has ido mucho más allá y has creado varias hojas de estilo alternativas para demostrar lo duro que eres. Estupendo. Pero ahora necesitas un modo cross–browser de elegir dinámicamente entre las distintas hojas de estilos.…
Leer más