Blackie

Posted on Nov 28, 2023 • Updated on Dec 30, 2023

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

#webdev #programming #css #beginners

Creating Interactive Web pages

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.

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.

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.

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.

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.

Photo 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.

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.

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:

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.

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.

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.

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.

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-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-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 Shorthand

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

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

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: