5 esercizi CSS per skillarti
Imparare a programmare è un processo necessario per saper sviluppare siti web. Inoltre, esercitarsi su HTML e CSS permette di assimilare una conoscenza tale da ambire al ruolo di web developer. Insieme a JavaScript questi due formano un bagaglio imprescindibile per creare siti web, prevalentemente lato front-end. In questo articolo vedremo cinque esercizi per migliorare le proprie abilità con CSS, le sue proprietà e l’integrazione con HTML, compagno fidato del linguaggio CSS.
Cascading Style Sheets (CSS), si tratta di un linguaggio di markup utile per determinate lo stile e il design di pagine web. Gestire il layout, il colore o il font dei vari elementi all’interno di una pagina web, senza alterarne i contenuti (settati tramite HTML). In gergo vengono chiamati fogli stile.
Negli esercizi che vedremo riportati ci sarà sia HTML, che CSS, ma non sarà richiesto alcun compito da risolvere nel linguaggio HTML. Il consiglio è sempre quello di cercare di scrivere in maniera autonoma gli script e poi osservare la soluzione.
La difficoltà degli esercizi sarà graduale, in modo tale da comprendere gli esercizi CSS al pieno delle loro finalità.
- Come settare differenti proprietà per il background in una dichiarazione?
- In che modo la proprietà flex-basis specifica la lunghezza iniziale di un elemento flex?
- Usando HTML e CSS crea un input con un prefisso visibile, non editabile. Indizio: usa display:flex per creare un elemento contenitore. Rimuovi il bordo e il contorno dal campo <input>. Applicali all’elemento genitore per farlo sembrare una casella di input.
- Usando HTML e CSS crea un effetto animato che sottolinea una testo quando l’utente ci passa sopra con la freccia del mouse. Indizi: utilizza display: inline-block per fare in modo che la sottolineatura si estenda solo per la larghezza del contenuto del testo. Anima la trasformazione usando transform-origin: left e una transizione appropriata.
- Come impostare correttamente la proprietà di overflow per scorrere la pagina web?
Per focalizzare la pratica sulla scrittura di codice CSS alcuni script HTML necessari al funzionamento dell’esercizio verranno riportati direttamente nelle soluzioni.
Risolvendo questi esercizi potrai prendere una maggiore dimestichezza con alcuni delle più importanti proprietà di CSS e di gestione dei fogli stile.
Soluzioni:
- Settare e gestire lo sfondo di una pagina web è fondamentale, specialmente se ci sono tanti blocchi di testo, titoli ed elementi che devono essere facilmente visibili a seconda di quello che è inserito nello sfondo. Ecco come settare più proprietà del background CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Impostare differenti proprietà background in una sola dichiarazione</title>
<style>
body {
margin-top: 300px;
background: #6699FF no-repeat center/80% url("https://aulab.it/img/logo-aulab-square-black.png");
}
</style>
</head>
<body>
<p>Esercizio 1</p>
</body>
</html>
- Flexbox CSS permette di adattare in modo flessibile e dinamico. È uno strumento che permette di strutturare esplicitamente il layout in una pagina web. Padroneggiarne le proprietà è fondamentale per gestire in maniera semplice i box all’interno di un elemento contenitore. La proprietà flex-basis imposta la grandezza iniziale di un elemento flex.
<!DOCTYPE html>
<html>
<head>
<title> Come la proprietà flex-basis specifica la lunghezza iniziale di un elemento flex? </title>
<style type="text/css">
#aulab {
width: 400px;
height: 100px;
border: 1px solid #3300FF;
display: -webkit-flex;
display: flex;
}
#aulab div {
-webkit-flex-grow: 0;
-webkit-flex-shrink: 0;
-webkit-flex-basis: 40px;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
#aulab div:nth-of-type(2) {
-webkit-flex-basis: 80px;
flex-basis: 80px;
}
</style>
</head>
<body>
<p><strong>Esecizio 2</strong></p>
<div id="aulab">
<div style="background-color:#00FF00;">HTML5</div>
<div style="background-color:#3333FF;">CSS</div>
<div style="background-color:#FF6600;">PHP</div>
<div style="background-color:#FF3399;">SQL</div>
<div style="background-color:#FFCC33;">MYSQL</div>
<div style="background-color:#CCFFFF;">Proprietà flex CSS.</div>
</body>
</html>
- Bisogna far collaborare CSS e HTML, ma focalizziamoci sul codice CSS. In questo caso bisogna operare sull’input box e sul suo .prefix. Il codice HTML serve solo a mostrare quello che ci serve. Di seguito prima il codice HTML e poi il CSS. Per completare l’esercizio non è necessario scrivere anche l’HMTL.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Using HTML, CSS creates an input with a visual, non-editable prefix.</title>
</head>
<body>
<div class="input-box">
<span class="prefix">+39</span>
<input type="phone number" placeholder="254 254 1111"/>
</div>
</body>
</html>
CSS:
<style>
.input-box {
display: flex;
align-items: center;
max-width: 300px;
background: #CCC;
border: 1px solid #a0a0a0;
border-radius: 4px;
padding-left: 0.5rem;
overflow: hidden;
font-family: sans-serif;
}
.input-box .prefix {
font-weight: 300;
font-size: 14px;
color: #999;
}
.input-box input {
flex-grow: 1;
font-size: 14px;
background: #fff;
border: none;
outline: none;
padding: 0.5rem;
}
.input-box:focus-within {
border-color: #777;
}
</style>
33.
- Apparentemente un esercizio complesso, ma basta utilizzare un container e il selettore hover, utilizzato per selezionare elementi quando il mouse viene passato sopra questi.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Usando HTML e CSS crea un’animazione sottolineatura quando l’utente passa il mouse sopra
l’elemento </title>
</head>
<body>
<strong>Preview:</strong><br>
<p class="hover-underline-animation">Hover w3resource text to see the effect!</p>
</body>
</html>
CSS:
<style>
.container{
border: 1px solid #cccfdb;
border-radius: 2px;
}
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #0087ca;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
</style>
- La proprietà overflow CSS per muoversi all’interno di una pagina web (aka scrollare) è molto semplice quanto utile da utilizzare.
<!DOCTYPE html>
<html>
<head>
<title>Come settare la proprietà overflow CSS per scrollare in una pagina web</title>
<style type="text/css">
div.aulab {
background-color: #CCFF00;
width: 150px;
height: 150px;
overflow: scroll;
}
</style>
</head>
<body>
<h2>Esercizio 5</h2>
<div class="aulab">Il linguaggio CSS è utilizzato per dare uno stile personale alla pagina web che
si sta realizzando. </div>
</body>
</html>
Le proprietà CSS sono davvero tante. Si diversificano per utilità, funzionalità, a seconda di quelle che sono le personalizzazioni che si vogliono implementare all’interno della pagina web. Questi esercizi servono a capire, gradualmente, come poter personalizzare al meglio la propria pagina web tramite esercizi di coding online.
Esercitarsi è importante in qualsiasi contesto che riguarda la scrittura di codice, che sia front end o back end, attraverso qualsiasi tipo di paradigma programmazione.
