Scribd
Upload
3 views

CSS Gradients Shadows FlexBox

The document provides an overview of CSS fundamentals, including gradients, shadows, positioning, transforms, and flexbox. It details the types of gradients (linear, radial, conic), shadow properties (text-shadow, box-shadow), positioning methods (static, relative, absolute, fixed, sticky), and transformation techniques (2D and 3D). Additionally, it explains flexbox properties for containers and items to facilitate layout design.

Uploaded by

dev070panchal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

CSS Gradients Shadows FlexBox

The document provides an overview of CSS fundamentals, including gradients, shadows, positioning, transforms, and flexbox. It details the types of gradients (linear, radial, conic), shadow properties (text-shadow, box-shadow), positioning methods (static, relative, absolute, fixed, sticky), and transformation techniques (2D and 3D). Additionally, it explains flexbox properties for containers and items to facilitate layout design.

Uploaded by

dev070panchal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

CSS Gradients

FlexBox Shadows Page 1 of 6

Table of Contents
CSS Gradients
Types of CSS Gradients:

1. Linear Gradient

2. Radial Gradient

3. Conic Gradient

CSS Shadows
1. Text-Shadow

2. Box-Shadow

CSS Positioning
Types of Positioning:

Positioning Examples:

CSS Transforms
Page 2 of 6

1. 2D Transforms

2. 3D Transforms

CSS Flexbox
1. Flex Container Properties:

2. Flex Items Properties:

References:

# CSS Gradients, Shadows, Positioning, Transforms & Flexbox

CSS Gradients
CSS gradients let you create smooth transitions between colors.

Types of CSS Gradients:


1. Linear Gradient (up/down/left/right/diagonal)
2. Radial Gradient (circular/elliptical from center)
3. Conic Gradient (rotated around a center point)

1. Linear Gradient
Creates a smooth transition between colors along a straight line.
Syntax:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Examples:
Page 3 of 6

background-image: linear-gradient(to right, red, blue); /* Left to right */


background-image: linear-gradient(45deg, red, yellow, green); /* Angle */

2. Radial Gradient
Creates a circular or elliptical color transition.
Syntax:
background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

Examples:
background-image: radial-gradient(circle, red, blue); /* Circular */
background-image: radial-gradient(ellipse at center, yellow, green, blue); /* Elliptical */

3. Conic Gradient
Colors rotate around a center point.
Syntax:
background-image: conic-gradient([from angle] [at position,] color1 degree, color2 degree, ...);

Example:
background-image: conic-gradient(from 90deg, red, yellow, green, blue);

CSS Shadows
CSS allows adding shadows to text and elements.

1. Text-Shadow
Adds shadow to text.
Syntax:
text-shadow: horizontal-offset vertical-offset blur-radius color;
Page 4 of 6

Example:
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

2. Box-Shadow
Adds shadow to an element.
Syntax:
box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color;

Example:
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);

CSS Positioning
Determines how elements are positioned in a document.

Types of Positioning:
1. Static (default)
2. Relative (relative to its normal position)
3. Absolute (relative to nearest positioned ancestor)
4. Fixed (relative to viewport)
5. Sticky (switches between relative and fixed)

Positioning Examples:
position: static; /* Default */
position: relative; /* Adjust using top, right, bottom, left */
position: absolute; /* Moves out of document flow */
position: fixed; /* Stays in the same place on scroll */
position: sticky; /* Sticks after scroll threshold */

CSS Transforms
Page 5 of 6

Transform elements using 2D and 3D transformations.

1. 2D Transforms
Syntax:
transform: translate(x, y) | rotate(angle) | scale(x, y) | skew(x, y);

Examples:
transform: translate(50px, 100px);
transform: rotate(45deg);
transform: scale(1.5, 1.5);
transform: skew(20deg, 10deg);

2. 3D Transforms
Syntax:
transform: rotateX(angle) | rotateY(angle) | rotateZ(angle);

Example:
transform: rotateY(180deg);

CSS Flexbox
Flexbox is a powerful layout system for aligning items easily.

1. Flex Container Properties:


display: flex; /* Enables flexbox */
flex-direction: row | row-reverse | column | column-reverse;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | stretch | baseline;
flex-wrap: nowrap | wrap | wrap-reverse;

Example:
Page 6 of 6

.container {
display: flex;
justify-content: center;
align-items: center;
}

2. Flex Items Properties:


order: 1; /* Controls item order */
flex-grow: 1; /* Defines how much an item should grow */
flex-shrink: 1; /* Defines how much an item should shrink */
flex-basis: 100px; /* Defines the initial size */
align-self: auto | flex-start | flex-end | center | stretch;

Example:
.item {
flex-grow: 2;
flex-basis: 150px;
align-self: center;
}

References:
MDN Docs
W3Schools
CSS Tricks

This guide provides a simple, yet comprehensive approach to CSS fundamentals for real-world
applications. 🚀

You might also like