DEV Community

Cover image for Part 3: All You Need to Know to Master Web Development With HTML CSS and JavaScript
Blackie
Blackie

Posted on • Updated on

Part 3: All You Need to Know to Master Web Development With HTML CSS and JavaScript

Creating Interactive Web pages

Contents

CSS Positioning
CSS Transition
CSS Animation
CSS Transforms
Project 1
Project 2
Project 3
Project 4
Project 5
References

CSS Positioning

CSS Positioning: deals with how elements are positioned and arranged on a web page. It's like arranging furniture in a room – you can position elements wherever you want to create the desired layout. It includes properties like:
- position: Specifies the type of positioning for an element (static, relative, absolute, fixed, or sticky).
- top, right, bottom, left: Set the position of an element relative to its parent or the viewport.
- z-index: Controls the stacking order of positioned elements.

Position All Photo Credits: CSS Solid

There are five main positioning values in CSS:

  • Static: This is the default positioning for all elements. Elements positioned as static behave as they would in the normal flow of the document.

Static

  • Relative: Relative positioning allows you to move an element relative to its normal position in the document flow. You can use the top, bottom, left, and right properties to specify the offset.

Relative

  • Absolute: Absolute positioning removes an element from the normal flow of the document and positions it relative to its nearest positioned ancestor or the browser viewport.

Absolute

  • Fixed: Fixed positioning is similar to absolute positioning, but the element is positioned relative to the browser viewport, not its nearest positioned ancestor. This means the element will stay in place even when the page is scrolled.

Fixed

FixedPhoto Credits: StackOverFlow

  • Sticky: Sticky positioning is a combination of relative and fixed positioning. The element is positioned relative to its normal position until it reaches the top of the viewport, at which point it becomes fixed.

Sticky
Sticky Photo Credits: Terluinwebdesig

CSS Transition

CSS Transitions add a smooth and gradual animation to the changes of CSS properties. When an element's property is changed, it transitions to the new value over a specified duration. This creates a more visually appealing and user-friendly experience.

CSS Transitions Syntax

Transitions in CSS are made up of four properties, giving us control over how the transition will animate.

Syntax

Breakdown of the syntax:

  • <property>: This is the CSS property that you want to transition. For example, you could transition the opacity, background-color, or margin property.
  • <duration>: This is the duration of the transition in seconds. For example, 1s would make the transition last for one second.
  • <timing-function>: This is the timing function that determines how the transition should accelerate or decelerate. There are a number of different timing functions available, such as ease, ease-in, ease-out, and linear.
  • <delay>: This is the delay in seconds before the transition starts. For example, 2s would make the transition start two seconds after the property change occurs.

Use Cases

CSS Transitions can be used for a variety of purposes, including:

  • Smoothing out property changes

  • Creating hover effects

  • Animating elements

Example

Create a hover effect that fades an element in and out using CSS Transition:

Image description

CSS Animation

CSS Animation allows you to add visual effects and motion to your web pages. It enables you to transform the appearance of HTML elements over time, creating engaging animations that enhance the user experience.

CSS Keyframes
Keyframe animations are defined using the @keyframes rule, followed by a unique identifier for the animation. Inside the @keyframes rule, you specify the keyframes using percentages or keyword values.

Keyframes

Percentage Animations
The start of the animation is marked by 0%, while it ended at 100%. This approach allows developers to pinpoint the exact moment when each keyframe's styles should be applied.

Percentage Animation

Keyword Animations
Offers a straightforward approach to animation control, utilizing predefined animation steps for common use cases. Keywords like 'from', 'to', 'step-start', 'step-middle', and 'step-end' simplify the animation definition process.

Keyword Animation

Applying Animation
To attach elements with the desired animations, developers use the animation-name property. This property specifies the identifier of the keyframe animation that should be applied to the element.

Applying Animation

Animation properties and their values:

Property Value Description
animationName The name of the keyframe animation to apply
duration A number in seconds The duration of the animation
timingFunction ease, ease-in, ease-out, or linear The timing function of the animation
fillMode none, forwards, or backwards The fill mode of the animation
playState running or paused The play state of the animation
delay A number in seconds The delay before the animation starts
iterationCount A positive integer or infinite The number of times the animation should play
direction normal, reverse, or alternate The direction of the animation

Animation-timing-function
The animation-timing-function property plays a crucial role in regulating the animation's pacing, determining how it speeds up or slows down over time. Options like ease, ease-in, ease-out, and linear provide developers with the flexibility to create animations that match the desired visual effect.

Animation Timing Function

Animation-direction
The animation-direction property control the animation's playback direction, controlling whether it plays forward, backward, or alternates between forward and backward directions. Keywords like normal, reverse, and alternate enable developers to tailor the animation's behavior to their specific needs.

Animation Direction

Animation-fill-mode

The animation-fill-mode property dictates how an element's style is maintained before and after the animation plays. For example, setting the value to ‘forwards’ will keep the property values from the end of the animation, whereas the default value ‘none’ will return the elements to their original state after the animation has finished.

Animation Fill mode

Animation Shorthand

CSS Animation offers a convenient shorthand notation that allows developers to combine multiple animation properties into a single declaration.

Shorthand

Example: FadeIn Animation
Let's create an animation to fade an element into view over two seconds with a smooth easing function.

FadeIn Animation

CSS Transforms

CSS Transforms are a powerful tool for manipulating the appearance of HTML elements without affecting their position in the document flow. They allow you to rotate, scale, translate, and skew elements, creating visually engaging and interactive web pages.

Examples of CSS Transforms:

  • Rotate an element:

Rotate

  • Scale an element:

Scale

  • Translate an element:

Translate

  • Skew an element:

Skew Element

Projects

Project 1: Build A Robot

Robot
Click here for the instructions
Click here to open the starter project

Project 2: Image Gallery with Transition Effects

Image Gallery
Click here to open the finished project
Click here to start your own.

Project 3: Top 5 Emoji

Image pro3
Click here for the instructions
Click here to start your own

Project 4: Sunrise

Sunrise
Click here for the instructions
Click here to start your own

Project 5: Interactive Landing Page with Positioning, Transitions, and Animations

Click here to download project files.
Interactive
Click here to download project instructions.

References and Resources

☕ Enjoyed this article? Support my work with a coffee: https://www.buymeacoffee.com/cqvuesleq

Also open for technical writing and frontend dev roles!

Top comments (0)