Modelo de Caja CSS y Márgenes

Introducción

En el bullicioso panorama digital de "Pet's House", un sitio web dedicado a ofrecer servicios premium de cuidado de mascotas, nuestro protagonista, Jordan, un talentoso desarrollador web, se encarga de mejorar el diseño y la disposición del sitio web.
La escena se desarrolla en una acogedora oficina con vista a la línea del cielo de la ciudad, donde Jordan está decidido a optimizar la experiencia del usuario aplicando meticulosamente los principios del Modelo de Caja CSS y los márgenes.

En este laboratorio, usaremos propiedades como el Modelo de Caja CSS y los márgenes para perfeccionar la disposición.

Comprendiendo el Modelo de Caja

Piensa en cómo podemos hacer que los elementos aparezcan donde los hemos diseñado para que aparezcan.

En este paso, profundizarás en el Modelo de Caja CSS, un concepto fundamental que gobierna la disposición de las páginas web. Cada elemento en una página se considera una caja, que consta de márgenes, bordes, relleno y el contenido real. Este modelo permite a los desarrolladores controlar con precisión el espaciado y el tamaño de los elementos.

Al pulsar F12 para abrir las herramientas de desarrollador, como se muestra en la figura siguiente al seleccionar un elemento <li>, podemos ver el modelo de caja del elemento en la sección Computed.

A continuación, presentemos tres propiedades importantes del modelo de caja:

• border
• padding
• margin

Borde

La propiedad abreviada CSS border establece el borde de un elemento. Establece los valores de border-width, border-style y border-color.

El formato de uso es el siguiente:

border: width style color;

Por ejemplo, para agregar un borde a un elemento <p>, puedes usar el siguiente CSS:

En la página de mascotas, si los botones dentro del formulario tienen borde, puedes agregar el siguiente contenido al archivo style.css para darles estilo:

form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: 2px;
  border: 2px solid #eaeaea;
}

Además, podemos lograr un efecto de bordes redondeados en los botones usando la propiedad border-radius. Aquí está cómo se puede agregar:

form.txt-box {
  width: 100%;
  border-radius: 2px;
  border: 2px transparent;
  color: #3d3939;
}
form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: 2px;
  border: 2px solid #eaeaea;
  border-radius: 4px;
}

En la sección "Acerca de Nosotros", para mostrar un efecto de imagen circular, puedes usar efectivamente la propiedad border-radius. Aquí está cómo se aplica:

.circle {
  width: 950px;
  height: 650px;
}
.circle img {
  border-radius: 100%;
  width: 70%;
  height: 100%;
}

Relleno

La propiedad abreviada CSS padding establece el área de relleno de los cuatro lados de un elemento a la vez.

El formato de uso es el siguiente:

padding: top right bottom left;

padding-top: top padding value;
padding-left: left padding value;
padding-right: right padding value;
padding-bottom: bottom padding value;

Por ejemplo, para agregar un relleno a un elemento <p>, puedes usar el siguiente CSS:

Agrega lo siguiente al archivo style.css:

h1 {
  padding-bottom: 30px;
  padding-left: 0.5em;
  text-align: center;
  font-size: 4em;
}
h2 {
  font-size: 2.8vw;
  padding-bottom: 15px;
  text-transform: uppercase;
}
header {
  background-color: rgb(233, 174, 87);
  width: 100%;
  max-height: max-content;
  min-height: 1em;
  padding-top: 1%;
  padding-bottom: 1%;
  text-transform: uppercase;
}
.navigation li a {
  text-decoration: none;
  color: black;
  padding: 10px;
}
.container {
  padding: 0px;
  padding-top: 1em;
  width: 100%;
}
section {
  width: 100%;
  padding: 10% 0;
}
.cover-sect {
  padding: 5% 0;
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  padding: 0 20px;
}
.service figcaption {
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
}
.contact-section p {
  padding-right: 2em;
  padding-left: 3em;
}

.form-box {
  padding-top: 1em;
}

form.form-content {
  padding: 0.8em 0;
}

form.txt-box {
  width: 100%;
  padding: 0.7em 0;
  border-radius: 2px;
  border: 2px transparent;
  color: #3d3939;
}
form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: inherit;
  border: 2px solid #eaeaea;
  border-radius: 4px;
  padding: 0.7em;
}

Margen

La propiedad abreviada CSS margin establece el área de márgenes de los cuatro lados de un elemento.

El formato de uso es el siguiente:

margin: top right bottom left;

margin-top: top margin value;
margin-left: left margin value;
margin-right: right margin value;
margin-bottom: bottom margin value;

Por ejemplo, para agregar un margen a un elemento <p>, puedes usar el siguiente CSS:

Agrega lo siguiente al archivo style.css:

* {
  margin: auto;
}
.logo-section {
  width: 10%;
  margin-left: initial;
}
.logo {
  margin-left: 0.8em;
  max-width: 60%;
}
section div {
  width: 50%;
  margin: 0 auto;
}
.cover-sect {
  margin-top: 0px;
  padding: 5% 0;
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  margin: auto;
  padding: 0 20px;
}
.circle img {
  border-radius: 100%;
  width: 70%;
  height: 100%;
  margin-left: 15%;
}
.services {
  width: 90%;
  margin: 20px auto;
}
form.txt-box {
  margin-top: 0.3em;
  width: 100%;
  padding: 0.7em 0;
  border-radius: 2px;
  border: 2px transparent;
  color: #3d3939;
}
footer div {
  margin-right: 2em;
}

footer span {
  text-align: center;
  margin-left: 2em;
}

footer.company-info {
  margin-left: 20em;
}

footer.contact-us {
  margin-left: 25em;
}

Sombra de caja

En la página de mascotas, para agregar un efecto de sombra al botón de envío en el formulario, puedes usar la propiedad box-shadow.

La propiedad box-shadow se utiliza para agregar una o más sombras de caja, creando un efecto visual como si la caja tuviera una sombra.

Su formato de sintaxis es el siguiente:

box-shadow: h-shadow v-shadow blur spread color inset;

El significado de cada valor se describe a continuación:

Agrega lo siguiente al archivo style.css:

form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: inherit;
  border: 2px solid #eaeaea;
  box-shadow: 0px 0px 10px 1px #29393e;
  border-radius: 4px;
  padding: 0.7em;
}

Nota: Aunque hemos cubierto muchas propiedades CSS, es comprensible que la disposición de la página todavía pueda parecer desordenada. No te preocupes, más adelante presentaremos varias técnicas de disposición de página. Estas técnicas ayudarán a organizar y estructurar la página de manera más efectiva, incluyendo Flexbox, Grid y otros modelos de disposición CSS. Estos modelos proporcionan herramientas poderosas para diseñar diseños responsivos, flexibles y bien organizados.

Resumen

En este laboratorio, has recorrido las complejidades del Modelo de Caja CSS y los Márgenes con Jordan, mejorando la disposición y el diseño del sitio web "Pet's House". Comenzando por entender los componentes del modelo de caja: márgenes, bordes, relleno y contenido, has aplicado estos principios para mejorar la estructura y la interfaz de usuario del sitio. Al manipular los márgenes, has aprendido a controlar efectivamente el espaciado entre los elementos. Se han realizado ajustes de relleno para garantizar que el contenido dentro de los elementos se presente de manera clara y atractiva. Este laboratorio no solo ha afinado tus habilidades en CSS, sino que también ha enfatizado la importancia del diseño de disposición meticuloso en la creación de experiencias web atractivas y amigables para el usuario.