CSS3 Introduction

Overview of CSS3

CSS3 is an advanced specification following CSS2, extending the visual effects and interactive capabilities of web design. It introduces new features such as colors, fonts, animations, transitions, shadows, and multi-column layouts, making web design more flexible and dynamic. Compared to CSS2, CSS3 supports richer media queries, animation effects, gradients, shadows, and multi-column layouts, enhancing the visual experience and interactivity of web pages.

Core Features

CSS3 enhances the visual appeal of web pages by introducing various new properties and functions:

  • Colors: Supports color models such as RGB, HSL, and CMYK, enabling effects like gradients and transparency.
  • Fonts: Supports properties for font size, font family, and font weight, allowing for multi-font switching and typesetting optimization.
  • Animations: Achieves dynamic changes in elements through keyframe animations, such as rotation, scaling, and movement.
  • Transitions: Uses the transition property to create smooth effects for state changes in elements, such as animations triggered by button clicks.
  • Shadows: Supports shadow effects via the box-shadow property, adding visual effects like blur and spread.
  • Multi-column Layouts: Implements multi-column layouts using the column-count property, improving the flexibility of web page typesetting.

Common Properties

New properties in CSS3 are widely used in web design. Below are common properties and their purposes:

  • background: Sets background color, image, or gradient.
  • border: Adjusts border style, width, and color.
  • padding: Controls the space between content and borders.
  • margin: Sets the outer spacing between elements.
  • transform: Achieves transformation effects such as rotation, scaling, and translation.
  • animation: Defines keyframes and properties for animations.
  • transition: Creates smooth transitions for state changes in elements.

Animation Effects

CSS3 animations define dynamic effects through keyframes (keyframes), enabling the following functions:

  • Rotation: Implements element rotation animation using the rotate() function.
  • Scaling: Achieves element enlargement or reduction via the scale() function.
  • Movement: Creates element translation animations using the translate() function.
  • Transparency: Generates gradient transparency effects for elements through the opacity property.

Layout and Selectors

CSS3 introduces new layout models, such as Flexbox and Grid, enhancing web page scalability:

  • Flexbox: Achieves flexible layouts through properties like flex-direction and justify-content.
  • Grid: Implements complex grid layouts using properties such as grid-template-columns and grid-template-rows.
  • Pseudo-classes: Examples include :hover, :focus, etc., enabling style changes under different states.
  • Pseudo-elements: Examples include ::before, ::after, allowing content insertion or decorative elements.

Pseudo-classes and Pseudo-elements

CSS3 pseudo-classes (pseudo-classes) and pseudo-elements (pseudo-elements) provide finer control for web design:

  • Pseudo-classes:
    • :hover: Implements mouse hover effects.
    • :focus: Enables style changes for the focused state.
    • :active: Enables style changes for the active (clicked) state.
  • Pseudo-elements:
    • ::before: Inserts content before an element.
    • ::after: Inserts content after an element.
    • :target: Enables style changes for anchor link targets.

Q&A

Why did CSS3 introduce animations and transitions?

CSS3 uses animation and transition properties to enable dynamic effects for web page elements, improving user experience. Animations allow elements to change through rotation, scaling, movement, etc., while transitions enhance interactivity by smoothly changing attributes, making user operations more fluid.

How to implement shadow effects for elements?

Shadow effects can be implemented using the box-shadow property. The syntax is: 

.element {  
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);  
}

Parameter explanation:

  • 5px 5px 10px: Specifies the position and size of the shadow.
  • rgba(0,0,0,0.3): Specifies the color and transparency of the shadow.

How to use Flexbox layout?

Flexbox layout achieves flexible layouts through properties such as flex-direction and justify-content: 

.container {  
  display: flex;  
  flex-direction: column;  
  justify-content: center;  
}

Parameter explanation:

  • flex-direction: Sets the layout direction (row, column, etc.).
  • justify-content: Sets the alignment of content along the main axis.

What is multi-column layout?

Multi-column layouts implement multi-column typesetting using the column-count property, suitable for long text content: 

.text {  
  column-count: 3;  
  column-width: 300px;  
}

Parameter explanation:

  • column-count: Sets the number of columns.
  • column-width: Sets the width of each column.