Home / Authors / Sergey Fedus

Articles by Sergey Fedus

Animated Falling Snow Using Keyframes in CSS3 without JavaScript

Animated Falling Snow Using Keyframes in CSS3 without JavaScript
Winter has already come! It's time to decorate websites with wintry patterns! The shortest way to do it is by using keyframe animation in CSS3 without JavaScript. This article demonstrates animated falling snow with 3 different types of snowflakes falling in 3 different directions.

Responsive Image Lightbox with 3D Animation Effects using CSS3 Transitions without JavaScript

Responsive Image Lightbox with 3D Animation Effects using CSS3 Transitions without JavaScript
The goal of this article is to demonstrate an example of a responsive image lightbox with a minimal amount of HTML and CSS code. The lightbox comes with 12 animation effects that are all shown in a demonstration. The example uses only CSS3 and works without JavaScript.

How to create responsive image lightbox using only CSS3 transitions with 15 animation effects

How to create responsive image lightbox using only CSS3 transitions with 15 animation effects
This article considers a simple image lightbox with a minimal amount of code to demonstrate the simplest way on how to build it using only CSS3 transitions. It comes with 15 animation effects with a demo example for each one. It has a responsive design and works completely without JavaScript.

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.

How to use and style progress element in HTML5

How to use and style progress element in HTML5
In HTML5, there is a new element - progress which acts as a regular progress bar and is used to visualize the progress completion of a certain task such as data download on a server.

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.

How to disable text selection using user-select property in CSS

How to disable text selection using user-select property in CSS
This property controls selection of text and other elements on a page, except text fields of form, their contents can be selected whether it's allowed or not by user-select CSS property.