Miglia di icone di interfaccia racchiuse in uno sprite. Pulsanti dei social media con sprite CSS personalizzati (ottimizzazione dell'immagine) Icone colorate dei social media per html
Risorse online per la piegatura Sprite CSS ad esempio http://spritepad.wearekiss.com/ o http://www.spritecow.com/ . Vtim, saprai facilmente cosa ti si addice. Eccomi pronto per vincere Sprite CSS. Asse puzzolente:
struttura html
Contenitore div spazio contenitore div pulsanti sociali Questa è la transizione.
Struttura CSS per sprite whistleblowing
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: 200px; altezza: 86px; display: blocco; ) .vk( sfondo: url("vc.png"); larghezza: 51px; altezza: 52px; margine: 10px posizione di sfondo: 0 0px, transizione: opacità 0,5 s; -moz-transizione: opacità 0,5 s; opacità 0,5 s; /* Opera */ opacità: 0,6; float: sinistra;) .vk:hover ( sfondo: url(" vc.png"); larghezza: 51px; altezza: 52px; opacità: 1; ) .ya( sfondo: url("ya.png"); larghezza: 50px; altezza: 50px; margine: 10px; posizione sfondo: 0 0px; transizione: opacità 0.5s; 0.5s;/* Firefox 4 */ -webkit-transition: opacità 0.5s; /* Safari e Chrome */ -o-transizione: opacità 0.5s; :hover ( background: url(" ya.png"); larghezza: 50px; altezza: 50px; posizione sfondo: 0 -50px; opacità: 1; ) .ma( sfondo: url("ma.png"); larghezza: 51px; altezza: 52px; margine : 10px; posizione dello sfondo: 0 0px; transizione: opaco e 0,5 s; -transizione moz: opacità 0,5s; /* Firefox 4 */ -transizione webkit: opacità 0.5s; /* Safari e Chrome */ -o-transizione: opacità 0.5s; /* Opera */ opacità: 0,6; galleggiante: sinistra; : url("ma.png"); larghezza: 51px; altezza: 52px; posizione di sfondo: 0-51px; opacità: 1 )È possibile posizione di sfondo: 00px; Dimentica il tuo rispetto, ho impostato l'opacità su 0,6, un po' di trasparenza. Opacità aleggiata: 1; tutto è preso in (0,5s) transizione: opacità 0,5s; Quando si passava il mouse, la posizione dell'immagine cambiava posizione di sfondo: 0-51px;
Vikoristovuyuchi tsyu tekhnіku può in modo significativo ottimizzare l'immagine(meno zvernen al server).
PS Come il cibo per scrivere!
Zhovten 29, 2019 Il post è stato aggiornato
Yuri Nimets
L'efficacia dei pulsanti dei social media per il sito
Come pensi di poter ottenere i pulsanti dei social media quell'immagine? Per entrambi sembrava ancora più bello e creativo. Quindi, puoi farlo in un modo diverso. Io navigo non uno, ma dekilkom. E se vuoi essere più preciso, troverai 12 modi per creare fantastici effetti per i pulsanti dei social media quando passi il mouse sopra un'immagine. Per alcune interazioni, è necessario non solo puntare, ma anche fare clic con il mouse, che si aggiunge anche all'interattivo. Un modo unico per vedere il tuo sito, vicario e lo stesso effetto quando si passa il mouse sopra l'immagine.
Usa 12 esempi per ammirare e zavantazhivayte per gli sforzi seguenti:
approfittare
Prima del discorso, quanto è efficace quando puntato, ci sono altri articoli sul sito su questo argomento:
Avendo garantito l'effetto - strizza l'occhio!
Ad esempio, essendo caduto nella mia anima, il primo effetto. Passa il mouse sull'immagine qui sotto per vedere l'effetto.
(indica l'immagine)
Ottieni il modo migliore per vedere le immagini più importanti sia sul sito che sul sito unilaterale. Ale, come ho già scritto, gli effetti sono molto maggiori (12!).
Krok 1 - HTML
Per le icone, come puoi vedere sui pulsanti misure sociali Vince FA (Font Awesome). Icone connesse in una riga tra i blocchi :
| 1 | <link rel="foglio di stile" href= "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> |
Inoltre, poiché eri affascinato da tutti i vihіdniki, è necessario scegliere l'effetto che meritavi. Il mio effetto si trova nel file indice.html. Questo file ha tutti gli stili necessari per creare l'effetto al passaggio del mouse.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="image-effect-fallback"> <div class="condividi livello"> <a href = "#" class = "share-button share-via-vk" > <i class = "fa fa vk" > In contatto con</a> <href = "#" classe = "pulsante condividi condividi via facebook"> <io classe = "fa facebook" > Facebook</a> <href = "#" classe = "pulsante condividi condividi via twitter"> <i class = "fa fa-twitter" > Twitter</a> </div> <div class="livello-immagine"> <img src = "images/tree.jpg" width = "500" alt = "(!LANG:(!LANG:California surf" > !}!} </div> </div> |
Tutta la struttura necessaria є. Perso per inserire più stili in CSS. A ciò passiamo alla 2a i, un'ora, il resto del coccodrillo.
Krok 2 - CSS
Gli stili si trovano nel file HTML della skin tra i blocchi . Quindi nel file skin con effetti diversi, questo blocco del documento ha stili diversi.
Devi prendere questi stili e inserirli nel tuo file 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 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 88 89 90 91 92 93 94 95 96 97 98 99 | .image-effect-fall-back ( width : 500px ; height : 300px ; position : relativo ; margin : 0 auto ; -webkit-perspective : 800px ; perspective : 800px ; ) .image-effect-l-back ( position : absolute ; in alto : 0 ; a sinistra : 0 ; altezza : 300px ; -webkit-transition : 0.6s; transizione: 0.6s; z-index : 1 ; ) .image-effect-fall-back :hover .image-layer( -webkit -transform: rotateX(70deg) ; transform: rotateX(70deg) ; overflow: visibile; ) .image-effect-fall-back .image-layer img ( height : 100% ; ) .image-effect-fall-back .image -layer: prima (contenuto: ""; posizione: assoluta; in alto: 0; sinistra: 0; larghezza: 100%; altezza: 100%; -ombra: 0 0 100px 50px rgba(0 , 0 , 0 , 0.5 ) ; opacity : 0 ; -webkit-transition : all 0.5s; ) translateY(110px ) scale(0.75 ); trasforma : rotateX(114deg) translateZ(-26px ) translateY(110px ) scale(0.75 ); -webkit-transform-origin: in basso; -ms-transform-origin: in basso; origine di trasformazione: fondo; ). 100% ; altezza : 100px ; opacità : 0 ; z-index : 10 ; -transizione-webkit: 0,6 s; transizione: 0,6 s; -effetto-fall-back :hover .share-layer ( opacità : 1 ; -webkit- trasforma: rotateX(0deg) translateY(-70px ); trasforma: rotateX(0deg) translateY(-70px ); ) /*stili per tutti i pulsanti*/.share-button( display: inline-block; decorazione del testo: nessuno; colore: #ffffff; riempimento: 12px; larghezza: 90px; raggio del bordo: 2px; margine: 25px 10px; ) /*colore dei pulsanti dei social media*/.share-via-vk ( background-color : #4C75A3 ; ) .share-via-facebook ( background-color : #3b5998 ; ) .share-via-twitter ( background-color : #00aced ; ) |
Ti farò sapere in anticipo: in alcuni casi viene utilizzato jQuery, quindi per l'effetto completo è necessario fare clic sull'immagine. Devi solo prendere tutto il codice JS, che è vittorioso dalla parte del calcio, di cui sei stato onorato.
Rispetto! Dopo aver incollato il codice CSS nel file di stile, i pulsanti potrebbero non avere lo stesso aspetto dell'applicazione. Potrebbe essere correlato al fatto che il file di stile ha altri stili per gli elementi e le classi presenti nella demo.
Visnovok
Di norma, la creatività è sempre in aumento. Penso che qui puoi scegliere un effetto su 12 e conquistare nei tuoi progetti.
Continuiamo a socializzare i nostri siti. I lettori spesso devono selezionare manualmente gli aggiornamenti del blog direttamente nei loro social media preferiti. Diamo loro una tale ricompensa. Per chi è necessario iscriversi a questi servizi sociali. Puoi creare un profilo amministratore o l'autore del sito, oppure puoi parte pubblica azienda al progetto. Sarà necessario che tu pubblichi regolarmente nelle righe dei nuovi profili i nuovi aggiornamenti del sito, in modo che i tuoi pagatori possano conoscerli. Tse, prima del discorso, lavora facilmente per l'aiuto di coloro che abbiamo installato in precedenza. La pubblicazione sui profili social può essere eseguita con l'aiuto di sprite CSS o sprite CSS.
Che cos'è uno sprite CSS e uno sprite?
Sprite- Una raccolta di piccole immagini, come combinate in una sola. Dovresti provare a non trasferire 10-20 piccole immagini luminose dal server al computer del coristuvach, ma a trasferirle in un flusso, unendole in un unico file. Sprite è arrivato al web design dall'industria dei giochi, dove il fetore ha vinto per la creazione di grafica 2D animata, ad esempio mostri, cosa sparare e così via.
La progettazione dei siti può anche essere interrotta, con qualche differenza, le icone sono combinate in un unico file, ad esempio:
Come puoi lavorare in questa applicazione in un file, hanno preso non solo le icone dei social media, ma anche altri elementi di design, come frecce, pulsanti di menu, ecc. Ale poddnuvati assolutamente tutta la grafica, poiché vikoristovuetsya sul sito in uno sprite non è corretto. È meglio dividere gli elementi in gruppi e aggiungere più del necessario al tipo di canto dei lati.
Su questo piccolo ho cercato di mostrare schematicamente il principio degli sprite robotici css. Se il blocco è più grande dell'immagine di sfondo, verrà posizionato nell'angolo in alto a sinistra, poiché la no-repeat è impostata negli stili CSS. Ma possiamo cambiare il più possibile la posizione dell'immagine di sfondo kut superiore bloccare. Soprattutto tse corisno, come un blocco, ad esempio, per il rozmіrom dorivnyuє okremiy іkontsі. Abbiamo questa icona di dimensioni 32x32 in pelle. La puzza si diffonde orizzontalmente, ma verticalmente non è necessario modificare la posizione delle ceneri. Impostiamo la posizione dello sfondo baby -32 px è preso nell'icona del blocco, -64 px è l'icona di Facebook, ecc.
Come creare pulsanti sui profili dei social media?
Dopo essermi registrato con i relativi record, ho rimosso il messaggio sul profilo, l'indirizzo della mia pagina RSS e l'ho inviato al modulo di iscrizione per la cancellazione dell'aggiornamento via mail. Quindi combinerò il seguente codice e lo incollerò nel widget di testo nel pannello di amministrazione di WordPress:
In un'ancora, invia un tag al tuo codice : . La colpa stessa di questo stesso blocco, in cui è necessaria l'icona. L'immagine di sfondo zsv è specificata nel file di stile style.css attraverso l'autorità posizione di sfondo:
/* Aggiorna pulsanti di iscrizione*/ .spmenu ( padding: 0px; margin: 0px; color: #4682B4; text-align: left; font-size: 100%; ) .spmenu a, .spmenu a:hover ( cursore: puntatore ;colore: #1E90FF;decorazione del testo: nessuna;dimensione carattere: 100%; ) .spmenu span ( display: blocco in linea; larghezza: 32px; altezza: 32px; ) no-repeat; ) .spmenu span.sprite_gplus(posizione-sfondo: 0px 0px;). .spmenu span.sprite_rss(posizione-sfondo: -96px 0px;) .spmenu span.sprite_email(posizione-sfondo: -128px 0px;)
In questo rango, per l'elemento skin nel mezzo della classe spmenu" Chiedi immagine di sfondo icone.png, che è un insieme di icone. Rispetta cosa є riga vbudovanim elementіv per specifіkatsієyu HTML, per chiederti razmіri rigorosi (larghezza e altezza), siamo responsabili di cambiare il modo di visualizzare yogo in blocchi Poteri CSS(riga: display: blocco in linea). Espandi il blocco 32x32 in modo che corrisponda al formato delle nostre icone.
Spesso zamіst
tag
,
,
ecc., ritengo che questo pidkhid sia sbagliato. Ora puoi cambiare gli stili dei tag standard, oltre ad essere universali
. Un tag
in un lampo creiamo una richiesta al server e noi, zastosovayuchi sprite, aiutiamo ad accelerare la quantità di queste richieste.
Dove trovare le icone per lo sprite?
- Dipingi te stesso.
- Cerca nel sistema di ricerca tra le immagini.
- A Merezhya ci sono speciali dobirki іkon, yakі spesso lunayut senza un costo.
- Molti social media e servizi sono pubblicati sui siti Web di loghi e icone ufficiali, che puoi utilizzare nelle tue aggiunte.
- Per sprite automaticamente il file sprite dell'icona dei social media, puoi velocizzarlo con il servizio. Selezioniamo le icone nell'ordine richiesto, selezioniamo gli archivi con uno script, decomprimiamo e bachimo un'immagine icone.png- File sprite pronto.
Sprite la finestra per visualizzare le icone colorate durante l'espansione del menu animato, se passando il mouse sopra la voce del menu, il vino viene oscurato o salvato. Quindi, nel file sprite, salva due serie di pulsanti e, dopo aver passato il mouse con il mouse, cambia dinamicamente la posizione del piccolo di sfondo con l'aiuto di JS.
Si prega di notare il pulsante menu pulsante-invia sui canali per rimuovere l'aggiornamento, è rotto, a fine articolo. Iscriviti agli aggiornamenti, se hai bisogno di ricominciare.
Ciao, amici shovny. L'articolo di oggi sarà dedicato alla creazione di un blocco di social buttons senza servizi e plugin. E anche prima di questo blocco, vedrai i pulsanti che ti permettono di supportare il sito per promuovere una parte, inviare un messaggio alle statistiche su e-mail e fai un mutuo sul tuo articolo. Tali pulsanti possono essere visti oggi sul sito della skin. Solo l'asse della puzza è implementato per servizi aggiuntivi o plug-in. E ti mostrerò come crescere in modo indipendente.
Servizi, come se fossi un vincitore sui siti Web dei clienti e sul mio blog - i . I servizi Qi consentono di implementare facilmente l'attività impostata.
Perché il potere dei social buttons sta davanti a servizi e plugin
- Un fattore irreversibile e non periferico è la velocità di interesse del sito. Quindi, ad esempio, il servizio PLUSO, che è quello vicario sulla camicetta, con uno spread più breve, si somma a 633 millisecondi.
Su questo blocco non ci sono più immagini necessarie dei pulsanti social, combinate in . Tutti gli stili sono ridotti al minimo. Più un semplice framework html.
- La via, che io pronuncio, è di non vendicarsi ciao. Ciao, posilannya є, ma tutto il fetore sarà, come la posilannya interna. Per il bajannya, puoi zavzhdi. Non potrai nemmeno vederli.
- duje installazione facile. Basta inserire il codice html nel blocco in corrispondenza del codice di uscita del lato del sito, avviare lo sprite, aggiungere stili CSS tale installazione è completata. Dovrai modificare il percorso del file con le immagini dei pulsanti.
- Questo punto, shvidshe, non è un vantaggio e non un meno per il blocco dei pulsanti social. Il trucco è che il tuo blocco non ha un lichnik da premere sui pulsanti. І tse puoi pensare per un meno. Ale, dall'altra parte, è possibile mettere il bottone skin e saprai sicuramente quante volte hai premuto sui bottoni e condiviso i tuoi articoli con i social network dei tuoi spettatori.
- Le statistiche raccolte dai servizi non verranno più cedute a terzi sul tuo sito.
Inserimento di un blocco di social buttons al codice di uscita
Sembriamo un'opzione classica, se i pulsanti vengono espansi dopo l'articolo.
Puoi anche aprire il file che devi inviare per la pubblicazione degli articoli (single.php) e aggiungere un blocco di social buttons al codice di uscita. Oppure puoi zrobiti attraverso i temi delle funzioni del file (functions.php).
Ti mostrerò le opzioni e potrai scegliere ciò di cui hai bisogno per te stesso.
Inserimento di un blocco nel codice di output single.php
Properedzhennya: prima della pannocchia di tutti i germogli fai da te copia di backup file singolo.php!
Apri il pannello di amministrazione di WordPress. « Sguardo stellato» — "Editore" — "Voce singola (single.php)".
Al codice di uscita, guarda il luogo, definisci la revisione delle statistiche e inizia i commenti, o post-navigazione. Dovrai inserire nello stesso posto il codice html per il blocco dei social buttons.
È rispettoso guardare lo screenshot, concentrarsi sul codiceche commenti. І inserire il codice guida qui sotto.
Naturalmente, i tuoi modelli avranno molta discrezione, ma non ci saranno modifiche, qualunque cosa tu possa pensare, non c'è nulla di pieghevole in esso. Fino ad allora, hai una copia di backup, non c'è nulla di cui aver paura.
E l'asse i stesso è il codice html per il blocco dei pulsanti social:
Spiegazione dietro il codice: tse un blocco DIV іz classe. Costretto ad aprirsi in una finestra di unione liscia, per questo la funzione onClick=window.open è abilitata. La sostituzione della forza sull'articolo è determinata dall'asse del codice cim. La pelle della forza può avere una sua classe, attraverso la quale dovrebbe essere l'immagine del pulsante.
Su chi viene completato l'inserimento tramite il codice di output. Ti ho dato il necessario per abilitare gli stili CSS.
Inserimento di un blocco nel codice di output di single.php tramite le funzioni dei temi
In anticipo: prima della pannocchia, fai una copia di backup del file functions.php!
Per vincere questa opzione, devi aprire il file functions.php e infine aggiungere il codice:
/* Inserisci i pulsanti social */ add_action("comments_template","soc_button"); funzione soc_button() (?> E fai attenzione se inserisci il codice, non sei colpevole di perdere quegli altri caratteri. È meglio chiudere il codice php?>. In caso contrario, il sito smetterà di funzionare.Spiegazione dietro il codice: Il luogo in cui verranno posizionati i pulsanti dei social media viene impostato tramite la chiave API comments_template . Dietro la chiave cim c'è lo spazio prima dei commenti. Il codice dei social buttons stesso è posizionato nei tag di ritorno del codice php e del codice php. Al codice, li ho riconosciuti con un colore rosso. che ha tutta l'astuzia dell'inserimento codice html in PHP, tramite le funzioni dei temi.
In questo modo e in questo modo è finito, passiamo a portare l'immagine al sito.
Carica le immagini dei pulsanti sul server
Ad esempio, ho preparato uno sprite sprite dalle immagini dei pulsanti social. Puoi approfittarne.
Sprite, come un vicorista come un mozzicone, è meno importante 3,97 kb e più pulsanti inutili. E se è uno sprite, ne prenderà solo uno alla base e non per il pulsante della pelle.
Cattura un'immagine o preparane una tua e catturala sul tuo sito. Penso che non sia colpa mia dare la colpa a questi problemi. L'invio di un messaggio a questo sprite è necessario per la progettazione di pulsanti tramite stili CSS.
Collegamento di stili CSS
Questo krok può essere zvichayno, prima vikonati, ma io volіyu vikonati tutto piegato lavoro tecnico, quindi procedi alla ricezione di materiale da stili CSS.
Inoltre, aggiungi il file style.css, che viene utilizzato per la progettazione del tuo sito. І inserisci lo stile dell'asse q:
Condividi a ( display: inline-block; vertical-align: inherit; margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test ..png ") scorrimento non ripetuto 0px 0px trasparente;) .share a.vkontakte ( sfondo: url("http://test..png ") scorrimento non ripetuto -168px 0px trasparente; ) .share a.google ( background: url("http://test..png ") no-repeat scroll -252px 0px transparent; ) .share a.livejournal ( background: url("http://test..png ") no-repeat scroll -336px 0px transparent; ) .share a.twitter ( background: url("http://test..png ") scroll no-repeat -42px 0px transparent; ) .share a.mail ( background: url("http ://test..png ") scorrimento non ripetuto -294px 0px trasparente; ) .share a.odnoklassniki ( sfondo: url("http://test..png ") scorrimento non ripetuto -126px 0px trasparente; ) .share a.pinterest ( background: url("http://test..png ") no-repeat scroll -210px 0px transparent; ) .share a.liveinternet ( background: url("http://test..png ") scorrimento senza ripetizione -378px 0px trasparente; ) .share a.evernote ( background: url("http://test..png ") no-repeat scroll -420px 0px transparent; ) .share a.bookmark ( background: url("http://test.. ) png ") scorrimento non ripetuto -462px 0px trasparente; ) .share a.email ( background: url("http://test..png") no-repeat scroll -504px 0px transparent; ) .share a.print ( background: url("http://test.. png ") scorrimento non ripetuto -546px 0px trasparente; ) .share a.digg ( background: url("http://test..png") scorrimento non ripetuto -588px 0px trasparente; ) .share a.spring ( sfondo: url("http://test..png ") scroll no-repeat -630px 0px trasparente; )
Spiegazione dietro il codice: class.share assegna un aspetto luminoso al blocco, espande il pulsante skin e imposta un unico sfondo. E più skin power può avere una sua classe e tale skin power, attraverso il potere dello sfondo, viene assegnato l'aspetto del pulsante. I pulsanti Wicon come css sprite e skin button hanno una larghezza e un'altezza di 40px e tra di loro un margine di 2px, che ti consente di designare con precisione l'immagine per il pulsante skin. Il primo pulsante viene visualizzato come 0, l'altro come 42 e così via. Nel codice qi, il significato è contrassegnato da un colore arancione. L'invio allo sprite è anche visto con un colore arancione, puoi cambiarlo sulla strada per il tuo sprite.
Per questo, l'intero processo di creazione del tuo blocco di pulsanti social è completato. Puoi passare coraggiosamente alla revisione.
E ho anche un video tutorial, in cui viene mostrato direttamente l'intero processo di letture, viene mostrato il palo al robot dei pulsanti stessi. Lasciati stupire dai tuoi siti Web e blog.
Asse ora baffi. Z metteremo le teste del resto. Vi auguriamo buona fortuna e buona fortuna con nuovi articoli e video lezioni.
