Position sticky

Position sticky

Il position sticky nei CSS consente di posizionare l’elemento secondo il normale flusso del documento (a differenza di fixed), quando poi scorriamo la pagina, la sua posizione rimane fissa rispetto allo scorrimento.

Ma spieghiamo in dettaglio il funzionamento attraverso un esempio pratico.

Position sticky esempio

Per capire il funzionamento riprendiamo l’esempio di fixed nel quale abbiamo inserito un header con un menù e un contenuto nel main.

Di seguito il codice html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Position relative esempio</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>

    <header>

      <!-- barra navigazione che rimane fissa con sticky -->
      <div class="barra">
        <ul>
          <li><a href="">Coding</a></li>
          <li><a href="">Coding</a></li>
          <li><a href="">Coding</a></li>
        </ul>
      </div>
     <!-- / barra navigazione -->

    </header>
      

    <main>
    <!-- testo principale inserito per visualizzare lo scroll-->

      <div class="testo">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit officia, asperiores sed alias ducimus numquam labore, rem odio cupiditate saepe doloribus. Tempora, maxime doloribus neque natus nesciunt qui quam quae!</p>
        <!-- in questo punto aggiungere altro testo -->
        
      </div>
      <!-- /testo -->

    </main>

  </body>
</html>

Dopo nel CSS togliamo a tutti gli elementi il margin ed il padding che si viene a creare sui browser di default.

All’elemento header diamo il valore position sticky con distanza dall’alto di 0 pixel e con una larghezza ed un’altezza. Centriamo quindi il menu, dando una line-heigth della stessa altezza dell’header e aggiungiamo uno sfondo giallo.

Diamo poi una formattazione per gli elenchi e per il testo.

Ecco di seguito una possibile implementazione.

* {
  margin: 0;
  padding: 0;
}

header {
  position: -webkit-sticky;
  position: sticky;
  top:0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: yellow;
}

.barra ul {
  list-style: none;
}

.barra ul li {
  display: inline-block;
  font-size: 20px;
}

.barra ul li a{
  text-decoration: none;
  padding: 0 20px;
}

main {
  width: 960px;
  margin: auto;
}
.testo {
  font-size: 30px;
}

Provando l’esempio noteremo che l’header segue il normale flusso della pagina, infatti a differenza dell’esempio con fixed non abbiamo dovuto dare un margin top al main per distanziare il testo.

Scorrendo la barra verticale noteremo che il testo scorre sotto la barra di navigazione contenuta nell’header.

Attenzione! Casi in cui position sticky non funziona

A prescindere dal fatto che potrebbe non funzionare su tutti i browser. Molto spesso si cade in un caso in cui position sticky non funzioni. Perché succede?

Uno degli errori più comuni è quello di pensare che, se non ci sono elementi fratelli all’elemento sticky, il testo sotto possa comunque scrollare.

In poche parole se, nell’esempio precedente, avessimo dato la proprietà position sticky alla classe .barra, lo scroll non avrebbe funzionato. Perché .barra non ha elementi fratelli, dunque non ha elementi su cui poter scrollare.

Cambiamo ad esempio il css sopra con questo:

* {
  margin: 0;
  padding: 0;
}

.barra {
  position: -webkit-sticky;
  position: sticky;
  top:0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: yellow;
}

.barra ul {
  list-style: none;
}

.barra ul li {
  display: inline-block;
  font-size: 20px;
}

.barra ul li a{
  text-decoration: none;
  padding: 0 20px;
}

main {
  width: 960px;
  margin: auto;
}
.testo {
  font-size: 30px;
}

Se provate l’esempio noterete che quando scrolliamo la pagina, la barra di navigazione non rimane fissa in alto come vorremmo.

In questo caso .barra è l’unico elemento contenuto all’interno dell’header. Se lasciamo quest’ultimo CSS e aggiungiamo del testo nell’html, come mostrato nell’area del commento del codice sotto, allora la barra si bloccherà, permettendo di scrollare tutto il testo che ho inserito in quel punto. Ma non scrollerà per un eventuale testo inserito nel main.


    <header>
      <!-- barra navigazione -->
      <div class="barra">
        <ul>
          <li><a href="">Coding</a></li>
          <li><a href="">Coding</a></li>
          <li><a href="">Coding</a></li>
        </ul>
      </div>
      <!-- se aggiungiamo testo qui allora scrolla -->
    </header>

Un’altra soluzione al problema di sticky potrebbe essere anche quella di impostare la proprietà display unset o display inline per l’elemento header.

