CSS Functions Reference

CSS functions are powerful tools that allow you to manipulate values, perform calculations, and create dynamic styles. In this guide, we'll cover a comprehensive list of functions from basic to advanced, ensuring you have a solid understanding.

Basic Functions

rgb() Function

Defines a color using red, green, and blue values.

				
					background-color: rgb(255, 0, 0); /* Red */

rgba() Function

Similar to 'rgb()', but includes an alpha (transparency) value.

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

hex() Function

Represents a color using a hexadecimal notation.

				
					color: #00ff00; /* Green */

Mathematical Functions

calc() Function

Performs mathematical calculations on property values.

				
					width: calc(50% - 20px);

min() and max() Functions

Determines the minimum or maximum value.

				
					width: min(300px, 50%);

String Functions

url() Function

Specifies a URL.

				
					background-image: url('image.jpg');

attr() Function

Retrieves the value of an attribute from an HTML element.

				
					content: attr(data-tooltip);

Transformation Functions

rotate() Function

Rotates an element.

				
					transform: rotate(45deg);

scale() Function

Scales an element in the x and y directions.

				
					transform: scale(1.5);

Color Functions

hsl() and hsla() Functions

Defines a color using hue, saturation, and lightness.

				
					background-color: hsl(120, 100%, 50%); /* Green */

invert() Function

Inverts the colors of an element.

				
					filter: invert(100%);

Transition and Animation Functions

transition() Function

Specifies the transition properties.

				
					transition: width 0.5s ease-in-out;

keyframes() Function

Defines the animation sequence.

				
					@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

This CSS Functions Reference covers a diverse range of functions, allowing you to manipulate colors, perform calculations, and create dynamic styles. By mastering these functions, you'll have the tools to enhance the visual appeal and interactivity of your web designs. Experiment, combine functions, and use this guide as a comprehensive resource for your CSS development. Happy coding! ❤️