Ebug - Discussioni da Web Designer

Come personalizzare un sito web in alcuni particolari

Rocco Passaro — Mon, 13 Feb 2012 08:30:25 +0000

Quando andiamo a realizzare un sito internet sicuramente teniamo in conto molto alle personalizzazione che il progetto deve avere per il cliente.

Oggi ho raccolto per voi alcuni consigli su come rendere molto più personalizzato il vostro progetto tenendo conto ad alcuni particolare che posso spesso essere messi in secondo piano.

1) Mettere la favicon

La favicon è una piccola icona posta nel accanto al titolo del sito internet che potete notare nelle tab del vostro browser.

È un metodo riconoscitivo molto utile e intuitivo che rende la navigazione del visitatore sul proprio browser molto più intuitiva e professionale.

Per inserire una favicon all’interno del vostro sito internet dovrete creare un’immagine .ico e inserire questo codice all’interno dei tag

1	<link rel="shortcut icon" href="http://www.vostrodominio.com/img/favicon.ico">

Per creare delle favicon vi consiglio qualche link:

- Creare la favicon con photoshop ( geekissimo.com )
- Creare Favicon online ( favicon.cc )
- Download favicon già fatte ( Icon Finder ).

2) Personalizzare immagine di anteprima su Facebook

Con l’avvento di facebook , la condivisione di link sul social network da la possibilità di creare delle piccole anteprima del link, con un testo e una immagine. Se non impostiamo nessuna immagine pre definita può succedere che facebook prenda un’immagine a caso dando un significato visivo errato.

Se vogliamo personalizzare tale immagine dobbiamo utilizzare i meta tag og che ci permettono di personalizzare tale anteprima.

Possiamo tranquillamente realizzarli da questo link ( scendi fino a Step 2 – Get Open Graph Tags ) , ma se volessimo realizzarli noi a mano, possiamo utilizzare questo codice:

1
2
3
4
5

3) Formattare le liste

Un’altra forma di personalizzazione molto utile per dare un’immagine unica ed elegante all’interno di un sito web è quella di personalizzare le liste di un sito web.

Per personalizzare le liste eliminando il vecchio pallino nero , brutto e demodè possiamo tranquillamente utilizzare una bella png e 1 riga di css:

1
2
3
4
5

ul {

list-style: url('elenco.png');

}

Un consiglio utile è quello di porre questo codice in cima al tuo foglio di stile così da evitare problemi di compatibilità con altre formattazioni.

4) Utilizzare font personalizzati

Utilizzare un font personalizzato non di sistema è un ottimo metodo per rendere il più professionale un sito web.

Solitamente si personalizza con tali font i menu , i titoli e qualche area particolare. Ovviamente contenuti e piccole porzioni di testo è consigliabile differenziale con un font diverso da quello utilizzato nei titoli , dando maggiore visibilità al testo.

Alcuni metodi per personalizza i testi con font non di sistema li trovate in questo piccolo elenco posto sotto:

- Font non standard con css3 ( Ebug )
- Google Font – Servizio Innovativo ( Ebug )
- Come utilizzare font non standard su un sito web? ( YIW )
- Come utilizzare font non standard nel proprio sito ( FMDesignBlog )

5) Gestire gli spazi nello stesso modo

Utilizzare un padding/margin unico e omogeneo per ogni elemento, da molto più serietà al progetto e un stampo più professionalità al sito internet in quanto non dà quell’impressione di amatoriale.

Quindi ricordatevi sempre di distanziare ogni elemento verticalmente sempre allo stesso modo se possibile evitando di mandare un paragrafo più in basso o eliminando qualche pixel dai margini superiori.

Ricordatevi pure che distanziare il testo dai margini laterali aumentare la leggibilità a molti visitatori. Questa regola delle distanza applicatela a div, contenuti , immagini e form.

6) Utilizzare al meglio le immagini

Tempo fa ho scritto un articolo su come gestire al meglio le immagini in un progetto online. Oggi vi ripropongo tale articolo e vi sottolineo i punti cruciali di questo argomento:

Mini Guida sulle immagini da usare nei siti internet

- Dove reperire immagini professionali;
- In quale formato utilizzarle;
- Norme di sintassi del codice;
- Quando utilizzare il bordo nelle immagini.

7) Personalizzare le form di contatto

