CSS Avanzado

Categoría

Recursos y guías sobre CSS a nivel avanzado.

ventanas-opera-mobile-jquery.html

Selector de ventanas de Opera Mobile con CSS y Jquery

Con JQuery podemos crear cosas realmente sorprendentes y divertidas, como menús, carruseles o pestañas . Es muy enorgullecedor recrear algo que ya existe y con lo que estás disfrutando, pero realizarlo con otro lenguaje. Con JQuery podemos crear el selector de ventanas de Opera Mobile, así, varias ventanas que están superpuestas una debajo de otra, … Lee más!

1
css3-media-queries-ipad

Detectar iPhone o iPad con CSS3 Media Queries

Los dispositivos como iPad e iPhone cada vez están más cerca de nuestra vida cotidiana, por ello hay que adaptarse a los nuevos tiempos y crear, estilizar y construir páginas adaptadas a los nuevos medios. De una manera muy sencilla, con el uso de CSS3 Media Queries podemos detectar si el usuario está usando un … Lee más!

3
condicionales-css-mootools

Usar el objeto Browser de Mootools para crear condicionales CSS

Si deseamos crear condicionales CSS para que una porción del código únicamente sea leído por X navegador, utilizando el objeto Browser de Mootools, solo deberemos seguir estos pasos: // Conseguimos la etiqueta HTML var htmlTag = document.id(document.documentElement); // El nombre de la clase se agrega al navegador htmlTag.addClass(Browser.name); // Se añade la clase de la … Lee más!

0
jpeg2css

Convierte imágenes a CSS con Jpeg2css

Jpeg2css nos permitirá convertir imágenes a CSS, aunque no es apto para novatos, ya que el proceso es bastante complicado si no estás familiarizado con CSS.  Funciona mejor en imágenes que representen siluetas en blanco y negro, ya que su forma de procedimiento consisten en convertir cada pixel de la imagen en un div (que … Lee más!

2
gtk-css

El futuro de GTK+ será CSS

3

Carlos Camacho, programador de GNOME, mostró que la personalización y configuración de interfaces GTK+ (paquete de herramientas para la creación de interfaces gráficas de usuario) será igual a cómo se editan las hojas de estilo (CSS). Esto elevará la configuración a un nuevo nivel, dicen que ha sido una de las características que más se … Lee más!

Captura de pantalla 2010-12-12 a las 03.05.53

Un hombre que anda gracias a CSS

7

Está claro que con CSS se pueden hacer maravillas, existen un montón de usos útiles y demostraciones que podemos realizar con CSS. Andrew-Hoyer nos presenta una creación suya, un experimento, en el que se puede comprobar cómo se mueve un hombre (que casualmente es él) gracias a CSS3, nada de Javascript. Aunque existen fallos en … Lee más!

Captura de pantalla 2010-12-15 a las 20.06.54

Interesantes perspectivas de las sombras con CSS

6

La propiedad box-shadow, una de las nuevas opciones de CSS3, se ha convertido en la opción ideal para crear sombras en las cajas. Aplicando sombras a la pseudo-clases ::before y ::after, crearemos útiles perspectivas con la sombra. Allá vamos: Código HTML <div class=”box”> <img src=”cssblog.png” alt=”cssblog” /> </div> Código CSS .box:after { content: ”; position: … Lee más!

sin miniatura

Construir un cubo 3D con HTML5 y CSS3

3

HTML5 y CSS aportan nuevas novedades a los diseñadores, muy útiles y más fáciles de implementar que las de CSS2. Os enseñaré a crear un cubo 3D con CSS, parecido al que os mostré anteriormente. Las letras del cubo son las siglas del logotipo de WebProNews. Para empezar, necesitamos 3 imágenes separadas, cada imagen de … Lee más!

basic-css-speech-bubbles

Burbujas de texto con CSS

5

Las burbujas de texto son un efecto popular pero la mayoría de ellas se crean con HTML o Javascript. Este tutorial contiene varios ejemplos de efectos de burbujas de texto creados con CSS 2.1 y personalizados con CSS3. Como dije anteriormente, no contiene imágenes, Javascript y puede aplicarse a tu HTML semántico. Por ahora soporta … Lee más!

sin miniatura

CSS-JS-Booster, combina y comprime CSS y JS

3

CSS-JS-Booster es un script PHP que optimizará la carga de tu sitio web, que cuenta con interesantes características: Combina múltiples archivos CSS dando como resultado un menor número de consultas al servidor Reduce el código CSS necesario Etiqueta las imágenes menores de 24 KB como data-URI o MHTML (para IE <= 7) Comprime el CSS … Lee más!

sin miniatura

Centage, un framework avanzado basado en CSS/LESS

2

Centage es un framework complejo orientado a crear simples y avanzadas estructuras fácilmente. Está basado en less.js, una implementación en Javascript de less.css, y hace uso de sus funciones avanzadas, como pueden ser las variables, mezclas y la jerarquización. No utiliza ningún valor en píxeles, menos la expansión y compresión dependiendo de la anchura del … Lee más!

sin miniatura

8 técnicas CSS aleatorias que deberías conocer

3

El CSS es la piedra angular de todo diseño web. Su sintáxis, aparantemente sencilla, afecta directamente al aspecto visual de nuestro front-end. En este artículo quiero comentaros ocho técnicas CSS que os resultarán muy útiles en futuros proyectos. Trabajando con medidas relativas Si queremos utilizar medidas relativas (em), para las tipografías de nuestros diseños, es … Lee más!

Acerca del blog

CSSBlog ES reune recursos, guías y contenidos acerca de CSS, tanto a nivel básico, medio, como avanzado, de forma amena, sencilla y gratuita. Puede contactar o anunciarse.

Sponsors