En el artículo anterior sobre useless machine de la serie de artículos sobre la máquina inútil activábamos transformaciones con la pseudoclase css :active del interruptor. Para llegar a los demás elementos usábamos selectores de adyacencia. He comprobado que la doble adyacencia no funcionaba bien en Chrome y he cambiado el código usando el selector de hermano
En el artículo de Ultimate Useless Machine en Css parte 2 la Useless Machine ya tenía las transformaciones necesarias para las posiciones de encendido y apagado. Vamos a usar las pseudoclases CSS para poder accionar la máquina. Queremos que funcione al hacer click sobre el interruptor. Por lo tanto los cambios que queramos tienen que estar
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
