Keywords / HTML & CSS, CSS3

Tags: HTML & CSS, CSS3

Light up letter sign for error page using CSS3 animation

Light up letter sign for error page using CSS3 animation
Over the last few years of surfing the Internet, we can observe more and more websites which have well-designed and creative error pages. This article proposes an idea how to do it using simple animation in CSS3.

Responsive animated loader using only CSS3: three fading blocks with passing wave effect

Responsive animated loader using only CSS3: three fading blocks with passing wave effect
This loader consists of three fading blocks and an effect of a passing wave. Whole animation is done by using @keyframes rule in CSS3 and doesn't require any animated GIF image.

Expanding effect for appearing text placed over an image using keyframe animation in CSS3

Expanding effect for appearing text placed over an image using keyframe animation in CSS3
Expanding effect for appearing text that is used in this article consists of two parts where each part performs after another is finished. This effect is only made possible by using @keyframes rule in CSS3.

Horizontal and vertical animated stretching effect for appearing text placed over an image using only CSS3

Horizontal and vertical animated stretching effect for appearing text placed over an image using only CSS3
This article demonstrates how to simply animate an appearing text with horizontal and vertical stretching effect that is placed over an image using only CSS3 without JavaScript.

Zoom and rotate effects for appearing text placed over an image using only CSS3

Zoom and rotate effects for appearing text placed over an image using only CSS3
Animation demonstrated in this article uses only CSS3. It consists of one simple semi-transparent layer placed over the image and appearing text with zoom and rotate effects.

Creating analog clock with responsive design using animation in CSS3

Creating analog clock with responsive design using animation in CSS3
The following article is intended for demonstration purposes and shows how animation in CSS3 can be used to create analog clock with responsive design.

How to create animated drop-down menu using only CSS3

How to create animated drop-down menu using only CSS3
This article describes how to create a simple drop-down menu with simple animation using only CSS3 without JavaScript.

Great features for responsive web design using calc in CSS3

Great features for responsive web design using calc in CSS3
calc is a fairly new but still very rarely used feature in CSS3. It allows you to perform simple arithmetic operations directly in style descriptions using all sorts of units.

Animated frames for social media buttons with 3D effect using only CSS3

Animated frames for social media buttons with 3D effect using only CSS3
Current article demonstrates how to create frames with 3D open/close door-effect for social media buttons using only CSS3 without JavaScript.

Styling checkbox as toggle button using only CSS3

Styling checkbox as toggle button using only CSS3
This article demonstrates how to style regular HTML checkboxes as toggle buttons using only CSS3 without JavaScript.