Un’altra tecnica utile a personalizzare sempre di più il sito internet è quella di rendere i form più personalizzati al progetto.

Vi do giusto un paio di consigli per rendere più chiare le idee su come fare il tutto:

1) Inserire all’interno delle form dei testi che suggeriscano cosa inserire attraverso l’attributo placeholder di html5 ( ne abbiamo parlato in questo articolo , e qua trovi il metodo per farlo funzionare anche su browser che non supportano html5 );

2) Personalizzare i bordi con un colore il più simile al progetto in maniera tale da rendere il tutto più omogeneo;

3) Personalizzare il colore del bottone di conferma con sfumature e colori attinenti al progetto;

Questi sono alcuni consigli che vi do per personalizzare i vostri progetti. Voi ne avete altri ? Scriveteli con un commento.

20 Creative Site For Inspiration – Feb 2012

Rocco Passaro — Mon, 06 Feb 2012 08:07:04 +0000

Come ogni primo lunedì del mese ho raccolto per voi tutti web designer che mi seguite una carrellata di siti internet belli da cui prendere ispiazione.

Guardando questi progetti ho notato che ormai è diventato un vero e proprio standard realizzare siti internet che non cambiano pagina da sezione a sezione. Voi cosa ne pensate , può veramente diventare uno standard realizzare dei siti internet così ? Buona visione

1) Agenci Art

2) Chien Jaune Stduio

3) Create DM

4) Design Skills

5) Du.scatolin

6) Five Thirty Brew

7) Fundatia Comitaria Asi

8 ) Kipling

9) Kryptis

10) Luton Science Fair

11) Malaga Creation

12) Michela Chiucini

13) Mobile Tuxedo

14) Resume Baking

15) Screen Designer

16) Square

17) T Shirt Giant

18) Work Fu

19) Youzee ( per la seconda volta in lista )

20) Zetabe Interactive Agency

Trasformare wordpress in un e-commerce

Rocco Passaro — Mon, 23 Jan 2012 07:58:02 +0000

Le mie ultime esperienze lavorative mi hanno portato a usufruire di wordpress per realizzare un e-commerce. Oggi ho raccolto per voi 8 fantasmagorici plugin utili a trasformare il vostro cms preferito in un utilissimo mezzo per la vendita online.

1) E-shop

Scoperto quasi per caso è un ottimo plugin che ci permette di vendere prodotti attraverso semplicissimi post , di calcolare le spese di spedizione , applicare fasce per lo sconto in base al prezzo speso , di creare codice coupon sconto e di applicare a seconda della zona di invio diversi costi per le spese di vendite.

Secondo una mia impressione si rivela un valido mezzo per creare un semplice e-commerce facilmente gestibile in pochi click. Di base quando viene scaricato è in lingua inglese, ma possiamo tranquillamente tradurlo in lingua italiana seguendo questo semplice tutorial.

Voto : 9/10
Sito download : http://wordpress.org/extend/plugins/eshop/
Patch Italiana : http://thriftytuscany.com/translation_files/eshop-it_IT.zip

2) Jigoshop

Jihoshop è un ottimo plugin per realizzare e-commerce e vendita di servizi online. L’ho visto per la prima volta all’opera http://www.seminariowebdesign.com/ il seminario organizzato da yiw e mi ha dato subito un’ottima impressione.

Esiste sia il plugin che il tema pre-fatto con annesse tecnologie integrate per la vendita. Si possono applicare sconti , codici coupon , calcolo di spese extra e ha un’ottima gestione delle vendite.

Voto : 9/10
Sito download : http://jigoshop.com/

3) Getshopped

Anche lui è un valido plugin per la vendita online come gli altri due precedenti implementa tutte le funzioni base di un normale e-commerce. L’unica nota negativa è che nella versione gratuita non è al completo delle sue funzione e questo lo rende fastidioso.

Voto 8/10
Sito Download : http://getshopped.org/

4) WordPress Simple Paypal Shopping Cart

Per chiunque non vuole impelagarsi con settaggi fastidiosi , troppo lunghi e vuole aggiungere un singolo prodotto all’interno del suo wordpress questo è il plugin che fa per lui.

Molto semplice la gestione permette il pagamento solo attraverso paypal ma la tempistica per configurare tale plugin è pari a pochi secondi.

Voto : 7/10
Sito Download : http://wordpress.org/extend/plugins/wordpress-simple-paypal-shopping-cart/

5) Ecwid Shopping Cart

E’ un utile plugin che ci permette di realizzare un e-commerce completo in tutto. Nella versione gratuita per la visualizzazione dei prodotti usa soltanto ajax mentre nella versione a pagamento e anche contemplato la versione non dinamica molto utile per gestire il lato seo del nostro e-commerce.

Voto : 7/10
Sito Download : http://www.ecwid.com/

6) Shopper Press

Shopper Press è un ottima soluzione a pagamento di e-commerce, forse una delle migliori capaci di saper gestire al meglio il tuo negozio online in pochissimi click.

Unico lato negativo è il fatto che non esiste una versione gratuita ma soltanto una versione a pagamento che costa 79$ .

Voto : 7/10
Sito Download : http://shopperpress.com/

7) Shopp

shopp è un plugin di wordpress capace di creare un negozio online in pochi click. Però ha un difetto: per quanto possa essere facile l’istallazione e la configurazione , non è compatibile con la maggior parte dei plugin seo in circolo e questo è un grosso punto a sfavore.

Voto 6/10
Sito Download : https://shopplugin.net/

8 ) YAK for WordPress

YAK for wordpress ci permette di realizzare un piccolo negozio online, facilmente manipolabile attraverso il foglio di stile del plugin. Unico punto a favore per lui è il supporto per alcuni tipologie di pagamento.

Voto : 6/10
Sito Download : http://wordpress.org/extend/plugins/yak-for-wordpress/

Ti è piaciuto l’articolo ? Vuoi dire la tua ? Scrivi un commento

Gestire al meglio i menu di wordpress

Rocco Passaro — Mon, 16 Jan 2012 08:08:56 +0000

Uno dei tanti problemi che molti web designer che usano wordpress per la prima volta è quello di saper gestire al meglio i menu di wordpress e tutte le sue voci.

Oggi analizzeremo al meglio come utilizzare la funzione di wordpress wp_nav_menu() che ci permette di creare dei menu nel nostro tema.

1) Creiamo un menu in wordpress

Per menu in wordpress si intende la lista delle pagine presenti del cms, elencate in un

Per creare un menu dinamico attraverso wordpress dobbiamo scrivere tale funzione:

1	wp_nav_menu(); ?>

Quello che ci ritroveremo davanti sarà un elenco di pagine con link. Il tutto in maniera automatica.

2) Aggiungiamo l’homepage nel menu

Una delle prime cose che noteremo sicuramente sarà il fatto che si abbiamo creato un elenco di pagine di wordpress, con l’assenza del link alla homepage. Per aggiungere questo link dobbiamo inserire un argomento all’interno della nostra funzione:

1	wp_nav_menu('show_home=1'); ?>

Con il numero abbiamo indicato la posizione del link all’interno del menu

3) La formattazione del menu

Se abbiamo delle validi basi di css avanzato possiamo tranquillamente formattare il nostro menu nel seguente modo attraverso i fogli di stile:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/* eliminiamo i pallini dall'elenco pagine */

div.menu ul {
list-style: none;
}

/* disponiamo in orizzontale le voci del nostro menu */

div.menu ul li {
float: left;
margin: 0px 10px 0 10px;
}

/* formattiamo le voci del nostro menu nel loro stato base */

div.menu ul li a {
text-decoration: none;
font: Normal 12px Arial;
color: #cc0000;
}

/* formattiamo le vocidel nostro menu quando si ritroveranno il mouse sopra */

div.menu ul li a:hover {
text-decoration: underline;
}

4) Evidenziamo le pagine correnti nel menu

Solitamente è una buona norma di usabilità sottolineare nel menu l’attuale pagina dove si è in quel momento, contrassegnandola con un link in hover. WordPress ci facilita il lavoro in quanto associa quella voce del menu con la classe current_page_item.

Ovviamente noi possiamo interagire sempre grazie ai css in poche righe di codice:

1
2
3

div.menu ul li.current_page_item a {
text-decoration: underline;
}

5) Includere solo determinate pagine all’interno del menu

Può capitare di voler elencare all’interno del nostro menu solamente determinate pagine cercando di nasconderne altre. Per questo dobbiamo interagire di nuovo con php lavorando su un altro argomento, include.

