Los últimos tutoriales de desarrollo web
×

CSS Tutorial

CSS CASA CSS Introducción CSS Sintaxis CSS Cómo CSS Colores CSS Antecedentes CSS Fronteras CSS márgenes CSS Relleno CSS Anchura altura CSS Texto CSS Fuentes CSS Campo de golf CSS lista CSS mesa CSS Modelo de cuadro esquema CSS CSS visualización CSS Anchura máxima Posición CSS CSS Flotador CSS Inline-block CSS Alinear CSS combinadores CSS Pseudo-clase CSS Pseudo-elemento CSS Barra de navegación CSS Menús desplegables CSS La información sobre herramientas CSS galería de imágenes CSS Opacidad imagen CSS Sprites de imagen CSS Attr selectores Formas CSS CSS contadores

CSS3

CSS3 Introducción CSS3 Esquinas redondeadas CSS3 Imágenes de frontera CSS3 Antecedentes CSS3 Colores CSS3 gradientes CSS3 Oscuridad CSS3 Texto CSS3 Fuentes CSS3 Transformaciones 2D CSS3 Transformaciones 3D CSS3 transiciones CSS3 animaciones CSS3 imágenes CSS3 Botones CSS3 Paginación CSS3 varias columnas CSS3 Interfaz de usuario CSS3 caja de medición CSS3 Flexbox CSS3 consultas de medios CSS3 Ejemplos MQ

CSS Diseño web adaptable

Diseño web adaptable Introducción Diseño web adaptable ventana Diseño web adaptable Vista en cuadrícula Diseño web adaptable consultas de medios Diseño web adaptable imágenes Diseño web adaptable vídeos Diseño web adaptable marcos

CSS Examples

CSS Ejemplos CSS Examen CSS Certificado

CSS References

CSS Referencia CSS selectores CSS funciones CSS referencia Aural CSS Web Safe Fuentes CSS animatable CSS Unidades CSS PX-EM Convertidor CSS Colores CSS Los valores de color CSS Los nombres de color CSS3 Soporte para el navegador

 

CSS Interfaz de usuario


Interfaz de usuario CSS3

CSS3 tiene nuevas características de la interfaz de usuario, como cambiar el tamaño de los elementos, esquemas, y caja de medición.

En este capítulo usted aprenderá acerca de las siguientes propiedades de la interfaz de usuario:

  • resize
  • outline-offset

Soporte para el navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.

Los números seguidos por -webkit- o -moz- especifican la primera versión que funcionaba con un prefijo.

Propiedad
resize4.0 No soportado 5.0
4.0 -moz-
4.015.0
outline-offset4.0 No soportado 5.0
4.0 -moz-
4.09.5

Cambiar el tamaño de CSS3

El resize propiedad especifica si un elemento debe ser de tamaño variable por el usuario.

Este elemento div es de tamaño variable por el usuario (funciona en Chrome, Firefox, Safari y Opera).

El siguiente ejemplo permite al usuario cambiar el tamaño de sólo el ancho de un <div> elemento:

Ejemplo

div {
    resize: horizontal;
    overflow: auto;
}
Inténtalo tú mismo "

El siguiente ejemplo permite al usuario cambiar el tamaño solamente la altura de un <div> elemento:

Ejemplo

div {
    resize: vertical;
    overflow: auto;
}
Inténtalo tú mismo "

El siguiente ejemplo permite al usuario cambiar el tamaño de la altura y la anchura de un <div> elemento:

Ejemplo

div {
    resize: both;
    overflow: auto;
}
Inténtalo tú mismo "

Esquema CSS3 Offset

El outline-offset establecimiento tiene espacio entre un esquema y el borde o borde de un elemento.

Esquemas difieren de las fronteras de tres maneras:

  • Un esquema es una línea trazada alrededor de los elementos, fuera del límite del borde
  • Un esquema no ocupa espacio
  • Un esquema puede ser no rectangular
Esta div tiene un contorno de 15 píxeles fuera del límite del borde.

En el siguiente ejemplo se utiliza la propiedad de esquema de compensación para agregar un espacio de 15 píxeles entre el borde y el contorno:

Ejemplo

div {
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}
Inténtalo tú mismo "

Propiedades de la interfaz de usuario de CSS3

La siguiente tabla muestra todas las propiedades de la interfaz de usuario:

Propiedad Descripción
box-sizing Permite incluir el relleno y el borde en total anchura y la altura de un elemento
nav-down Especifica dónde navegar utilizando la tecla de navegación flecha hacia abajo
nav-index Especifica el orden de tabulación de un elemento
nav-left Especifica dónde navegar utilizando la tecla de navegación flecha hacia la izquierda
nav-right Especifica dónde navegar utilizando la tecla de navegación flecha hacia la derecha
nav-up Especifica dónde navegar utilizando la tecla de navegación flecha hacia arriba
outline-offset Agrega espacio entre un esquema y el borde o borde de un elemento
resize Especifica si un elemento es de tamaño variable por el usuario