Nell’ambito dello sviluppo web, la creazione di layout flessibili e responsivi è essenziale per garantire un’esperienza utente ottimale su una vasta gamma di dispositivi e schermi. CSS Flexbox (Flexible Box Layout) è uno strumento potente che ci permette di costruire layout flessibili e complessi in modo più semplice e intuitivo rispetto ai tradizionali metodi di posizionamento.

 Introduzione a CSS Flexbox

Flexbox è un modulo di layout CSS introdotto con CSS3, progettato per semplificare la strutturazione e l’allineamento degli elementi all’interno di un contenitore. Con Flexbox, è possibile creare layout complessi e flessibili senza la necessità di ricorrere a posizionamenti assoluti o float.

Gli elementi saranno disposti seguendo l’asse principale (Main Axis) o l’asse trasversale (Cross Axis).
L’asse principale di un contenitore flessibile è l’asse principale lungo il quale sono disposti gli elementi flessibili. Attenzione, non è necessariamente orizzontale; dipende dalla proprietà flex-direction.
L’asse perpendicolare all’asse principale è chiamato asse trasversale. La sua direzione dipende dalla direzione dell’asse principale.
Questa immagine dovrebbe rendere l’idea, in questo caso la flex-direction è row, quindi orizzontale, di conseguenza il Cross Axis è verticale:

Flexbox Axis

I principali concetti alla base di Flexbox sono i seguenti:

1. Contenitore Flex (Flex Container): Questo è l’elemento genitore che contiene gli elementi figlio flessibili.
Si applica la proprietà display: flex; o display: inline-flex; al contenitore per abilitare il modello di layout Flexbox.

2. Elementi Flessibili (Flex Items): Questi sono gli elementi figlio all’interno del contenitore flessibile. Essi si adattano automaticamente alle dimensioni del contenitore e possono essere allineati e distribuiti in modi vari attraverso le proprietà Flexbox.

Proprietà del Contenitore Flex

Le proprietà chiave da utilizzare sul contenitore flex sono:

1. display: Imposta il contenitore come flex o inline-flex.

2. flex-direction: Definisce la direzione dei flex items lungo l’asse principale. Valori possibili: row, row-reverse, column, column-reverse.

3. justify-content: Allinea i flex items lungo l’asse principale. Valori possibili: flex-start, flex-end, center, space-between, space-around, space-evenly.

4. align-items: Allinea i flex items lungo l’asse trasversale. Valori possibili: flex-start, flex-end, center, baseline, stretch.

5. align-content: Controlla la distribuzione dello spazio extra lungo l’asse trasversale se ci sono più righe di flex items. Valori simili a justify-content.

Ad esempio, utilizzando soltanto alcune proprietà del contenitore, possiamo ottenere questa sequenza di box allineati al centro:

Box allineati al centro con Flexbox

Modificando di poco il codice CSS, possiamo ottenere un perfetto esempio per il menu di navigazione di un sito web, in questo caso, ho solamente cambiato il testo dei box e cambiato il valore della proprietà justify-content da “center” a “space-around“, in modo tale che ogni bottone sia equidistante:

Esempio di menu di navigazione ottenuto con Flexbox

Un altro esempio di Menu orizzontale realizzato con Flexbox

Supponiamo di voler creare una semplice barra di navigazione orizzontale con tre elementi flessibili: uno all’inizio, uno al centro e uno alla fine.

<div class="navbar">
<a href="#">Home</a>
<a href="#">Servizi</a>
<a href="#">Contatti</a>
</div>

.navbar {
 display: flex;
 justify-content: space-around;
 align-items: center;
 }

 .navbar a {
 color: white;
 font-size: 2em;
 text-decoration: none;
 background-color: #1d1e22;
 padding: 0.5em; 
}

 .navbar a:hover {
 background-color: grey;
 color: #bbff51; 
}

See the Pen Flexbox Layout by Eugenio Corrao (@Eugenio-Corrao) on CodePen.

Nell’esempio sopra, abbiamo utilizzato la proprietà justify-content: space-around; per distribuire gli elementi ai margini del contenitore, creando così spazio vuoto tra di essi.
Avremmo potuto utilizzare space-between per renderlo più compatto ma questo dipende dal layout che vogliamo realizzare. La proprietà align-items: center; allinea verticalmente gli elementi al centro lungo l’asse trasversale.

