Visually Appealing Designs with CSS Techniques

Introduction

In this lab, we will delve into the world of CSS programming and explore various techniques to enhance the design and layout of web pages. Through a series of exercises and challenges, you will learn how to use CSS selectors, properties, and values to style HTML elements and create visually appealing web pages. By the end of the lab, you will have gained a solid foundation in CSS programming and be able to apply your newfound knowledge to create stunning websites.

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{{"`CSS Techniques for Visually Appealing Designs`"}} css/colors -.-> lab-35192{{"`CSS Techniques for Visually Appealing Designs`"}} css/borders -.-> lab-35192{{"`CSS Techniques for Visually Appealing Designs`"}} css/width_and_height -.-> lab-35192{{"`CSS Techniques for Visually Appealing Designs`"}} css/display_property -.-> lab-35192{{"`CSS Techniques for Visually Appealing Designs`"}} css/animations -.-> lab-35192{{"`CSS Techniques for Visually Appealing Designs`"}} css/transformations -.-> lab-35192{{"`CSS Techniques for Visually Appealing Designs`"}} css/mixins -.-> lab-35192{{"`CSS Techniques for Visually Appealing Designs`"}} end

Donut Spinner

index.html and style.css have already been provided in the VM.

To indicate the loading of content, create a donut spinner with a semi-transparent border for the whole element. Exclude one side to serve as the loading indicator for the donut. Then, define and use an appropriate animation, using transform: rotate() to rotate the element. Here's an example code in HTML and 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; }

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

CSS Techniques for Visually Appealing Designs

Introduction

Skills Graph

Donut Spinner

Summary

Other CSS Tutorials you may like