Esta es la segunda parte de cómo construir una máquina inútil en CSS. Podemos recordar lo que es una Useless Machine y qué habíamos hecho en la primera parte. Hasta ahora lo que teníamos es la máquina parada y con el botón de encender en la posición equivocada, está ya encendido (hacia la derecha) y debería estar apagado
Desde hace tiempo circulan por internet vídeos y webs donde se venden Useless Machine, también conocidas como “Leave me alone box” o “Ultimate Machine”. Comencemos por un vídeo de una de ellas para saber como funciona. http://www.youtube.com/watch?v=KxaWvJ-ziXA Es tan simple como eso, la máquina solo sirve para apagarse a si misma
#textoStarwars{ color: #ebe41c; font-size: 18px; width: 100%; -moz-transform-origin: 100px 200px; -moz-animation: movimientoTexto 10s linear infinite; -webkit-transform-origin: 100px 200px; -webkit-animation: movimientoTexto 10s linear infinite; -ms-transform-origin: 100px 200px; -ms-animation: movimientoTexto 10s linear infinite; transform-origin: 100px 200px; animation: movimientoTexto 10s linear infinite; } #contenedorTexto{ background: #000; padding: 0 20px 0 20px; width: 300px; height: 200px; margin-left: auto; margin-right: auto;
La mayoría de los que hacemos webs estamos acostumbrados a rellenar más o menos etiquetas de metadatos, con descripción, etiquetas,... Se ha desarrollado un protocolo que utiliza nuevos metadatos para crear grafos sociales, lo cual es muy útil en las redes sociales, por ejemplo facebook lo utiliza. Las propiedades básicas son 4: og:title
CSS permite realizar numeraciones personalizadas sin necesidad de programar. Es parecido a las secuencias que permiten algunos sistemas gestores de bases de datos, pero aunque no tengas ni idea de programación ni SGBD te resultarán fáciles. Antes de entrar con los contadores en sí, tenemos que hablar de la pseudo-clase :before #elemento:before{ content: “-”; }
Una de las características que nos ahorran imágenes en CSS3 es text-shadow. Ya que jugando con la fuente, el color de fondo, de la letra y su sombra podemos hacer tipografías de diseño sin tener que cargar ninguna imagen. Funciona sin prefijo en Firefox (3-5+), Chrome (4+), Safari (4+), Opera (9.5+), IOS (3.2+) y Android (2.1+).
Uno de los trabajos más nuevos de CSS3 son los filtros de imagen. Ya venían funcionando para imágenes SVG, pero ahora se amplia para todo tipo de imágenes. Con estos filtros podremos poner una foto en blanco y negro, sepia, cambiar colores, desaturar, etc. Casi como tener un pequeño Photoshop en nuestro CSS. Es interesante para
En las entradas escritas hasta ahora, ha sido Internet Explorer quien se ha llevado más palos, pero en la de hoy voy a criticar a Firefox. Además vamos a ver una propiedad muy interesante para no volvernos locos en la maquetación, box-sizing. El modelo de caja que se usa por defecto, y el único
Uno de los nuevos atributos de los elementos de formulario en HTML5 es placeholder. Con este atributo podemos especificar un texto a mostrar en los elementos de tipo texto o similares, a modo de información y que desaparece cuando comenzamos a escribir. Me parece muy útil para poner consejos, un ejemplo o requisitos en los campos
En la entrada de introducción sobre animaciones veíamos el funcionamiento básico sobre el ejemplo de rotar una imagen. En resumen, podíamos hacer que el navegador animase el cambio en una clase CSS eligiendo la duración y la función de interpolación y esto funcionaba con cualquier valor interpolable, es decir, que pudiera ser transformado en valores numéricos. Respecto