1	wp_nav_menu('include=2,4,10,20,1'); ?>

Ad ogni pagina è associata un determinato numeretto che viene chiamato id Pagina. Per scoprire a che numero è associata la tua pagina devi andare nel pannello di controllo di wordpress, nell’area pagine.

Ora posizionati sopra il nome e infondo dovrebbe comparti l’id della nostra pagina come in nell’immagine qui sotto.

6) Utilizzare più argomenti in wp_nav_menu

Ora che abbiamo scoperto che esistono gli argomenti possiamo pensare ad usarne più contemporaneamente. Poniamo il caso di voler utilizzare sia una inclusione di pagine come visto nell’esempio precedente e di inserire il link alla homepage:

1	wp_nav_menu('show_home=1&include=2,4,5,9,10'); ?>

Come avete visto abbiamo utilizzato una semplice & per unire più argomenti alla nostra funzione.

7) Ordinare le pagine da pannello di controllo

Se volessimo ordinare le pagine del nostro menu attraverso il pannello di controllo , e non attraverso php il metodo è semplice.

Andiamo su:

Pagina >> Nome_pagina

E poi mettere il numero ( Come in questa immagine ) assegnando così una posizione univoca con all’interno del menu.

LINK

Ovviamente ci sono tanti altri tips e tricks per gestire i menu. Se sei interessato a questo argomento qua ho raccolto per te una serie di utili link:

- Codex di wordpress sui menu
- Tip & Tricks sui menu di ThemeSharper
- Extend the WordPress Menu

Vi è piaciuto l’articolo ? Vuoi sapere di più ? Scrivi un commento

Creare template personalizzati nei temi wordpress

Rocco Passaro — Mon, 09 Jan 2012 08:39:18 +0000

Quando si comincia a lavorare con wordpress , una delle più complicate azioni a cui dobbiamo sottoporci è quella di personalizzare una pagina evitando di combinare casini con il resto del template.

Per questo ci vengono incontro i template personalizzati di wordpress. Cosa sono ? Sono quelle pagine del template che risultato differenti dalle normali pagine del tema, in quanto implementano determinati script che devono essere presenti soltanto in una pagina , oppure sono determinate pagine che presentano un layout grafico differente.

Ora vedremo come costruirne una tutta nostra e come dire a wordpress quale template personalizzato utilizzare.

1) Creazione template personalizzato

Sappiamo benissimo che un tema di wordpress è diviso in tante pagine .php che si differenziano a seconda del loro utilizzo. Se non sai come è diviso un tema in wordpress vi consiglio di leggere questi articoli.

- 10 Tip & Tricks sul cms WordPress – ( Ebug );
- Guida creazione tema wordpress – ( YIW );
- Creare un tema per WordPress da 0 – ( Claudio Corti );
- Linea guida ufficiale del portale WordPress ( Codex WordPress );

Quando creiamo una pagina dal pannello di controllo di wordpress sappiamo che prenderà sicuramente la forma della pagina page.php. Ma poniamo il caso di voler personalizzare una determinata pagina del template con una grafica alternativa. Dobbiamo creare una template personalizzato.

Poniamo il caso si voglia inserire template personalizzato con un form di contatto in html. Andiamo nella cartella ftp del nostro tema e creiamo un file denominato template-contatti.php. Apriamo questo file è scriviamo al suo interno questo codice.

1
2
3
4
5
6
7
8
9

/*

Template Name: Template_contatti

*/

?>

In questo modo noi abbiamo appena creato un template personalizzato del nostro tema wordpress. Ora ri apriamo il nostro file è riscriviamolo con questo codice.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

/*

Template Name: Template_contatti

*/

// includiamo la testa del nostro template

get_header();

// scriviamo il codice del nostro modulo contatti

?>

// scriviamo il codice per l'invio della mail

$inviocodice = $_GET['inviocodice'];

$mail = $_POST['mail'];

$nome = $_POST['nome'];

$testo = $_POST['testo'];

