Marketing de Contido
Funcións CSS3 que quizais non teñas en conta: Flexbox, deseños de cuadrícula, propiedades personalizadas, transicións, animacións e varios fondos
Follas de estilo en cascada (CSS) seguen evolucionando e as últimas versións poden ter algunhas funcións das que quizais nin sequera teña coñecemento. Aquí están algunhas das principais melloras e metodoloxías introducidas con CSS3, xunto con exemplos de código:
- Deseño de caixa flexible (Flexbox): un modo de deseño que che permite crear deseños flexibles e sensibles para páxinas web. Con flexbox, pode facilmente aliñar e distribuír elementos dentro dun recipiente. neste exemplo, o
.container
usos da clasedisplay: flex
para activar o modo de deseño de flexbox. Ojustify-content
a propiedade está configurada encenter
para centrar horizontalmente o elemento fillo dentro do recipiente. Oalign-items
a propiedade está configurada encenter
para centrar verticalmente o elemento fillo. O.item
class define a cor de fondo e o recheo para o elemento fillo.
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;
}
Resultado
Elemento centrado
- Disposición de cuadrícula: outro modo de deseño que permite crear deseños complexos baseados en grade para páxinas web. Coa grade, pode especificar filas e columnas e, a continuación, colocar elementos dentro de celas específicas da grade. Neste exemplo, o
.grid-container
usos da clasedisplay: grid
para activar o modo de deseño de cuadrícula. Ogrid-template-columns
a propiedade está configurada enrepeat(2, 1fr)
para crear dúas columnas de igual ancho. Ogap
Esta propiedade define o espazo entre as celas da grella. O.grid-item
class define a cor de fondo e o recheo dos elementos da grade.
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;
}
Resultado
Elemento 1
Elemento 2
Elemento 3
Elemento 4
- Transicións: CSS3 introduciu unha serie de novas propiedades e técnicas para crear transicións en páxinas web. Por exemplo, o
transition
pódese usar para animar os cambios nas propiedades CSS ao longo do tempo. Neste exemplo, o.box
class define o ancho, o alto e a cor de fondo inicial para o elemento. Otransition
a propiedade está configurada enbackground-color 0.5s ease
para animar os cambios na propiedade da cor de fondo durante medio segundo cunha función de temporización de fácil entrada. O.box:hover
class cambia a cor de fondo do elemento cando o punteiro do rato está sobre el, desencadeando a animación de transición.
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;
}
Resultado
Pair
Aquí!
Aquí!
- animacións: CSS3 introduciu unha serie de novas propiedades e técnicas para crear animacións en páxinas web. Neste exemplo, engadimos unha animación usando o
animation
propiedade. Definimos a@keyframes
regra para a animación, que especifica que a caixa debe xirar de 0 graos a 90 graos durante 0.5 segundos. Cando se pasa o rato sobre a caixa, ospin
aplícase a animación para xirar a caixa. Oanimation-fill-mode
a propiedade está configurada enforwards
para garantir que o estado final da animación se mantén despois de que remate.
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;
}
Resultado
Pair
Aquí!
Aquí!
- Propiedades personalizadas CSS: Tamén coñecido como Variables CSS, introducíronse propiedades personalizadas en CSS3. Permítenlle definir e utilizar as súas propias propiedades personalizadas en CSS, que se poden usar para almacenar e reutilizar valores nas súas follas de estilo. As variables CSS identifícanse cun nome que comeza con dous guións, como
--my-variable
. Neste exemplo, definimos unha variable CSS chamada –primary-color e dámoslle un valor de#007bff
, que é unha cor azul que se usa habitualmente como cor principal en moitos deseños. Usamos esta variable para configurarbackground-color
propiedade dun elemento botón, usando ovar()
función e pasando o nome da variable. Isto usará o valor da variable como cor de fondo para o botón.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Múltiples fondos: CSS3 permítelle especificar varias imaxes de fondo para un elemento, coa capacidade de controlar a súa posición e orde de apilado. O fondo está composto por dúas imaxes,
red.png
blue.png
, que se cargan usando obackground-image
propiedade. A primeira imaxe,red.png
, sitúase na esquina inferior dereita do elemento, mentres que a segunda imaxe,blue.png
, sitúase na esquina superior esquerda do elemento. Obackground-position
utilízase para controlar o posicionamento de cada imaxe. Obackground-repeat
úsase para controlar como se repiten as imaxes. A primeira imaxe,red.png
, está configurado para non repetirse (no-repeat
), mentres que a segunda imaxe,blue.png
, está configurado para 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;
}