
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Applichiamo alcuni degli effetti dei CSS3 ad una lista di immagini
I CSS3 hanno ormai da un po’ lasciato la fase di sperimentazione e, grazie a browser più recenti, possono essere già utilizzati nei nostri progetti.
Con questo tutorial spiegherò come realizzare un accattivante effetto sulle immagini sfruttando le caratteristiche di controllo sui bordi arrotondati e supporto RGBa che i CSS3 hanno introdotto.
L’idea di una proprietà che riuscisse a rendere trasparente un particolare elemento era già da tempo utilizzata nei CSS, e si tratta della proprietà opacity
. Ovviamente tale proprietà viene supportata nativamente dai browser più recenti quali Firefox, Safari, Opera e Chrome, mentre per Internet Explorer è necessario applicare dei filtri Microsoft che comunque permettono l’effetto desiderato.
Purtroppo la proprietà opacity
ha un problema, quello di far ricadere le sue impostazioni, quindi l’effetto trasparenza, anche su tutti gli elementi figli dell’elemento su cui è impostata. Questo significa che se rendete trasparente un box con la proprietà opacity
, otterrete trasparente anche il testo che è contenuto al suo interno.
Questa limitazione non affligge invece la proprietà RGBa; infatti RGBa imposta il valore di opacità solo per la singola dichiarazione a cui é legata.
Vediamo nel codice qual è la reale differenza:
#box1 {
width:200px;
height:200px;
background-color: rgb(226,0,26);
}
#box2 {
width:200px;
height:200px;
background-color: rgb(0,107,179);
opacity:0.5;
margin:-150px 0 0 60px;
}
Osservando l’esempio uno si può notare come il box azzurro, sovrapposto a quello rosso, presenti un’opacità impostata a 0.5 e che anche il testo all’interno del div eredita il valore di opacità del suo genitore.
A questo punto proviamo ad utilizzare la trasparenza RGBa con il seguente codice e notiamo anche le differenze:
#box2 {
width:200px;
height:200px;
background-color: rgba(0,107,179,0.5);
margin:-150px 0 0 60px;
}
Come si può notare nell’esempio due il div azzurro rimane sempre trasparente, però, a differenza del precedente, il testo non eredita la trasparenza e rimane sempre visibile.
La sintassi per utilizzare la trasparenza RGBa non é molto differente da quella vista precedentemente, bisogna solamente aggiungere i valori alfa di trasparenza (RGBa). Quindi in una dichiarazione dello sfondo bisogna scrivere rgba
e poi aggiungere i primi tra valori dedicati al colore e il quarto che gestisce il livello di opacità.
Con i CSS3 è possibile controllare i bordi degli elementi grazie all’ausilio della proprietà border-radius
; con questa possiamo arrotondare quindi gli angoli dei nostri elementi e possiamo decidere l’ampiezza dell’angolo impostando direttamente i pixel.
Bisogna chiarire subito un aspetto: i CSS3 non sono ancora uno standard, motivo per cui gli sviluppatori dei browser ne utilizzano le proprietà tramite un prefisso proprietario. Per Firefox/Mozilla si utilizza -moz-
, per Safari/Chrome/Webkit si utilizza -webkit-
.
Quindi oggi possiamo utilizzare queste implementazioni per specificare le proprietà, una volta che i CSS3 diventeranno standard non dovremo ritornare sul nostro codice, ma sarà già gestito.
Adesso che ci siamo chiariti bene i concetti legati alle proprietà e caratteristiche dei CSS3 vediamo come utilizzare le combinazioni per ottenere dei gradevoli effetti sulle immagini dei nostri lavori web.
Il nostro scopo sarà quello di cercare di avere un gradevole effetto grafico con bordi arrotondati ed ombre esterne sulle immagini di una qualsiasi pagina web, ovviamente utilizzando solamente CSS3.
.imgleft {
float:left;
display:block;
margin:5px 10px;
padding:4px;
border:1px solid #ccc;
border-color:rgba(0,0,0,.25);
-moz-border-radius:5px;
-moz-box-shadow:0 1px 3px rgba(0,0,0,.15);
-webkit-border-radius:5px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.imgright {
float:right;
display:block;
margin:5px 10px;
padding:4px;
border:1px solid #ccc;
border-color:rgba(0,0,0,.25);
-moz-border-radius:5px;
-moz-box-shadow:0 1px 3px rgba(0,0,0,.15);
-webkit-border-radius:5px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.15);
}
Il codice precedente permette di ottenere delle immagini allineate a destra oppure a sinistra con gli effetti desiderati; osserviamo l’esempio per renderci conto di ciò che abbiamo scritto.
Ovviamente per ottenere il medesimo effetto su tutti i browser abbiamo utilizzato i prefissi spiegati precedentemente.
Una variante dell’impiego di queste regole CSS3 si possono ulteriormente adoperare per creare un’interessante effetto su una possibile galleria d’immagini, sfruttando sempre i bordi arrotondati con effetto ombra e in più applicando un effetto hover creato sempre con i CSS3. Vediamo come procedere; partiamo dal codice HTML impiegando le liste non ordinate grazie alla loro estrema dinamicità:
<ul class="photos">
<li><a href="#"><img alt="Spaces 1" src="01-b.png" /></a></li>
<li><a href="#"><img alt="Spaces 2" src="02-b.png" /></a></li>
<li><a href="#"><img alt="Spaces 3" src="03-b.png" /></a></li>
<li><a href="#"><img alt="Plants 1" src="04-b.png" /></a></li>
<li><a href="#"><img alt="Plants 2" src="05-b.png" /></a></li>
<li><a href="#"><img alt="Plants 3" src="06-b.png" /></a></li>
</ul>
A questo punto ci concentriamo sul CSS per personalizzare l’aspetto e il comportamento:
ul.photos { margin:9px 0 18px -10px;}
ul.photos li { display:inline;}
ul.photos a {
display:inline;
float:left;
margin:0 0 9px 10px;
line-height:1;
text-decoration:none;
}
ul.photos img {
display:block;
margin:0 0 5px;
padding:4px;
border:1px solid #ccc;
border-color:rgba(0,0,0,.25);
-moz-border-radius:5px;
-moz-box-shadow:0 1px 3px rgba(0,0,0,.15);
-webkit-border-radius:5px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.15);
-webkit-transition:all 0.15s ease-out;
}
ul.photos a:hover img {
border-color:#999;
border-color:rgba(201,2,92,.5);
-moz-box-shadow:0 0 5px rgba(201,2,92,.5);
-webkit-box-shadow:0 0 5px rgba(201,2,92,.5);
}
In pratica il CSS imposta il bordo con ombra e angoli arrotondati sulle immagini della nostra galleria; inoltre si può utilizzare un interessante effetto evidenziato esterno sulle immagini, con la sfumatura sempre creata tramite i CSS3. A riguardo, con Safari/Chrome/Webkit, si potrà notare un gradevole effetto di transizione esterna, aumentando così la bellezza estetica dei nostri lavori. Purtroppo su Firefox/Mozilla si ha sempre l’effetto evidenziato esterno, ma si dovrà rinunciare all’effetto di transizione.
Si può dare uno sguardo all’esempio finale per rendersi conto delle caratteristiche già oggi offerte dai CSS3 grazie a browser recenti, sempre in attesa che della convalida di tutti gli standard da parte del W3C.
Se vuoi aggiornamenti su Galleria di immagini con i CSS3 inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
In questa terza e ultima parte del tutorial aggiungeremo finalmente una lettera al sigillo di ceralacca, che può essere una […]
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Android L è la nuova versione del sistema operativo mobile di Google, e con essa anche l’SDK e le API sono potenziati ed aggiornati con nuovi widget e funzionalità.
Session Bean Stateless in EJB 3.0: introduzione con esempi generali
Effettuare insiemi di operazioni, anche concorrenti, garantendo l’integrità del database
La guida alle opzioni di base di HitFilm Express, il software per l’editing video con molte funzioni di stampo professionale.