Pseudo-classe :target come usare.

Pseudo-classe :target sceglie nel documentare un elemento indicato in  href="" tramite costruzione #URL.  Ma capacita di pseudo classe :target vanno oltre questo semplice uso. Con pseudo-classe :target  è possibile creare elementi interattivi senza coinvolgimento di JavaScript, sostituendo per esempio gestore di eventi click di JS

 

Utilizzo di pseudo-classe :target

1.Creare uno spoiler con :target .

Un semplice esempio di utilizzo di pseudo classe :target  è nascondere e puoi visualizzare il contenuto quando l'utente fa clic. Elemento viene nascosto tramite :not(:target) {display: none;}  (cioè finché non passa sotto :target ) e viene visualizzato con aiuto di :target {display:block;} . Fai clic sulla X sulla destra per aprire lo spoiler.

font-style+

Stili di font normal|italic|oblique|initial|inherit

Nascondere descrizione

Markup HTML

<div class="spec">
  <span>font-style<a href="#prop-about">+</a></span>
  <div id="prop-about">
    <p><b>Stili di font  </b><span>normal|italic|oblique|initial|<wbr>inherit</span></p>
    <a href="#close">Nascondere descrizione </a>
  </div>
</div>

Stili CSS

#prop-about:not(:target) {
  display: none;
}
#prop-about:target {
  display: block;
}

2. Realizzare con :target una finestra modale

È possibile creare una finestra pop-up, che si apre a tutta la pagina o occupera solo una parte di essa. Cliccando sul pulsante nell'angolo in alto a destra si apre la pagina si voltera e vedrai  la forma di iscrizione. Questa opzione del utilizzo di pseudo clase :target puo essere utilizzata  in parcehie situazioni come per esempio per la pagina di destinazione o cosi detti landing page in inglese.

Presto!Uscirà il nuovo corso.
Al lancio sono rimasti

Icriviti al lancio clicando sulla busta in alto a destra. Ricevi lo sconto del 40 %!

.

Iscriviti subito, per avere lo scondo del 40% !

Speriamo che hai clicato la busta in alto a destra e ti sei iscrito al volo,  scherzo, è un semplice esempio di che cosa potrai realizzare con pseudo classe :target!

Ora vediamo il codice:

markup HTML

<div class="esempio1">
<div class="wrap1">
  <div class="intro">
    <a href="#target" class="toggle"></a>
    <div class="content1">
      <h2 class="titolo">Presto!<span>Uscirà il nuovo corso. <br/>Al lancio sono rimasti  </span></h2>
      <div id="timer"></div>
<p>Icriviti al lancio clicando sulla busta in alto a destra. Ricevi lo sconto del 40 %!</p>.
      </div>
  </div>
  <div id="target">
    <a href="#close1" class="close1"></a>
    <form action="" method="get">
      <h2>Iscriviti subito,<span> per avere lo scondo del 40% ! </span></h2>
      <input type="text" placeholder="E-mail" required><button4 type="submit"></button4>
    </form>
  </div>
</div>
</div>

e gli stili CSS

