fbpx

Google premia i siti di qualità e per poter raggiungere questo risultato è importante utilizzare un linguaggio Html corretto perché ti permette di ridurre tempo e di creare pagine leggere e veloci; questo farà si che successivamente ci saranno pochi problemi sia per te che l’hai sviluppato, sia per gli utenti che lo visiteranno. Vediamo perché. (altro…)

Vuoi realizzare un semplice effetto parallasse? Non c’è bisogno di utilizzare Jquery ma è sufficiente conoscere qualche regola css. L’effetto è ottimo e hai il vantaggio di non appesantire la pagina con con codice ulteriore.

Il segreto sta nell’aggiungere un’immagine in background in un contenitore con una altezza specifica e ben definita. Inoltre devi utilizzare la seguente regola css:

img{
background-attachments: fixed;
}

Questo serve per creare l’effetto parallasse che lascia l’immagine in background fissa, mentre permette di far scorrere le altre sezioni e le immagini al di sopra con velocità differenti.

Le altre proprietà sono usate per centrare e scalare le immagini perfettamente.

img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

In questo esempio usiamo le percentuali e non i pixel in modo da impostare l’immagine esattamente uguale alla larghezza dello schermo e quindi impostiamo l’altezza del contenitore parallax al 100%.
Molto importante è applicare l’altezza pari al 100% sia al tagche al tag.

Il tag “background-attachment: fixed” crea alcuni problemi ad alcuni dispositivi mobili. Si può ovviare a questo utilizzando le media queries e disattivando l’effetto parallasse con la seguente proprietà:

@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “Come realizzare l’effetto parallasse con i Css”—

In questo video-tutorial vediamo un’altro modo di utilizzare l’effetto parallasse per creare un effetto scrolling pagina accattivante con gli oggetti e gli sfondi che fanno un’azione particolare. In questo articolo sono elencati tutti i tipi di plug-in che possiamo trovare ed utilizzare per creare effetti particolari.

Io ho scelto il plugin MultiScroll.js, realizzato da Alvaro Trigo, poiché crea un effetto di divisione della pagina verticale nello scrolling per passare da una sezione all’altra.

Con questo plugin è possibile modificare ed impostare diverse proprietà importanti come la velocità, il tipo di easing, le opzioni di scrolling della tastiera e molte altre proprietà in modo da poter customizzare l’effetto di cui si ha bisogno.

Ecco l’esempio creato dello sviluppatore del plug-in e che ho cercato di realizzare per voi nella risorsa che ho caricato sul mio blog.

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “Utilizza MultiScroll.js per realizzare un effetto scrolling accattivante”—

In questo video-tutorial ti spiego come realizzare un sito web più dinamico per attrarre maggiormente tuoi utenti. Con l’effetto parallasse crei maggior interesse per il tuo sito web perchè al movimento del mouse si muovono gli oggetti presenti sulla homepage. Quanto è noioso un sito web statico? Sono sufficienti alcuni semplici accorgimenti per vivacizzare e rendere più appetibile il tuo sito web. In questo primo video vi mostrerò come aggiungere movimento ad alcuni elementi della vostra home con l’effetto parallasse utilizzando un semplice plugin.
Il plugin Parallax.js che ho utilizzato nella mia risorsa e che potete scaricare nel link in fondo all’articolo, è stato realizzato da Matthew Wagerfield.

#1 – Scarica i file per il tuo progetto al seguente link e successivamente inserisci lo scrip nel foglio html:

<div id="scene”>
</div>

#2 – Crea i tuoi elementi html ed inseriscili nel codice html. Tieni conto che ogni istanza di Parallax ha bisogno di un elemento contenitore che chiamiamo scena. Puoi indicare il nome che vuoi:


<div id=""scene”"></div>

Tutti gli elementi figli della scena diventeranno oggetti in movimento e dei livelli indipendenti.

#3 – Inserisci l’opzione “data-depth” per definire il movimento e la profondità degli elementi. Questo elemento non deve mancare, altrimenti il plug-in non funziona.


<div id="scene”> <div data-depth=“0.2">Il mio primo livello</div>

<div data-depth="“0.6"">Il mio secondo livello</div>

#4 – Richiama il plugin nel foglio html:

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);

Per capire come utilizzare le altre opzioni visita la pagina del produttore

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “Parallax.js: aggiungi un tocco di vivacità al tuo sito web”—

La grande novità del 2018 è il rilascio di un Working Draft del W3C con nuove regole di Css4 che sono ancora in fase di discussione. Per cui prima che il Working Draft diventi Editor’s Draft, le cose potrebbero cambiare, ma credo che valga già la pena di introdurre il discorso che rivoluzionerà il codice Css ed Html. Rispetto al passato, le specifiche standard sono rilasciate in maniera più veloce e anche i browsers stessi, compreso Explorer, possono adottare più velocemente le nuove specifiche e funzionalità in modo da non dover aspettare molto a lungo per poter utilizzarle.
Prima di utilizzare puoi controllare lo stato di supporto attuale dei browser su Caniuse; noterai che molti selettori non sono ancora supportati, ma lo diventeranno ben presto.
La parte più importante dei selettori riguarda lo sviluppo dei form o moduli contatti che presentano tantissime novità.

