Les funcions de CSS són eines poderoses que permeten manipular valors de propietats de manera dinàmica i flexible. Aquestes funcions poden ajudar a simplificar el codi CSS i fer-lo més mantenible i reutilitzable. En aquesta secció, explorarem algunes de les funcions més comunes i útils de CSS.
Funcions de Color
rgb() i rgba()
Aquestes funcions s'utilitzen per definir colors en format RGB (Red, Green, Blue) i RGBA (Red, Green, Blue, Alpha).
/* Color RGB */
.color-rgb {
background-color: rgb(255, 0, 0); /* Vermell */
}
/* Color RGBA amb opacitat */
.color-rgba {
background-color: rgba(255, 0, 0, 0.5); /* Vermell amb 50% d'opacitat */
}hsl() i hsla()
Aquestes funcions defineixen colors utilitzant el model de color HSL (Hue, Saturation, Lightness) i HSLA (Hue, Saturation, Lightness, Alpha).
/* Color HSL */
.color-hsl {
background-color: hsl(120, 100%, 50%); /* Verd */
}
/* Color HSLA amb opacitat */
.color-hsla {
background-color: hsla(120, 100%, 50%, 0.5); /* Verd amb 50% d'opacitat */
}Funcions de Manipulació de Valors
calc()
La funció calc() permet realitzar càlculs matemàtics per determinar valors de propietats CSS.
/* Càlcul de l'amplada */
.calculated-width {
width: calc(100% - 50px);
}
/* Càlcul de la mida de la font */
.calculated-font-size {
font-size: calc(1rem + 2vw);
}var()
La funció var() s'utilitza per accedir a variables CSS definides amb --.
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
.using-variables {
background-color: var(--primary-color);
color: var(--secondary-color);
}Funcions de Transformació
rotate()
La funció rotate() s'utilitza per rotar un element al voltant del seu punt d'origen.
scale()
La funció scale() s'utilitza per escalar un element en l'eix X i/o Y.
Funcions de Gradients
linear-gradient()
La funció linear-gradient() crea un gradient lineal entre dos o més colors.
radial-gradient()
La funció radial-gradient() crea un gradient radial des del centre cap a l'exterior.
Exercicis Pràctics
Exercici 1: Crear un Botó amb Gradient i Rotació
Crea un botó que tingui un gradient lineal com a fons i que es roti 15 graus quan es passa el ratolí per sobre.
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercici de Funcions CSS</title>
<style>
.gradient-button {
background: linear-gradient(to right, #ff7e5f, #feb47b);
border: none;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition: transform 0.3s ease;
}
.gradient-button:hover {
transform: rotate(15deg);
}
</style>
</head>
<body>
<button class="gradient-button">Botó amb Gradient</button>
</body>
</html>Exercici 2: Utilitzar calc() per a Mides Responsives
Crea un contenidor que tingui una amplada que sigui el 50% de la mida de la finestra menys 20 píxels.
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercici de Funcions CSS</title>
<style>
.responsive-container {
width: calc(50% - 20px);
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="responsive-container">Contenidor Responsive</div>
</body>
</html>Conclusió
Les funcions de CSS són eines essencials per a qualsevol desenvolupador web, ja que permeten crear dissenys més dinàmics i flexibles. Hem explorat funcions de color, manipulació de valors, transformació i gradients, i hem vist com utilitzar-les en exemples pràctics. Amb aquestes eines, estaràs millor preparat per afrontar qualsevol repte de disseny CSS.
Domini del CSS: De Principiant a Avançat
Mòdul 1: Introducció al CSS
- Què és el CSS?
- Sintaxi i Selectors de CSS
- Com Afegir CSS a HTML
- Propietats Bàsiques de CSS
- Colors en CSS
- Unitats i Mesures en CSS
Mòdul 2: Estilització de Text i Fonts
- Propietats de Text
- Propietats de Fonts
- Integració de Google Fonts
- Alineació i Espaiat de Text
- Decoració i Transformació de Text
Mòdul 3: Model de Caixa i Disseny
- Comprendre el Model de Caixa
- Marge i Farciment
- Vora i Contorn
- Amplada i Alçada
- Dimensionament de Caixa
- Propietat de Visualització de CSS
Mòdul 4: Posicionament i Flotació
- Propietat de Posició de CSS
- Posicionament Estàtic, Relatiu, Absolut i Fix
- Flotació i Neteja de CSS
- Crear Dissenys amb Flotació
- Índex Z de CSS
Mòdul 5: Flexbox
- Introducció a Flexbox
- Propietats del Contenidor Flex
- Propietats dels Elements Flex
- Crear Dissenys amb Flexbox
- Disseny Responsiu amb Flexbox
Mòdul 6: CSS Grid
- Introducció a CSS Grid
- Propietats del Contenidor Grid
- Propietats dels Elements Grid
- Crear Dissenys amb CSS Grid
- Disseny Responsiu amb CSS Grid
Mòdul 7: Tècniques Avançades de CSS
Mòdul 8: Disseny Responsiu
- Introducció al Disseny Responsiu
- Consultes de Mitjans
- Tipografia Responsiva
- Imatges Responsives
- Disseny Mobile-First
Mòdul 9: Preprocessadors i Frameworks
- Introducció als Preprocessadors de CSS
- Conceptes Bàsics de Sass
- Conceptes Bàsics de Less
- Introducció als Frameworks de CSS
- Ús de Bootstrap
Mòdul 10: Millors Pràctiques i Optimització
- Millors Pràctiques de CSS
- Organització del Codi CSS
- Minificació de CSS
- Optimització del Rendiment de CSS
- Depuració de CSS