21 mayo 2009
Archivos del blog
Crear cubos 3D con CSS
CSS cada vez avanza más. Se van creando propiedades nuevas que anteriormente eran impensables. Webkit hace poco estaba haciendo una serie de propuestas para CSS3, CSS Animations. Algunas de estas propiedades ya están siendo soportadas por los navegadores. Una de las más modernas consiste en crear cubos 3D con CSS Transformations. dtsv.dtse_post_2220_permalink = ‘http://www.cssblog.es/crear-cubos-3d-con-css/’; dtsv.dtse_post_2220_title … Lee más!
Multiple backgrounds con CSS3
Con CSS2 solo podíamos tener una imagen de fondo por cada elemento. Pero todo evoluciona y ahora con CSS3 podemos aplicar varias imágenes de fondo en un mismo elemento. Para ello debemos aplicar este código: background: url(fondo1.gif) top left no-repeat, url(fondo2.jpg) top 11px no-repeat, url(fondo3.gif) bottom left no-repeat, url(fondo4.gif) left repeat-y; Si nos fijamos es … Lee más!
Resultados de una encuesta sobre CSS3
En CSS-Tricks han hecho una encuesta sobre CSS3, preguntando si cuando saliese a luz para todos los navegadores, cuál sería la propiedad que más te gustaría. Han votado 7000 personas y este ha sido el resultado: Aunque están casi empatados, domina la propiedad ”Border-radius” seguida de “Multiple Backgrounds”, “@font-face”, “Animaciones y transiciones”, etc. ¿Qué propiedad … Lee más!
Novedoso menú de navegación con CSS3
Hay muchas formas de añadir navegación a tu sitio: Mediante pestañas, barras, menús, menús desplegables… En esta entrada explicaremos cómo crear un menú desplegable utilizando CSS3 y sus propiedades (Al ser CSS3 no será válido por los estándares). dtsv.dtse_post_1675_permalink = ‘http://www.cssblog.es/novedoso-menu-de-navegacion-con-css3/’; dtsv.dtse_post_1675_title = ‘Novedoso menú de navegación con CSS3′;
Varios Background en Firefox 3.5
Firefox 3.5 nos trae nuevas técnicas para incorporar a nuestra hoja de estilos (CSS) de la mano de CSS3. La última nos posibilita usar múltiples imágenes de fondo (background) con las posibilidades que esto trae. Podemos probar dicha técnica si descargamos la última versión disponible de Firefox y, a continuación, viendo la página web donde … Lee más!
Un Pong con CSS Animation
La reciente salida de la beta de Safari 4 ha creado una nueva propuesta en el equipo de Webkit, controlar animaciones mediante CSS. A través de esta propuesta se pueden utilizar los Keyframes, Animations, Animation behavior, Animation events para obtener muchos comportamientos variados con CSS sin necesidad de usar Javascript. Eso sí, el motor con … Lee más!
Ocultar mensajes en un texto con CSS
Hay veces que deseamos divertirnos un rato y nos ponemos a escribir mensajitos secretos con CSS usando scroll. Pero hay otras formas de escribir mensajes secretos usando CSS. En esta entrada os enseñaremos a ocultar mensajes en un texto usando la declaración ::selection. Este truco es muy simple, al seleccionar un texto algunas palabras quedan … Lee más!
Lista de trucos con CSS3
Ya anunciamos hace poco otra lista de trucos con CSS3 en donde se aprendía a crear degradados, aplicar sombra cualquier texto, bordes redondeados…, pero en esta entrada se aplican algunos más. Aquí aprenderemos a redimensionar elementos, aplicar sombra y cambiar la transparencia con CSS3. dtsv.dtse_post_1095_permalink = ‘http://www.cssblog.es/lista-de-trucos-con-css3/’; dtsv.dtse_post_1095_title = ‘Lista de trucos con CSS3′;
Varios trucos con CSS3
CSS3 está empezando a usarse. CSS3 amplia las posibilidades de personalización de nuestra página web. Lástima que estos efectos solo puedan verse si usas Firefox o Safari. En el salto de la página te mostraremos algunos ejemplos: dtsv.dtse_post_786_permalink = ‘http://www.cssblog.es/varios-trucos-con-css3/’; dtsv.dtse_post_786_title = ‘Varios trucos con CSS3′;
Zebra tables con CSS3
Gracias a CSS3 podremos crear tablas con dos colores alternados, si utilizamos correctamente el pseudo-selector nth-child, nos permitirá crear tablas con dos colores, alternandose cada vez, al estilo zebra, y con una sola linea de código: tr:nthchild(2n+1) { background-color: #99ff99; } Debemos indicar al selector el número de lineas que debe aplicar al estilo. En … Lee más!
