Cosa sono gli pseudo-elementi?

Dall'autore: Devo ammettere: mi piacciono gli pseudo-elementi CSS :: before e :: after. Sembrano un paio di servi in un'avventura. 3 volte più potenza. 3 volte più stile. Con loro aiuto puoi creare effetti visivi che sono 3 volte più sorprendenti.

Non sarai mai solo - perché ovunque dove sei stato da solo, sarete in tre

Cosa sono gli pseudo-elementi?

 10

Se non hai mai incontrato fino d 'ora  ::before e ::after : puoi chiedere "Di che pseudo-elemento stai parlando?"

Ecco una panoramica di 30 secondi: gli pseudo-elementi sono elementi "immaginari" che possono essere inseriti in un documento usando CSS. Ad esempio,  ho scritto CSS molto semplice:

p::before {
  content: "Hello!";
}

All'improvviso, la parola "Ciao" verrà inserita prima di ogni p contenuto della pagina. Lo pseudo-elemento :: after è simile a :before, ma viene inserito dopo il contenuto.

La proprietà content determina ciò che essi mostrano, ma questi elementi sono completamente stilizzabili, proprio come qualsiasi altro elemento. Quindi non hai  bisogno di inserire il contenuto del testo all'interno. In effetti, molte delle applicazioni più interessanti creati con loro uso sono completamente visive.

Tuttavia, voglio individuare un errore comune, perché l'ho fatto così tante volte. Molte delle applicazioni che esploreremo includono la grafica, ma non contengono il contenuto effettivo delle parole. Questo è ottimo, ma è necessario comunque impostare la proprietà content e, se il contenuto è vuoto, la proprietà display o lo pseudo-elemento non verranno visualizzati. Ho fatto questo errore molte volte ... quindi non dimenticare di iniziare il loro uso impostando il contenuto. Se il tuo risultato finale  è completamente visivo (senza testo), inserisci semplicemente:

content: "";
display: inline-block;
}

Uso semplice :::before e::after

Iniziamo con alcuni semplici modi per usare :: before e :: after.

Icone personalizzate

Un uso semplice e comune, ma molto utile per :: before è l'aggiunta di icone ad elementi di una particolare classe. Ad esempio, FontAwesome utilizza questa tecnica per implementare le sue icone. Puoi usare lo stesso approccio per creare le tue icone.

FontAwesome fa questo con il proprio font e proprietà del contenuto, che offre il vantaggio del ridimensionamento automatico a seconda dell'elemento per il quale è impostato. Se vogliamo usare un'immagine, dobbiamo specificare esplicitamente la sua dimensione, altrimenti lo pseudo-elemento avrà una dimensione di 0 e non sarà visibile.

Ad esempio, se volessi per ogni elemento di una pagina con una classe .profilo visualizzare un cerchio 30 × 30 con un'immagine del mio profilo, potrei fare qualcosa del genere:

<p class="kprofilo">Hello, I'm KBall!</p>
<style>
.profilol:before {
  content: "";
  background-image: url(https://zendev.com/assets/img/kball-headshot-cropped.jpg);
  background-size: cover;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
}</style>

Hello, I'm KBall!

Citazioni (guarda altri esempi sul sito )

 

Un altro utile uso di :: before e :: after è aggiungere virgolette attorno alla citazione. Ad esempio, potremmo creare una classe «quote»  che usa le virgolette doppie prima e dopo e anche una classe di attribuzione, che aggiunge all'inizio  un trattino:

<p class="quote">FAST. GOOD. CHEAP. Choose any two.</p>
<p class="attribution">
Common Project Scheduling Mantra
</p>
<style>
.quote {
  font-style: italic;
}
.quote:before {
  content: "“";
}
.quote:after {
  content:"”"
}
.attribution:before {
  content:"—"
}
</style>

FAST. GOOD. CHEAP. Choose any two.

Common Project Scheduling Mantra

Ci sono molte altre cose comune che potremmo realizzare, ma voglio passare ad alcune cose più eccitanti.

Uso avanzato di before e after

Creare forme (guarda altri esempi sul sito )

Uno dei problemi di lavoro in HTML e CSS è un numero limitato di figure "di base" con le quali devi lavorare.

Infatti, ogni elemento è un rettangolo ... e quindi usando il border  e il border-radius  , puoi arrotondare questo rettangolo in un ovale o un cerchio, oppure inclinare gli angoli e creare un triangolo da esso. Certo, puoi trasformarlo, ma è tutto ...

Ma ora con :: before e ::after hai 3 volte più "blocchi" per gli esperimenti. Ognuno di essi può essere trasformato, posizionato e ruotato individualmente. Questo porta ad una fila fenomenale di forme che è possibile creare con puro CSS.

Abbiamo gia scritto dei articoli sul sito (ioeweb.it) per mostrare questa tecnica di creare varie  figure, qui per puro esempio riporterò solo alcune . Se ci crediate o no, ma questo che vedete sotto e solo un elemento html e nessun disegno!

<div id="yin-yang"></div>
<style>
#yin-yang {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: rgb(43, 85, 115);
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid rgb(43, 85, 115);
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgb(43, 85, 115);
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}
</style>

 