Sempre rimanendo nell’ambito della creazione di un menu, potremmo modificarlo per avere un altro impatto visivo, supponendo di avere un logo a sinistra e il menu a destra della pagina, utilizzando
justify-content: flex-end; e aggiungendo il logo a sinistra:

Menu allineato a destra con Flexbox.

Il video che segue non vuole darvi l’eccellenza sulla conoscenza di Flexbox, io sono convinto che, per esperimenti, errori, video non perfetti, si possa raggiungere, quantomeno, la sicurezza di potercela fare, ognuno nel suo ambito. Al limite si cambia

Seguiranno altre puntate

The post Guida Completa a CSS Flexbox: Layout Flessibile per il Web Moderno – Prima Parte first appeared on Eugenio Corrao Web Design.

Le pseudoclassi dei CSS sono uno strumento potente per aggiungere interattività e stile dinamico ai tuoi design web. Sono selettori speciali che consentono di applicare stili a elementi HTML in base a determinate condizioni o stati. In questo post, esploreremo alcune delle pseudoclassi più comuni e ti forniremo esempi pratici di come utilizzarle per migliorare l’aspetto e l’esperienza del tuo sito.

Pseudo-classi CSS più popolari:

1. :hover – La pseudoclasse :hover è attivata quando l’utente posiziona il cursore su un elemento. Puoi sfruttarla per evidenziare o animare elementi quando il cursore viene passato sopra, come pulsanti o link. Ad esempio:

.pseudo1:hover {
  color: red;
  text-decoration: underline;
}

2. :active – Questa pseudoclasse viene attivata quando un elemento viene selezionato o cliccato. È utile per fornire un feedback immediato agli utenti quando interagiscono con gli elementi interattivi. Ad esempio:

.pseudo1:active {
  background-color: #ff0000;
  color: #ffffff;
}

3. :focus – La pseudoclasse :focus viene attivata quando un elemento riceve il focus. È particolarmente utile per fornire un feedback visivo quando gli utenti compilano moduli o interagiscono con elementi input. Ad esempio:

input:focus {
  border: 2px solid blue;
  background-color: lightblue;
  outline: none;
}

CSS Le pseudoclassi

4. :nth-child() – Questa pseudoclasse consente di selezionare elementi specifici in base alla loro posizione all’interno di un genitore. Può essere utilizzata per creare layout alternativi o applicare stili a elementi specifici. Ad esempio:

ul li:nth-child(even) {
  background-color: lightyellow;
  border: 2px solid orange;
  margin-bottom: 1px;
}

5. :first-child e :last-child – Queste pseudoclassi permettono di selezionare rispettivamente il primo e l’ultimo figlio di un genitore. Sono utili per applicare stili differenti a elementi di testo introduttivi o di chiusura. Ad esempio:

ul li:first-child {
  font-weight: bold;
}

ul li:last-child {
  font-style: italic;
}

Le pseudoclassi dei CSS offrono una vasta gamma di possibilità per personalizzare l’aspetto e il comportamento degli elementi HTML sul tuo sito web. Utilizzando le pseudoclassi correttamente, puoi creare un design web interattivo, intuitivo ed esteticamente gradevole. Spero che questo post ti abbia fornito una panoramica utile su alcune delle pseudoclassi più comuni e che tu sia pronto a sfruttarle per trasformare il tuo prossimo progetto web.

The post Corso CSS di base n. 4 – Le Pseudoclassi first appeared on Eugenio Corrao Web Design.

I CSS sono una risorsa inesauribile, ti danno la possibilità di creare effetti e stili che non pensavi possibili.

Dopo aver analizzato gli stili esterni e gli stili interni, dedichiamoci all’importazione dei CSS.

CSS con @import

Un’altra possibilità che ti viene data è l’importazione degli stili CSS, è molto semplice.

Hai a disposizione due metodi, il primo consiste nell’inserire all’interno dei tag l’istruzione @import seguita dal percorso del file che intendi importare, in questo modo:

    <title>Monte Pellegrino </title>
    rel="stylesheet" href="css/style.css"
   <style>
      @import "css/stile-importato.css";
   </style>
 <head>

