Background Properties

background-origin

Specifies the positioning area of background images.

• padding-box: Positions background relative to padding edge (default)
• border-box: Positions background relative to border edge
• content-box: Positions background relative to content edge

background-clip

Defines the painting area of background elements.

• border-box: Background extends to border edge
• padding-box: Background clipped to padding area
• content-box: Background clipped to content area

background-size

Controls background image dimensions.

• cover: Scales image to cover entire container
• contain: Scales image to fit within container

Border Enhancements

.box {
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    border-radius: 8px;
    border-image-source: url("border.png");
    border-image-slice: 30;
    border-image-repeat: round;
    border-image-width: 15px;
}

Text Effects

.text-element {
    text-shadow: 1px 1px 2px #333;
}

Advanced Selectors

Attribute Selectors

[data-type="primary"] { }
[disabled] { }
[class^="btn-"] { }
[href*="example"] { }
[src$=".jpg"] { }

Structural Pseudo-classes

.container > :first-child { }
.container > :last-child { }
.container > :nth-child(3) { }
.container > :nth-last-child(2) { }
.container > :nth-child(odd) { }
.container > :nth-child(even) { }
.container > :nth-child(3n+1) { }

Special Selectors

:target { }
::selection { }
::first-line { }
::first-letter { }

Color Gradients

Linear Gradients

.gradient-box {
    background-image: linear-gradient(
        to bottom right,
        #ff0000,
        #0000ff
    );
}

Radial Gradients

.circle-gradient {
    background-image: radial-gradient(
        120px at center,
        red,
        blue
    );
}

2D Transformations

.transform-example {
    transform: translate(50px, 20px);
    transform: rotate(45deg);
    transform: scale(1.5, 0.8);
    transform: skew(15deg, 10deg);
}

3D Transformations

.three-d-element {
    transform: translate3d(10px, 20px, 30px);
    transform: rotateX(45deg) rotateY(30deg);
    transform: scale3d(1, 1, 2);
    transform-style: preserve-3d;
}

Animation Systems

Transitions

.animated-element {
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0.2s;
    transition-timing-function: ease-in-out;
}

Keyframe Animations

@keyframes spin {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

.spinning-element {
    animation: spin 2s linear infinite;
}

Flexilbe Box Layout

Container Properties

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    align-content: stretch;
}

Flex Direction Options

• row (default): Left to right
• row-reverse: Right to left
• column: Top to bottom
• column-reverse: Bottom to top

Justify Content Values

• flex-start: Items align to start
• flex-end: Items align to end
• center: Items center
• space-between: Even spacing
• space-around: Space around items

Alignment Properties

• align-items: Controls cross-axis alignment
• align-content: Manages wrapped line alignment
• Available values: flex-start, flex-end, center, stretch, space-between, space-around