Fondamenti di web design 11: FLEXBOX, analisi delle proprietà del genitore

Il lavoro fatto finora è servito solo per seminare il terreno ma adesso bisogna accudire le piantine per farle crescere e raccogliere prima o poi i frutti! HTML, HTML5 semantico e CSS3 sono una bomba emergetica per lanciare dei semi anche sul terreno pietroso ma siamo appena all’ inizio e il bello deve ancora venire! Quindi arrivano a fine anno con i saldi anche i FLEXBOX! Ne ha fatta di strada la tecnologia, da quando si strutturavano i lay-out con delle tabelle e poi con le lotte intestine con id e class e stili che si sovrapponevano! I FLEXBOX servono a generare lay-out responsive quindi è obbligo impararli al meglio! Rispondono a una logica padre e figlio quindi una serie di div o box conterranno gli elementi a loro volta aviluppati da un DIV CONTENITORE. Se ne deduce intuitivamente che l’analisi delle proprietà dei flexbox passa attraverso due fasi distinte: da un lato abbiamo l’analisi delle proprietà padre e dall’ altro l’anlisi delle proprietà paterne. Analizziamo le proprietà paterne con un esempio pratico:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox1</title>
    <style>
    body{background:white;font-size:14px;color:#000}
    .container{display:flex;flex-direction:column;color:chartreuse}
    .sp1{background:black;font-size:20px;padding:10px;width:200px;}
    .sp2{background:blue;font-size:20px;padding:10px;width:200px;}
    .sp3{background:red;font-size:20px;padding:10px;width:200px;}
    </style>
</head>
<body>
<div class="container">
<div class="sp1">spazio 1</div>
<div class="sp2">spazio 2</div>
<div class="sp3">spazio 3</div>
</div>
</body>
</html>

A questo punto se inserissi un flex-direction:row come alternativa va da se che avrei tutto su singola riga e analogamente se inserissi flex-direction:row-reverse o flex-direction:column-reverse otterrei la vista di colori opposti che partono dall’ ultima posizione. Da notare come i flexbox siano attivati grazie alla proprietà display valorizzata a flex. E con questo abbiamo visto flex-direction che fa parte delle proprietà box padre. Adesso analizziamo un’ altra caratteristica del genitore che si esprime con flex-wrap che può assumere tre valori sostanzialmente che sono nowrap, wrap e wrap-reverse. Per capire a cosa serve questa proprietà, quando tornando all’ esempio precedente io uso flex-direction:row, quando provo a restringere la pagina succede che il contenuto della riga si restringe ma non si predispone in automatico per il mondo mobile. impostando invece flex-wrap:wrap io avrò una situazione in cui restringendo la pagina vedrò impilati uno sopra l’altro i blocchi, vediamo un esempio:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox1</title>
    <style>
    body{background:white;font-size:14px;color:#000}
    .container{display:flex;flex-wrap:wrap;color:chartreuse}
    .sp1{background:black;font-size:20px;padding:10px;width:200px;}
    .sp2{background:blue;font-size:20px;padding:10px;width:200px;}
    .sp3{background:red;font-size:20px;padding:10px;width:200px;}
    </style>
</head>
<body>
<div class="container">
<div class="sp1">spazio 1</div>
<div class="sp2">spazio 2</div>
<div class="sp3">spazio 3</div>
</div>
</body>
</html>

A questo punto le alternative flex-wrap:nowrap e flex-wrap:wrap-reverse a cosa servono? Con la prima ritorno come comportamento a flex-direction:row praticamente, mentre nel secondo caso impilerò i blocchi partendo dall’ ultimo. A questo punto parliamo di come giustificare i contenuti, come allineare e spaziare a nostro piacimento. Flexbox ci mette a disposizione la direttiva justify-content che può avere vari settaggi:

justify-content:flex-start; //parte da sinistra ad allineare i div
justify-content:flex-end; //parte dalla fine
justify-content:center; //posiziona i div al centro
justify-content:space-between; //inserisce degli spazi tra i div
justify-content:space-around; //inserisce degli spazi anche a dx e sx
justify-content:space-even; //inserisce spazi ovunque equidistanti

Ok ma se volessi allineare rispetto all’ altezza come faccio? Intanto devo inserire un altezza nel contenitore padre. Metto ad esempio 400. Poi ho a disposizione la proprietà align-items che può assumere 4 valori sostanzialmente, i primi tre allineano in alto, oppure al centro rispetto all’ altezza inserita nel contenitore padre oppure in fondo e quello più interessante é strecht che allunga gli elementi DIV per tutta l’altezza, questo per esempio mi consentirebbe anche di inserire delle scacchiere quadrate per esempio. Ora vediamo un esempio solo per l’ultima proprietà, citando però prima le altre:

align-items:flex-start //allineato in alto
align-items:center //allineato al centro
align-items:flex-end //allineato in basso rispetto al 400 del contenitore padre
align-items:sretchth (vedere esempio):
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox1</title>
    <style>
    body{background:white;font-size:14px;color:#000}
    .container{display:flex;align-items:sretchth;color:chartreuse;height:400px}
    .sp1{background:black;font-size:20px;padding:10px;width:400px;}
    .sp2{background:blue;font-size:20px;padding:10px;width:400px;}
    .sp3{background:red;font-size:20px;padding:10px;width:400px;}
    </style>
</head>
<body>
<div class="container">
<div class="sp1">spazio 1</div>
<div class="sp2">spazio 2</div>
<div class="sp3">spazio 3</div>
</div>
</body>
</html>

A questo punto non ci resta che parlare degli allineamenti verticali e della combinazione di istruzioni FLEX-WRAP + ALIGN-CONTENT dove andando a mettere in piedi questa impalcatura possiamo allineare verticalmente questi elementi seguendo certi criteri di posizione e di spaziatura. Quindi con flex-wrap fisso e magari raddoppiando il numero di div con le relative classi nel foglio stile per vedere meglio l’effetto che fa quando il tutto viene ridimensionato, impostiamo la nostra proprietà align-content che ha le stesse peculiarità di align-item ossia quella di assumere i valori di flex-start, flex-end e center OLTRE PERO’ a dare la possibilità di regolare gli spazi durante il ridimensionamento (con align-items non era possibile) che qui diventano quindi:

(con FLEX-WRAP inpostato a WRAP funzionalità di base come per la proprietà
già vista align-items)

align-content:flex-start //allineato in alto
align-content:center //allineato al centro
align-content:flex-end //allineato in basso rispetto al 400 del contenitore padre

IN PIU' per spaziatura e allineamento sul resize della finestra:

align-content:space-between //intermezzi di spazio tra i DIV
align-content:space around // come sopra con in più anche sopra e sotto
align-content:sretchth //allinea sul ridimensionamento tenendo tutti i blocchi compatti

Per quanto riguarda una sintesi delle propietà box padre siamo giunti a flex-end! Nella prossima sessione andremo a scandagliare tutte le proprietà dei figli del contenitore!

Fondamenti di web design 10: le basi del responsive design con le media queries

Ognuno ha il suo sky line da osservare al mattino, magari dalla finestra della sua camera si vedono palazzi alti, palazzi bassi, casette solo da un piano altre a due o tre piani. E’ la metafora perfetta per spiegare i framework che rendono accessibili per tutti i dispositivi i contenuti grafici indipendentemente il palazzo ospitante: mobile, ipad, laptop e desktop tutti con una risoluzione diversa (piani) vengono resi fruibili allo stesso modo grazie al responsive design. Con i CSS abbiamo un contributo importante per risolvere questa problematica. Sappiamo che dobbiamo vedere tutti i contenuti senza problemi sul nostro android mobile, sul nostro linux laptop, sul nostro ipad e anche su computerone e qui intervengono delle regole che stabiliscono dei BREAK POINT, ossia quale è il punto di risoluzione oltre il quale per difetto il tuo contenuto subirà una trasformazione per essere accessibile su un tipo di dispositivo. Vediamo subito un esempio semplice per schiarirci le idee:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  background-color: lightgreen;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
</style>
</head>
<body>

<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>
</html>

Con l’istruzione @media only screen and (max-width: 600px) stiamo dicendo alla pagina che quandò verra ridimensionata in difetto e arriverà a 600 pixel succederà qualcosa e basta vedere l’effetto che fa per sincerarsene. Poi basta superare i seicento pixel in eccesso per ripristinare la condizione originaria, mentre sappiamo che la riga è molto importante perchè consente ai dispositivi mobili di adeguarsi ai contenuti per ottimizzarli al massimo, ossia per farli vedere bene a pieno schermo. Vediamo adesso un caso più complesso e funzionale al business:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">
  <div class="col-3 menu">
    <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
    </ul>
  </div>

  <div class="col-6">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  </div>

  <div class="col-3 right">
    <div class="aside">
      <h2>What?</h2>
      <p>Chania is a city on the island of Crete.</p>
      <h2>Where?</h2>
      <p>Crete is a Greek island in the Mediterranean Sea.</p>
      <h2>How?</h2>
      <p>You can reach Chania airport from all over Europe.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

La pagina è divisa in aree e nello specifico in col nel foglio stile ottimizzate per il desktop, ma analizzando la media query che ha il break point a 768 pixel vediamo che entra in gioco un [class*=”col-“] che cerca tutte le stilizzazioni contrassegnate con COL (presenza dell’ asterisco) per riportare la dimensione della colonna alla sua massima ampiezza con width: 100% che di fatto prende tutte le aree che compongono la pagina e le ADATTA alla condizione di visibilità migliore per il mondo mobile. Tutto ciò può essere sperimentato come al solito restringendo la pagina e sperimentando con i ridimensionamenti per difetto o in eccesso per cambiare la risoluzione del documento. Infine vediamo un esempio dove il ridimensionamento dei contenuti soddisfa tutti, computer, ipad e mondo mobile:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}
</style>
</head>
<body>

<div class="header">
  <h1>Chania</h1>
</div>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>

  <div class="col-6 col-s-9">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  </div>

  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>What?</h2>
      <p>Chania is a city on the island of Crete.</p>
      <h2>Where?</h2>
      <p>Crete is a Greek island in the Mediterranean Sea.</p>
      <h2>How?</h2>
      <p>You can reach Chania airport from all over Europe.</p>
    </div>
  </div>
</div>

<div class="footer">
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

Anche qui basta ridimensionare a fisarmonica la finestra per vedere l’effetto che fa il tutto, da notare che siamo alla presenza di due breack point, uno a 768 pixel oltre al quale siamo sui laptop e desktop e l’altro a seicento che riguarda i tablet mentre poi abbiamo anche la classica media query per il mondo mobile che porta tutta l’ampiezza delle aree contrassegnate dalla classe con al cento per cento di ampiezza. Questi meccanismi di trasformazione che seguono punti di rottura nella risoluzione che delimitano visualizzazioni diverse in base al dispositivo stanno alla base del responsive design e oggi nessun sviluppatore può ignorare queste sacre direttive nello sviluppo delle sue web app! Ovviamente la vecchia strategia ADAPTIVE (DESIGN ADATTIVO) usata nel paleolitico che era solo IERI persiste ancora, nel senso che posso modellare tre fogli stile diversi e associare ciascuno di loro alla mia WEB APP oppure meglio ancora inserire uno script interno che in base alla risoluzione mi smista la visualizzazione della pagina a seconda del valore individuato. L’unica certezza rispetto a tutto questo discorso é soddisfare alla curiosità del DOMANI, visto che la tecnologia si muove a ritmi incessanti e le tecniche prendiamo in esame oggi sono sempre potenzialmente indietro rispetto al trend. Per questa ragione esistono dei framework come Bootstrap (ma ce ne sono molti altri come Bulma o Materialize per esempio) che rilasciano continue versioni migliorate della loro libreria, arricchendo il tutto con nuove funzionalità e scorciatoie.

Fondamenti di web design 9: animazioni con i CSS

Con i CSS si possono fare cose fantastiche diciamocelo, nell’ ultima versione consentono pure movimenti e trasformazioni. Prendiamo ad esempio il seguente gatto, pardon, documento, indirizzo http://umbriawayformazione.altervista.org/uwcode/buon2021.html dove un box (div stilizzato) segue un movimento orizzontale fino a seicento px, per ridiscendere di seicento, per chiudere il quadrato in senso antiorario. Il gatto al centro è stato posizionato con la proprietà ABSOLUTE mentre il movimento é consentito grazie alla direttiva @keyframes che lgato al nome del componente da muovere, dice all’ oggetto quanto e come muversi in base agli step programmati. Vediamo l’inedito codice creato per celebrare l’arrivo del nuovo anno, da notare come al solito il NOME che identifica il blocco divisorio associato animation-name: example che viene richiamato da chi fa il lavoro sporco con @keyframes example, da notare inoltre anche i parametri animation-duration: 10s che di fatto stabilisce la durata dell’ animazione e l’istruzione animation-iteration-count: infinite che dà movimento continuo alla nostra applicazione. Dulcis in fondo non poteva mancare un sempre efficace text-transform:none in simbiosi con text-transform:uppercase che a tappe alternate trasforma il tersto in maiuscolo per dare dinamismo:

<!DOCTYPE html>
<html>
<head>
<title>Buon 2021 dai CSS</title>
<style> 

img {
position: absolute;
top: 350px;
left:350px;
width: 100px;
height: 100px;
}

div {
  width: 200px;
  height: 200px;
  background-color: red;
  position: relative;
  text-align: center; /* centratura orizzontale */
  line-height: 200px; /* centratura verticale */
  animation-name: example;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; text-transform:uppercase;left:600px; top:0px;}
  50%  {background-color:blue; text-transform:none;left:600px; top:600px;}
  75%  {background-color:green; text-transform:uppercase;left:0px; top:600px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<img src="img/gatto.jpg">

<div style="text-align:center"><h6>Buon 2021 da Gatto Baggio</h6></div>

</body>
</html>

Oggi queste dinamiche sono universalmente accettate da tutti i browser e tutti gli script sono diventati MULTIPIATTAFORMA, crossbrowser ma é sempre bene verificare che la nostra portentosa app funzioni ovunque, al contrario di quanto avveniva qualche anno fa. Vediamo un caso meno complicato di caduta dall’ alto verso il basso (o spostamento) di duecento pixel:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: mymove 5s infinite;
}

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}
</style>
</head>
<body>

<h1>The @keyframes Rule</h1>

<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

per creare delle trasformazioni di colore sul posto potremmo creare il seguente codice:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>

</body>
</html>

Anche qui il potenziale offerto dal movimento nei CSS é ampio e ricco di varianti e non é possibile liquidare tutta la questione con pochi banali esempi. Sappiamo però che tutte le informazioni che necessitano per progredire nella conoscenza del nostro profilo da frontend developer sta come sempre nel W3S e quindi quando servirà andremo a consultarlo! Nel frattempo i CSS vi augurano buon anno con gatto Baggio: http://umbriawayformazione.altervista.org/uwcode/buon2021.html

Fondamenti di web design 8: proprietà avanzate dei CSS, approfondimenti

Propietà COLOR

Intanto sulla questione dei colori c’è una cosa importante da dire: che visual studio code quando inseriamo il cancelletto per l’esadecimale ci dà la possibilità di scegliere la nostra sfumatura di colore. Poi abbiamo come alternativa al classico color:white anche la modalità RGB che si basa su una base di rosso verde e blue esempio color:rgb(10, 200, 30); dove i valori vanno da zero a 255. In esadecimale posso indicare anche solo i primi tre numeri che sono la base primaria e che per il bianco e il nero che sono rispettivamente #ffffff e #000000 posso rappresentare anche solo con #fff e #000 . Quello che deve essere rimesso in evidenza è la popolarità dell’ opzione esadecimale da cui scaturisce una selezione diretta tramite gradienti messi a disposizione da visual studio code stesso.

IMMAGINI DI SFONDO

Abituati come siamo a background-color:white per esempio per risolvere la questione dello sfondo, ci sfuggono tutta una serie di funzionalità messe a disposizione per esempio sul versante immagini di sfondo che possono essere posizionate in totale libertà gestendo ripetizioni o non ripetizione sull’ asse verticale ed orizzontale dandoci anche la possibilità di fare cover valide per ogni risoluzione. Prima però analizziamo il seguente codice:

background-color:red;
background-image:url('miaimg.jpg');

utilizzando background posso integrare tutte a due le funzionalità su una sola riga:

basckground: red url('miaimg.jpg');

ritornando ai nostri posizionamenti delle immagini di sfondo analizziamo le seguenti righe:

background-image:url('miaimg.jpg') repeat-x center top
background-image:url('miaimg.jpg') repeat-y center top

nel primo caso avrò sulla stessa riga una sorta di logo (se ha una lunghezza inferiore a quello dello schermo) ripetuto in alto sulla prima linea mentre nel secondo tengo la centralità e il logo si manifesta per via verticale.

LA QUESTIONE DELLO SFONDO: GRADIENTI

Posso dare sfumature radiali e lineari alle mie pagine come sfondo, se non specifico la direzione di default mi viene assegnata dall’ alto verso il basso, la logica é background-image: linear-gradient(direction, color-stop1, color-stop2, …);

background:linear-gradient(90deg, green, white);

utilizza un angolo di novanta gradi per passare dal verde al bianco ma nulla mi impedisce di aggiungere un altro colore:

background:linear-gradient(90deg, red, green, white);

Posso anche usare una trasparenza:

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

questa riga di codice parte dalla sinistra e passa dal trasparente per arrivare al rosso. Le combinazioni sono molteplici e come al solito non é necessario imparare tutto a memoria ma sapere come recuperare velocemente la didattica per poterla applicare nei nostri progetti, in questo caso possiamo trovare materiale ovunque soprattutto sulla bibbia che abbiamo preso come riferimento: https://www.w3schools.com/css/css3_gradients.asp

LA QUESTIONE DEI BROWSER DATATI

Per sicurezza quando modelliamo i nostri CSS e vediamo che sul nostro browser funziona non é detto che anche su quello degli altri utenti della rete l’effetto sia lo stesso. Per cui i CSS parlano anche ai browser datati per esempio per dire che voglio caricare una immagine su un bordo, qui vediamo un esempio per Chrome Mozilla e Opera effetto che si ottiene antemponendo i prefissi adeguati qui sui border-image:

-webkit-border-image
-moz-border-image
-o-border-image

ANCORA SUI BORDER

vediamo un pò di esempi sui BORDI disegnati con i CSS che tra l’altro hanno anche l’opzione di inserire cornici all’ occorrenza (una opzione trash che potrebbe rivelarsi utile in alcuni casi):

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>

Per inserire una immagine come cornice prima devo impostare a trasparente e magari aumento anche il padding:

border: 20px solid transparent;

Per inserire una immagine di bordo conviene fare un bordo spesso (sopra di 20) e poi modellare una istruzione tipo:

border-image:url('miaimmagine.jpg') 20 round;

dove venti è quello che estrapolo in pixel dalla dimensione dell’immagine. Ho anche un’ altra opzione di inserimento con:

border-image:url('miaimmagine.jpg') 20 strecht che stira l'immagine.

BOX SHADOW

Vediamo un esempio di Box con l’ombreggiatura:

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px;
}

