Esempio di utilizzo Bootstrap e CSS3 sulla tua landingpage. Proprieta tarnsform e trasition del CSS3

Nei nostri corsi ogni tanto abbiamo nominato la utilità di varie snipet di codice, pezzi del codice già pronto che puoi utilizzare su varie siti. Io molto spesso li utilizzo per il mio lavoro. E oggi vorrei rimanere su proprietà  CSS trasform e farvi vedere come potete aggiungere un blocco interessante sulla vostra pagina o una landing page perche proprio per una landing page è stato creato questo codice.

Abbiamo utilizzato  framework bootstrap per render prima di tutto la nostra pagina flessibile e in secondo luogo abbiamo utilizzato la proprietà trasition per indicare il tempo della animazione e transform del CSS partendo dal centro della immagine per mostrare ulteriore testo. Abbiamo aggiunto anche uno sfondo per separare questo blocco dal resto della pagina.
Vediamo il risultato.   

IT compani

  • Lavorare presso un ufficio moderno con stipendio alto.
  • In una squadra che lavora per risultato.
  • Essere sempre aggiornato e avere costante supporto dei collegi esperti.
  • Grande potenziale nelle crescita della tua carierà .

Dove voi lavorare dopo il nostro corso?

Passa sopra l'immagine per scoprire le opportunità.
E l'effeto che abbiamo creato.

FreeLance

  • Lavorare da qualsiasi luogo del mondo.
  • Orario di lavoro scelto da te stesso.
  • Progetti interessanti, dove potrai far vedere il tuo meglio.
  • Il tuo guadagno dipende solo dalla tua capacita di organizzarsi.

E per dividere il nostro blocco in tre colonne abbiamo utilizzato gli classi del framework Bootrap, come .col-md-4 chi non sa che cosa è può scaricare gratuitamente il nostro piccolo manuale di bootstrap

Vediamo la strutura HTML

<div class="after_course">
<div class="col-md-4">
<h4 class="after_cours__title">IT compani</h4>
<div class="effect eff-5-3">
<img alt="" src="/img2.png">
<div class="caption">
<ul>
<li>Lavorare presso un ufficio moderno con stipendio alto.</li>
<li>Una scuadra che lavora per risultato.</li>
<li>Essere sempre aggiornato e costante supporto dei collegi esperti.</li>
<li>Grande potenziale nelle crescita della tua cariera .</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4">
<h4 class="after_course">Dove voi lavorare dopo il nostro corso?</h4>
<p >Avvicina puntatore per scoprire le possibilita.</p>
</div>
<div class="col-md-4">
<h4 class="title">FreeLance</h4>
<div class="effect eff-5-3 left">
<img alt="" src="/img1.png">
<div class="caption">
<ul>
<li>Lavorare da qualsiasi luogo del mondo.</li>
<li>Orario di lavoro scelto da te stesso.</li>
<li>Progetti interessanti, dove motrai far vedere il tuo meglio.</li>
<li>Il tuo guadagnio dipende solo dalla tua capacita di organizarsi.</li>
</ul>
</div>
</div>
</div>
</div>

e gli stili css del elemento con lo stile caption dove proprio abbiamo usato tarnsition e transform .

.caption {
position: absolute;
top: 0px;
left: 228px;
background: linear-gradient(0deg, #e2dde1 0%, #f3f1f2 100%);
z-index: 1;
width: 298px;
height: 340px;
color: #000000;
padding-top: 15px;
transform: scaleX(0);// proprieta transform per ingrandire la nostra finesta con del testo che allo stato iniziale e ridotta a zero 
transform-origin: left center;//trasformazione parte dal lato sinistro dal centro 
transition: all 0.4s linear 0s;// durata di represtino della grandeza della nostra finestra con del testo
.eff-5-3:hover .caption {
transform: scaleX(1);// e invece qui diciamo che al passagio del mouse ingrandire il nostro elemento con lo stile captio a stato originale indicato nel codice
}

Letto 844 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso