Interfaz de usuario CSS

Tabla de contenido

Interfaz de usuario CSS

En este capítulo aprenderá sobre las siguientes propiedades de la interfaz de usuario CSS:

resize
outline-offset

Soporte del navegador

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

Property
resize	4.0	79.0	5.0	4.0	15.0
outline-offset	4.0	15.0	5.0	4.0	9.5

Cambio de tamaño de CSS

La propiedad resize especifica si (y cómo) el usuario debe cambiar el tamaño de un elemento.

This div element is resizable by the user!

To resize: Click and drag the bottom right corner of this div element.

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

Ejemplo

div
{
   
resize: horizontal;
   
overflow: auto;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: horizontal;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize only the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>

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

Ejemplo

div
{
   
resize: vertical;
  overflow: auto;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: vertical;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize only the height of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>

El siguiente ejemplo permite al usuario cambiar el tamaño tanto del alto como del ancho de un elemento <div>:

Ejemplo

div
{
   
resize: both;
   
overflow: auto;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<div>
  <p>Let the user resize both the height and the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>

</body>
</html>

En muchos navegadores, <textarea> se puede cambiar el tamaño de forma predeterminada. Aquí, hemos utilizado la propiedad de cambio de tamaño para deshabilitar el cambio de tamaño:

Ejemplo

textarea {
  resize: none;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
textarea#test {
   resize: none;
}
</style>
</head>
<body>

<h1>The resize Property</h1>

<p>In many browsers, textarea elements are resizable by default. In this example, we have used the resize property to disable the resizability:</p>

&lt;textarea id="test">Textarea - Not resizable&lt;/textarea>
<br><br>

&lt;textarea>Textarea - Resizable (default)&lt;/textarea>

</body>
</html>

Desplazamiento del esquema CSS

La propiedad outline-offset agrega espacio entre un contorno y el borde o borde de un elemento.

This div has an outline 15px outside the border edge.

Nota: ¡El contorno difiere de los bordes! A diferencia del borde, el contorno es dibujado fuera del borde del elemento y puede superponerse a otro contenido. Además, el esquema es NO forma parte de las dimensiones del elemento; el ancho y alto total del elemento no se ve afectado por el ancho del contorno.

El siguiente ejemplo utiliza la propiedad outline-offset para agregar espacio entre el borde y el contorno:

Ejemplo

 div.ex1 {
  margin: 20px;
  border: 
  1px solid black;
  outline: 4px solid red;
  
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style> 
div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
} 
</style>
</head>
<body>
<h1>The outline-offset Property</h1>

<div class="ex1">This div has a 4 pixels solid red outline 15 pixels outside the border edge.</div>
<br>

<div class="ex2">This div has a 5 pixels dashed blue outline 5 pixels outside the border edge.</div>

</body>
</html>

Propiedades de la interfaz de usuario CSS

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

outline-offset: Agrega espacio entre un contorno y el borde o borde de un elemento
resize: Especifica si el usuario puede cambiar el tamaño de un elemento o no.