CSS - Advanced & More

Understanding pseudo-elements, transitions, animations, and CSS libraries

Code Subtle's photo
Code Subtle
·

5 min read

CSS - Advanced & More

Table of contents

Pseudo Classes and Pseudo Elements

Pseudo classes and elements allow us to style elements based on their state or add content without modifying the HTML structure.

Pseudo Classes

Pseudo classes target elements in specific states, like when a user interacts with them.

Key Characteristics:

  • Uses single colon syntax (:)

  • Responds to user interactions

  • Can be chained with other selectors

:hover

Activates when a user moves their cursor over an element.

/* Code Subtle Button Hover Effect */
.cs-button {
  background: #3498db;
  color: white;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

.cs-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}

:focus

Triggers when an element receives focus (like clicking into an input field).

/* Code Subtle Input Focus Style */
.cs-input {
  border: 2px solid #ddd;
  padding: 8px;
}

.cs-input:focus {
  border-color: #3498db;
  outline: none;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

Pseudo Elements

Pseudo elements create virtual elements that can be styled independently.

Key Characteristics:

  • Uses double colon syntax (::)

  • Can insert content before or after elements

  • Requires content property (can be empty)

::before and ::after

/* Code Subtle Quote Style */
.cs-quote {
  position: relative;
  padding: 20px;
}

.cs-quote::before {
  content: '"';
  font-size: 60px;
  color: #e0e0e0;
  position: absolute;
  left: -20px;
  top: -20px;
}

.cs-quote::after {
  content: '"';
  font-size: 60px;
  color: #e0e0e0;
  position: absolute;
  right: -20px;
  bottom: -40px;
}

💡 Tips for Pseudo Classes and Elements:

  • Use for interactive states and decorative elements

  • Remember content is required for pseudo elements

  • Consider accessibility when hiding content

CSS Transitions

Transitions enable smooth animations between property changes.

Key Properties:

  • transition-property: What to animate

  • transition-duration: How long to animate

  • transition-timing-function: Animation curve

  • transition-delay: Wait time before starting

/* Code Subtle Card Transition */
.cs-card {
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: 
    transform 0.3s ease-out,
    box-shadow 0.3s ease-in-out;
}

.cs-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

Example with Multiple Properties:

/* Code Subtle Button State Transitions */
.cs-button {
  background: #3498db;
  color: white;
  padding: 10px 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cs-button:hover {
  background: #2980b9;
  padding: 10px 30px;
}

💡 Tips for Transitions:

  • Keep transitions under 300ms for best UX

  • Only animate transform and opacity for performance

  • Use cubic-bezier for custom timing functions

Transform Properties

Transform properties allow for visual manipulation of elements without affecting document flow.

2D Transforms

Key Functions:

  • translate(x,y): Move elements

  • rotate(deg): Rotate elements

  • scale(x,y): Change size

  • skew(x,y): Create angular distortions

/* Code Subtle Card Hover Effects */
.cs-card {
  transform: translateY(0) rotate(0) scale(1);
  transition: transform 0.3s ease;
}

.cs-card:hover {
  transform: translateY(-10px) rotate(2deg) scale(1.05);
}

Transform Origin

/* Code Subtle Button Flip Effect */
.cs-flip-button {
  transform-origin: center;
  transition: transform 0.5s ease;
}

.cs-flip-button:hover {
  transform: rotateY(180deg);
}

3D Transforms

3D transforms add depth and perspective to web elements.

Key Properties:

  • perspective: Viewing distance

  • transform-style: preserve-3d: Maintain 3D space

  • backface-visibility: Control hidden faces

/* Code Subtle 3D Card Flip */
.cs-card-container {
  perspective: 1000px;
}

.cs-card {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.cs-card:hover {
  transform: rotateY(180deg);
}

.cs-card-front,
.cs-card-back {
  backface-visibility: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}

.cs-card-back {
  transform: rotateY(180deg);
}

Example of Complex 3D Transform:

/* Code Subtle 3D Cube */
.cs-cube {
  transform-style: preserve-3d;
  animation: rotate 5s infinite linear;
}

.cs-cube-face {
  position: absolute;
  width: 100px;
  height: 100px;
}

.cs-cube-front  { transform: translateZ(50px); }
.cs-cube-back   { transform: rotateY(180deg) translateZ(50px); }
.cs-cube-right  { transform: rotateY(90deg) translateZ(50px); }
.cs-cube-left   { transform: rotateY(-90deg) translateZ(50px); }
.cs-cube-top    { transform: rotateX(90deg) translateZ(50px); }
.cs-cube-bottom { transform: rotateX(-90deg) translateZ(50px); }

CSS Animations

CSS Animations provide more control over animated sequences using keyframes.

Key Components:

  • @keyframes: Define animation sequence

  • animation: Apply animation to elements

/* Code Subtle Loading Animation */
@keyframes cs-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

.cs-loader {
  width: 50px;
  height: 50px;
  background: #3498db;
  border-radius: 50%;
  animation: cs-pulse 1.5s infinite ease-in-out;
}

Complex Animation Example:

/* Code Subtle Notification Badge */
@keyframes cs-notification {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.cs-badge {
  animation: cs-notification 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

Modern CSS Frameworks

Tailwind CSS

Tailwind CSS is a utility-first framework that provides low-level utility classes.

Key Features:

  • Utility-first approach

  • Highly customizable

  • Built-in responsive design

<!-- Code Subtle Card using Tailwind -->
<div class="max-w-sm rounded overflow-hidden shadow-lg hover:shadow-xl transition-shadow duration-300">
  <div class="px-6 py-4">
    <h3 class="font-bold text-xl mb-2">Code Subtle</h3>
    <p class="text-gray-700 text-base">
      Learning advanced CSS concepts made easy
    </p>
  </div>
</div>

Bootstrap

Bootstrap provides pre-built components and a responsive grid system.

<!-- Code Subtle Alert using Bootstrap -->
<div class="alert alert-primary" role="alert">
  <h4 class="alert-heading">Welcome to Code Subtle!</h4>
  <p>Learn modern web development with our comprehensive guides.</p>
</div>

shadcn/ui

shadcn/ui offers beautifully designed components built with Radix UI and Tailwind.

// Code Subtle Dialog using shadcn/ui
import { Dialog } from "@/components/ui/dialog"

export function CSDialog() {
  return (
    <Dialog>
      <DialogTrigger>Open Course</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Welcome to Code Subtle</DialogTitle>
          <DialogDescription>
            Start your journey into advanced CSS concepts.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  )
}

Best Practices and Tips

  1. Performance Optimization:

    • Use will-change property sparingly

    • Prefer transforms over position changes

    • Avoid animating layout properties

  2. Accessibility:

    • Respect user's reduced motion preferences

    • Ensure interactive elements have focus states

    • Provide alternatives for animated content

  3. Framework Selection:

    • Choose based on project requirements

    • Consider bundle size and performance

    • Evaluate learning curve and team expertise

  4. Animation Guidelines:

    • Keep animations subtle and purposeful

    • Use appropriate timing functions

    • Test on various devices and browsers

JavaScriptDOMDOM manipulationjavascript modulesWeb DevelopmentFrontend Developmentfront-endfrontendcode subtlecss pseudo-classesCSSCSS3Front-end DevelopmentwebdevWeb3
Â