CSS3

CSS3: text-overflow (propiedad css que trata el desbordamiento de un texto dentro de una etiqueta dada)

Con esta propiedad css3 podremos definir el comportamiento que va a tener el texto de una etiqueta dada cuando desborde del espacio asignado para dicha etiqueta en ancho y alto.

div.titular {
  overflow:hidden;
  text-overflow:ellipsis;
}

La propiedad text-overflow puede tener los siguientes valores:
ellipsis: muestra 3 puntos cuando corta el texto.
clip: corta el texto por dónde los límites de la caja contenedora lo delimitan. Leer mas...

31ene

CSS3: múltiples columnas de texto

Categoria(s) CSS3 Comentar

A través de css3 se pueden crear varias columnas de texto de una manera fácil, sin recurrir a tablas u otros elementos html.

div.tres-columnas {
  columns:100px 3;
  -moz-columns:100px 3;
  -webkit-columns:100px 3;
}

A través del código anterior, se podrán generar 3 columnas de texto en la etiqueta div con la clase tres-columnas
El primer valor de la propiedad columns especifíca el ancho en píxeles de cada columna y el último valor determina el número de columnas. Leer mas...

30ene

Menú con fondo adaptable al texto con css

Categoria(s) CSS3 Comentar

Cuando en un desarrollo web tenemos un menú en el que de fondo de los links es una imagen y además sumamos que por ejemplo, la web es en varios idiomas, es necesario que dicha imagen pueda adaptarse dinámicamente al texto del link en vez de crear una imagen por cada link.

Para ello partimos del código html:

<nav>
    <ul>
      <li><a href="#" title=""><span>Inicio</span></a></li>
      <li><a href="#" title=""><span>Quienes somos</span></a></li>
      <li><a href="#" title=""><span>Productos</span></a></li>
      <li><a href="#" title=""><span>Contacto</span></a></li>
    </ul>
</nav>

Las imágenes que vamos a utilizar son dos: Leer mas...

26dic

Animación CSS3 – Estrellas fugaces

Categoria(s) CSS3 | HTML5 Comentar

En la oscuridad del cielo recreado en la cabecera animada de Tesla Technologies podemos observar que aparecen unas estrellas fugaces, de vez en cuando.

Para la realización de las mismas utilizamos únicamente elementos html estándar, dos <div> anidados para cada estrella, combinados con css3, para hacer el destello y el movimiento de la misma, y javascript para hacer que la aparición en el firmamento sea más o menos aleatoria. Leer mas...

26dic

CSS3: Propiedad transform

Categoria(s) CSS3 Comentar

La propiedad transform de css3 es aquella que define el cambio o transformación que sufre un elemento html, como puede ser el cambio de tamaño, de movimiento en 2D o 3D, cambio de escala del elemento, rotación, etc.

div {
  transform:rotate(5deg);
  -ms-transform:rotate(5deg); /* IE 9 */
  -moz-transform:rotate(5deg); /* Firefox */
  -webkit-transform:rotate(5deg); /* Safari y Chrome */
  -o-transform:rotate(5deg); /* Opera */
}

No todos los navegadores son compatibles con esta propiedad teniendo en muchos casos, que usar propiedades alternativas que proporcionan los propios navegadores para que dichos efectos sean visibles por los usuarios de dichos navegadores. Leer mas...

12dic

Animación CSS3 – Muñeco de nieve

Categoria(s) CSS3 | HTML5 Comentar

El muñeco de nieve que se ve en el escenario (portada animada de la web tesla technologies) está realizado en su totalidad con etiquetas html. Es decir, no se ha usado ningún elemento gráfico ni en su creación ni en su movimiento.
Todas las partes del muñeco son capas (etiqueta html div) que mediante la aplicación de estilos css3, le damos forma a las distintas partes del muñeco: base, tronco, cabeza, brazos, ojos y nariz. Leer mas...

07dic

Animación CSS3 – Constelaciones de Auriga y Gemini

Categoria(s) CSS3 Comentar

El cielo estrellado que se muestra en el fondo de la animación creada para la cabecera de Tesla Technologies no muestra estrellas al azar, sino que representa de forma aproximada como se verían las constelaciones de Auriga y Gemini el día 24/12/2011 a las 23:59:59 desde Santiago de Compostela, como se representa en la siguiente imagen, obtenida de la web:
http://www.topastronomer.com

Leer mas...

05dic

Animación CSS3

Categoria(s) CSS3 | HTML5 Comentar

Desde el grupo Tesla Technologies, en nuestro afán de mejorar y asumiendo el reto de dar un paso más allá de las tecnologías actuales, hemos decidido crear cada cierto tiempo, una cabecera animada para nuestra web empresarial que cuente una historia, una historia sencilla que nos apetezca contar y compartir con todos vosotros.
Eso sí, para poder visualizar correctamente la animación debes tener instalado uno de los siguientes navegadores web:
Google Chrome, Firefox 5+ o Safari. Leer mas...

02nov

iPad: carga de archivos css según su orientación de pantalla

Categoria(s) CSS3 | Ipad Comentar

Código breve que muestra, en caso de que desarrollemos distintos estilos css para las posibles vistas en el iPad:

<link rel="stylesheet" media="all and (orientation:portrait)" href="ipad_portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="ipad_landscape.css">

Otra forma de hacer algo parecido, es hacer la web en porcentajes, si bien el resultado final no siempre va a ser el mejor, en la mayoría de los casos.

01oct

Unidades y medidas

Categoria(s) CSS3 Comentar

Algunas de las propiedades de CSS se pueden expresar en unidades de longitud, como por ejemplo, los atributos font-size y line-height. Una unidad de longitud consiste, basicamente, en un número seguido de una unidad de medida (cm, em, in, pt, px). Existen dos tipos de unidades de medida, las absolutas y las relativas.

Unidades absolutas Leer mas...

Pulgadas (in): Una pulgada equivale a 2.54 cm
Centímetros (cm)
Milímetros (mm)