#example2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px #888888;
}

#example3 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px red;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>
<p>The box-shadow property defines the shadow of an element:</p>

<h2>box-shadow: 5px 10px:</h2>
<div id="example1">
  <p>A div element with a shadow. The first value is the horizontal offset and the second value is the vertical offset. The shadow color will be inherited from the text color.</p>
</div>

<h2>box-shadow: 5px 10px #888888:</h2>
<div id="example2">
  <p>You can also define the color of the shadow. Here the shadow color is grey.</p>
</div>

<h2>box-shadow: 5px 10px red:</h2>
<div id="example3">
  <p>A red shadow.</p>
</div>

</body>
</html>

Nel foglio stile sono indicato solo due valori (per esempio box-shadow: 5px 10px red;) perché fanno riferimento alla larghezza sull’ asse X e all’ altezza sull’ asse Y, e come da esempio parziale potrei inserire anche dopo altri parametri come la sfocatura blur magari (5px per esempio) e il colore desiderato (in questo caso il red)

APPROFONDIMENTI sulle proprietà TEXT

Sulle ancore ho diverse opzioni per modellarle a mio piacimento, vediamo diverse istruzioni:

a:hover (questa é una pseudoclasse ci sono i due punti a identificarla) {text-decoration:none} //il (;) quando siamo alla fine si può omettere
a:hover {text-decoration:underline}
a:hover {color:red}
a:hover {text-transform:uppercase}

