All about CSS3 for Absolute Beginners: Part 11

on

All about CSS3 for Absolute Beginners: Part 11





Welcome Back, Curious Coders!

Let's continue our journey to explore the power and magic of CSS.

Transform: Skew Property


The skew property creates a tilted or slanted effect on an element. Like other transform properties, you can use skewX and skewY for horizontal and vertical alignments. Negative values are accepted, and the skew() function can accept two values: the first for the x-axis and the second for the y-axis. Try it out!

Example:

.container {

transform: translate(50px, 30px) scale(0.7) rotate(30deg) skew(20deg, 40deg);

}


Transitions in CSS


Transitions provide smooth animations when an element changes from one state to another. For example, if you change the color of an element on hover, it happens instantly by default. With transitions, you can add a delay for a better user experience.

Example:

.container:hover {

  background-color: palegreen;
  margin: 15px;
  transition: 1s ease-in-out;

}

Now, when you hover over the container, the background color and margin will change with a 1-second transition.

Types of Transitions:

  • ease
  • ease-in-out
  • ease-out
  • linear

Each has unique start/stop speeds. Experiment with them to observe the differences.

Applying a Transition to One Property
To transition only the background color:

.container {
  transition: background-color 0.5s linear;
}

Adding a Delay

Introduce a delay before starting the transition using the transition-delay property:

.container {
  transition-delay: 0.3s;
}


Cursor and Pointer

The cursor changes to a pointer when you hover over an anchor tag. You can control this behavior using the cursor property.

Example:

.container {
  cursor: pointer;
}

To disable pointer events, use the pointer-events property:

.container {
  pointer-events: none;
}


Shadows in CSS

Add shadows to text with text-shadow and to HTML elements with box-shadow.

Box-Shadow Example:

.container {
  box-shadow: 10px 20px 5px 2px green;
}

10px: Horizontal offset

20px: Vertical offset

5px: Blur radius

2px: Spread radius

green: Shadow color


Text-Shadow Example:

.text {
  text-shadow: 2px 2px 4px grey;
}



Gradients in CSS

CSS supports two types of gradients: linear-gradient and radial-gradient.

Linear Gradient

Create a gradient that transitions between colors along a straight line.

.container {
  background: linear-gradient(to right, green, blue);
}

For more control, use angles or percentages:

.container {

background: linear-gradient(30deg, blue 30%, green 30%, orange 40%);

}

Radial Gradient

Radial gradients spread colors in a circular or elliptical pattern.

.container {

background: radial-gradient(circle at top, red, green);

}

Like linear gradients, you can use percentages to control color transitions.

Common Filters in CSS

Enhance visuals with the filter property. Adjust properties like saturation, grayscale, brightness, contrast, and blur.

Example:

.park-img {

filter: blur(10%) saturate(40%) brightness(35%);

}


Wrapping Up

CSS is truly powerful. The beautiful websites you see every day are brought to life with CSS magic. Keep exploring and learning—there’s so much more to uncover!

Feel free to leave a comment or reach out via the Contact Us page if you have questions. I’m here to help.