Ecco i selettori CSS4 che possiamo utilizzare ora e che aggiungono più potere e più flessibilità al tuo lavoro e faccio un paragone tra il vecchio codice ed il nuovo.

SELETTORI CSS4

1# – Negation:
Questo selettore che si esprime con il :not è stato introdotto sin dai CSS3 ma adesso può accettare selettori multipli come un argomento, lasciando il nostro codice più leggibile e coinciso.

La sintassi attuale:

h1:not(.this-element):not (.another-element)
{
font-size: 1.2em
}

Nuova sintassi:

h1:not(.this-element, .another-element)
{
font-size:1.2em;
}

Questo elemento è supportato solo da Safari per ora.

#2 – Matches:

Questo elemento è l’opposto del precedente e può anche accettare selettori multipli come un argomento.
La nuova sintassi non cambia molto rispetto a quella precedente ma migliore in leggibilità.

La sintassi attuale:

h1.this-element,
h1.another-element
{
font-weight:bold;
}

Nuova sintassi:

h1:matches (.this-element, another-element)
{
font-weight:bold;
}

Questo elemento è supportato solo da tutti i Browsers

#3 – Relational

È possibile che questo elemento potrebbe non essere sviluppato a causa della sua complessità ad essere implementato.Questo elemento potrebbe permettere di dare uno stile ad un elemento in base ai suoi contenuti.

.container:has(.this-element)
{
background:green:
}

 

#4 – Drop

Questo selettore permette di aggiungere lo stile agli obiettivi di HTML5 drop. Lo stile può essere applicato se la parte da trascinare è valida, invalida o attiva.

.element:drop
{
border: 3px solid, background:grey
}
.element:drop(active)
{
border-color:blue;
}
.element:drop(valid)
{
border-color:green;
}
.element:drop(invalid)
{
border-color:red
}

#5 – Indeterminate

Associa elementi che sono in uno stato indeterminato. Checkboxes, radio button e progress bars possono essere in questo stato. Per esempio un checkbox genitore con 2 checkbox figli selezionati, può essere indeterminato. Questo può essere fatto solo in Javascript e non in HTML

input[type=“checkbox”]: indeterminate
{
opacity: 0.75
}

Questo selettore è supportato solo dai browser: Firefox, Chrome e Safari

#6 – Default

Associa elementi in default tra una serie di elementi simili, come per esempio l’evento selezionato in un elemento:

option:default
{
font-weight:bold;
}

Questo selettore è abbastanza supportato da tutti i Browsers.

#7 – Validity

Il selettore validity è utilizzato per gli elementi cha hanno uno stato di valido o invalido.

input:invalid
{
border:1px solid red;
}

input:valid
{
border:1px solid green;
}

Questo selettore è supportato da tutti i Browsers

#8 – Range

Il selettore Range applica agli elementi che hanno un limite di raggio come uno slide o un numero di input con valore massimo o minimo.

input: in-range.
{
background:green;
}
input:out-of-range
{
background:red:
}

Questo selettore è supportato da tutti i Browsers tranne Opera mini.

#9- Optionality

Questo selettore serve a chiarire quali elementi sono opzionali e quali invece sono richiesti in un form.

:required
{
border: 2px solid black
}
:optional
{
border:1px dashed grey;
}

#10 – User interaction

Questo selettore serve a creare lo stile ad un elemento invalido solo dopo che un elemento ha interagito con un’altro e non quando la pagina si carica. Questo è il caso di un campo di un modulo contatti che viene compilato in modo errato:

input: user-error
{
border:1px solid red;
}

#11 – Mutability

Questo elemento attribuisce uno stile al campo input o textarea che si basa solo sulla lettura o sulla scrittura:

textarea:read-only
{
color:grey;
}
tetarea: read-write
{
color: black;
}

#12 – Placeholder Shown

Questo selettore è abbastanza supportato dai Browser. Di solito gli elementi input di un form possono mostrare il testo segnaposto tramite click sul campo input. Ora invece possiamo dare lo stile a questi elementi che mostrano il testo segnaposto.

input:placeholder-shown {
border-color:blue;
}

#13 – Local Link

Questo selettore non è supportato da nessun browser. Il selettore Local link ti permette di creare stili diversi a link ( per esempio in un menù di navigazione

:local-link(0)
{
color: red;
}
:local-link(1)
{
color: green;
}

:local-link(2)
{
color: yellow;
}

#14 – Time Dimensional

Il funzionamento di questo selettore è simile a Matches( ) con la differenza che può selezionare l’elemento riferito ad un tempo che può essere corrente, passato e futuro. Questo selettore può risultare utile durante la visualizzazione di sottotitoli di un video HTML5.

:current(p, span) {
background-color: yellow;
}

:past(p, span),
:future(p, span) {
background-color: gray;
}

#15 – Hiperlink

Questo selettore associa tutti i link e sostituisce a:link e a:visited

:any-link{
text-decoration:underline;
}

Hai utilizzato questi selettori per i tuoi progetti? Se non l’hai ancora fatto, scarica gratuitamente la risorsa che ho creato per te ed utilizzala per i tuoi progetti.
Ti consiglio di visitare anche questo sito web per chiarire ulteriormente le tue idee e le possibilità di utilizzo dei selettori Css4.
Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “15 nuovi selettori CSS4 per creare form d’impatto”—