Il browser recepirà l’informazione e costruirà la pagina in base alle regole CSS contenute.

Il secondo metodo, sicuramente più efficiente in termini di ordine, consiste nell’aggiungere, ad inizio file (questo è fondamentale) l’istruzione @import, in questo modo:

Elimina i tag <style> dalla pagina index.html e taglia la dichiarazione @import “css/stile-importato.css”;

Incolla la dichiarazione all’inizio del file style.css (è fondamentale che la dichiarazione preceda tutte le regole CSS già scritte).

Il file style.css dovrebbe risultare così:

@import "stile-importato.css";

body {
	text-align: center;
}

h1 {
	font-size: 72px;
	color: white;
}

header {
	background-color: green;
}

p {
	font-size: 20px;
}

L’aspetto della pagina index.html, dopo aver salvato e ricaricato, dovrebbe essere uguale alla precedente, se così non fosse, verifica di aver scritto il giusto percorso del file, sono piccole cose ma facilissime da sbagliare

N.B.: All’interno della cartella del tutorial(che puoi scaricare qui) troverai un nuovo file, all’interno ci sono le regole CSS che ho aggiunto al file “stile-importato.css“.

In questo caso, dobbiamo ricordare di modificare il percorso del file CSS, in quanto ci troviamo già all’interno di style.css.

Il percorso corretto, quindi, non avrà il nome della cartella(nel nostro caso css).

Esaminati i diversi metodi di scrittura dei CSS, ti sarà chiaro che gli external stylesheets sono la maniera migliore di utilizzarli.

Gli altri metodi sono efficaci allo stesso modo tranne che per i tempi di caricamento delle pagine, ricorda che ogni file inserito all’interno delle pagine è uguale ad una richiesta in più al server.

Nelle prossime lezioni cominceremo ad esaminare i diversi selettori CSS fondamentali, ci sarà da divertirsi

The post Corso CSS di base n. 3 first appeared on Eugenio Corrao Web Design.

Abbiamo scritto regole CSS con lo stile interno e lo stile inline: può essere utile quando abbiamo una pagina HTML, ad esempio una pagina “Coming Soon” ma quando ci troviamo davanti un progetto più grande, con molte pagine, non sono metodi efficienti, per due motivi:

• scrivendo le regole CSS internamente o inline dobbiamo ripetere il procedimento per ogni singolo file
• il browser sarà costretto a scaricare ogni regola ad ogni pagina

Come capirai, non è quello che fa per noi.

I fogli di stile (CSS) vanno scritti in un file esterno (external file sheet).

Come scrivere un CSS  esterno:

scarica i files cliccando sul bottone a fine tutorial

N. B.: il file che scaricherai è quello completo del foglio di stile (nella cartella CSS) e già collegato al file HTML.

Per esercitarti, prova a cancellare o commentare la riga, all’interno del tag <head>, che collega il file CSS, in questo modo:

/* righe di codice da commentare */

• apri il tuo editor preferito (io utilizzo Sublime Text 3)
• Crea una nuova cartella dal nome “CSS”
• File -> nuovo -> Salva con nome
• Salva con nome: style.css ed inseriscilo nella cartella CSS appena creata

Adesso dovresti avere due files: index.html che contiene la struttura della pagina e style.css in cui inseriremo le regole CSS.

Facendo ciò avrai una struttura ben organizzata e saprai sempre dove sono i tuoi files.

Collegare il foglio di stile alla pagina HTML

è semplicissimo, all’interno del tag <head>, subito dopo il <title>, scrivi così:

<link rel="stylesheet" href=“css/style.css">

il tag <link> possiede diversi attributi, in questo caso stai inserendo l’attributo “stylesheet” e l’attributo “href”.

Il primo “dice” al file che si tratta di un foglio di stile, il secondo stabilisce qual’è il collegamento (che, come avrai notato, segue il percorso del CSS, prima la cartella poi il nome del file).

Adesso, possiamo scrivere alcune regole nel file style.css:

Allinea il testo della pagina

body {
	text-align: center;
}

Dai uno stile al titolo <h1>

h1 {
	font-size: 72px;
	color: white;
}

Lo sfondo del <header>

header {
	background-color: green;
}

Infine, la dimensione del font del paragrafo

p {
	font-size: 20px;
}

