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 clase display: flex para activar o modo de deseño de flexbox. O justify-content a propiedade está configurada en center para centrar horizontalmente o elemento fillo dentro do recipiente. O align-items a propiedade está configurada en center 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 clase display: grid para activar o modo de deseño de cuadrícula. O grid-template-columns a propiedade está configurada en repeat(2, 1fr) para crear dúas columnas de igual ancho. O gap 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. O transition a propiedade está configurada en background-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í!
  • 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, o spin aplícase a animación para xirar a caixa. O animation-fill-mode a propiedade está configurada en forwards 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í!
  • 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 configurar background-color propiedade dun elemento botón, usando o var() 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 o background-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. O background-position utilízase para controlar o posicionamento de cada imaxe. O background-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;
    }

    Resultado

    Douglas Karr

    Douglas Karr é CMO de OpenINSIGHTS e o fundador da Martech Zone. Douglas axudou a decenas de startups exitosas de MarTech, axudou na debida dilixencia de máis de 5 millóns de dólares en adquisicións e investimentos en Martech e segue axudando ás empresas a implementar e automatizar as súas estratexias de vendas e mercadotecnia. Douglas é un experto e relator de MarTech en transformación dixital recoñecido internacionalmente. Douglas tamén é autor publicado dunha guía de Dummie e dun libro de liderado empresarial.

    artigos relacionados

    Botón de volta ao principio
    preto

    Adblock detectado

    Martech Zone pode fornecerche este contido sen ningún custo porque monetizamos o noso sitio mediante ingresos publicitarios, ligazóns de afiliados e patrocinios. Agradeceríamos que elimines o teu bloqueador de anuncios mentres visitas o noso sitio.