header{
  display: unset;
}

Infine l’ultima soluzione è rappresentata dal fatto che possiamo utilizzare la proprietà z-index con un valore alto, per far sì che la barra rimanga in alto anche con l’utilizzo di position sticky.

In questa lezione abbiamo visto alcuni esempi sul position sticky, nelle prossime lezione svilupperemo altri esempi.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Opacità con rgba

Opacità con rgba

In questo articolo vedremo come creare un’opacità con rgba.

Abbiamo già visto, nella lezione precedente, come utilizzare opacity. Abbiamo anche notato che l’effetto opacità, oltre allo sfondo, viene applicato anche al testo contenuto in un elemento che ha un’opacity.

Quindi vediamo come evitare questo effetto, qualora non si voglia applicare, con l’utilizzo di rgba.

Opacità con rgba – primo esempio

Nella pagina html inseriamo solo un elemento div con del testo, a cui assegniamo una classe, ad esempio, di nome opaco.

Quindi nella pagina html scriviamo semplicemente questo codice:

<div class="opaco">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!
</div>

Dopo, nel css, creiamo un effetto opacità con rgba.

Innanzitutto impostiamo alla classe opaco un colore di sfondo rgba. In questo modo utilizziamo il canale alpha per la trasparenza. Dunque lo impostiamo inizialmente a 0.5.

Poi, quando passiamo con il mouse sopra il box, portiamo il canale alpha ad 1, in modo da togliere completamente la trasparenza. Assegniamo dunque quest’ultimo valore alla classe hover.

Di seguito il codice CSS per l’effetto opacità con rgba:

.opaco {
     background-color: rgba(0, 140, 213, 0.5);
     width: 200px;
     height: 200px;
}
.opaco:hover {
    background-color: rgba(0, 140, 213, 1);
}

Ecco dunque come apparirà il nostro esempio:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!

Come possiamo notare l’effetto opacità viene applicato solo allo sfondo e non al testo.

Opacità con rgba – secondo esempio

In questo secondo esempio vedremo i diversi effetti sui livelli del canale alpha.

Quindi nella pagina html inseriamo 3 elementi con del testo riempitivo:

    <div class="box opaco-zero-uno">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!
    </div>
    <div class="box opaco-zero-cinque ">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!
    </div>
    <div class="box opaco-uno">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!
    </div>

Nel css inseriamo poi le regole per il canale alpha:

.box {
  width: 200px;
  height: 200px;
}

.opaco-zero-uno {
  background-color: rgba(8, 67, 255, 0.1)
}

.opaco-zero-cinque {
  background-color: rgba(8, 67, 255, 0.5)
}

.opaco-uno {
  background-color: rgba(8, 67, 255, 1)
}

Sotto possiamo visionare l’esempio completo:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus provident, aspernatur, quibusdam aut nemo dolores. Voluptates error dolores quod, blanditiis minus esse ipsum impedit tenetur nam, reiciendis possimus iste deleniti!

In questa lezione abbiamo visto come applicare un effetto opacità con rgba, utilizzando cioè il canale alpha, nelle prossime lezioni proporrò altri esempi.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Media queries

Media queries

Le media queries CSS sono delle regole di stile che permettono di adattare i siti web ai diversi dispositivi, dai desktop ai mobile.

Quindi ad esempio si possono impostare delle regole di stile che sono valide per i computer desktop ed altre invece per i tablet oppure per gli smartphone, ecc.

Le media queries hanno dunque la capacità di guardare le caratteristiche di un dispositivo per adattarne il contenuto.

Cosa controllano le media queries?

Controllano due fattori fondamentali:

– la risoluzione del dispositivo, impostando dei valori min-width, max-width, min-height oppure max-height;

– l’orientamento del dispositivo (per dispositivi tablet o smartphone);

Sintassi media queries

La sintassi delle media query è la seguente:

@media not|only mediatype and (expressions) {
  ...
}

Dove mediatype è il tipo di supporto e può assumere uno dei seguenti valori: all, print, speech e screen.

All è utilizzato per indicare tutti i dispositivi, print solo per gli stampati e documenti visualizzati su uno schermo in modalità anteprima di stampa, speech per gli screenreaders cioè i browser vocali, mentre screen indica i dispositivi desktop, ma anche tablet, smartphone, ecc.

Indicare il tipo di supporto è comunque facoltativo tranne nel caso in cui si utilizzi not oppure only.