Se provi a salvare tutto e ricaricare il browser, noterai che la pagina si presenta già meglio, certo, non hai realizzato un capolavoro ma hai aggiunto correttamente le regole CSS al tuo file HTML. Bene.

Questo esercizio serve, specialmente, a farti capire quanto sia importante collegare il CSS esternamente ai file HTML.
Se avessi 40 0 1000 pagine con le stesse regole e volessi cambiarne una, ti basterebbe farlo nel file style.css e non in ogni singolo file.

Una precisazione:

se vuoi, puoi collegare alle pagine HTML altri fogli di stile ma, considerato che ogni file collegato richiede che il browser lo scarichi, ti consiglio di non collegarne più di due o tre.

Scarica i files

The post Corso CSS di base n. 2 first appeared on Eugenio Corrao Web Design.

Da oggi comincia il mio corso di base per i CSS (Cascading Style Sheet).
Proverò a realizzare un percorso guidato per comprendere in modo semplice i CSS.

Al giorno d’oggi scrivere correttamente un foglio di stile significa poter manipolare come vuoi il tuo codice HTML, creare degli effetti avanzati e impostare layout di pagina che si adattano perfettamente ad ogni dispositivo e quindi “responsive ”.
Partirò dalle basi:

in questo articolo vi spiegherò quali sono le differenze tra CSS inline e  CSS interno.
Se siete pronti, cominciamo dagli strumenti che ci servono:

• un editor HTML/CSS (io userò Sublime Text, se vuoi scaricarlo gratuitamente questo è il link)

• un po’ di pazienza

Cominceremo con un file HTML molto semplice, che arricchiremo con un po’ di regole CSS.
Questo è il file iniziale:

<!DOCTYPE html>
<html>
  <head>
    <title>Monte Pellegrino</title>
  </head>
  <body> 
    <header>
      <span>Escursione nei dintorni di Palermo</span>
      <h1>Monte Pellegrino</h1>
    </header>
    <p>
      Il “caro” Monte Pellegrino è la montagna cui tutti i palermitani rivolgono lo sguardo affettuosamente ogni giorno, sospirato riferimento per i naviganti e gli emigranti che se ne allontanavano o tornavano da lontano, custode di segreti secolari, quasi nume tutelare che veglia dall’alto del suo massiccio sulla città; celebrato da Goethe e da tutti i viaggiatori che nel corso dei secoli sono passati per Palermo.
    </p>
    <a href="#">Scopri di più sul Monte Pellegrino</a>
  </body>
</html>

Come vedete, è una pagina senza stile, anche se, per completezza, è giusto aggiungere che una pagina HTML ha sempre delle regole CSS iniziali che sono dovute allo “User Agent Style Sheet ” , ovvero lo stile applicato di default dai diversi browser.

Si tratta di regole che ci permettono una corretta separazione tra i diversi elementi della pagina (padding, margini e font per lo più).

Detto questo, cominciamo a comprendere le differenze tra i diversi metodi di scrittura dei CSS.

Inline Style

Questo metodo ci permette di applicare il CSS direttamente all’interno dei tag degli elementi presenti nella pagina, in questo modo:
Inserite nel tag <body>:

style="background-color: green;"

Inserite nel tag <h1>:

style="color: white;"

in questo modo:

<body style="background-color: green;"> 
    <header>
      <span>Escursione nei dintorni di Palermo</span>
      <h1 style="color: white;">Monte Pellegrino</h1>

questo sarà il risultato:

Adesso lo sfondo è di colore verde e il titolo h1 è di colore bianco.
In questo modo, teoricamente, potremmo creare lo stile per tutta la pagina.

Non ve lo consiglio affatto, infatti lo stile inline è consigliato per piccole modifiche o per testare il vostro CSS, qualsiasi altra regola scritta con i CSS interni od esterni non potrà mai modificare quello inline, si tratta del principio della “cascata dei fogli di stile ” (in inglese Cascading Style sheets).

Stile Interno (Internal Style)

Lo stile interno è inserito tra l’apertura e la chiusura del tag <head> e viene definito utilizzando il tag <style>.

Create il tag <style> all’interno della sezione <head>  del file HTML, in questo modo:

<head>
    <title>Monte Pellegrino</title>
    <style>
      
    </style>
  </head>

