Come creare uno sprite da più icone. Pulsanti dei social media che utilizzano sprite CSS (ottimizzazione dell'immagine). Cosa sono gli sprite CSS e gli sprite in generale?
Ciao cari lettori del sito blog. Ovviamente puoi usare il plugin per questo compito, ma non è così difficile farlo da soli, e ce ne saranno di meno, soprattutto perché ne ho già molti che lavorano per loro (vedi l'articolo al link indicato). Ho preso le icone dei social media da cui ho già scritto in dettaglio (spero che Dimoks non si opporrà a questo).
E anche l'ho ritenuto appropriato per la posta elettronica.
Crea uno sprite dai pulsanti e inserisci il codice Html nel sito
Dopo aver creato tutti i gruppi e le pagine necessari nei social network, il che significa che hai ricevuto tutti i collegamenti necessari, puoi rimanere perplesso aggiungendo pulsanti al sito. Ovviamente puoi, in base al mio post su, scegliere un'icona adatta per ciascun social network e, se necessario, ridurne le dimensioni a quella richiesta in e.
Ma questa non è l'opzione migliore. Come mai? Bene, perché per caricare ogni immagine del social network, verrà fatta una richiesta separata al tuo server. Se hai una dozzina di icone, significa dieci richieste, che in qualche modo creeranno un carico aggiuntivo sul server e. Tali rifiuti non ci si addicono, soprattutto perché lo sono da tempo.
Ho deciso di non reinventare la ruota (creare uno sprite), ma ho usato quella creata dal costruttore Share42 (un collegamento a una descrizione di come lavorarci è dato appena sopra). In esso, puoi selezionare quei social network, le cui icone ti serviranno e insieme al codice riceverai uno sprite CSS, ad es. fisicamente un file grafico, che conterrà tutte le icone dei social media di cui hai bisogno e le iscrizioni ai feed RSS (ed Email, se richiesto).
Ho scelto quattro reti principali e un paio di icone per iscrivermi alle notizie con una dimensione dell'icona di 24 per 24, quindi il mio sprite ha questo aspetto (anche se sono ancora arrivato, ma non importa):
Ora abbiamo tutti gli ingredienti: collegamenti a gruppi o pagine di social media e icone da visualizzare sul sito. Resta solo da preparare tutto questo correttamente, ad es. disposizione. Il mio blog è basato su WordPress, quindi incollerò il codice con i pulsanti in uno dei file. Nel mio caso, si chiama sidebar.php. Codice HTML risulta essere estremamente semplice:
Bene, e la cosa più interessante. Con l'aiuto, determiniamo quale area del nostro sprite verrà visualizzata in questo particolare luogo come sfondo (nel nostro caso, questo sfondo è posizionato sotto il collegamento ipertestuale). Ci vuole molto tempo per spiegare come ciò avvenga, quindi leggi l'articolo sul link e tutto diventerà chiaro (sono forniti esempi illustrativi). Se sei pigro, sperimenta con i numeri, che, come avrai notato, non sono per niente multipli di 24.
Sì, carica il file sprite sul tuo sito tramite FTP e specifica il percorso in background (). È tutto. Se non funziona che leggi attentamente i materiali sui link sopra, beh, se non funziona affatto, allora descrivi la tua situazione nei commenti (in dettaglio - per inserire il codice, dimentica di racchiuderlo nei tag PHP con quadrati parentesi).
Buona fortuna a te! A presto sulle pagine del sito blog
Potresti essere interessato
Mentre continuiamo a socializzare i nostri siti, spesso è conveniente per i lettori ricevere gli aggiornamenti del blog direttamente sul loro social network preferito. Diamo loro questa opportunità. Per fare ciò, è necessario registrarsi in questi stessi social network. Puoi creare un profilo dell'amministrazione o dell'autore del sito, oppure puoi pagina pubblica azienda o progetto. In futuro, sarà necessario pubblicare regolarmente notizie e aggiornamenti del sito nei feed di notizie del profilo in modo che i tuoi abbonati possano conoscerli. Questo, tra l'altro, è conveniente da fare usando quelli che abbiamo installato in precedenza. Progetteremo collegamenti a profili social utilizzando sprite CSS o sprite CSS.
Cosa sono gli sprite CSS e gli sprite in generale?
sprite- una serie di piccole immagini che vengono combinate in una. Questo viene fatto per non scaricare 10-20 piccole immagini leggere dal server al computer dell'utente, ma per inviarle in un unico flusso, combinandole in un unico file. Gli sprite sono arrivati al web design dall'industria dei giochi, dove sono stati utilizzati per creare grafica 2D animata, ad esempio, sparare a mostri, ecc.
Nella progettazione del sito, viene utilizzata anche una tecnica in cui varie icone sono combinate in un unico file, ad esempio in questo modo:
Come puoi vedere in questo esempio, non solo le icone dei social media sono state raccolte in un file, ma anche altri elementi di design, come frecce, pulsanti "mi piace", ecc. Ma combinare assolutamente tutta la grafica utilizzata sul sito in un unico sprite non è del tutto corretto. È meglio dividere gli elementi in gruppi e caricare solo quelli necessari su un certo tipo di pagine.
In questa immagine, ho cercato di mostrare schematicamente come funzionano gli sprite css. Se il blocco è più grande dell'immagine di sfondo, viene posizionato nell'angolo in alto a sinistra per impostazione predefinita, se negli stili CSS è impostata la non ripetizione. Ma possiamo cambiare la posizione dell'immagine di sfondo rispetto all'angolo in alto a sinistra del blocco. Ciò è particolarmente utile se il blocco, ad esempio, ha le stesse dimensioni di una singola icona. Abbiamo sette icone, 32x32 ciascuna. Si trovano orizzontalmente, quindi non è necessario modificare la posizione dello sfondo verticalmente. Impostiamo la posizione dell'immagine di sfondo -32 px, otteniamo un'icona nel blocco, -64 px - un'icona di Facebook, ecc.
Come creare pulsanti di collegamento per i profili dei social media?
Dopo essermi registrato nelle rispettive comunità e in, ho ricevuto collegamenti ai profili, l'indirizzo del mio feed RSS e un collegamento a un modulo di iscrizione per ricevere aggiornamenti via posta. Quindi li ho combinati nel seguente codice e l'ho incollato in un widget di testo nel pannello di amministrazione di WordPress:
Nell'ancora dei collegamenti, questo codice utilizza il tag : ... È lui che è il blocco stesso in cui viene visualizzata l'icona desiderata. Cambio immagine di sfondo impostato nel foglio di stile stile.css attraverso la proprietà posizione di sfondo:
/ * Pulsanti per iscriversi agli aggiornamenti * / .spmenu (padding: 0px; margin: 0px; color: # 4682B4; text-align: left; font-size: 100%;) .spmenu a, .spmenu a: hover (cursore : pointer; color: # 1E90FF; text-decoration: none; font-size: 100%;) .spmenu span (display: inline-block; width: 32px; height: 32px; background: url ("images / icons.png " ) no-repeat;) .spmenu span.sprite_gplus (posizione sfondo: 0px 0px;) .spmenu span.sprite_twitter (posizione sfondo: -32px 0px;) .spmenu span.sprite_fbook (posizione sfondo: -64px 0px; ) .spmenu span.sprite_rss (posizione sfondo: -96px 0px;) .spmenu span.sprite_email (posizione sfondo: -128px 0px;)
Quindi, per ogni elemento dentro la classe" spmenu»Un'immagine di sfondo è impostata icone.png che è un insieme di icone. Notare che è un elemento in linea in linea secondo le specifiche HTML, quindi per dargli dimensioni rigorose (larghezza e altezza), dobbiamo cambiare il modo in cui viene visualizzato a livello di blocco nelle proprietà CSS (riga: display: blocco in linea;). La dimensione del blocco 32x32 corrisponde al formato delle nostre icone.
Spesso invece di
usa i tag
,
,
ecc., penso che questo approccio sia sbagliato. Perché cambiare gli stili dei tag standard quando ce n'è uno universale
... E il tag
generalmente crea una richiesta extra al server e noi, usando gli sprite, stiamo semplicemente cercando di ridurre il numero di queste richieste.
Dove posso trovare le icone per lo sprite?
- Disegnalo tu stesso.
- Cerca nel motore di ricerca tra le immagini.
- Ci sono collezioni speciali di icone sul web che spesso vengono regalate gratuitamente.
- Molti social network e servizi mostrano loghi e icone ufficiali sui loro siti Web che possono essere utilizzati nelle loro applicazioni.
- Per creare automaticamente un file sprite delle icone dei social media, puoi utilizzare il servizio. Seleziona le icone nell'ordine desiderato, salva l'archivio con lo script, scompatta e guarda l'immagine icone.png- file sprite pronto.
Oltre a visualizzare le icone, gli sprite sono utili quando si sviluppa un menu animato, quando, quando si passa sopra il suo elemento, si attenua o si illumina. Quindi, due serie di pulsanti vengono memorizzati nel file sprite e all'evento "mouse over" cambiano dinamicamente la posizione dell'immagine di sfondo usando JS.
Il menu dei pulsanti-collegamenti ai canali per ricevere gli aggiornamenti, promesso all'inizio della nota, è fatto, questa è la fine dell'articolo. Iscriviti agli aggiornamenti, il divertimento è solo all'inizio.
Presentiamo alla vostra attenzione i migliori set di icone TOP 30 social networks per il tuo sito web, blog, negozio online o altra risorsa web.
Poiché ogni sito ha il proprio stile, focus e pubblico di destinazione, può essere difficile trovare le icone giuste.
Questa selezione presenta i migliori set di icone sia per uso universale che quelli che si adattano perfettamente anche ai design di siti Web più esclusivi.
In genere, le icone vengono posizionate nel piè di pagina di un sito Web o di un blog.
Sono incoraggiate fino a 5-6 icone.
Set di icone di vecchie corone di bottiglia
Le icone stilizzate originali sotto forma di tappi di bottiglia saranno un'aggiunta eccellente al sito di un caffè, un bar o un negozio online tematico.
Il disegno di elementi di alta qualità e il design luminoso attireranno sicuramente i visitatori della risorsa web per familiarizzare con le tue pagine sui social network.
Il set è composto da 20 icone, ognuna delle quali è progettata come un disegno separato in formato PNG.
Francobolli vintage per social media
Le icone vintage dei social media sono fantastiche per un sito di viaggi o un blog sulle attrazioni del mondo. Queste icone sono spesso utilizzate dai fotografi professionisti per aggiungere collegamenti ai social media ai loro portafogli.
Formati di file: PNG, PSD. La risoluzione di ogni icona è 256x256px.
Sociale in legno
Il set è composto da dieci icone dei social media.
Inoltre, c'è un'immagine per il feed RSS e l'abbonamento e-mail.
Ciascuno dei documenti grafici nell'archivio ha il proprio file di risorse, con il quale è possibile modificare indipendentemente il disegno o salvarlo nuovamente in un formato diverso.
Il formato predefinito è PNG.
SocialMate
Il set è universale e adatto per l'uso su qualsiasi sito o progetto web.
Per la modifica personalizzata dei file, a ciascun elemento è allegato un file PSD originale.
La risoluzione delle immagini è 128x128px, 64x64px e 32x32p.
Icone sociali di vettore 3D
Le icone vettoriali 3D rappresentano un set completo di elementi a piè di pagina per il tuo sito Web, completamente gratuito.
Il design luminoso e accattivante attirerà nuovi abbonati alle tue pagine sui social network.
Il formato del file è PNG (più il documento PSD originale). La risoluzione è 256x256px.
Schizzi Sociali
Social Sketches è un set gratuito di icone adesive originali per link cliccabili sui social media.
L'aspetto unico delle immagini attirerà l'attenzione degli utenti delle risorse.
Imposta contenuto:
- 16 icone;
- 6 diverse risoluzioni per ogni elemento (32px, 48px, oltre a 64px, 128px, 256px e 512px);
- Formato PNG standard.
Socializzare
Socializzare è un insieme di 12 icone di social media rotonde e pulite. Tieni presente che per ogni sito vengono offerte più immagini contemporaneamente.
Così, puoi scegliere l'elemento più appropriato per lo stile del tuo sito o blog.
Le immagini di tipo vettoriale vengono salvate in formato SVG.
Somacro
Somacro è 45 icone di qualità per tutti i social media popolari tra cui, Facebook , Twitter, Steam, così come i sistemi di pagamento Paypal, Webmoney.
Un gran numero di icone ti consentirà di progettare i piè di pagina di un grande negozio online o di un sito personale nello stesso stile.
Risoluzione file: 500 × 500 pixel. Ogni immagine è disponibile con o senza bordo, per un totale di 90 file differenti.
Icone dei social media della lampadina
Bulb Icons è un popolare set di icone per risorse a tema scientifico.
Un design interessante di ogni immagine si adatterà perfettamente al blocco sulla scienza, fatti interessanti, tecnologia.
Fig. 9 
Icone trasparenti dei social media
L'icona si abbina bene a qualsiasi sito, indipendentemente dal design e dal tema.
Il set è adatto per gli amanti del minimalismo.
L'unica cosa è che le immagini possono fondersi con uno sfondo troppo chiaro.
Dimensioni disponibili: 48, 56, 72, 96, 128, 256 e 512 px. Il numero di immagini nell'archivio è 40.
Icone piane circolari Pronte per la retina
Ogni immagine ha una combinazione di colori vivaci e riflette lo stile di ciascuno dei social network.
Il set contiene 65 immagini uniche per siti Web, programmi popolari, parchi giochi e altri strumenti.
Adesivi per icone social media
Le icone luminose per i siti Web di Vectezy saranno un ottimo strumento per attirare gli utenti sulle pagine social della tua azienda.
Le immagini possono essere utilizzate indipendentemente dal layout generale delle pagine web.
Appariranno ugualmente bene su sfondi scuri e chiari.
Icone social media ombreggiate
Shaded Social Media Icons contiene 40 immagini con effetto ombra.
Il design luminoso è perfetto per l'uso su siti Web con design leggero.
L'archivio può essere scaricato in due versioni.
Il primo ha una licenza gratuita, il secondo contiene il codice sorgente e viene venduto a $ 3.
Le risoluzioni disponibili sono 48, 56, 72, 96, 128 e 256 px. Formato - PNG.
Icone linea semplice
Tutte le immagini sono disponibili solo in bianco, quindi il set dovrebbe essere utilizzato su piè di pagina con uno sfondo scuro.
Sono disponibili non solo icone di siti popolari, ma anche immagini per sistemi di pagamento, Wi-Fi e molti altri.
icona mostro
Iconmonstr è un'intera risorsa in cui lo sviluppatore pubblica regolarmente le sue icone uniche per i siti web.
Tra più di 500 immagini, troverai icone in bianco e nero per qualsiasi sito Web o strumento.
Tutti i file possono essere scaricati gratuitamente.
Inoltre, nella pagina delle risorse, è possibile selezionare la risoluzione e il formato file preferiti.
Set di icone di social media lunga ombra
Il set di icone di Social Media Long Shadow contiene 35 file per diversi social network. Ogni icona ha la forma di un quadrato, è realizzata nella combinazione di colori della risorsa designata ed è perfetta per i siti di qualsiasi orientamento.
L'archivio contiene solo file PNG.
Icone sociali del design dei materiali
8 icone vettoriali in formato SVF ti permetteranno non solo di aggiungere attraenti link cliccabili al tuo sito, ma anche di apportare le tue modifiche al file. Puoi cambiare la risoluzione, aggiungere un'ombra, cambiare il colore, regolare la trasparenza e molto altro.
Le immagini sono disponibili per Instagram, YouTube Facebook, Pinterest, Linkedin, Skype, Google+.
Picon social
Picons Social è un icon pack professionale per social media con oltre 60 immagini diverse.
Tutte le immagini sono realizzate in formato bianco e nero e hanno un design simpatico e "leggero".
Ottimo per l'uso universale su siti Web di colore chiaro.
Diversi formati sono disponibili nell'archivio per ogni icona:
- .PSD;
- .EPS;
- .PDF;
- .PNG;
- .EMF.
Icone dei social media circolari e rotonde
16 icone dei social media saranno una grande aggiunta al tuo sito web.
Il design luminoso ti consentirà di evidenziare magnificamente il campo dei collegamenti alle pagine in altre risorse.
La dimensione di ogni immagine è di 58 e 40 pixel.
Inoltre, ci sono fonti per la modifica in Photoshop.
Icone di social media piatto minimalista
L'archivio contiene 85 icone minimaliste senza volume per i social network.
Ognuna delle immagini ha 4 stili diversi, che ti permettono di scegliere miglior design che si adatterà al design della pagina web.
Le icone hanno due formati contemporaneamente: PNG e SVG.
Sono disponibili versioni a colori e in bianco e nero.
Icone esadecimali dei social media
Questo set di icone è realizzato sotto forma di esagoni.
Lo sviluppatore ha condiviso la combinazione di colori di ciascun social network.
Sul sito dello sviluppatore, puoi scaricare ciascuna icona separatamente, dopo averne selezionato il formato e la risoluzione.
Sono disponibili un totale di 32 design unici.
Pacchetto di vettore piatto icona social media
Ci sono icone per video hosting, RSS, sistemi di pagamento, sezioni del sito web del blogger.
Inoltre, il set contiene icone per HTML5, CSS.
Il formato del file è Png. La risoluzione è di 58 pixel.
Icone di social media piatte avanzate
Ogni icona ha un effetto ombra esterna e una combinazione di colori vivaci.
Dimensioni disponibili: 72, 96, 128, 256 e 512 px.
Ogni elemento è disponibile nel design per i toni chiari e scuri del sito.
Icone dei social media in stile iOS
Scarica l'archivio dal sito dello sviluppatore e ottieni le fonti per la modifica personale del contenuto.
I formati disponibili sono .EPS e .AI.
Icone sociali piatte grunge
Le fantastiche icone grunge sono la scelta migliore per uno studio di danza, una palestra, un portale musicale, una casa discografica e altre organizzazioni e risorse in stile urbano.
Ogni file è disponibile in formato PSD.
Icone geometriche dei social media
Le icone gratuite per i social media, realizzate in uno stile geometrico, saranno una buona aggiunta per un negozio di cosmetici, una profumeria, un blog.
La combinazione di colori standard delle icone è realizzata con mezzitoni chiari.
Inoltre, puoi scegliere opzioni di stile più luminose o più scure.
Sono tutti disponibili in un archivio.
Icone dei social media di Rogie
Questo icon pack di un rinomato illustratore web metterà in evidenza l'identità del sito web e attirerà ancora più abbonati sui tuoi social media.
Tutte le immagini sono realizzate separatamente a colori e in bianco e nero.
Sono disponibili immagini per parchi giochi, archiviazione cloud e social network.
Icone muse Adobe
Le icone vettoriali di Adobe sono una delle migliori opzioni per un piè di pagina minimalista.
Il set include 60 immagini di siti popolari, dispositivi mobili sistemi operativi, cloud storage, sistemi di pagamento e altre risorse web popolari.
120 icone di social media disegnate a mano
Scaricando questo set, riceverai 120 icone social uniche disegnate a mano.
Ogni immagine ha un buon design e un disegno chiaro.
Si adatterà bene alla progettazione di un sito Web a tema fai-da-te o di qualsiasi altra risorsa dedicata alla creatività.
I formati disponibili sono PNG e SVG.
Risorse online per creare Sprite CSS, ad esempio http://spritepad.wearekiss.com/ o http://www.spritecow.com/. Tuttavia, puoi facilmente trovare quelli che fanno per te. Qui userò già pronto Sprite CSS ... Eccoli:
Struttura HTML
I contenitori div vengono inseriti nel contenitore generale div pulsanti social con la transizione.
Struttura CSS per l'utilizzo degli sprite
body (background: url ("fon.png"); color: # 1aa5ca;) .box (margin: 250px; padding: 25px; background: #; text-indent: -9999px; display: inline-block;) .click (sfondo: url ("click.png"); larghezza: 200 px; altezza: 86 px; display: blocco;) .vk (sfondo: url ("vc.png"); larghezza: 51 px; altezza: 52 px; margine: 10 px ; posizione-sfondo: 0 0px; transizione: opacità 0,5 s; -moz-transition: opacità 0,5 s; / * Firefox 4 * / -webkit-transition: opacità 0,5 s; / * Safari e Chrome * / -o-transition: opacity 0.5s; / * Opera * / opacity: 0.6; float: left;) .vk: hover (background: url ("vc.png"); width: 51px; height: 52px; background-position: 0 -51px; opacità: 1;) .ya (sfondo: url ("ya.png"); larghezza: 50 px; altezza: 50 px; margine: 10 px; posizione dello sfondo: 0 0 px; transizione: opacità 0,5 s; -moz-transizione: opacità 0.5s; / * Firefox 4 * / -webkit-transition: opacity 0.5s; / * Safari e Chrome * / -o-transition: opacity 0.5s; / * Opera * / opacity: 0.6; float: left;) .ya : librarsi ( sfondo: url ("ya.png"); larghezza: 50px; altezza: 50px; posizione di sfondo: 0 -50px; opacità: 1; ) .ma (sfondo: url ("ma.png"); larghezza: 51 px; altezza: 52 px; margine: 10 px; posizione-sfondo: 0 0 px; transizione: opacità 0,5 s; -moz-transizione: opacità 0,5 s; / * Firefox 4 * / -webkit-transition: opacity 0.5s; / * Safari e Chrome * / -o-transition: opacity 0.5s; / * Opera * / opacity: 0.6; float: left;) .ma: hover (background) : url ("ma.png"); larghezza: 51px; altezza: 52px; posizione dello sfondo: 0 -51px; opacità: 1;)Indichiamo posizione-sfondo: 0 0px ;. Notare che ho impostato l'opacità su 0.6, un po' di opacità. All'opacità al passaggio del mouse: 1 ;, tutto accade in (0.5s) transizione: opacità 0.5s ;. Posizione dell'immagine modificata al passaggio del mouse posizione-sfondo: 0 -51px ;.
Usando questa tecnica, puoi significativamente ottimizzare le immagini(meno chiamate al server).
P.S. Se hai domande, scrivi!
Benvenuti nel mio blog. Oggi vorrei mostrarvi passo passo come creare pulsanti per social media in html e css. Partiamo dallo zero completo e finiamo con il risultato desiderato. Inoltrare!
Markup e stili di base
Ho appena inserito un hash negli URL dei collegamenti. Ovviamente, quando viene utilizzato nella realtà, ogni collegamento deve avere un indirizzo funzionante a cui avverrà la transizione.
Aggiungiamo i seguenti stili per ora:
Condividere (
larghezza: 280 px;
margine: 0 automatico;
imbottitura: 10px;
sfondo: # D3CDEE;
}
.condividi io (
margine destro: 15px;
colore nero;
text-transform: maiuscolo;
}
Abbiamo leggermente stilizzato il contenitore per i collegamenti (dimensioni, imbottitura, sfondo) e la didascalia.
Icone decorative
sociale (
display: blocco in linea;
larghezza: 40px;
altezza: 40px;
sfondo: # bdc3c7;
allineamento verticale: medio;
margine destro: 10px;
}
Con la proprietà display: inline-block, abbiamo fatto apparire i nostri collegamenti come elementi di blocco, ma allo stesso tempo abbiamo mantenuto la capacità di stare in fila. Successivamente, indichiamo la dimensione e il rientro a destra in modo che i blocchi non siano adiacenti l'uno all'altro.
Ok, quindi perché abbiamo bisogno dell'allineamento verticale: al centro? Questa proprietà allineerà il testo nel contenitore in modo che sia esattamente centrato verticalmente. Daremo anche alle nostre cellule una sorta di sfondo in modo che possiamo vederle visivamente già in questa fase. Il risultato è un vuoto. È ora di aggiungere finalmente le icone.
Fase finale
Resta da posizionare la nostra icona in ciascuno dei blocchi preparati, che identificherebbe questo o quel social. rete. Per fare ciò, propongo di utilizzare il metodo più corretto: collega un'immagine sprite e usa il posizionamento dello sfondo per mettere tutto al suo posto.
In breve, abbiamo bisogno di un'immagine come questa. Ce l'ho da 120 a 40.
Aggiungi le seguenti regole agli stili CSS:
Social-vk (
sfondo: url (icon.png);
}
.social-fb (
sfondo: url (icon.png) -40px 0;
}
.social-tw (
sfondo: url (icon.png) -78px 0;
}
Di conseguenza, otteniamo un blocco completamente decorato con icone.
Capisci come l'abbiamo ottenuto? Se no, allora spiego. Ogni blocco di collegamento ha una dimensione di 40 per 40. Di conseguenza, quando impostiamo l'immagine di sfondo per esso su 120 per 40, il blocco semplicemente non può contenerlo completamente e, di conseguenza, contiene tutto ciò che può.
Per impostazione predefinita, in questo caso verranno presi i primi 40 pixel della larghezza e dell'altezza dell'immagine di sfondo, ma con l'altezza tutto è in ordine: l'immagine si adatta completamente ai blocchi in altezza. Di conseguenza, resta solo da registrare la posizione dello sfondo per le icone di Facebook e Twitter.
Scrivendo in background in questo modo: background: url (icon.png) -40px 0, indichiamo esplicitamente che per il blocco social-fb, l'immagine di sfondo dovrebbe essere visualizzata esattamente dalla posizione specificata - quaranta pixel di larghezza a sinistra e in altezza senza sfalsamento, perché non è necessario. È così semplice, davvero.
Cos'altro puoi fare?
Forse vuoi ancora aggiungere un design aggiuntivo al blocco dei social network. Ci sono diverse idee. Innanzitutto, puoi aggiungere l'arrotondamento a tutte le icone.
sociale (
Bordo-raggio: 5px;
}
In secondo luogo, puoi aggiungere un bordo a loro.
Bordo: 3px viola solido;
In base alla progettazione, in questo caso, il viola è adatto a noi, mi sembra. Puoi anche arrotondare gli angoli del contenitore del collegamento stesso.
Ancora una volta, ci sono molte opzioni di design. E, naturalmente, puoi facilmente cambiare i colori. In questo articolo ti offro una tale opzione di design, ma ora puoi facilmente realizzarla a modo tuo: giallo, verde, rosso e qualsiasi altra icona.
Risultato
Come puoi vedere, anche da solo, puoi aggiungere facilmente pulsanti social al sito e html e css ci aiuteranno in questo. Almeno visivamente, possiamo progettare le nostre icone secondo necessità per il design di ogni sito specifico.
Questo conclude l'articolo-lezione di oggi. La prossima volta, creiamo qualcos'altro in CSS
Pubblicazioni correlate
-
Come collegare due unità di sistema a un monitor
Un personal computer nella vita e nel lavoro di tutti i giorni può risolvere una vasta gamma di compiti e di solito è sufficiente un'unità di sistema. Ma a volte...
-
Importa messaggi da file EML
A volte l'utente ha bisogno di cambiare, integrare, trasferire l'elenco dei contatti alla persona giusta, trasferirlo su un dispositivo aggiuntivo ...