Crafting Visually Appealing Web Layouts

Introduction

In this lab, we will explore the fundamentals of CSS programming and learn how to create visually appealing web pages. Through a series of exercises and challenges, you will gain hands-on experience with CSS selectors, properties, and values, and become proficient in styling HTML elements. By the end of the lab, you will have the skills and knowledge to create beautiful and responsive web layouts.

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/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/CoreLayoutGroup -.-> css/box_model("`Box Model`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/DynamicStylingGroup -.-> css/transitions("`Transitions`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") subgraph Lab Skills css/selectors -.-> lab-35222{{"`Crafting Visually Appealing Web Layouts`"}} css/colors -.-> lab-35222{{"`Crafting Visually Appealing Web Layouts`"}} css/box_model -.-> lab-35222{{"`Crafting Visually Appealing Web Layouts`"}} css/margin_and_padding -.-> lab-35222{{"`Crafting Visually Appealing Web Layouts`"}} css/borders -.-> lab-35222{{"`Crafting Visually Appealing Web Layouts`"}} css/width_and_height -.-> lab-35222{{"`Crafting Visually Appealing Web Layouts`"}} css/backgrounds -.-> lab-35222{{"`Crafting Visually Appealing Web Layouts`"}} css/transitions -.-> lab-35222{{"`Crafting Visually Appealing Web Layouts`"}} css/transformations -.-> lab-35222{{"`Crafting Visually Appealing Web Layouts`"}} css/pseudo_classes -.-> lab-35222{{"`Crafting Visually Appealing Web Layouts`"}} end

Isometric Card

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

To create an isometric card, use transform with rotateX() and rotateZ() along with a box-shadow. You can also add a transition to animate the card and create a lift effect when the user hovers over it.

Here's an example code snippet:

<div class="isometric-card"></div>

.isometric-card {
  margin: 0 auto;
  transform: rotateX(51deg) rotateZ(43deg);
  transform-style: preserve-3d;
  background-color: #fcfcfc;
  will-change: transform;
  width: 240px;
  height: 320px;
  border-radius: 2rem;
  box-shadow:
    1px 1px 0 1px #f9f9fb,
    -1px 0 28px 0 rgba(34, 33, 81, 0.01),
    28px 28px 28px 0 rgba(34, 33, 81, 0.25);
  transition:
    transform 0.4s ease-in-out,
    box-shadow 0.3s ease-in-out;
}

.isometric-card:hover {
  transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
  box-shadow:
    1px 1px 0 1px #f9f9fb,
    -1px 0 28px 0 rgba(34, 33, 81, 0.01),
    54px 54px 28px -10px rgba(34, 33, 81, 0.15);
}

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.

Summary

Congratulations! You have completed the Isometric Card lab. You can practice more labs in LabEx to improve your skills.

Crafting Visually Appealing Web Layouts

Introduction

Skills Graph

Isometric Card

Summary

Other CSS Tutorials you may like