CSS

6 ejemplos de CSS3 puro sin JS

1 comentario

Los desarrolladores web siempre tenemos curiosidad por aprender nuevas técnicas para la construcción y mejora de sitios web. CSS3 ha sido un importantísimo punto de inflexión para los desarrolladores frontend, ofreciendo una colección de nuevas propiedades soportadas por los navegadores web modernos.
Estos ejemplos de fragmentos (snippets) de código CSS libre son perfectos para cualquiera que quiera avanzar en el mundo del CSS. Cada fragmento utiliza CSS puro para crear interacciones que hasta hace muy poco sólo eran posibles con programación JavaScript.

Menú acordeón

Normalmente un menú de acordeón estaría relacionado con una función de evento click JavaScript. Pero como CSS puede manejar efectos a través de la pseudo-clase :checked es más fácil que nunca.

CSS Slider

JavaScript siempre ha sido la solución para cualquier slider de imagen o galería de fotos. Normalmente sería difícil controlar los eventos de clic a través de CSS3, pero los botones de radio nos pueden ser útiles.

Parallax fondo de estrellas animado en CSS3

Si bien el movimiento continuo y el diseño parallax residen sobre todo en el ámbito de jQuery, ahora es posible crear movimiento con CSS3 puro. El fondo se ha creado usando algunos efectos de degradado junto con una función de animación CSS3.

Imagen de fondo estilo bloc de notas / postit en CSS puro

El fondo de block de notas / postit, puede ser elaborado con una serie de bordes, sombras y efectos de degradado combinados en un sola div. Otro trozo de papel se gira ligeramente para crear el efecto de profundidad.

NES en CSS3 puro e interactivo

Una creación bastante sorprendente. No sólo la NES es escalable a diferentes tamaños y construida exclusivamente en CSS, sino que también tiene características que son completamente interactivas, por ejemplo, al hacer clic en el botón de encendido el piloto se enciende.
Este fragmento requiere más de 600 líneas de código CSS. Pero teniendo en cuenta que esto es posible en el año 2016, va a ser interesante ver lo que se podrá lograr en 2 años.

Otro del mismo tipo pero sin interacción, Apple Watch en CSS puro:

Jesús Quintana6 ejemplos de CSS3 puro sin JS
leer más

¿El CSS afecta a la Optimización en Buscadores?

Sin comentarios

Varias veces me han comentado que el CSS es ignorado por los buscadores.

En principio, puede parecer que sí es ignorado, ya que a priori el potencial de CSS radica en dar estilo y modificar la presentación del contenido sin aportar contenido propio (en la mayoría de los casos).

Nosotros creemos que el css sí es un componente muy importante y cada vez más analizado por los buscadores.

En primer lugar, porque forma parte de la organización limpia, clara y estandarizada con el que todo proyecto preparado para seo debe partir, y que concretamente, permite, además de dar presentación al contenido:

  • Aligerar el peso: Disminuyendo el código del contenido. Hecho correctamente, hace que el sitio sea más rápido y más eficaz para los usuarios, entonces también para ser rastreado, lo que mejora la indexación de los contenidos.
  • Ordenar el contenido: Ordenar jerárquicamente en base a las necesidades. Esta es, probablemente, la razón más importante para el uso de CSS desde una perspectiva SEO.

Teniendo en cuenta esto, y que los algoritmos de los buscadores cambian su comportamiento constantemente en base a las nuevas tendencias y tecnologías, creemos que el css es y será una parte cada vez más importante de cara a la optimización en buscadores

Jesús Quintana¿El CSS afecta a la Optimización en Buscadores?
leer más

Triángulos en CSS

2 comentarios

Usando bordes transparentes, se pueden generar infinidad de formas usando css:

.multiborde {
border-color: green red blue orange;
border-style:solid;
border-width:20px;
width:0;
height:0;
}


.flechaiz {
border-color:transparent #000 transparent transparent;
border-style:solid;
border-width:10px 20px 10px 0;
width:0;
}


.flechader {
border-color:transparent transparent transparent #000;
border-style:solid;
border-width:10px 10px 10px 20px;
width:0;
}


.flechatop {
border-color:transparent transparent #000000;
border-style:solid;
border-width:0 13px 13px;
width:0;
}


.flechabot {
border-color:transparent transparent #000000;
border-style:solid;
border-width:0 13px 13px;
width:0;
}

Jesús QuintanaTriángulos en CSS
leer más

Complementos imprescindibles de Firefox – Firebug

1 comentario

En esta serie vamos a publicar la lista de complementos/extensiones imprescindibles para Firefox, que abarcan desde la inspección DOM a capturas de pantalla, haciendo del diseño y desarrollo con Firefox una maravilla.

Firebug + Firecookie + Codeburner

El primero de la lista se complementa con 2 add-ons que cuando se combinan forman una de las más potentes herramientas de desarrollo web.

1. Firebug: si estás haciendo cualquier tipo de desarrollo en Javascript Firebug es esencial. Sin Firebug realmente estamos dando tumbos en la oscuridad cuando se trata de depuración de código. Firebug no sólo ofrece una robusta consola de error, sino que también permite añadir interrupciones de código. El inspector de HTML y CSS da la libertad de navegar, ya sea en código fuente o en un elemento dentro de la página para ver su marcado. Firebug también permite editar “en vivo” el HTML y CSS y muestra los resultados al instante.

2. Firecookie: Es un add-on de Firebug que añade una nueva funcionalidad: completar la visualización y gestión de cookies. Puedes ver el contenido completo de cada cookie, e incluso editar y borrar.

3. Codeburner completa la configuración mediante la adición de una referencia del W3C que permite buscar elementos y atributos HTML, así como propiedades CSS. Codeburner además muestra la compatibilidad de las propiedades de navegadores. Está muy bien.

Descargas: Firebug, Firecookie, Codeburner

Jesús QuintanaComplementos imprescindibles de Firefox – Firebug
leer más

Bug en Chrome

Sin comentarios

Hoy descubrí un bug en Chrome v. 1.0.154.48

Resulta que la home de esta web recién salida del horno, no leia las css.
El caso es que las tenía linkadas a un archivo style.css y dentro de éste las importaba así:

@charset "utf-8";
@import url(r.css);
@import url(d.css);
@import url(l.css);
@import url(c.css);

Una de las primeras cosas que pensé fue el número de caracteres de los css importados, supuse que tendrían que tener un mínimo de 3 caracteres, pero no. También miré que el charset estuviese arriba de todo, pero tampoco, el bug concreto se produce al importar css (aunque sólo sea una) dentro de otro css,

a alguien más le pasó?

Jesús QuintanaBug en Chrome
leer más