CSS3 - Part 2

CSS3: múltiples backgrounds sobre una misma capa

El css3 permite que a través de una única clase, podamos asignar a una capa múltiples backgrounds.

Esto es muy útil tanto para ahorrar código html (no tener que insertar capas sobre capas para realizar la misma tarea), como a través del propio css, manipular dichos backgraunds a nuestro antojo.

El código es el siguiente:

.clase_prueba {
  background-image: url(imagen01.png), url(imagen02.png);
  background-position: left bottom, right top;
  background-repeat: no-repeat;
}

Definimos, como si fuera para una sóla imagen, pero separando los valores de los distintos fondos por comas. Leer mas...

16sep

CSS3: aplicar sombreado al texto al pasarle el ratón por encima (text-shadow / CSS3)

Categoria(s) CSS3 Comentar

Para aplicar un sombreado de forma dinámica a un texto cuando pasamos el ratón por encima del mismo, usaremos el siguiente código CSS aplicado a la capa contenido:

div.contenido {
  font-size:16px;
  color:#333;
  cursor:pointer;
  transition: all 0.12s ease-out;
  -webkit-transition: all 0.12s ease-out;
  -moz-transition: all 0.12s ease-out;
  -o-transition: all 0.12s ease-out;
}

div.contenido:hover {
  text-shadow: 1px 1px #444, 2px 2px #555, 3px 3px #666;
}

Con este código, conseguimos crear un sombreado dinámico de 3 píxeles y 3 colores distintos, pudiendo el usuario modificar dichos parámetros para adaptarlos para lo que se desee.

16sep

Ocultar CSS: Webs accesibles y mejoras de las técnicas SEO

Categoria(s) CSS3 | SEO Comentar

Cuando deseamos ocultar una capa o un contenido, normalmente usamos una de las siguientes propiedades CSS:

Display: comportamiento del contenedor al que le aplicamos el estilo.

div#contenido {
  display: none;
}

Visibility: visibilidad del contenedor/capa.

div#contenido {
  visibility: hidden;
}

Pues bien, lo que podemos hacer, mucho mejor para la accesibilidad de la web, así como para el SEO de la misma, es aplicar el siguiente código CSS a la capa en cuestión: Leer mas...

12sep

Usar media Querys para seleccionar estilos para Ipad o Iphone

Categoria(s) CSS3 | HTML5 Comentar

Una de esas pequeñas aportaciones maravillosas que nos trae el HTML 5, es que nos permite la utilización de media querys, en este caso os vamos a enseñar a usarlas para poder seleccionar la hoja de estilo correspondiente a la resolución.

<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">

Como es obvio aquí el truco esta en tener diferentes hojas de estilo que se adapten a las diferentes resoluciones, quedándosenos así una web adaptable totalmente.

09sep

CSS3/iPad: CSS adaptado (media queries)

Categoria(s) CSS3 Comentar

Si la web a desarrollar la queremos hacer compatible con los nuevos dispositivos móviles, en este caso el iPad, podemos utilizar las siguientes reglas en CSS3.

Regla general de visualización en iPad:

@media only screen and (device-width: 768px) {
  /*-- Estilos propios para esta condición --*/
}

Regla para visualización en el iPad con orientation:portrait

@media only screen and (min-device-width: 481px)
and (max-device-width: 1024px) and (orientation:portrait) {
  /*-- Estilos propios para esta condición --*/
}

Regla para visualización en el iPad con orientation:landscape Leer mas...

04sep

HTML5/CSS3: Pie de página fijo en pantalla

Categoria(s) CSS3 | HTML5 Comentar

En html5, para contener todos los elementos del pie de página, tenemos una nueva etiqueta:

<!-- Pie de página -->
<footer>
  <p>Copyright 2011 Tu sitio web</p>
</footer>

Dicha etiqueta, forma parte de la nueva estructura web en html5.

Pero, ¿y si queremos que dicho pie de página se muestre fijo siempre en pantalla independientemente del alto de la página?
Pues bien, para ello, simplemente le ponemos el siguiente estilo en nuestro archivo css: Leer mas...

04sep

CSS3: Incrustar fuentes en la página web

Categoria(s) CSS3 1 Comentario

Muchas veces, ya cansados de utilizar siempre las mismas tipografías (verdana, tahoma, arial, etc.) en los desarrollos web en los que trabajamos, se nos ocurre pensar si algún día podríamos llegar a utilizar una tipografía distinta a las “estándar” anteriormente mencionadas.

Pero claro, al hacerlo, o bien lo hacíamos a través de texto convertido a imagen o bien corríamos el riesgo de que algún navegador no fuera capaz de interpretar el tipo de letra con el que realizamos nuestros diseños web. Leer mas...

23ago

Página web adaptable a múltiples resoluciones en CSS3

Categoria(s) CSS3 Comentar

Entre las mejoras que trae consigo el CSS3, está el de poder realizar webs adaptables a distintas resoluciones, sin tener que recurrir a crear distintas webs dependiendo del dispositivo que lo estea visualizando.

Bien es cierto, que esto mismo se puede conseguir manejando anchos de elementos en porcentaje, pero tanto como si la resolución de pantalla de nuestro ordenador/portátil es muy alta (1920x1200px) o muy baja (dispositivos móviles), el hacerlo así, o bien puede parecer que los elementos se muestran muy esparcidos por la pantalla (para altas resoluciones) como unos montados encima de otros (para bajas resoluciones) Leer mas...