background preloader

CSS3

Facebook Twitter

CSS3 Shapes Resource. Untitled.es · Tutorial iOS · Objective-C · Desarrollo HTML5 · CSS3. En esta entrada vamos a ver Background-size mediante varios ejemplos muy sencillos donde podremos darnos cuenta claramente de las nuevas posibilidades que nos ofrece background con esta versión de CSS3.

Untitled.es · Tutorial iOS · Objective-C · Desarrollo HTML5 · CSS3

Entre las diferencias más significativas de Background podemos destacar: - La posibilidad de colocar varias imágenes de background. - El tamaño de nuestro fondo. - La posición de estas imágenes. CSS3: Cómo crear líneas diagonales. 5 Efectos hover CSS3 para copiar y pegar. Prueba estos 5 efectos para :hover hechos unicamente con CSS3, estan listos para aplicar, solo pega el código CSS en tu hoja de estilos y aplica las clases: Efecto “Bump up” Excelente para usar una lista de imágenes horizontal, lo que hace es elevar el elemento modificando el margin-top.

5 Efectos hover CSS3 para copiar y pegar

Blur Menu with CSS3 Transitions. Cómo hacer CSS3 compatible con Internet Explorer 6, 7 y 8. Quienes se niegan al avance de HTML5 y CSS3 dicen "no es compatible".

Cómo hacer CSS3 compatible con Internet Explorer 6, 7 y 8

Pero este es el año 2011 y gracias a los hackers de la web, es 100% posible hacer CSS3 compatible con IE6 y otros navegadores viejos.CSS3 es genial. En nuestro curso de CSS3 en linea aprendes, con 1 linea de código, a hacer bordes redondeados, sombras en cajas y textos, degradados, reflecciones, animaciones, transiciones, rotaciones, perspectivas, fondos multiples, selectores avanzados, entre muchas otras cosas. Con CSS3 haces el 20% del código que con CSS2, en la mitad del tiempo. Y matas para siempre el exceso de anidados. HTML5 Snippets. CSS3. En el siguiente artículo me gustaría mostrar a las conclusiones a las que he llegado después de ver ayer mismo (19 de Noviembre de 2011) la conferencia de Christian Van Der Henst titulada: "El camino a CSS4".

CSS3

Esta claro que HTML5 ha dejado ya de ser el futuro para convertirse en el presente. Ya la gran mayoría de navegadores modernos soportan gran cantidad de los nuevos elementos del estándar lo que hace que su uso se ya posible hoy día. Pero HTML5 no es lo único que ha evolucionado, conjunto a él ha crecido CSS3 y la nueva generación de JavaScript. La nueva versión de CSS nos va a permitir que el diseño de páginas web cambie por completo, esta nueva versión nos va a permitir hacer cosas que antes eran impensables, podremos incluso dibujar con CSS, hacer que nuestras webs cobren vida, y otras muchas cosas. El gran rival la evolución en los estándares son los navegadores antiguos, estilo IE6. Fokus - Emphasized text-highlighting using JavaScript.

CSS3 Logos: Famous logos recreated using pure #HTML and #CSS3. No images. No JS. CSS3 en IE con CSS3 Pie - Selectivizr. Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8. Prefijo libre: Libérate de CSS proveedor prefijo infierno! -prefix-free lets you use only unprefixed CSS properties everywhere.

Prefijo libre: Libérate de CSS proveedor prefijo infierno!

It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. The target browser support is IE9+ , Opera 10+ , Firefox 3.5+ , Safari 4+ and Chrome on desktop and Mobile Safari , Android browser , Chrome and Opera Mobile on mobile. If it doesn’t work in any of those, it’s a bug so please report it . Just before you do, please make sure that it’s not because the browser doesn’t support a CSS3 feature at all, even with a prefix. In older browsers like IE8, nothing will break, just properties won’t get prefixed. La función calc() en CSS3 ‹ Digital Icon: Desarrollo web versátil.

Tanto la nueva versión de Firefox como la de Explorer cuentan con un interesante soporte de CSS3.

La función calc() en CSS3 ‹ Digital Icon: Desarrollo web versátil

La lista de propiedades a nuestra disposición es muy amplia, pero en esta entrada de lo que voy a hablar es de calc(), una función que permite definir valores de longitud por medio de expresiones aritméticas. Lo que dice la especificación La última definición de la función calc() se recoge en CSS3 Values and Units: 3.7.4. The calc function, un boceto del W3C del 19 de septiembre de 2006. Básicamente lo que permite es sustituir el valor fijo de cualquier dimensión que podamos aplicar a una propiedad por la expresión de un cálculo de dimensiones, por ejemplo, una suma.

A algunos les recordará a las propiedades dinámicas de Explorer, pero la principal diferencia es que la función calc() no permite extraer valores computados de ningún elemento, sólo trabajar con valores específicos. Destacar y atenuar elementos simultáneamente con CSS3 ‹ Digital Icon: Desarrollo web versátil. En algún blog nos hemos encontrado con un efecto my sutil, pero que nos ha parecido muy elegante: ver una lista de elementos como comentarios, tweets o entradas relacionadas, que al pasar el ratón por encima reaccionan oscureciendo el ítem que recibe el :hover, y atenuando los demás.

Destacar y atenuar elementos simultáneamente con CSS3 ‹ Digital Icon: Desarrollo web versátil

En muchos casos se trata de un efecto de JavaScript, pero se puede obtener exclusivamente por medio de CSS3. Como queríamos demostrar en nuestra demo [Firefox 9] La idea es bien simple: si un usuario se sitúa sobre un elemento, oscurecemos su diseño y clareamos el de los relacionados. La función de JavaScript consiste exclusivamente en recorrer la lista de nodos a los que asignar la clase que los atenua.

