Marketing de Conteúdo
Recursos CSS3 que você pode não conhecer: Flexbox, layouts de grade, propriedades personalizadas, transições, animações e vários planos de fundo
Folhas de estilo em cascata (APF) continuam a evoluir e as versões mais recentes podem ter alguns recursos dos quais você pode nem estar ciente. Aqui estão algumas das principais melhorias e metodologias introduzidas com CSS3, juntamente com exemplos de código:
- Layout de caixa flexível (Flexbox): um modo de layout que permite criar layouts flexíveis e responsivos para páginas da web. Com flexbox, você pode facilmente alinhar e distribuir elementos dentro de um contêiner. Neste exemplo, o
.container
classe usadisplay: flex
para habilitar o modo de layout flexbox. Ojustify-content
propriedade está definida paracenter
para centralizar horizontalmente o elemento filho dentro do contêiner. Oalign-items
propriedade está definida paracenter
para centralizar verticalmente o elemento filho. O.item
A classe define a cor de fundo e o preenchimento do elemento filho.
HTML
<div class="container">
<div class="item">Centered Element</div>
</div>
APF
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.item {
background-color: #ddd;
padding: 20px;
}
Resultado
elemento centrado
- Layout da grade: outro modo de layout que permite criar layouts complexos baseados em grade para páginas da web. Com grade, você pode especificar linhas e colunas e, em seguida, colocar elementos dentro de células específicas da grade. Neste exemplo, o
.grid-container
classe usadisplay: grid
para ativar o modo de layout de grade. Ogrid-template-columns
propriedade está definida pararepeat(2, 1fr)
para criar duas colunas de largura igual. Ogap
A propriedade define o espaçamento entre as células da grade. O.grid-item
A classe define a cor de fundo e o preenchimento dos itens 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>
APF
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.grid-item {
background-color: #ddd;
padding: 20px;
}
Resultado
Item 1
Item 2
Item 3
Item 4
- Transições: CSS3 introduziu uma série de novas propriedades e técnicas para criar transições em páginas da web. Por exemplo, o
transition
A propriedade pode ser usada para animar alterações nas propriedades CSS ao longo do tempo. Neste exemplo, o.box
A classe define a largura, a altura e a cor de fundo inicial do elemento. Otransition
propriedade está definida parabackground-color 0.5s ease
para animar alterações na propriedade de cor de fundo em meio segundo com uma função de temporização de entrada e saída suave. O.box:hover
classe altera a cor de fundo do elemento quando o ponteiro do mouse está sobre ele, acionando a animação de transição.
HTML
<div class="box"></div>
APF
.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
Resultado
Pairar
Aqui!
Aqui!
- animações: CSS3 introduziu uma série de novas propriedades e técnicas para criar animações em páginas da web. Neste exemplo, adicionamos uma animação usando o
animation
propriedade. Nós definimos um@keyframes
regra para a animação, que especifica que a caixa deve girar de 0 a 90 graus durante 0.5 segundos. Ao passar o mouse sobre a caixa, ospin
animação é aplicada para girar a caixa. Oanimation-fill-mode
propriedade está definida paraforwards
para garantir que o estado final da animação seja mantido após sua conclusão.
HTML
<div class="rotate"></div>
APF
.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
Pairar
Aqui!
Aqui!
- Propriedades personalizadas do CSS: Também conhecido como Variáveis CSS, as propriedades personalizadas foram introduzidas no CSS3. Eles permitem que você defina e use suas próprias propriedades personalizadas em CSS, que podem ser usadas para armazenar e reutilizar valores em suas folhas de estilo. As variáveis CSS são identificadas por um nome que começa com dois traços, como
--my-variable
. Neste exemplo, definimos uma variável CSS chamada –primary-color e damos a ela um valor de#007bff
, que é uma cor azul comumente usada como cor primária em muitos designs. Usamos essa variável para definir obackground-color
propriedade de um elemento de botão, usando ovar()
função e passando o nome da variável. Isso usará o valor da variável como a cor de fundo do botão.
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
}
- Fundos Múltiplos: CSS3 permite especificar várias imagens de fundo para um elemento, com a capacidade de controlar seu posicionamento e ordem de empilhamento. O fundo é composto por duas imagens,
red.png
eblue.png
, que são carregados usando obackground-image
propriedade. A primeira imagem,red.png
, está posicionado no canto inferior direito do elemento, enquanto a segunda imagem,blue.png
, está posicionado no canto superior esquerdo do elemento. Obackground-position
propriedade é usada para controlar o posicionamento de cada imagem. Obackground-repeat
propriedade é usada para controlar como as imagens se repetem. A primeira imagem,red.png
, está definido para não repetir (no-repeat
), enquanto a segunda imagem,blue.png
, está definido para repetir (repeat
).
HTML
<div id="multibackground"></div>
APF
#multibackground {
background-image: url(red.png), url(blue.png);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
height: 200px;
width: 200px;
}