CSS3 User Interface

Bﾃ｡rbara ﾃ」ila / Diseﾃｱo de Hojas de Estilo

CSS3 USER INTERFACE

1 QUE ES?

En la creación de un gran sitio web, de fácil uso estandarizado, los diseñadores actualmente tienen que depender de Scripts como JavaScripts y JavaScripts bibliotecas como JQuery.

Css3 User Interface, introduce varias características nuevas que permitirán mejorar y estandarizar la experiencia de usuario con poco esfuerzo y sin secuencias de comandos.

2 PROPIEDADES

* * *

CSS3 Resizing CSS3 Outline Offset CSS3 Box Sizing

Otras: apperance / icon / nav-down / nav-index / nav-left / nav-right / nav-up

3 RESIZE

Esta propiedad permite dar a los usuarios control sobre el tamaño de cualquier elemento de pantalla en una página web.

“Resize”, cuenta con cuatro valores: - none - both - horizontal - vertical

Ej:

div { resize:both; overflow:auto; }

4 OUTLINE OFFSET

Esta es una propiedad muy simple de entender (parte de CSS2).

Un “outline” se hace fuera del borde de un elemento y puede ser de “estilo” al igual que la propiedad “border”. Sin embargo no se incluye como parte del box-model y por lo tanto no se añade al ancho del elemento que se muestra. Queda fuera del borde, entre el borde y el contorno.

La propiedad “outline-offset” permite insertar un espacio entre el borde y el contorno.

Ej:

div { border:2px solid black; outline:2px solid red; outline-offset:15px; }

5 BOX-SIZING

En el clásico “box-model”, cuando se especifica el alto y ancho en la hoja de estilo, en realidad se especifica el ancho y alto de la caja de contenido (content-box). El ancho y alto del elemento puesto en la página, será mas grande si se agrega el padding y el border del elemento.

Por ejemplo, si se tiene el siguiente estilo: div{ width: 250px; border: 10px solid black; }

6 BOX-SIZING

El ancho real del elemento será 250px de la “content-box”, más 10px del borde del lado izquierdo, más 10px del borde del lado derecho.

La nueva propiedad (box-sizing) permite cambiar la forma en el navegador (que calcula el tamaño de la caja). Esta propiedad tiene 3 valores: inherit, cont-box y boder-box.

El verdadero cambio ocurre cuando se establece el valor del border-box.

Cuando el valor se establece en el border-box, el ancho especificado para el elemento, será el ancho total del elemento cuando se representa en el browser. El browser no agregará el ancho del borde fuera del contenido de la caja como de costumbre. En su lugar va a proporcionar el “border” dentro del ancho especificado.

CSS3 USER INTERFACE