alla prima riga non metto il classico link sottolineato, nel secondo caso il link diventa attivo solo quando mi posiziono sopra, nel terzo caso posso dare una colorazione quando ci vado sopra e infine il testo si trasforma in maiuscolo nella quarta istruzione. La proprietà testo può anche servire per distanziare le lettere, magari di una intestazione h1 per esempio:

h1 {letter-spacing:3px}

oppure posso dare al testo degli allineamenti a destra o centrato:

text-align:right;
text-align:center;

TEXT SHADOWS – OPACITY – EFFECT

Vuole come parametri la largezza, l’altezza, i gradi di sfocatura e il colore questo di base, vediamo delle situazioni attingendo al nostro Vangelo preferito:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container w3-light-grey">
  <h2 style="text-shadow:1px 1px 0 #444">Text Shadow</h2>
</div>

<div class="w3-container w3-blue">
  <h2 style="text-shadow:1px 1px 0 #444">Text Shadow</h2>
</div>

<div class="w3-container w3-green">
  <h2 style="text-shadow:1px 1px 0 #444">Text Shadow</h2>
</div>

</body>
</html>

Dal punto di vista grafico é molto interessante anche l’effetto che scaturisce dall’ opacità, vediamo degli esempi:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>Text Opacity</h2>

  <div class="w3-panel w3-pink">
    <h2 class="w3-opacity">Text Opacity</h2>
  </div>

  <div class="w3-panel w3-blue">
    <h2 class="w3-opacity">Text Opacity</h2>
  </div>

  <div class="w3-panel w3-orange">
    <h2 class="w3-opacity">Text Opacity</h2>
  </div>

  <div class="w3-panel w3-black">
    <h2 class="w3-opacity">Text Opacity</h2>
  </div>