@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700|Playfair+Display:400,700';
*{box-sizing:border-box;transition:.3s linear}
.esempio1 {
  margin: 0;
  height: 500px;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  border: 20px solid rgba(255, 255, 255, 0);
  background: url(/images/css/target_class/prova_target.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.wrap1 {
  position: relative;
  height: 100%;
  -webkit-perspective: 1000;
  perspective: 1000;
  transition: all 0.5s cubic-bezier(.215, .61, .355, 1);
  background: rgba(255, 255, 255, .7);
}
.content1, form {
  width: 100%;
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
  text-align: center;
 }
.toggle, .close1 {
  text-decoration: none;
  display: block;
  float: right;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #3F3461;
  position: relative;
  text-align: center;
  margin: 20px;
}
.close1 {
  background: #4D452A;
}
.toggle:before, .close1:before {
  content: "\f003";
  font-family: FontAwesome;
  color: white;
  line-height: 50px;
  font-size: 24px;
}
.titolo { 
  color: #F71165;  
 font-size: 33px;
  font-family: 'Playfair Display', serif;
  margin-top: 0;
}
.titolo span {
  font-family: 'Open Sans', sans-serif;
  font-size: 28px;
  text-transform: uppercase;
  display: block;
  color: #3F3461;
  letter-spacing: 2px;
}
#target {
  opacity: 0;
  transform: scale(0.5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background: #D4C657;
  position: absolute;
}
#target .titolo, #target span {
  color: white;
}
.close1:before {
  content: "\f00d";
}
#target:target {
  opacity: 1;
  transform: scale(1);
}
#timer span {
  color: #3F3461;  
  font-size: 4em;
  font-weight: bold;
}
form {
  padding: 20px;
}
form input {
  height: auto;
  display: block;
  outline:none;
  width: 100%;
  line-height: 50px;
  font-size: 30px;
  padding-left: 15px;
  border: none;
  background-color: rgba(255, 255, 255, .5);
}
button4 {
  position: absolute;
  bottom: 21px;
  right: 15px;
  width: 80px;
  font-size: 40px;
  background: transparent;
  cursor: pointer;
  border: none;
}
button4:before {
  content: "\f003";
  font-family: FontAwesome;
  color: white;
  font-size: 30px;
  line-height: 50px;
}
@media (max-width: 768px) {
  .titolo {font-size: 3em;}
  .titolo span {font-size: 14px;}
  #timer span {font-size: 3em;}
  form input {font-size: 20px;}
}

 E nel div con id timer ho inserito il taimer jQuery che si chiama The Final Countdown for jQuery v2.1.0 (http://hilios.github.io/jQuery.countdown/)

Vedimo anche il codice di jQuery che fa partire il nostro timer e dove impostiamo la data della sua scadenza. 

$('#timer').countdown('2018/01/01').on('update.countdown', function(event) {
  var $this = $(this).html(event.strftime(''
    + '<span>%-w</span> settimane'
    + '<span>%-d</span> giorni'
    + '<span>%-S</span> secondi'
    ));
});

E per far funzionare questo timer sulla vostra pagina asicurate che vi sia collegeta anche la libreria jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

3. Creare un blocco interativo o adirittura una pagina di benvenuto con :target

Un'altra soluzione elegante che può essere utilizzata per un piccolo sito, sito portafoglio (pagina "Su di me" posiamo rinominare in  "Portofolio" e aggiungere un slaider con delle  foto ). In questo caso vedimo di crere un  blocco interno e quando si fa clic sul testo o  icona nell'angolo in alto a sinistra  viene ruotato lungo l'asse Y, visualizzando / nascondendo la parte posteriore del esso.

Su di me

IO e & WEB

Su di me

Sono semplicemente un bravo ragazzo!

E vediamo il codice del esempio

Markup html

<div class="esempio2">
<div class="container6">
  <div class="flipper" id="target6">
    <div class="front">
      <a href="#target6" class="home button">Su di me </a>
      <div class="share-block">
        <a href="/"><i class="fa fa-facebook"></i></a>
        <a href="/"><i class="fa fa-instagram"></i></a>
        <a href="/"><i class="fa fa-twitter"></i></a>
        <a href="/"><i class="fa fa-youtube"></i></a>
        <a href="/"><i class="fa fa-linkedin"></i></a>
      </div>
    <h2 class="titolo2">IO  e & WEB</h2>
      </div>
    <div class="back">
      <a href="#close" class="close button6"><i class="fa fa-home"></i></a>
      <div class="inner">
        <h2 class="titolo3">Su di me </h2>
        <p style="color:#F2E8E8">Sono semplicemente un bravo ragazzo!</p><p><img src="/images/css/Luiggi2.jpg"></p>
        </div>
      </div>
    </div>
</div>
</div>

Stili CSS

@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700|Playfair+Display:400,700';
*{box-sizing:border-box}
.esempio2 {
  margin: 0;
  background: url(/images/css/target_class/prova_target.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
 height:50vh;
  padding: 20px;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}
.titolo2 { 
  color: white !important;
  font-size: 4em;
  font-family: 'Playfair Display', serif;
  margin: 0;
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
  white-space: nowrap;
  letter-spacing: 5px;
}
.titolo3 {
  font-size: 3em;
color: white !important;
  font-family: 'Playfair Display', serif;
  line-height: 1;
}
.share-block {
  float: right;
  padding-right: 15px;
  line-height: 50px;
}
.share-block a {
  color: #999;
  display: inline-block;
  margin-right: 7px;
  transition: .4s linear;
}
.share-block a:hover {
  color: white;
}
.container6 {
  border: 10px solid rgba(255,255,255,0.2);
  width: 100%;
  height: 100%;
    -webkit-perspective: 1200;
  perspective: 1200;
  -moz-transform: perspective(1200px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d; 
  transform-style: preserve-3d;
  position: relative;
}
.button6 {
  text-decoration: none;
  width: 120px;
  height: 50px;
  position: relative;
  display: inline-block;
  top: 0;
  left: 0;
  z-index: 3;
  line-height: 50px;
  padding-left: 30px;
  transition: .4s linear;
}
.button6:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 20px solid #CE1D5A;
  border-right: 20px solid transparent;
}
.button6:after {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 0;
  height: 0;
  border-top: 20px solid white;
  border-right: 20px solid transparent;
}
.home:hover, .close:hover {
  color: white;
}
.home, .close6 {
  color: #999;
  font-size: 20px;
}
.flipper {
  position: relative;
  width: 100%;
    height: 100%;
  transform-style: preserve-3d;
  transition: .7s linear;  
}
.front, .back {
  font-family: 'Cabin', sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  backface-visibility: hidden;
}
.front {
  z-index: 2;
  transform: rotateX(0deg);
}
.back {
  transform: rotateX(-180deg);
  color: white;
}
.flipper:target {
  transform: rotateX(180deg);
}
.inner {
text-align:center;
  padding: 40px;
  line-height: 2;
  letter-spacing: 1px;
}
/* agiungeremo adaptivita al nostro esempio per gli scermi piccoli
@media (max-width: 768px) {
  .titolo2 {font-size: 3em; white-space:normal;}
  .titolo3 {font-size: 2em}
  
}

 
Letto 506 volte