if ( $inviocodice == "ok" ) {

// ora controlliamo che i campi siano stati tutti compilati

if ( $nome == TRUE && $mail == TRUE && $testo == TRUE ) {

// controlliamo se il campo mail è stato scritto in maniera errata

$email = eregi("^[_a-z0-9+-]+(\.[_a-z0-9+-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)+$",$mail);

if ( $email == TRUE ) {

// se tutto è andato a posto inviamo la nostra mail

$testo_2 = "Ti ha contattato".$nome."
".$testo;

mail ("info@tuamail.it" , "Richiesta di Contatto", $testo_2, "From: $mail");

$esito = "Mail inviata con successo";

} else {

$esito = "Mail errata, inserisci una mail corretta";

}

} else {

$esito = "Compila tutti i campi";

}

echo "

$esito

";

}

// includiamo il fondo del nostro tema

get_footer();

?>

2) Selezionare il template personalizzato

Come abbiamo visto è molto semplice realizzare un template personalizzato di wordpress. Ora assegniamo questo template a una determinata pagina.

Andiamo su :

Pagine >> Aggiungi Nuova

Ora selezioniamo come da immagine il nostro template.

Ora che sappiamo realizzare un template personalizzato e applicarlo a qualsiasi pagina di wordpress, non ci manca che realizzarne quanti più possibili

Utilità nel realizzare template personalizzati

Possono essere tante le motivazioni nell’utilizzare un determinato template personalizzato, che possono spaziare dal cambio di layout all’uso di uno script particolari che potrebbero usare php. Ovviamente le idee sono tante e io ve ne suggerisco alcune:

- Potremmo utilizzare un template personalizzato per realizzare una pagina 404;
- Potremmo utilizzare un template personalizzato per realizzare una script esterno a wordpress;
- Potremmo utilizzare un template personalizzato per tutte le visite provenienti da facebook o google.

Ovviamente le idee sono le più svariate ora sta a voi applicarle. Sbizzarritevi e fatemi sapere.

Vi è piaciuto l’articolo, scrivetemi

20 Creative Site For Inspiration – Gen 2012

Rocco Passaro — Tue, 03 Jan 2012 08:12:48 +0000

Buon Anno a tutti e bentornati dalle vacanze natalizie e di inizio anno. Già molti di noi hanno cominciato a lavorare e per questo hanno bisogno di una bella carica con una carrellata di siti internet da cui prendere ispirazione.

Oggi ho raccolto per voi una site ispiration di siti web per il mese di Gennaio del 2012.

Buona visione

1) 1up

2) 2Fly

3) Big Brand Peru

4) Cehvalblank

5) Createdm

6) Cymetriq

7) Digitz

8 ) Dotfuns

9) Guilherme Garcia

10) Intacto 10 Years

11) Benjamin Renault

12) Montana Colors

13) Pixel Baecker

14) Hello Evoque

15) Small Studio

16) Guide to The App Gallaxy

17) Themes Kingdom

18) Tanukis

19) Pub Desing

20) Soup Agency

21) 10 Year in Type

Auguri Natale 2011 e Intenti per il prossimo anno

Rocco Passaro — Thu, 22 Dec 2011 08:18:37 +0000

Ragazzi e amici di Ebug, questo è l’ultimo articolo per il 2011 sul blog.

Prima però di salutarvi e scambiarci gli auguri , voglio farvi una piccola premessa per l’anno venturo. Questo anno ho trascurato il blog per vari motivi , tra questo la mia professione di web designer freelancer.

Visti però gli ottimi risultati in termini di visite, il prossimo anno recupereremo sicuramente tutto ciò che non abbiamo fatto.

Cercheremo inoltre di migliorare la qualità degli articoli e anche la loro frequenza, per l’anno nuovo abbiamo in lavorazione molte altre novità.

Cogliamo l’occasione di augurarvi un Felice Natale e tante sorprese da trovare sotto l’albero. Buon Natale

20 Creative Site For Inspiration – Dic 2011

Rocco Passaro — Mon, 05 Dec 2011 08:21:39 +0000

E’ arrivata anche questo mese la nostra solita carrellata di siti utili a saziare la nostra fame di ispirazione utile per i nostri lavori.

Cosa ho notato questo mese di nuovo in questa raccolta ? Che ultimamente si fa un uso sproporzionato di siti internet che occupano l’intera pagina a qualunque risoluzione. Io lo trovo un ottimo metodo per cercare di far rimanere in mente il sito appena visitato.

Voi cosa ne pensate ? Buona visione

1) 2mlab

2) Future Creation

3) Brand Berry

4) Camstech

5) Canada 2020

6) Code Slingers Challenge

7) Fast Fender