Il risultato della media queries è un valore booleano, dunque true oppure false.

Se il valore indicato in espressione ed il mediatype (se indicato) sono entrambi veri allora vengono applicate le nuove regole specificate, seguendo le regole a cascata.

Più query si possono combinare utilizzando gli operatori logici. In tal caso, una media query è vera se le espressioni sono tutte vere.

Esempio media queries

Facciamo un esempio di utilizzo, impostando uno sfondo e una dimensione del font per una risoluzione minima di 780pixel.

@media screen and (min-width: 780px) {
  body {
    background-color: lightblue;
    font-size: 20px;
  }
}

Quindi se la viewport è più larga o uguale a 780 pixel lo sfondo della pagina cambierà in lightblue e la dimensione del font sarà di 20pixel.

In questa lezione abbiamo solo introdotto le media queries, nella prossima lezione approfondiremo con tanti altri esempi pratici.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Text shadow

Text shadow

In questa lezione vedremo come utilizzare la proprietà text shadow dei CSS, utile per dare un effetto ombra ad un testo.

Esempi pratici Text shadow

Vediamo dunque degli esempi pratici di utilizzo di questa proprietà e quali valori possono essere indicati.

distanza orizzontale e verticale

La posizione orizzontale e verticale dell’ombreggiatura che rappresentano il primo ed il secondo valore in linea generale.

Quindi ad esempio se imposto text-shadow: 1px 5px significa che la posizione dell’ombreggiatura è di 1 pixel in orizzontale e di 5 pixel in verticale.

sfocatura

Come terzo valore si può impostare anche un raggio di sfocatura, ma è un valore opzionale e di default è 0.

Più il valore è alto, maggiore sarà l’effetto sfocatura e dunque l’ombreggiatura sarà più estesa e schiarita. E viceversa.

Quindi ad esempio text-shadow: 1px 5px 8px significa che, oltre ad avere i valori specificati prima, si ha anche un raggio di sfocatura di 8 pixel.

colore

Un altro parametro opzionale è il colore. Di default, se non specificato, si considera il nero.

Inoltre il colore può essere utilizzato anche come primo parametro.

Se quindi indico quindi text-shadow: 2px 2px 8px rgba(255, 0, 255, 0.5) ottengo come risultato un testo con una sfocatura viola, come da figura sotto.

text shadow css

Come già precisato il raggio di sfocatura si può tralasciare e dunque se ad esempio scrivo text-shadow: 2px 2px rgba(255, 0, 255, 0.5) ottengo un risultato come quello della figura sotto.

Si possono anche combinare effetti utilizzando più colori e con diverse angolature, ma bisogna utilizzare la virgola come separatore.

Facciamo un esempio impostando text-shadow: 2px 2px rgba(255, 0, 255, 0.5), 5px 5px 2px rgba(0, 0, 0, 0.5);

Ecco dunque cosa otteniamo:

Chiaramente oggi abbiamo proposto dei semplici esempi con l’utilizzo della proprietà text shadow, nelle prossime lezione vedremo come utilizzarla nelle nostre pagine web.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

First child

First child

In questa lezione studieremo come utilizzare first child nei CSS.

In particolare possiamo definire la pseudo classe first child come il primo elemento di ciascun gruppo di elementi.

First child – primo esempio

In questo primo esempio realizziamo un elenco puntato e decidiamo ad esempio di colorare solo il primo list item di colore verde.

Ecco il risultato che vogliamo ottenere:

first child

Innanzitutto nel codice html inseriamo un elenco puntato:

  <ul>
    <li>Algobuild</li>
    <li>Scratch</li>
    <li>App Inventor</li>
  </ul>

Poi nel css inseriamo semplicemente questa regola di formattazione:

ul li:first-child{
  color:green;
}

First child – secondo esempio

In questo secondo esempio aggiungiamo un elenco numerato come sotto elenco dell’ultima voce del primo elenco.

Ecco dunque il codice html di esempio:

  <ul>
    <li>Algobuild</li>
    <li>Scratch</li>
    <li>App Inventor
      <ol>
        <li>Eserizio 1</li>
        <li>Eserizio 2</li>
        <li>Eserizio 3</li>
      </ol>
    </li>
  </ul>

Manteniamo la regola CSS vista nel primo esempio. Vedremo che con la stessa regola CSS il primo list item di ol è colorato ugualmente.

Quindi si avrà un risultato come da figura sotto:

ul first child

