Content Màrqueting
Funcions de CSS3 que potser no coneixeu: Flexbox, dissenys de quadrícula, propietats personalitzades, transicions, animacions i diversos fons
Fulls d'estil en cascada (CSS) segueixen evolucionant i les últimes versions poden tenir algunes característiques que potser ni tan sols coneixeu. Aquestes són algunes de les principals millores i metodologies introduïdes amb CSS3, juntament amb exemples de codi:
- Disseny de caixa flexible (Flexbox): un mode de disseny que us permet crear dissenys flexibles i sensibles per a pàgines web. Amb flexbox, podeu alinear i distribuir elements fàcilment dins d'un contenidor. en aquest exemple, el
.container
usos de classedisplay: flex
per habilitar el mode de disseny de flexbox. Eljustify-content
la propietat està establerta acenter
per centrar horitzontalment l'element fill dins del contenidor. Elalign-items
la propietat està establerta acenter
per centrar verticalment l'element fill. El.item
class estableix el color de fons i el farciment de l'element fill.
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
Resultat
Element centrat
- Disseny de quadrícula: un altre mode de disseny que us permet crear dissenys complexos basats en quadrícules per a pàgines web. Amb la quadrícula, podeu especificar files i columnes i després col·locar elements dins de cel·les específiques de la quadrícula. En aquest exemple, el
.grid-container
usos de classedisplay: grid
per activar el mode de disseny de quadrícula. Elgrid-template-columns
la propietat està establerta arepeat(2, 1fr)
per crear dues columnes de la mateixa amplada. Elgap
La propietat estableix l'espaiat entre les cel·les de la quadrícula. El.grid-item
class estableix el color de fons i el farciment dels elements de la quadrícula.
HTML
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
Resultat
Article 1
Article 2
Article 3
Article 4
- Transicions: CSS3 va introduir una sèrie de noves propietats i tècniques per crear transicions a les pàgines web. Per exemple, el
transition
La propietat es pot utilitzar per animar els canvis a les propietats CSS al llarg del temps. En aquest exemple, el.box
class estableix l'amplada, l'alçada i el color de fons inicial de l'element. Eltransition
la propietat està establerta abackground-color 0.5s ease
per animar els canvis a la propietat del color de fons durant mig segon amb una funció de temporització d'entrada fàcil. El.box:hover
class canvia el color de fons de l'element quan el punter del ratolí està sobre ell, activant l'animació de transició.
HTML
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
Resultat
Passa el ratolí
Aquí!
Aquí!
- Animacions: CSS3 va introduir una sèrie de noves propietats i tècniques per crear animacions a pàgines web. En aquest exemple, hem afegit una animació amb l'opció
animation
propietat. Hem definit a@keyframes
regla per a l'animació, que especifica que la caixa ha de girar de 0 graus a 90 graus durant una durada de 0.5 segons. Quan la caixa es posa el cursor per sobre, elspin
s'aplica l'animació per girar el quadre. Elanimation-fill-mode
la propietat està establerta aforwards
per garantir que l'estat final de l'animació es manté un cop finalitzada.
HTML
<div class="rotate"></div>
CSS
.rotate {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
/* Add animation properties */
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: forwards;
}
/* Define the animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
.rotate:hover {
animation-name: spin;
}
Resultat
Passa el ratolí
Aquí!
Aquí!
- Propietats personalitzades CSS: També conegut com Variables CSS, es van introduir propietats personalitzades a CSS3. Us permeten definir i utilitzar les vostres pròpies propietats personalitzades en CSS, que es poden utilitzar per emmagatzemar i reutilitzar valors als vostres fulls d'estil. Les variables CSS s'identifiquen amb un nom que comença amb dos guions, com ara
--my-variable
. En aquest exemple, definim una variable CSS anomenada –primary-color i li donem un valor de#007bff
, que és un color blau que s'utilitza habitualment com a color primari en molts dissenys. Hem utilitzat aquesta variable per configurar elbackground-color
propietat d'un element botó, utilitzant elvar()
funció i passant el nom de la variable. Això utilitzarà el valor de la variable com a color de fons del botó.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Fons múltiples: CSS3 us permet especificar diverses imatges de fons per a un element, amb la possibilitat de controlar-ne el posicionament i l'ordre d'apilament. El fons està format per dues imatges,
red.png
iblue.png
, que es carreguen amb elbackground-image
propietat. La primera imatge,red.png
, es col·loca a l'extrem inferior dret de l'element, mentre que la segona imatge,blue.png
, es troba a l'extrem superior esquerre de l'element. Elbackground-position
La propietat s'utilitza per controlar el posicionament de cada imatge. Elbackground-repeat
La propietat s'utilitza per controlar com es repeteixen les imatges. La primera imatge,red.png
, està configurat per no repetir (no-repeat
), mentre que la segona imatge,blue.png
, està configurat per repetir (repeat
).
HTML
<div id="multibackground"></div>
CSS
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}