Un altro uso molto interessante degli pseudo-elementi ::before o ::after è la visualizzazione del contenuto di un attributo.

Puoi farlo includendo nel content - attr ([attributename]).

Ad esempio, se si utilizza un widget basato su JavaScript che memorizza un valore come attributo, è possibile visualizzare automaticamente questo attributo senza dover utilizzare alcun JavaScript per visualizzarlo!

Uno dei luoghi in cui l'ho usato prima è lo slider della ZURB Foundation. Lo slider funziona cambiando il valore nel campo di input nascosto ... ma cosa succede se vogliamo rendere visibile il valore corrente nel cursore stesso? I elemento di controllo che manipoliamo è solo uno span ... ma ottiene l'attributo aria per il valore corrente di aria-valuenow. Facendo riferimento ad esso in uno pseudo-elemento usando il contenuto: attr (aria-valuenow), possiamo visualizzarlo direttamente sulla barra di controllo.

 

 

<style>
.slider-handle::before {
  content: attr(aria-valuenow);
  display: block;
  color: white;
}
</style>
<div class="slider" data-slider data-initial-start="50" data-end="200">
  <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>
<script  type="text/javascript">$(document).foundation();</script>

Animazione multistep

Uno degli usi più interessanti che ho visto è la creazione di animazioni multistep. Ancora una volta si usa il fatto che gli pseudo-elementi ti forniscono interi elementi aggiuntivi da manipolare nell'animazione. È possibile animare l'elemento principale in una direzione, e nello stesso momento animare in modo indipendente ogni pseudoelemento.

<style>
.shiny {
  background-color: #0070C9;
  padding: 10px;
  color: white;
  border-radius: 5px;
  transition: 200ms ease-in;
  overflow: hidden;
  position: relative;
}
@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}
.shiny:hover {
  transform: scale(1.2);
}
.shiny::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.shiny:hover::after, .shiny:focus::after {
  animation: sheen 1s forwards;
}</style>
<button class="shiny">Shiny Button</button>

Ci sono molte cose interessanti che potremmo potenzialmente fare con questo. Creare microinterazioni super cool. In un altro esempio il contenuto del testo è inizialmente nascosto e viene visualizzato soltanto quando si fa clic o si passa con il cursore sopra.

<style>
.show-words {
  background-color: #0070C9;
  padding: 10px;
  color: #0070C9;
  border-radius: 5px;
  transition: 200ms ease-in;
  overflow: hidden;
  position: relative;
  text-align: center;
  padding: 75px;
  display: block;
  width: 100%;
}
@keyframes show-at-end {
  99% {
    color: #0070C9 ;
  }
  100% {
    color: #fff;
  }
}
.show-words:hover {
  animation: show-at-end 3s forwards;
}
@keyframes twirl {
  100% {
    transform: rotateZ(720deg) translate(-50%, -50%);
    left: 50%;
    top: 50%; 
  }
}
.show-words::before,
.show-words::after {
  content: attr(data-content);
  position: absolute;
  color: white;
}
  
.show-words::before {
  top: -50%;
  left: -50%;
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.show-words::after {
  top: 150%;
  left: 150%;
  transform: rotateZ(60deg) translate(5em, -7.5em);
}
.show-words:hover::after,
.show-words:focus::after,
.show-words:focus::before,
.show-words:hover::before {
  animation: twirl 3s forwards;
}
</style>
<button data-content="Hidden Words" class="show-words">Hidden Words</button>

Conclusione

Con l'aiuto di questi pseudo-elementi si può fare così tanto che è difficile mostrare tutto. Questi sono solo alcuni degli esempi che trovo particolarmente interessanti.

Fonte: https://zendev.com

Letto 96 volte