Perché avviene ciò? Questo avviene perché chiaramente ol ha come genitore ul e quindi la regola css:

ul li:first-child{
  color:green;
}

vale anche in questo caso. Infatti in questo modo si indicano i selettori discendenti.

Se vogliamo evitare quindi di colorare Esercizio 1, allora dobbiamo inserire una regola utilizzando il selettore figlio.

Di seguito ecco il codice css:s

ul > li:first-child{
  color:green;
}

In questo modo si selezionano solo i figli dell’elemento specificato, tralasciando i nipoti.

First child – terzo esempio

In questo terzo esempio creiamo dei paragrafi di testo e decidiamo poi di colore il primo.

Quindi nella pagina html inseriamo il seguente codice:

  <p>Benvenuti su Coding Creativo</p>

  <p>Tutorial sui linguaggi di programmazione</p>

  <div>
    <p>Blog per imparare a programmare</p>
    <p>Esercizi ed esempi pratici</p>
  </div>

  <p>Tantissimi tutorial sui linguaggi di programmazione</p>

Poi nel CSS inseriamo semplicemente questa regola:

p:first-child{
  color: rgb(6, 26, 134);
  background-color: lightgrey;
}

Noteremo che solo dove p è primo figlio avrà la formattazione specificata.

In questa lezione abbiamo studiato la pseudo classe first child, nella prossima vedremo come funziona la last child.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Font nei CSS

CSS border – border width

Border style CSS

Border color CSS

First letter e first line

First letter e first line

In questa lezione vedremo come utilizzare gli pseudo-elementi first letter e first line.

Questi pseudo-elementi nei CSS si utilizzano per stilizzare la prima lettera di una determinata frase oppure un’intera riga.

Facciamo degli esempi pratici utilizzando questi elementi.

First letter e first line – primo esempio

In questo esempio utilizzeremo first letter per ingrandire la prima lettera di un paragrafo a cui daremo anche un colore rosso ed un grassetto.

first letter

Nel codice html inseriamo un paragrafo di testo, come da esempio sotto:

<p class="paragrafo"> Coding Creativo - il blog per imparare a programmare</p>

Nel css formattiamo la classe utilizzando lo pseudo-elemento first letter:

.paragrafo::first-letter {
  font-size: 22px;
  font-weight: bold;
  color:red;
}

First letter e first line – primo esempio

In questo secondo esempio utilizziamo first line per formattare solo la prima riga.

Questa volta in html inseriamo un paragrafo con del testo riempitivo, come da esempio sotto:

<p class="paragrafo"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente expedita laudantium, cumque nesciunt repudiandae, porro excepturi quae voluptate consequatur voluptatibus facilis, quam. Velit dolor alias quo assumenda, debitis ad incidunt.</p>

Dopo nel CSS diamo la formattazione opportuna:

.paragrafo::first-line {
  font-size: 22px;
  font-weight: bold;
  color:red;
}

Ecco il risultato ottenuto:

first line

In questo modo solo la prima linea è colorata di rosso, così come specificato nel CSS.

First letter e first line – terzo esempio

In questo esempio utilizzeremo contemporaneamente gli pseudo elementi first letter e first line.

Realizziamo un paragrafo a cui daremo una formattazione del testo e allo stesso tempo coloriamo la prima riga del paragrafo.

Per fare ciò creiamo la pagina html di esempio con un paragrafo che contiene del semplice testo riempitivo:

<p class="paragrafo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente expedita laudantium, cumque nesciunt repudiandae, porro excepturi quae voluptate consequatur voluptatibus facilis, quam. Velit dolor alias quo assumenda, debitis ad incidunt.
</p>

Nel foglio di stile diamo una formattazione per la prima lettera del paragrafo, creando un rettangolo con sfondo giallo e testo rosso. Per distanziare il testo all’interno del rettangolo diamo un padding di 20 pixel, mentre per distanziare il restante testo usiamo un margin-right di 2 pixel.

Poi diamo alla prima riga semplicemente un grassetto:

.paragrafo::first-letter{
  display: inline-block;
  font-size: 22px;
  font-weight: bold;
  color:red;
  width: 30px;
  height: 30px;
  background-color: yellow;
  padding: 20px;
  margin-right: 2px;
}

.paragrafo::first-line {
  font-weight: bold;
}

Ecco il risultato ottenuto:

first letter e line CSS

In questa lezione abbiamo affrontato dei semplicissimi esempi d’uso degli pseudo elementi first letter e first line.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive