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 classe display: flex per habilitar el mode de disseny de flexbox. El justify-content la propietat està establerta a center per centrar horitzontalment l'element fill dins del contenidor. El align-items la propietat està establerta a center 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 classe display: grid per activar el mode de disseny de quadrícula. El grid-template-columns la propietat està establerta a repeat(2, 1fr) per crear dues columnes de la mateixa amplada. El gap 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. El transition la propietat està establerta a background-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í!
  • 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, el spin s'aplica l'animació per girar el quadre. El animation-fill-mode la propietat està establerta a forwards 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í!
  • 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 el background-color propietat d'un element botó, utilitzant el var() 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 i blue.png, que es carreguen amb el background-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. El background-position La propietat s'utilitza per controlar el posicionament de cada imatge. El background-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;
    }

    Resultat

    Douglas Karr

    Douglas Karr és CMO de OpenINSIGHTS i el fundador de la Martech Zone. Douglas ha ajudat a desenes d'empreses d'èxit de MarTech, ha ajudat en la diligència deguda de més de 5 mil milions de dòlars en adquisicions i inversions de Martech i continua ajudant les empreses a implementar i automatitzar les seves estratègies de vendes i màrqueting. Douglas és un expert i conferenciant de MarTech en transformació digital reconegut internacionalment. Douglas també és autor publicat d'una guia de Dummie i d'un llibre sobre lideratge empresarial.

    Articles Relacionats

    Torna al botó superior
    a prop

    Adblock detectat

    Martech Zone és capaç de proporcionar-vos aquest contingut sense cap cost perquè monetitzem el nostre lloc mitjançant ingressos publicitaris, enllaços d'afiliats i patrocinis. Agrairem que elimineu el bloquejador d'anuncis mentre visualitzeu el nostre lloc.