Diamo al paragrafo uno stile, cambiamo la dimensione e lo visualizziamo in grassetto:

<head>
    <title>Monte Pellegrino</title>
    <style>
      p {
        font-size: 20px;
        font-weight: bold;
      }
    </style>
  </head>

Se visualizzate nuovamente il file nel browser, noterete che il paragrafo ha una dimensione maggiore e il testo è, adesso, in grassetto.

Lo so che si tratta di modifiche banali ma è importante, in questo frangente, capire la differenza tra i diversi modi di applicare uno stile, più avanti realizzeremo modifiche ben più complesse.

Per coerenza, diamo al titolo <h1> una dimensione di 90px:

<head>
    <title>Monte Pellegrino</title>
    <style>
      p {
        font-size: 20px;
        font-weight: bold;
      }
      h1 {
        font-size: 90px;
      }
    </style>
  </head>

A questo punto, il risultato sarà il seguente:

Cambiamo il colore del titolo, in questo modo:

<head>
    <title>Monte Pellegrino</title>
    <style>
      p {
        font-size: 20px;
        font-weight: bold;
      }
      h1 {
        font-size: 90px;
        color: bisque;
      }
    </style>
  </head>

Se provate a ricaricare la pagina, noterete che il colore “bisque” non viene applicato, come mai?

Ho accennato, prima, che le regole CSS e, specificamente, il meccanismo della “cascata” dei CSS hanno delle regole ben precise e che lo stile inline, quello che abbiamo applicato inizialmente, sovrascrive tutte le regole create con lo stile interno ed esterno.
Ne consegue che qualsiasi regola applichiamo tramite stile interno non verrà considerata dal browser se ne esiste una uguale scritta inline.

La soluzione per applicare il nuovo colore di <h1> è semplice, rimuoviamo lo stile inline da <h1> in modo tale che l’unica regola color sia applicata tramite stile interno:

<head>
    <title>Monte Pellegrino</title>
    <style>
      p {
        font-size: 20px;
        font-weight: bold;
      }
      h1 {
        font-size: 90px;
        color: bisque;
      }
    </style>
  </head>
  <body style="background-color: green;"> 
    <header>
      <span>Escursione nei dintorni di Palermo</span>
      <h1>Monte Pellegrino</h1>
    </header>

Adesso voglio eliminare il colore di background della pagina e applicarlo soltanto al <header>, come fare?
Anche in questo caso eliminiamo lo stile inline applicato al <body> e creiamo una nuova regola per <header>, in questo modo:

<head>
    <title>Monte Pellegrino</title>
    <style>
      p {
        font-size: 20px;
        font-weight: bold;
      }
      h1 {
        font-size: 90px;
        color: bisque;
      }
      header {
        background-color: green;
      }
    </style>
  </head>

Adesso il colore verde che faceva da sfondo a tutta la pagina è diventato lo sfondo del <header>.

Anche questo modo di scrivere i CSS non è quello migliore, per diversi motivi:

• in un vero sito web ci sono diverse pagine HTML, a volte decine o centinaia.
  Con lo stile CSS inserito all’interno del file HTML, ci toccherebbe modificare ogni regola per ogni pagina che necessita la modifica.
• Secondo motivo: il browser dovrebbe scaricare le stesse regole tante volte quante sono le pagine e ciò causerebbe un rallentamento nella visualizzazione del sito.

Nella prossima parte introdurrò la scrittura dei CSS tramite file esterno, la giusta pratica per separare la presentazione di un sito web dalla sua struttura.

Alla prossima.

Scarica i files

The post Corso CSS di base n. 1 first appeared on Eugenio Corrao Web Design.

/* Funzione per disabilitare i suggerimenti di login */
function disabilita_suggerimenti_login(){

  return "Hai sbagliato qualcosa, riprova!";

}

add_filter( 'login_errors', 'disabilita_suggerimenti_login' );

The post WordPress: disabilitare i suggerimenti al login first appeared on Eugenio Corrao Web Design.

Avrai, sicuramente, notato che Spotify ha realizzato una campagna pubblicitaria, che gira in questi giorni su Facebook, creata con un’immagine accattivante e la sovrapposizione di una scritta, come questa:

Bella, vero?

