Quelle che vedete qui sotto sono delle semplici social icons bianche....(?)
No, non vi chiedo di mostrarmi la vostra tecnica di colorazione migliore, con chissà quale programma ultra mega all'avanguardia :D
        |
Ciò che vi mostro oggi è come prendere delle semplici icone bianche ed inserirle in div da colorare e personalizzare a nostro piacimento!
Prima di ogni cosa ci servono le icone, e intanto potete prelevare queste :)
Poi dovete caricarle sul blog... beh ma comunque il link vi apparirà ugualmente nel tutorial :P (è l'orario...sì sì...credici -.-)
Ogni immagine/icona deve essere un link per avere effetto come questo
Ormai sapete che per ottenere un link bisogna che ci sia il tag a che racchiuda l'elemento linkabile, di conseguenza avremo questo codice:
<a href=" "><img src=" "></a>
- All'interno delle virgolette dopo href andrà inserito il link al social network che vogliamosi raggiunga.
- All'interno delle virgolette dopo src andrà inserito l'URL dell'immagine
<a href=" " class="mysocial"><img src=" "></a>
Avete notato che ho scritto mysocial, ecco questo richiamerà lo stile.Ed ecco cosa inserire negli stili del vostro blog
a.mysocial img {padding:7px; background:#cae5e6;}
a.mysocial:hover img {padding:7px; background:#f1b500;}
Come personalizzare?a.mysocial:hover img {padding:7px; background:#f1b500;}
- Padding: è lo spazio all'interno dell'elemento, quello spazio fra l'icona e i bordi (per intenderci). Potete diminuirlo o aumentarlo. Non usate numeri in negativo!!!
- Background: è il colore di sfondo, di riempimento. Dopo il cancelletto inserite il codice HEX del colore che più vi piace. Qui potete sbizzarrirvi :D
- Vuoi arrotondare e/o rimpicciolire le icone? Dai un'occhiata alla seconda parte!
DOVE INSERIRE GLI STILI!
Ho realizzato un mini tutorial appositamente per questo: dai un' occhiata qui per sapere come fare :)
.jpg)
Grazie!!!!
RispondiEliminaSei sempre chiarissima e paziente. Trovo una profonda dolcezza, nei tuoi tutorial. E questo rende ancora più piacevole venirti a trovare sul blog :)
Norma
Chiarissimo e utilissimo come al solito!
RispondiEliminaGrazie di cuore!
bellissimo post, ma ho capito che devo dedicare davvero del tempo a studiare html! Mi sono armata di carta e penna e presto applicherò i tuoi suggerimenti! buona serata
RispondiEliminaSfiziosissimo questa colorazione col css! È un metodo che uso per tante cose, ma al background delle icone sociali non ci avevo mai pensato. Poi a me lo stile "flat" piace tanto e questo ne è un ottimo esempio :) Complimenti Simona!
RispondiEliminafatto e funziona! ma l'icona non mi cambia di colore
RispondiElimina(ho messo dal rosso al grigio, ma resta sempre sul rosso)
grande simo!
grazie sempre :)
germana
hai scritto il codice del colore (che deve contenere 6 cifre/caratteri) dopo il cancelletto #?
Eliminascusami, ma sono cucuzzona.
Elimina1) per avere l'icona social che cambia colore devo caricare l'icona "neutra" (che poi me la colora in automatico il codice esacolore?) oppure devo caricare due icone differenti con i colori da me scelti?
2) devo aprire un gadget HTML e mettere dentro "<a href bla,bla,bla" con i link giusti?
bisticcio troppo coi codici HTML, è la prima volta che mi cimento e mi sembra cirillico!
1) Sì devi salvare l'icona bianca, o copiare l'url dell'immagine che già ho inserito io...quella neutra. Lo sfondo si colorerà quando tu avrai inserito il codice come da esempio.
Elimina2) Sì bisogna sempre utilizzare il gadget HTML/javascript quando si tratta di inserire codici ;)
Vedrai che poi ti sembrerà sempre più semplice ;)
Grazie!!! 😊
Eliminaniente non funziona, resta trasparente. c'è qualche passaggio che tu dai per scontato (per abilità tua!) ma che una cucuzzona come me se quel passaggino non ce l'ha non gli funziona una mazz! :(
Eliminano, tutto quello che faccio lo inserisco nel tutorial, altrimenti che senso avrebbe :)
EliminaStai inserendo il selettore 'class' come scritto su?
Grazie infinite per condividere tutto questo meraviglioso sapere!!!
RispondiEliminaciao, lo so ti sto intrippando, ma ormai il tuo blog con i tuoi consigli mi ha creato dipendenza ahahah
RispondiEliminaper chiederti un aiuto...
ho provato a mettere due icone quella di facebook e quella di twitter ma mi appare solo una delle due e in colonna verticale e non in orizzontale... devo aggiungere altro per mettere piu icone in orizzontale ...
ah anche un'altra cosa, sono riuscita a modificare il colore ma vorrei renderle piu piccole e arrotondare il quadrato...
RispondiEliminascusa per il disturbo e grazie per tutto quello che fai i tuoi tutorial sono FANTASTICI.
Dai un'occhiata alla seconda parte (metterò il link anche nel post)
EliminaSocial Icons personalizzate #2
Ciao Simona cara, peccato che manchi l'icona G+! XD
RispondiEliminaCiao! Provvederò ad inserirla ;)
Elimina