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 usa display: flex para habilitar o modo de layout flexbox. O justify-content propriedade está definida para center para centralizar horizontalmente o elemento filho dentro do contêiner. O align-items propriedade está definida para center 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 usa display: grid para ativar o modo de layout de grade. O grid-template-columns propriedade está definida para repeat(2, 1fr) para criar duas colunas de largura igual. O gap 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. O transition propriedade está definida para background-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!
  • 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, o spin animação é aplicada para girar a caixa. O animation-fill-mode propriedade está definida para forwards 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!
  • 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 o background-color propriedade de um elemento de botão, usando o var() 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 e blue.png, que são carregados usando o background-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. O background-position propriedade é usada para controlar o posicionamento de cada imagem. O background-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;
    }

    Resultado

    Douglas Karr

    Douglas Karr é CMO de AbrirINSIGHTS e o fundador da Martech Zone. Douglas ajudou dezenas de startups de MarTech bem-sucedidas, auxiliou na due diligence de mais de US$ 5 bilhões em aquisições e investimentos da Martech e continua a auxiliar empresas na implementação e automatização de suas estratégias de vendas e marketing. Douglas é um especialista e palestrante em transformação digital e MarTech reconhecido internacionalmente. Douglas também é autor publicado de um guia para leigos e de um livro sobre liderança empresarial.

    Artigos Relacionados

    Voltar ao topo botão
    Fechar

    Adblock detectado

    Martech Zone é capaz de fornecer a você esse conteúdo sem nenhum custo porque monetizamos nosso site por meio de receita de anúncios, links de afiliados e patrocínios. Agradeceríamos se você removesse seu bloqueador de anúncios ao visualizar nosso site.