</div>

</body>
</html> 

E infine posso anche creare piacevoli effetti sul testo con i CSS:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">

<h2>Special Effects</h2>

<div class="w3-panel w3-pink">
  <h1 class="w3-opacity">
  <b>Text Opacity + Bold</b></h1>
</div>

<div class="w3-panel w3-amber">
  <h1 class="w3-text-yellow" style="text-shadow:1px 1px 0 #444">
  <b>Yellow Text + Shadow + Bold</b></h1>
</div>

<div class="w3-panel w3-blue">
  <h1 class="w3-text-orange" style="text-shadow:1px 1px 0 #444">
  <b>Orange Text + Shadow + Bold</b></h1>
</div>

</div>
</body>
</html>

Le varianti legati al cambiamento di parametri e di colore sono tante per cui l’unica cosa da fare è integrare queste TRASCURATE opzioni nei nostri progetti per capirne in pieno il POTENZIALE.

Fondamenti di web design 7: la gestione dello spazio con i CSS

Proprietà WIDTH, HEIGHT, MAX-WIDTH, MAX-HEIGHT

Riprendiamo il lavoro fin qui sviluppato all’ indirizzo https://umbriawayinfo.wordpress.com/2020/12/30/fondamenti-di-web-design-6-le-proprieta-dei-css-di-uso-comune/ e vediamo come viene gestito lo spazio con i CSS. Conosciamo tutti proprietà come width e height che applichiamo ad esempio alle immagini ma niente ci impedisce di imporre a un selettore body una lunghezza MAX-WIDTH di 750px. Quando applichiamo altezza e larghezza a una immagine rischiamo di fare un errore in quanto solo uno dei parametri deve essere ridimensionato per assicurare al parametro escluso un ridimensionamento in automatico che non ostacoli la corretta visualizzazione dell’ imnmagine che quindi si adatterà in base alla larhezza o all’ altezza definita senza sgranature. Se dovessi impostare un MAX-WIDTH:750px; al selettore BODY quando provo a ridimensionare a dimensioni più piccole noterò che il contenuto si adatta alla nuova risoluzione. Non solo ma alle lunghezze e alle larghezze posso dare dei valori in percentuali, parametri molto graditi quando si parla di RESPONSIVE DESIGN. Potrei ad esempio impostare nel BODY una proprietà WIDTH:75%; e anche qui restringendo noterò che la pagina si adatta in percentuale alla nuova risoluzione. Potrei analogamente dire a una immagine che deve essere lunga solo il 50% e l’altezza si regolerebbe di conseguenza e anche qui restringendo la pagina noterò che l’immagine si adatta analogamente a quello che accade nel FRAMEWORK BOOTSTRAP quando nella classe inserisco IMG-RESPONSIVE. Da notare che la proprietà MAX-HEIGHT viene usata molto poco in quanto il parametro critico per l’adeguamento dei contenuti coinvolge principalmente l’ampiezza del documento.