Si tratta dell’effetto Duotone, ovvero doppia tonalità.

Un effetto che puoi ricreare, con qualsiasi fotografia preferisci, tutto ciò in pochi passi.

In questo tutorial voglio ricreare l’effetto immaginando una campagna pubblicitaria fittizia, si tratta di un “concorrente” di Spotify: si chiama “DoveVai ”, un’applicazione per suggerire ai viaggiatori delle mete interessanti in base alla loro posizione.

Ricorda che mi sto inventando tutto, si tratta di un espediente per rendere realistico ciò che sto per fare

1) la scelta della foto: io ho scelto questa, si tratta di un’immagine di New York, con i suoi grattacieli.

Applicheremo l’effetto Duotone in pochi passi

2) Inseriremo del testo che altro non è se non lo slogan per la nostra campagna

Apriamo la nostra foto in Photoshop, puoi utilizzare qualsiasi foto, se vuoi usare questa la puoi scaricare a questo indirizzo, in questo sito ne trovi tantissime, adatte ad ogni tua necessità, lascia la fantasia a briglie sciolte.

Applica una mappa sfumatura, cliccando su “Nuovo livello di regolazione”

Si aprirà l’editor della “Mappa sfumatura”

Fai clic sulla barra dei colori, si aprirà l’editore sfumatura, da qui, per cambiare il primo colore del Duotone, fai clic sul piccolo quadratino all’inizio della barra.

Nella mia composizione ho scelto il colore #24206a, si tratta di una tonalità di blu, la scelta del colore sta a te e alla tua creatività.

Adesso fai la stessa cosa per il secondo colore, doppio clic sul quadratino alla fine della barra dei colori e scegli un’altra tonalità, io ho scelto il #73d970, un verde molto chiaro.

Al termine, la mia immagine avrà più o meno questo aspetto:

Se non sei soddisfatto dei colori, puoi cambiarli quando vuoi e, se vuoi modificare Luminosità e Contrasto, puoi farlo creando un nuovo livello di regolazione e cliccando su Luminosità/Contrasto, da qui puoi fare le modifiche per un risultato ottimale

Questo è il risultato dopo aver realizzato le modifiche:

All’inizio del tutorial sull’effetto Duotone, ti avevo parlato di una campagna pubblicitaria fittizia, per far questo ho creato due livelli, uno con un’immagine al suo interno, un logo e un altro con uno slogan, tutto finto, è vero, ma rende l’idea delle potenzialità di questo effetto:

Bello, vero?

Sono sicuro che tu puoi fare molto di meglio, basta un po’ di pazienza e un pizzico di impegno.

L’effetto Duotone si realizza con pochi clic, è importante utilizzare le immagini giuste e qualche tocco di personalità.

Ho realizzato un video sull’effetto Duotone, sicuramente più immediato di un articolo di testo, sono sicuro che ti aiuterà.

Alla prossima

The post Photoshop: creare l’effetto Duotone di Spotify first appeared on Eugenio Corrao Web Design.

Lo so. E’ banale.

Lo è per te che conosci WordPress, che hai passato tanti giorni a smanettare, aprire il tuo editor e hai detto tante volte: “Mi dispiace ragazzi, oggi proprio non posso.”

Lo è per chi è uno sviluppatore, per chi ha una web agency.
Lo è per chi ha dimestichezza con WordPress.

Non è banale per chi comincia l’avventura nell’affascinante mondo di WordPress.

Dopo tutta questa “filosofia“, come la chiamerebbe un mio amico, ti dico che è molto semplice:
basta fare attenzione ed avere un po’ di pazienza, quest’ultima ti servirà come il pane, se vorrai intraprendere una professione che abbia a che fare con il Web.

Come creare un menu personalizzato con WordPress

Entra nel pannello di amministrazione del tuo sito WordPress ed espandi la voce di menu Aspetto

Fai clic sul link Menu

Sei entrato nel pannello di gestione dei menu

Scrivi il nome che preferisci per il tuo menu e fai clic su Salva

Hai creato il tuo menu, adesso dovrai scegliere quali voci ne faranno parte:

Sulla sinistra del pannello di gestione dei menu, hai diverse possibilità, non limitate alle pagine ed ai post che hai creato.

Dal sottomenu Pagine puoi inserire le pagine che hai creato

