Diseños Visualmente Atractivos con Técnicas de CSS

Introducción

En este laboratorio, profundizaremos en el mundo de la programación CSS y exploraremos diversas técnicas para mejorar el diseño y el formato de las páginas web. A través de una serie de ejercicios y retos, aprenderás a usar selectores, propiedades y valores de CSS para dar estilo a los elementos HTML y crear páginas web visualmente atractivas. Al final del laboratorio, habrás adquirido una sólida base en la programación CSS y serás capaz de aplicar tus nuevos conocimientos para crear sitios web impresionantes.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/DynamicStylingGroup -.-> css/animations("Animations") css/DynamicStylingGroup -.-> css/transformations("Transformations") css/CSSPreprocessorsGroup -.-> css/mixins("Mixins") subgraph Lab Skills css/selectors -.-> lab-35192{{"Técnicas de CSS para Diseños Visualmente Atractivos"}} css/colors -.-> lab-35192{{"Técnicas de CSS para Diseños Visualmente Atractivos"}} css/borders -.-> lab-35192{{"Técnicas de CSS para Diseños Visualmente Atractivos"}} css/width_and_height -.-> lab-35192{{"Técnicas de CSS para Diseños Visualmente Atractivos"}} css/display_property -.-> lab-35192{{"Técnicas de CSS para Diseños Visualmente Atractivos"}} css/animations -.-> lab-35192{{"Técnicas de CSS para Diseños Visualmente Atractivos"}} css/transformations -.-> lab-35192{{"Técnicas de CSS para Diseños Visualmente Atractivos"}} css/mixins -.-> lab-35192{{"Técnicas de CSS para Diseños Visualmente Atractivos"}} end

Girador de Donas

index.html y style.css ya se han proporcionado en la máquina virtual.

Para indicar la carga del contenido, crea un girador de donas con un bordesemi-transparente para todo el elemento. Excluye un lado para servir como indicador de carga de la dona. Luego, define y utiliza una animación adecuada, utilizando transform: rotate() para rotar el elemento. Aquí hay un ejemplo de código en HTML y CSS:

HTML:

<div class="donut"></div>

CSS:

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio del Girador de Donas. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.