Tutoriales en la Web

Conoce CSS 3

Posteado el 18. Sep, 2012 por tuto in Desarrollo Web, HTML y CSS, HTML5

Las nuevas propiedades han sido agrupadas en varios módulos según sus prestaciones:

NUEVAS PROPIEDADES

• Bordes: border-color, border-image, border-radius box-shadow.
• Backgrounds: background-origin, background-clip, background-size, layering multiple background images.
• Color: HSL colors, HSLA colors, RGBA colors opacity.
• Texto: text-shadow, text-overflow.
• Interface: box-sizing, resize.
• Selectores: attribute selectors.
• Formatos: media queries, multiple column layout, speech.

BACKGROUNDS Y BORDERS:

Entre las principales características destacan que se podrá agregar múltiples background a un objeto, los borders podrán ser redondos con posibilidad de indicar el radio de curvatura.

HTML:

Code block

<div class="vcard" vcard">
      <div class="addr-bl" bl">
            <div class="addr-tr" tr">
…
            </div>
      </div>
</div>

CSS:

Code block

.vcard {
      background-color: #000; 
      background-image:
      url(a-grad.gif),
      url(a-bl.gif),
      url(a-tr.gif); 
      background-repeat:
      repeat-x,
      no-repeat,
      no-repeat; 
      background-position:
      0 0,
      100% 0,
      100%;
}

Pueden darse cuenta que en este caso, los múltiples background son agregadas mediante coma ( , ). El nivel de precedencia es de menos a más, es decir, el que está de último es el background de encima.

MULTI-COLUMN LAYOUT

Ahora será más sencillo crear diseños con múltiples columnas sin etiquetas adicionales. Esta característica me ha parecido extraordinaria y muy útil. En el primer ejemplo, vemos la implementación de esta opción en la versión actual de CSS. Para este caso, debemos crear dos clases CSS y dos objetos DIV para simular la multi-columna.

Code block

<div class="entry-content" content">
      <div class="col first">
…
     </div>
      <div class="col">
…
      </div>
</div> 
 
.entry-content .col {
      float: left;
      width: 467px;
      margin-left: 30px;
} 
 
.entry-content .first {
      margin-left: 0;
}

ADVANCED LAYOUT:

Esta nueva característica permitirá organizar los elementos en pantalla de una mejor manera y combinarlos de diferentes maneras sin etiquetas adicionales.

GRID POSITIONING:

Dará la posibilidad que agregar reglas con cuadrículas invisibles para maquetar páginas con un aspecto como libro o revista y jugar con el tamaño y las propiedades de los objetos para hacer que los elementos “floten” entre las posiciones.

Code block

<div class="entry-content">
 
      <h2>What is Sushi?</h2>
… 
            <img src="sushi.jpg" class="photo" alt="" />
… 
 
</div> 
.entry-content {
      grid-columns:
            (30px * *)[4];
      grid-rows:
            9em 33.3% *;
      column-count: 4;
      column-gap: 30px;
} 
 
.entry-content h2 {
      float: page top left;
      width: 6gr;
      height: 1gr;
      margin-left: -30px;
} 
 
.entry-content img.photo {
      float: page bottom left;
      float-offset: 4gr 1gr;
}

La respuesta a la pregunta de que si el ejemplo anterior es bastante confuso de entender a simple vista es, sí. El ejemplo anterior muestra un diseño con cuatro columnas, una foto en medio de la columna 2 y 3 y un titulo de página, todo al más puro estilo de una revista.

SELECTORS:

El concepto de selector es un poco complicado de explicar, y todo debido a que este tipo de propiedades son muy poco utilizadas. Algunos ejemplos de selector que si utilizamos son: :hover y :visited (los selector de hipervínculos). Este tipo de selector podrían ser utilizados en otros elementos y de hecho así puede ser, a excepción del navegador Internet Explorer que no los soporta. Los nuevos selector serían:

• E:only-of-type: un elemento que es único en su tipo.
• E:not(s): un elemento que no coincide con los selector simples.
• E ~ F: un elemento F precedido de un elemento E.
• E:nth-child: un objeto que es el enésimo hijo del nodo padre.
• E:nth-last-child: un objeto que es el último hijo del nodo padre.
• E:nth-of-type: un elemento que es el enésimo nodo hijo de otro elemento.
• E.first-of-type: el primer elemento de un tipo.

Las posibilidades para el uso de selector son realmente muchas. Ahora faltará que la nueva versión de CSS 3 este lista para poder empezar a utilizarla en nuevos desarrollos.

Articulos relacionados:

Tags: css3, html5