Dal sottomenu Articoli puoi inserire i post che hai creato

Dal sottomenu Link personalizzati puoi inserire un collegamento qualsiasi e inserirlo tra le voci di menu.

Quale potrebbe essere un link da inserire?
Mi viene in mente il collegamento ad un altro tuo sito oppure ad un motore di ricerca.

Dal sottomenu Categorie potrai inserire, indovina un po’, le categorie dei tuoi post:
in questo modo i tuoi lettori potranno sempre leggere, con un clic, tutti gli articoli che riguardano un argomento specifico.

Con le voci di menu appena create puoi creare dei sottomenu, basta cliccare e trascinare (drag & drop) la voce che vuoi “indentare“: il risultato sarà simile a questo:

Quando hai finito con la scelta delle voci di menu, fai clic su Salva e visualizza il tuo sito.

Il menu di WordPress può essere modificato quando vuoi, puoi decidere di eliminare alcuni elementi, aggiungerne quanti ne vuoi, ricorda sempre che il menu è una delle cose più importanti di un sito web, quindi curalo e pensa sempre al visitatore

The post WordPress: creare un menu personalizzato first appeared on Eugenio Corrao Web Design.

Creare un utente in WordPress è imprescindibile se hai più collaboratori o se più persone gestiscono un sito.

Vediamo, in questo tutorial, come crearli e, sopratutto, quali “poteri” affidare loro.

I “poteri” di cui parlo sono, in realtà, i ruoli:

• Amministratore
• Editore
• Autore
• Collaboratore
• Sottoscrittore

1: L’amministratore dispone di tutte le “armi”, può creare altri utenti, installare e disinstallare temi e plugin, cambiare tema al sito, scrivere e cancellare i post e le pagine, insomma è come Zeus

2: L’Editore ha dei poteri importanti, può creare post e pagine, anche a nome di altri utenti

3: C’è una sottile differenza tra editore e Autore: l’autore può gestire soltanto i suoi post.

4: Il Collaboratore può scrivere e modificare i suoi post ma, attenzione, non può pubblicarli. Diciamo che ha bisogno della supervisione di un “superiore” per poter essere pubblicato.

5: Infine il Sottoscrittore, chi è costui?
E’ quello che può modificare il suo profilo, magari cambiando la password, non può fare quasi nulla, questo ruolo è utile quando vuoi far accedere ai tuoi contenuti soltanto chi si registra.

Ma vediamo, praticamente, come si crea un utente in WordPress:

Per aggiungere un nuovo utente, entra, da amministratore, nel tuo sito WordPress e clicca “Aggiungi nuovo”, dal menu Utenti.

Inserisci il nome utente, l’e-mail e la password scelta (puoi inserire anche nome, cognome ed eventuale sito web dell’utente, anche se non si tratta di campi obbligatori).

Seleziona l’opzione “Invia notifica all’utente”, invierà una email per avvisare l’utente della creazione dell’account, mi sembra utile, anche se non obbligatoria.

Qui viene il bello: devi scegliere il ruolo.

Se hai letto attentamente le descrizioni dei ruoli, non dovresti avere imbarazzo nello scegliere quello più adeguato.

Sei pronto, o meglio, siete pronti perché, a questo punto sarete almeno in due a gestire il sito, anche se con ruoli differenti.

L’aspetto più importante, se hai speso ore, giorni, mesi per realizzare un sito web, è quello di evitare di affidare un ruolo con “poteri” troppo forti ad una persona che conosce poco o nulla l’ambiente WordPress:

il rischio è ritrovarsi con il sito down o, nella migliore della ipotesi, con un plugin mancante…ed era quello più importante, quindi occhio

Ho realizzato anche un video del tutorial, per rendere le cose più semplici, fatemi sapere cosa ne pensate, vi aspetto

The post WordPress: creare un nuovo utente first appeared on Eugenio Corrao Web Design.

I CSS3 ti danno la possibilità di arricchire le tue pagine con effetti sorprendenti.

In questo tutorial ti propongo quattro effetti hover per i bottoni dei tuoi links.

L’idea nasce per essere applicata alle voci di menu ma nessuno ti vieta di rendere un link all’interno della pagina più accattivante e spettacolare con questi effetti.

