Master CSS: Pseudo‑Elements, Fonts, Images, SVG, Animations & Performance

“If you never climb a high mountain, you won’t know how high the sky is; if you never stand by a deep stream, you won’t know how thick the earth is.” – excerpt from “Encouragement to Study”.

::before & ::after

These pseudo‑elements add two empty tags that can hold decorative content.

CSS3 generated content

A whole bunch of amazing stuff pseudo‑elements can do

Fonts

Font topics include rendering methods, browser default fonts and resets, @font-face custom fonts, and font performance.

The story behind font rendering

Font rendering

Detailed guide to custom fonts with @font-face

Mobile fonts

Brief discussion of custom icons

Google Fonts

IcoMoon

Images

Images are used either as background or

<img>

elements; optimization focuses on reducing requests and file size.

Image optimization principles:

Avoid using images when possible (e.g., draw simple shapes with CSS3).

Choose between vector and bitmap.

Select appropriate formats (gif, png, jpg, webp, etc.) and provide multiple sizes for different screens.

Combine sprites and compress (lossy or lossless).

Resources:

Lazy‑loading images implementation

CSS Gradients

CSS sprites

Google Image Optimization Guide

Baseline vs. progressive rendering

Image fundamentals and optimization

Exploring WebP

Web performance: image optimization

SVG

SVG is mainly used for icons and animations; its vector nature allows unlimited scaling without loss of quality and usually results in small file sizes.

SVG compatibility

Pocket guide to writing SVG

MDN SVG tutorial

Understanding SVG viewport, viewBox, preserveAspectRatio

SVG sprite technique introduction

SVG

symbol

– a good choice for icons

SVG sprites with JavaScript compatibility

SVG line animation

Comprehensive guide to SVG SMIL animation

Awesome SVG resources

CSS3 Animations

There are two types: transition (two‑frame animation controlling start and end) and animation (multi‑frame with more control).

Intro to CSS 3D transforms

CSS3 Transitions 101

CSS3 Animations 101

CSS3: Animations vs. Transitions

Common CSS3 animation issues

High‑performance animations

CSS triggers

Animation libraries

animate.css

effeckt

hover.css

animatable

CSS3 magic animation

Responsive Design

Responsive design mainly involves setting breakpoints and adjusting styles for each breakpoint.

MDN CSS media queries

Responsive design and breakpoint analysis

Responsive image handling

Media Queries: Width vs. Device Width

Media queries resources

Case studies

For IE8 support, a JavaScript polyfill such as respond.js is required, though responsive design is not recommended for IE8.

Reflow and Repaint

In‑depth web performance management

10 ways to minimize reflows and improve performance

Class Naming

How to name classes

BEM

CCSS

ACSS

SMACSS

Introduction to Object‑Oriented CSS (OOCSS)

Note: This series will be compiled into a curated collection of refactoring tutorials on GitHub.