CSS3 Properties

CSS3 Properties

CSS3 introduced new properties and enhancements for styling web pages. Below is a list of important CSS3 properties, categorized for easy reference.

1. Background & Borders 🎨

✅ background-size

Defines how a background image is scaled.

background-size: cover;  /* Scales to fill the entire area */
background-size: contain; /* Scales to fit without cropping */

✅ background-origin

Controls where the background starts.

background-origin: border-box; /* Starts from the border */

✅ border-radius

Rounds the corners of an element.

border-radius: 10px; /* Makes the corners rounded */

✅ box-shadow

Adds shadow effects to elements.

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

2. Text & Fonts 🔠

✅ text-shadow

Adds a shadow to the text.

text-shadow: 2px 2px 5px gray;

✅ word-wrap

Allows long words to break and wrap.

word-wrap: break-word;

✅ font-feature-settings

Controls advanced typography.

font-feature-settings: "smcp"; /* Enables small caps */

3. Color & Opacity 🎨

✅ opacity

Sets the transparency of an element.

opacity: 0.5; /* 50% transparent */

✅ rgba() & hsla()

Supports transparent colors.

color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */

4. Flexible Layouts (Flexbox & Grid) 📏

✅ display: flex;

Creates a flexible container.

display: flex;
justify-content: space-between;
align-items: center;

✅ display: grid;

Creates a CSS Grid container.

display: grid;
grid-template-columns: repeat(3, 1fr);

5. Transitions & Animations 🎬

✅ transition

Smoothly animates property changes.

transition: all 0.3s ease-in-out;

✅ @keyframes

Defines custom animations.

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

div {
  animation: fadeIn 1s ease-in-out;
}

6. Transformations 🔄

✅ transform

Applies scaling, rotating, translating, or skewing.

transform: rotate(45deg); /* Rotates 45 degrees */
transform: scale(1.2); /* Increases size by 20% */

7. Responsive Design 📱

✅ @media

Defines breakpoints for different devices.

@media (max-width: 768px) {
  body {
    background: lightgray;
  }
}

✅ vw & vh

Defines sizes relative to viewport.

width: 50vw; /* 50% of viewport width */
height: 100vh; /* Full screen height */

8. Miscellaneous Properties

✅ clip-path

Clips an element into a shape.

clip-path: circle(50%);

✅ resize

Makes an element resizable.

resize: both;