CoachingUgosay

Web Development - CSS3 Documentation

The Modern Style Language for the Web

CSS3 Features Index

Navigate through modern CSS3 features and techniques

Flexbox Layout

Create flexible one-dimensional layouts with ease.

CSS Grid

Powerful two-dimensional layout system for complex designs.

Animations

Create smooth transitions and keyframe animations.

Visual Effects

Gradients, shadows, filters and transform effects.

Responsive Design

Media queries and flexible layout techniques.

Hands-on Activities

Practice projects to apply your CSS knowledge.

CSS3 Features

Explore the modern styling capabilities that revolutionize how we build for the web

Flexbox Layout

Create flexible one-dimensional layouts with ease.

1
2
3
CSS
.container {
  display: flex;
  gap: 0.5rem;
}

Flexbox allows easy alignment and distribution of space among items in a container.

CSS Grid

Powerful two-dimensional layout system for complex designs.

1
2
3
4
5
6
CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

CSS Grid provides precise control over both rows and columns in your layouts.

Animations

Create smooth transitions and keyframe animations without JavaScript.

CSS
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.box {
  animation: bounce 1s infinite;
}

CSS animations bring interfaces to life with movement and visual feedback.

Custom Properties

Use variables to maintain consistent styling across your project.

CSS
:root {
  --primary-color: #3B82F6;
}
.element {
  background-color: var(--primary-color);
}

CSS variables enable consistent theming and easy style updates across your entire project.

Visual Effects

Transform your UI with modern CSS visual effects

Gradient Background

1Gradients

Create smooth color transitions for backgrounds.

Show CSS code
CSS
.gradient-box {
  background: linear-gradient(to right, #3B82F6, #8B5CF6);
}

CSS gradients allow smooth transitions between multiple colors without image files.

Shadow Effect

2Shadows

Add depth to your elements with box and text shadows.

Show CSS code
CSS
.shadow-box {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

Shadows create visual hierarchy and depth in your interface.

Blur Effect

3Filters

Apply visual effects like blur and color manipulation.

Show CSS code
CSS
.blur-effect {
  filter: blur(4px);
}
.hue-rotate {
  filter: hue-rotate(90deg);
}

CSS filters enable powerful image and element manipulations directly in the browser.

Rotated

4Transforms

Rotate, scale, skew, or translate elements.

Show CSS code
CSS
.rotated-box {
  transform: rotate(45deg);
}
.scaled-box {
  transform: scale(1.2);
}

Transforms let you manipulate elements in 2D and 3D space without affecting layout.

Interactive Components

Bring your interfaces to life with these CSS-powered interactive elements

Hover Effects

Enhance interactivity with hover states.

View implementation
CSS
.button {
  transition: all 0.3s ease;
}
.button:hover {
  background-color: #2563EB;
  transform: scale(1.05);
}

Hover effects provide visual feedback for interactive elements.

Toggle Switch

Create custom toggle switches with pure CSS.

View implementation
CSS
/* HTML */
<label class="toggle-switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

/* CSS */
.toggle-switch input {
  opacity: 0;
}
.slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: #E5E7EB;
  border-radius: 12px;
  transition: 0.4s;
}
.slider:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: 0.4s;
}
input:checked + .slider {
  background: #3B82F6;
}
input:checked + .slider:before {
  transform: translateX(20px);
}

CSS-only toggle switches are accessible and customizable.

Responsive Design

Create fluid layouts that adapt beautifully to any screen size

Media Queries

Adapt layouts based on screen size.

Mobile View
Responsive Media Queries
/* Mobile first */
.container {
  padding: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
  }
}

Media queries enable responsive designs that adapt to different screen sizes.

Flexible Grids

Create fluid layouts with flexible units.

1
2
3
4
Responsive Flexible Grids
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

Flexible grids automatically adjust the number of columns based on available space.

Hands-on Lab

Build a modern card component using what you've learned

card-component.css

Challenge

Your Mission:

Create a modern card component with these features:

  • Rounded corners (12px border-radius)

    Use border-radius property

  • Subtle shadow (0 4px 6pxrgba(0,0,0,0.1))

    Use box-shadow property

  • Hover effect with slight scale transform

    Use :hover and transform

  • Gradient background (blue to purple)

    Use linear-gradient()

  • Smooth transition (300ms ease)

    Use transition property

Your Workspace

<div class="modern-card">
  <h3 class="card-title">Awesome Card</h3>
  <p class="card-text">Hover me to see the effect!</p>
</div>
.modern-card {
  /* Add your styles here */
  background: #ffffff;
  border-radius: 8px;
  padding: 1.5rem;
}
.modern-card:hover {
  /* Add hover effects here */
}

Show Solution

Complete CSS Solution

.modern-card {
  background: linear-gradient(to right, #3B82F6, #8B5CF6);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 1.5rem;
  color: white;
  transition: all 0.3s ease;
  transform-origin: center;
}

.modern-card:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}

.card-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.card-text {
  font-size: 0.875rem;
  opacity: 0.9;
}

Expected Result

Perfect Card

This has all the required features!

Profile Card Challenge

Craft a beautiful profile card with these CSS properties

Your Mission

Style the profile card to match this example using these CSS properties:

border-radius
box-shadow
text-align
padding
max-width
margin

Example Card

Alex Johnson

Web Developer

Creating beautiful digital experiences

profile-card.css
<div class="profile-card">
  <div class="avatar"></div>
  <h3>Your Name</h3>
  <p class="title">Your Profession</p>
  <p class="bio">Short bio here</p>
</div>
/* Add your styles here */
.profile-card {
  background: white;
}

.avatar {
  width: 80px;
  height: 80px;
  background-color: #E5E7EB;
  border-radius: 50%;
  margin: 0 auto;
}

.title {
  color: #6B7280;
  font-size: 0.875rem;
}

.bio {
  color: #9CA3AF;
  font-size: 0.75rem;
}

Show Solution

Complete CSS Solution

.profile-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 1.5rem;
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
}

.avatar {
  width: 80px;
  height: 80px;
  background-color: #E5E7EB;
  border-radius: 50%;
  margin: 0 auto 1rem;
}

.title {
  color: #6B7280;
  font-size: 0.875rem;
  margin: 0.5rem 0;
}

.bio {
  color: #9CA3AF;
  font-size: 0.75rem;
  margin-top: 1rem;
}

Expected Result

Alex Johnson

Web Developer

Creating beautiful digital experiences

CSS3 Fundamentals?

You've now explored the core concepts of modern CSS styling. These techniques form the foundation for creating beautiful, responsive, and interactive web experiences.

Review CSS3 ConceptsFundamental CSS