8 )Grab & Co

9) Havana Bar

10) Isee

11) Ishu Plus

12) Kikk

13) Loco Motivane

14) Ludwings

15) Mark Jaworski Studios

16) Nerisson

17) Queso Cocina

18) loyeti

19) Pioneer Steez

20) Abitofextra

20 Creative Site For Inspiration – Nov 2011

Rocco Passaro — Mon, 07 Nov 2011 08:25:33 +0000

Come ogni primo lunedi del mese , ecco a voi una bella creative site for ispiration utile per aumentare la nostra ispirazione mensile.

Da quello che ho potuto esaminare ho visto che buona parte delle grosse aziende italiane stanno cominciando ad abbondare siti realizzati interamente con tecnologia flash per quelli fatti composti con tecnologia Jquery/HTML5 e Css3. Buona Visione

1) Agnus Dei

2) Art 4 Web

3) Citroen Ds5

4) Dimensions Xtreme

5) Mimk

6) Frontiereweb

7) Gem We Played

8 ) Illusion Tank

9) Imaginary Factory

10) JuiceBox

11) Lavazza Calendars

12) Le Coq Sport If

13) Lipton Ice Tea

14) Mizko

15) Much Beta

16) Orlebar Brown

17) Johan Rein Hold

18) Sparks

19) Stray People

20) Zoo Advertising

Manipolare la scrollbar con i css3

Rocco Passaro — Mon, 17 Oct 2011 06:43:16 +0000

Una delle tante innovazioni che offre css3 è quella di poter manipolare la scrollbar verticale e orizzontale degli elementi potendo affiancarli alle proprietà css, e così avendo la possibilità di modificare colore, bordi , angoli, aggiungere ombre e cosi via dicendo.

Io sto cominciando ad utilizzare alcune di queste proprietà sui miei lavori, e sto notando un gradevole effetto grafico che si abbina veramente bene con il sito internet. Una precisazione:

TALE effetto funziona solo su browser con motore webkit, quindi solo su chrome e safari.

Questo è un esempio su come manipolare la scrollbar:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

::-webkit-scrollbar{
width:0.8em;
height:0.8em;
background: #eaeaea;
margin-right: 10px;
}
::-webkit-scrollbar:hover{
background-color:# eaeaea ;
border: none;
}
::-webkit-resizer{
-webkit-border-radius:4px;
background-color:#194692;
border: none;
}
::-webkit-scrollbar-thumb{
min-height:0.8em;
min-width:0.8em;
-webkit-border-radius:4px;
background-color: #476397;
border: none;
}
::-webkit-scrollbar-thumb:hover{
background-color: #0061bb;
border: none;
}
::-webkit-scrollbar-thumb:active{
background-color:#003a88;
border: none;
}

Qua trovate i nomi dei diversi elementi che compongono una scrollbar e subito una immagine illustrativa:

1) scrollbar
2) scrollbar-button
3) scrollbar-track
4) scrollbar-track-piece
5) scrollbar-thumb
6) scrollbar-corner
7) resizer

Ovviamente con la comparsa di tali elementi nel foglio di stile sono nati diversi pseudo selettori utile per gestire al meglio lo stile della scrollbar in ogni suo momento:

- :horizontal seleziona solo la scrollbar orizzontale;
- :vertical seleziona solo la scrollbar verticale;
- :decrement seleziona i pulsanti della scroll quando si rimpiccioliscono;
- :increment seleziona i pulsanti della scroll quando si ingrandiscono;
- :start seleziona la barra quando si trova in cima alla pagina;
- :end seleziona la barra quando si trova in fondo alla pagina;
- :double-button serve a selezionare una coppia di bottoni vicini tra di loro;
- :single-button serve a selezionare un bottone quando è lontano dall’altro;
- :no-button seleziona la scrollbar quando non è visibile;
- :corner-present seleziona gli angoli presenti nella scrollbar;
- :window-inactive seleziona la barra di scorrimento quando la finestra è inattiva.

Alcuni esempi dove ho già manipolato la scrollbar colorandola sono stati:

- Blusite;
- Clinica Dentale Corbo;
- Studio Zaffora;

Voi cosa ne pensate ora che conoscete questa funzione, la utilizzerete nei vostri progetti?

Avete dubbi, curiosità, domande? Scrivete tutto in un commento