Scribd
Upload
2 views37 pages

02. Advanced CSS

Advanced CSS

Uploaded by

19566005
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
2 views37 pages

02. Advanced CSS

Advanced CSS

Uploaded by

19566005
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 37

Module 02

Full Stack Web Development

Advanced CSS
Outline
● Position
● Media Queries
● Grid & Flexbox
● Animation
● Gradient
Position
The position CSS property sets how an element is
positioned in a document. The top, right, bottom,
and left properties determine the final location of
positioned elements.
There are several position in css:
- Static (default)
- Relative
- Absolute
- Fixed
- Sticky

Src :
https://developer.mozilla.org/en-US/docs/Web/CSS/p
osition
Position - Static

An element with position: static is not positioned in


any special way, it is always positioned according to
the normal flow of the page.
Position - Relative

An element with position: relative; is positioned


relative to its normal position.

Setting the top, right, bottom, and left properties


of a relatively-positioned element will cause it to
be adjusted away from its normal position. Check
out the example, other content will not be
adjusted to fit into any gap left by the element.
Position - Absolute

An element with position: absolute is


positioned relative to the nearest
positioned ancestor (instead of
positioned relative to the viewport, like
fixed).

If an absolute positioned element has no


positioned ancestors, it uses the
document body, and moves along with
page scrolling.

Note: Absolute positioned elements are


removed from the normal flow, and can
overlap elements.
Position - Fixed

An element with position: fixed; is positioned


relative to the viewport, which means it always
stays in the same place even if the page is
scrolled. The top, right, bottom, and left
properties are used to position the element.

A fixed element does not leave a gap in the


page where it would normally have been
located.
Media Queries
Media queries are useful when you want to modify your site or app depending on a device's general type
(such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser
viewport width).

Media queries are used for the following:

● To conditionally apply styles with the CSS @media and @import at-rules.
● To target specific media for the <style>, <link>, <source>, and other HTML elements with the media=
attribute.
● To test and monitor media states using the Window.matchMedia() and MediaQueryList.addListener()
JavaScript methods.

Src: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Media Query Syntax

Example:

The following example shows a menu that will float to the left of the
page if the viewport is 480 pixels wide or wider (if the viewport is
less than 480 pixels, the menu will be on top of the content):
Common Media Query Breakpoints
There is no standard exactly defined, but these are some commonly used ones

● 320px — 480px: Mobile devices


● 481px — 768px: iPads, Tablets
● 769px — 1024px: Small screens, laptops
● 1025px — 1200px: Desktops, large screens
● 1201px and more — Extra large screens, TV
Grid
CSS Grid Layout (aka “Grid” or “CSS Grid”), is a two-dimensional grid-based layout system that, compared
to any web layout system of the past, completely changes the way we design user interfaces.

Src : https://developer.mozilla.org/en-US/docs/Web/CSS/grid
Grid Example
Grid Example
Grid Template Columns
Grid Template Rows
Grid Template Rows
Grid Auto Rows
Grid Auto Rows
Grid Gap
Grid Gap
Grid Lines
Grid Column
Grid Column
Grid Row
Grid Justify Items
Flex
The CSS Flexbox model is a one-dimensional layout approach designed for efficiently organizing and
aligning items within a container. It offers flexibility in managing space distribution and is particularly handy
for crafting clean and responsive layouts, making it well-suited for both small-scale designs and
mobile-friendly applications.

Features of flexbox:

● A lot of flexibility is given.


● Arrangement & alignment of items.
● Proper spacing
● Order & Sequencing of items.

Src : https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Flex Directions
This establishes the main-axis, thus defining the direction flex items are placed in the flex container.
Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily
laying out either in horizontal rows or vertical columns.
Flex-wrap
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as
needed with this property.

Find out more on: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Flex Example
Animation - 2D Transform - Translate
Animation - 2D Transform - Rotate
Animation - 3D Transforms - TranslateX
Animation - @keyframes rule

When you specify CSS styles inside the


@keyframes rule, the animation will gradually
change from the current style to the new style at
certain times.
To get an animation to work, you must bind the
animation to an element.
The following example binds the "example"
animation to the <div> element. The animation
will last for 4 seconds, and it will gradually
change the background-color of the <div>
element from "red" to "yellow":
Animation - @keyframes rule

The following example uses the value "infinite"


to make the animation continue forever:
Gradient
CSS gradients let you display smooth transitions between two or more specified colors.

CSS defines three types of gradients:

● Linear Gradients (goes down/up/left/right/diagonally)


● Radial Gradients (defined by their center)
● Conic Gradients (rotated around a center point)
Gradient - Example

The following example shows a linear


gradient that starts at the top. It starts red,
transitioning to green:
Thank You!
Thank You!

You might also like