Ma andiamo alla struttura del bottone e al suo foglio di stile:

Il markup è molto semplice:

• una <section> con una classe color-1 che dà il background
• di seguito, i bottoni con 3 classi

<section class="color-1">
				<p>
					<button class="btn btn-1 btn-1a">Home</button>
				</p>
				<p>
					<button class="btn btn-1 btn-1d">Prodotti</button>
					<button class="btn btn-1 btn-1e">Portfolio</button>
					<button class="btn btn-1 btn-1f">Contatti</button>
				</p>
			</section>

Come vedi, ogni bottone ha delle classi ben precise:

• btn -> la classe generica per tutti i bottoni
  btn-1 -> classe per dare le proprietà principali al bottone
  btn-1a – btn-1a, etc. -> per gli effetti hover specifici per ogni bottone

Il foglio di stile raccoglie tutte le regole necessarie per il corretto funzionamento dei bottoni, sta a te cambiare alcuni valori per personalizzare gli effetti hover, prova quelli che stimolano di più la tua fantasia.

/* Stile di base */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);


*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;}

/* Clearfix*/
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	color: #89867e;
	background: #fff;
}

a {
	color: #888;
	text-decoration: none;
}

a:hover,
a:active {
	color: #333;
}

/* Header */
.main,
.container > header {
	margin: 0 auto;
	padding: 2em;
}

.container > header {
	text-align: center;
}

.container > header h1 {
	font-size: 2.625em;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
}

.container > header span {
	display: block;
	font-size: 60%;
	opacity: 0.5;
	padding: 0 0 0.6em 0.1em;
}

.container {
	height: 100%;
	position: relative;
}

.container > section {
	margin: 0 auto;
	padding: 5em 3em;
	text-align: center;
	color: #fff;
}

.container > section p {
	position: relative;
	margin: 0;
	padding: 1em;
	z-index: 1;
}

.container > section p.text {
	font-size: 1.4em;
}

.color-1 {
	background: #435A6B;
}

/* Stile generico dei bottoni*/
.btn {
	border: none;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
	padding: 25px 80px;
	display: inline-block;
	margin: 15px 30px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.btn:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

/* Bottone */
.btn-1 {
	border: 3px solid #fff;
	color: #fff;
}

/* Bottone 1a */
.btn-1a:hover,
.btn-1a:active {
	color: #435A6B;
	background: #fff;
}

/* Bottone 1d */
.btn-1d {
	overflow: hidden;
}

.btn-1d:after {
	width: 0;
	height: 103%;
	top: 50%;
	left: 50%;
	background: #fff;
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.btn-1d:hover,
.btn-1d:active {
	color: #435A6B;
}

.btn-1d:hover:after {
	width: 90%;
	opacity: 1;
}

.btn-1d:active:after {
	width: 101%;
	opacity: 1;
}

/* Bottone 1e */
.btn-1e {
	overflow: hidden;
}

.btn-1e:after {
	width: 100%;
	height: 0;
	top: 50%;
	left: 50%;
	background: #fff;
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.btn-1e:hover,
.btn-1e:active {
	color: #435A6B;
}

.btn-1e:hover:after {
	height: 260%;
	opacity: 1;
}

.btn-1e:active:after {
	height: 400%;
	opacity: 1;
}

/* Bottone 1f */
.btn-1f {
	overflow: hidden;
}

.btn-1f:after {
	width: 101%;
	height: 0;
	top: 50%;
	left: 50%;
	background: #fff;
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.btn-1f:hover,
.btn-1f:active {
	color: #435A6B;
}

.btn-1f:hover:after {
	height: 75%;
	opacity: 1;
}

.btn-1f:active:after {
	height: 130%;
	opacity: 1;
}

Il risultato finale:

See the Pen CSS Hover effects by Eugenio (@rupertone) on CodePen.

DEMO CSS3 LINKS

Qui trovate i files della demo

Tutto si basa sulla proprietà “transform“, che ti dà infinite possibilità per ottenere effetti interessanti da applicare a qualsiasi elemento.

Ciao e buon lavoro

Spero che il tutorial ti sia piaciuto, se hai domande o vuoi approfondire il tema, batti un colpo

The post CSS3: effetti hover spettacolari first appeared on Eugenio Corrao Web Design.