C’era una volta la proprietà DISPLAY

Abbiamo tutti sentito parlare in riferimento ai CSS di istruzioni come display:block o display:inline o display:none o ancora display:visible ma a cosa servono esattamente? Per spiegare il display:block ritorniamo al famoso SPAN inserito negli articoli precedenti in un paragrafo a un certo punto della riga per differenziare il testo. Stilizzando lo SPAN con display:block quando vado a visualizzare il paragrafo mi accorgerò che la parte sotto lo SPAN diventerà anche essa una riga autonoma all’ interno del paragrafo. Display impostato a none o visible spegne o accende la parte su cui lo stile agisce, magari una intestazione h1 per esempio. Mentre display:inline serve molto per rendere dei menù orizzontali per esempio all’ interno dei TAG UL che aloro volta conterranno degli LIST ITEM (LI).

Si ma posso posizionare un elemento come voglio?

I moderni CSS consentono la massima libertà espressiva sul posizionamento degli elementi (selettori) grazie a propietà come POSITION che può assumere un valore STATIC o RELATIVE o ABSOLUTE o ancora FIXED oltre a posizionamenti diretti tramite LEFT, RIGHT, TOP, BOTTOM che possono esprimere come al solito valori come in PIXEL o percentuali. Oltre a questo abbiamo a disposizione anche la proprietà Z-INDEX che partendo dal livello più basso (1) può impilare gli elementi uno sopra l’altro. E se dovessi avere problemi nella leggibilità del testo che magari sconfina in altre aree dove sono impostati dei MAX-HEIGHT posso sempre utilizzare la proprietà OVERFLOW per risolvere il problema magari valorizzandola a SCROLL per esempio. Overflow entra in gioco quando ci sono degli spazi limitati da gestire. Estrapoliamo dalla bibbia sacra W3S un esempio:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: visible;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<p>By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:</p>

<div>You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

</body>
</html>

Va da sè che impostando a hidden la stessa proprietà il testo inserito nello spazio bianco scomparirebbe. Ritornando alla nostra fonte di conoscenza, https://www.w3schools.com, posso cercare tutto per chiarirmi tutto, per esempio non mi ricordo come far bloccare un DIV rispetto a un elemento flottante che ha vicino? Vado a cercarmi la proprietà che risolve che è CLEAR e vado a vedere come funziona (valore BOTH). W3S alla Tarantino risolve i problemi!