Pero eso lo podemos hacer en la hoja de estilo con un selector de nivel 3, la pseudoclase de negación :not. Filtros CSS3 para Imágenes. El avance de los lenguajes CSS3 y HTML5 a permitido que los sitios web evolucionen constantemente, haciendo que no tengan que depender de scripts o recursos externos para poder crear algunos efectos realmente sorprendentes. En poco tiempo hemos visto como las animaciones, transiciones y transformaciones 3D pueden transformar nuestro sitio.

Claves de filtros CSS3. La propiedad filter es una de las más impresionantes en el apartado gráfico.

Claves de filtros CSS3

La constante evolución de HTML5 y CSS3 nos acerca a funciones tan increíbles como esta, que nos permite aplicar efectos “tipo Photoshop” sobre nuestros elementos. Al día que escribo estas líneas, las últimas versiones de Chrome ya soportan filter, y aunque no sea conveniente aplicarlo todavía en nuestros proyectos profesionales, podemos ir viendo como funciona. Filter puede tomar en principio 9 valores diferentes: hue-rotate, brightness, contrast, invert, grayscale, sepia, blur, drop-shadow y opacity. Filtros para imágenes con CSS3 - Antocas.com.

Los filtros CSS3 para imágenes son efectos muy interesantes, que normalmente realizábamos con Photoshop , como agregarle manchas, brillo, opacidad y otros mucho efectos que dependerá de tu creatividad.

Filtros para imágenes con CSS3 - Antocas.com

En este sencillo tutorial vamos a repasar exactamente cómo de como aplicarlo a nuestro proyecto. Utilizando sólo CSS podemos lograr algunos efectos bastante complejos (parecidos a los filtros de Photoshop). Estos deben ser aplicables tanto a imágenes y elementos HTML, pero recuerdes que actualmente los efectos no son soportados por todo los navegadores, pero si por los principales que es Chrome y Mozilla.La propiedad utilizada para controlar todos estos filtros es: Como es de esperar, se usarán los prefijos para los navegadores. Por el momento, -webkit- (Chrome y Safari) que es el motor del navegador que soporta solamente estas propiedades .

Personalizar Scrollbar con CSS3. Tip: Cambiar estilos de Checkbox y Radio Button con CSS3. Veremos una forma rápida y sencilla de cambiar los estilos de los checkbox y radio button con css3, usando el pseudo selector :checked , seremos capaces de apuntar a un elemento basándonos en su estado activo o desactivo(checked o unchecked). Creación de nuestro HTML Solo se mostrara esta técnica para un elemento checkbox, pero sera el mismo proceso para los radio button, y se podrá apreciar mejor en el demo. Comenzamos creando nuestro checkbox seguido de un label Ahora asociamos el elemento label a nuestro checkbox, esto se hace mediante el uso de for=”" y el id del checkbox También se agrego un <span> dentro del label, se vera el porque al momento de aplicar los estilos. Menús desplegables animados con CSS3 ‹ Digital Icon: Desarrollo web versátil. Los menús desplegables son una interfaz de navegación muy común.

Menús desplegables animados con CSS3 ‹ Digital Icon: Desarrollo web versátil

Hasta ahora con CSS podíamos hacer que los vínculos de las subsecciones aparecieran sin necesidad de JavaScript, pero si queríamos hacer que el efecto de dicha aparición fuera progresivo, no nos quedaba más opción que programar una animación. Con CSS3, podemos definir el efecto en la hoja de estilo. Hace ya casi tres años publiqué una prueba de -webkit-transition, una propiedad que permitía especificar tiempos y modos de transición entre dos valores. Los experimentos de Webkit fueron la base del modulo de transiciones de CSS nivel 3, con el que podemos crear pequeñas animaciones. El menú, animado en el ejemplo. Introducción a las reglas @media de CSS3. La semana pasada vimos las nuevas pseudo clases de CSS nivel 3 o más comúnmente conocido como CSS3 y como utilizarlas. Hoy, vamos a hacer una introducción a las reglas @media de CSS3 y a la nueva forma de utilizarlas para mejorar la experiencia de usuario de las personas que entran a nuestros sitios web independientemente del dispositivo que estén utilizando para acceder a los mismos.

La regla @media nos permite especificar que cierto conjunto de reglas CSS solo deben aplicarse a cierto tipo de dispositivo. Así las definiciones dentro del bloque de la regla @media screen { ... } solo serían interpretadas por dispositivos conectados a monitores de ordenador y los de la regla @media projection { ... } solo se aplicaría a proyectores. CSS3 añade importantes y nuevas capacidades que nos permiten definir conjuntos de estilos dependiendo de propiedades comunes de los dispositivos que acceden a nuestros sitios. Crea menús desplegables con CSS3 y sin necesidad de JavaScript. 108+ Css3 Tutorials and Techniques. Demo Free Html5 and Css3 Templates. Demo Free Html5 and Css3 Templates.

CSS3 Glow Tabs. Impressive Webs Demo Page. CSS3 glow tabs: Menú de pestañas con efectos visuales para tu página web. Los pequeños detalles son los que le dan estilo diferente a tu diseño. En el caso de la web, muchas veces no queda más remedio que utilizar alguna librería de JavaScript para hacer transiciones, animaciones y otro tipo de efectos. Sin embargo, con CSS3 esto está cambiando. CSS3: Listado de Media Queries para dispositivos móviles. Introducción a CSS3 - Genbeta Dev.