Sociala kodikoner. CSS sprites på exemplet med att installera länkknappar "prenumerera på uppdateringar" på bloggen

• storleksändring påverkar inte kvaliteten,
• visas perfekt på alla enheter, inklusive de med Retina-skärmar,
• tillämpa nästan vilken stil som helst som är tillämplig på text, som bakgrund, färg, skuggor, etc.,
• enkel implementering;

Dessa fördelar har gjort teckensnittsikoner populära bland designers, utvecklare och används av CSS/frameworks som .
Till din uppmärksamhet teckensnitt med ikoner för sociala nätverk.

1. RONDO SOCIAL ICON FONT

Utmärkta teckensnittsikoner för några av de mest populära sociala nätverken och inte bara, men tyvärr finns det ingen ikon för vår älskade .

2. Fontello - ikon teckensnittsgenerator

Ikongenerator, med en enorm uppsättning färdiga ikoner. En av fördelarna är möjligheten att bara välja de nödvändiga ikonerna och generera ett teckensnitt från dem, vilket positivt kommer att påverka sidoptimeringen och laddningshastigheten för ett sådant teckensnitt. Bland fördelarna kan man också peka ut närvaron av ikoner för sådana sociala nätverk som Vkontakte och Odnoklassniki.

3. Mono sociala ikoner teckensnitt

En idealisk lösning för att snabbt integrera teckensnittsikoner i ett projekt, det finns redan en inbäddningskod för CSS, SCSS och HTML-exempel. Den enda nackdelen är bristen på populära ryska sociala nätverk.

4. Pixeden - Social Icon Pack

Bra ikoner med en kraftfull demosida, du kan se skönheten i att använda teckensnittsikoner och styla dem med CSS

29 oktober 2019 Inlägget har uppdaterats

Yuri Nemets

Knappeffekter för sociala medier för webbplats

Tror du att det är möjligt att kombinera knappar och bilder på sociala medier? För att få båda att se väldigt vackra och kreativa ut. Ja, du kan göra det på ett mycket intressant sätt. Och inte bara en utan flera. För att vara mer exakt hittar du i den här artikeln 12 sätt att göra coola effekter för knappar på sociala medier när du håller muspekaren över en bild. I vissa fall är det nödvändigt att inte bara sväva, utan också klicka på musen, vilket också lägger till interaktivitet. Ovanligt sätt få din webbplats att sticka ut med just sådana effekter när du håller muspekaren över bilden.

Se och ladda ner alla 12 exempel från länken nedan:

Ladda ner

Förresten, om hovringseffekter, det finns ett par artiklar till på webbplatsen om detta ämne:

Gillade effekten - använd den!

Till exempel gillade jag den första effekten. Håll muspekaren över bilden nedan för att se effekten.

(sväva över bilden)

Ett ganska attraktivt sätt att lyfta fram de viktigaste bilderna både på sajten och på den ensidiga säljsidan. Men, som jag redan skrivit, det finns mycket fler effekter (12!).

Steg 1 - HTML

Ikonerna du ser på knappar på sociala medier använder FA (Font Awesome). Dessa ikoner är sammankopplade på en rad mellan blocken :

1	<länk rel="stylesheet" href= "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

När du har laddat ner alla källor måste du välja den effekt du gillar. Min effekt finns i filen index.html. Den här filen innehåller också alla nödvändiga stilar för att skapa en hovringseffekt.

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="share layer"> <a href = "#" class = "dela-knapp dela-via-vk" > <i class = "fa fa vk" > I kontakt med</a> <href = "#" klass = "dela-knapp dela-via-facebook"> <i klass = "fa facebook" > Facebook</a> <href = "#" klass = "dela-knapp dela-via-twitter"> <i klass = "fa fa-twitter" > Twitter</a> </div> <div class="image-layer"> <img src = "images/tree.jpg" width = "500" alt = "(!LANG:California surf" > !} </div> </div>

All nödvändig struktur finns där. Det återstår att endast ställa in stilar i CSS. Därför fortsätter vi till det andra och samtidigt det sista steget.

Steg 2 - CSS

Stilar finns i varje HTML-fil mellan blocken . Det vill säga, i varje fil med olika effekter, i detta block högst upp i dokumentet finns motsvarande stilar.

Du måste ta dessa stilar och lägga in dem i din stilmall:

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 ( bredd : 500px ; höjd : 300px ; position : relativ ; marginal : 0 auto ; -webkit-perspective : 800px ; perspektiv : 800px ; ) .image-effect-fall-back .image-lager (position: absolut; topp: 0; vänster: 0; höjd: 300px; -webkit-transition: 0,6s; transition: 0,6s; z-index: 1; ) .image-effect-fall-back :hover .image- lager( -webkit-transform : rotateX(70deg) ; transform : rotateX(70deg); overflow : synlig ; ) .image-effect-fall-back .image-layer img (höjd : 100% ; ) .image-effect-fall -back .image-layer :before ( innehåll : "" ; position : absolut ; topp : 0 ; vänster : 0 ; bredd : 100 % ; höjd : 100 % ; bakgrund : rgba(0 , 0 , 0 , 0.5 ) ; ruta -shadow : 0 0 100px 50px rgba(0 , 0 , 0 , 0.5 ) ; opacitet : 0 ; -webkit-transition : alla 0.5s; övergång : alla 0.5s; -webkit-transform : rotateX(114x(114x) ) translateY(110px ) skala(0,75 ); transform : rotateX(114deg) translateZ(-26px ) translateY(110px ) scale(0.75 ) ; -webkit-transform-origin: botten; -ms-transform-origin: botten; transform-ursprung: botten; ) .image-effect-fall-back :hover .image-layer :before ( opacitet : 0,3 ; ) .image-effect-fall-back .share-layer( position : absolut ; botten : 100px ; vänster : 0 ; bredd : 100% ; höjd : 100px ; opacitet : 0 ; z-index : 10 ; -webkit-transition : 0.6s; övergång : 0.6s; -webkit-transform : rotateX(70deg); transform : rotateX(70deg) ; -effect-fall-back :hover .share-layer ( opacitet : 1 ; -webkit-transform : rotateX(0deg) translateY(-70px ); transform : rotateX(0deg) translateY(-70px ) ; ) /*stilar för alla knappar*/.share-button( display : inline-block; text-decoration : none ; color : #ffffff ; padding : 12px ; width : 90px ; border-radius : 2px ; margin : 25px 10px ; ) /*färg på knappar för sociala medier*/.share-via-vk ( bakgrundsfärg : #4C75A3 ; ) .share-via-facebook ( bakgrundsfärg : #3b5998 ; ) .share-via-twitter ( bakgrundsfärg : #00aced ; )

Jag kommer att varna dig direkt: jQuery används i några av exemplen, för där måste du klicka på bilden för att få full effekt. Du behöver bara ta all JS-kod som används på sidan med exemplet du gillar.

Uppmärksamhet! När du har klistrat in CSS-koden i din stilmall kanske knapparna inte visas exakt som i exemplet. Detta kan bero på att din stilfil har olika stilar för de element och klasser som används i demon.

Slutsats

Som regel är kreativitet alltid välkommen. Jag tror att alla här kommer att kunna välja en effekt av 12 för sig själva och använda den i sina egna projekt i framtiden.

Jag grävde fram en bra sak. Gränssnittsikoner insvept i en sprite. Om någon inte vet vad en sprite är så är detta en bild där det finns flera bilder som visas separat på sajten med hjälp av css. Jag vet inte om jag förklarade tydligt, men du kan ta reda på vad en sprite använder den här sammansättningen som exempel.

Sprite-fördelar

Jag har inte lagt upp ikoner på länge, förmodligen för att alla ikoner som jag behövde redan fanns på min sida :)) men jag behövde ikoner i en sprite och jag hittade dessa och delar dem med er. förresten utmärkande drag och det viktigaste pluset med spriten är att om spritebilden laddas en gång, kommer alla element i spriten inte längre att laddas och kommer följaktligen att minska hastigheten html-sidor. Vanligtvis används sprites för knappar som ändras vid hovring. Ibland händer det att en knapp i sitt normala tillstånd och en knapp vid hover är två olika bilder, och du kanske märker på vissa sajter att när du håller muspekaren över knappen visas bilden inte direkt - den laddas. Sprite kommer inte att ha detta problem. Ett annat plus med sprites är utrymmesbesparande. Låt oss säga att du har någon form av plugin, till exempel en reglage, och flera dussin bilder går till den (ramarnas hörn, själva ramarna, pilar, kulor, ikoner sociala nätverk etc). Så när de alla är inneslutna i en bild ser det mycket bekvämare och snyggare ut om de låg i en mapp med bilder separat.

Vilka är dessa ikoner?

Som vanligt kommer jag att berätta vilka bilder som finns bland dessa ikoner så att du kan hitta den önskade ikonen genom att söka, som jag har i huvudmenyn högst upp på sajten: slott, robot, diamant eller pärla, monitor, present, mikrofon, raket, glass, person , klocka, sax, ikoner för alla sociala nätverk och tjänster, skiftnycklar, båge, plånbok, ipad, vattenmelon, plånbok, speljoystick, kalkylator, clown, glödlampa, rosett, papperskorg eller korg, brev, jordglob, hamburgare, bil, moln, kamera och mycket mer. Det finns cirka 100 bilder totalt.

Dessa ikoner är anslutna mycket enkelt:

1. Vi kopplar ihop css-filen sprite.css på detta sätt: skapa en css-mapp i roten på din webbplats, släpp den här css-filen där och på sidan där ikonerna mellan taggarna kommer att visas klistra in följande kod:

3. På den plats där du vill placera ikonen, klistra in koden:

4. Du kan använda min demo, det finns alla ikoner som presenteras och med använder google chrome element viewer för att bestämma namnet på ikonen och infoga "ikonnamn" istället. Låt oss säga att klockikonen har följande kod:

Tja, jag tror att det inte är svårt att ta reda på hur man infogar dessa ikoner från en sprite, speciellt eftersom jag redan förklarat allt :)) Njut av att använda det!

Hej kära läsare av bloggsidan. Du kan naturligtvis använda en plugin för denna uppgift, men det är inte så svårt att göra det själv, och det kommer att bli färre, särskilt eftersom jag redan arbetar ganska många av dem (se artikeln på länken). Jag tog ikonerna för sociala nätverk från, som jag redan skrivit i detalj (jag hoppas att Dimox inte kommer att invända mot detta).

Och jag ansåg det också lämpligt för e-post.

Skapa en sprite från knapparna och infoga HTML-koden på webbplatsen

Efter att du har skapat alla nödvändiga grupper och sidor på sociala nätverk, vilket innebär att du har fått alla nödvändiga länkar, kan du bli förbryllad genom att lägga till knappar på webbplatsen. Du kan naturligtvis, i enlighet med mitt inlägg om, välja en lämplig ikon för varje socialt nätverk och vid behov minska dess storlek till önskad storlek i och.

Men så är det inte det bästa sättet. Varför? Tja, för att ladda varje bild av det sociala nätverket kommer en separat begäran att göras till din server. Om du har ett dussin ikoner betyder det tio förfrågningar, som på något sätt kommer att skapa en extra belastning på servern och . Sådan extravagans passar oss inte, särskilt inte eftersom det har varit det länge.

Jag bestämde mig för att inte uppfinna hjulet igen (skapa en sprite), utan använde den som skapar Share42-konstruktorn (länken till beskrivningen av att arbeta med den ges lite högre). I den kan du välja de sociala nätverk vars ikoner du behöver, och tillsammans med koden får du en CSS-sprite, d.v.s. fysiskt en grafisk fil, som kommer att innehålla alla sociala nätverksikoner du behöver och prenumerationer på RSS-flödet (och e-post, om det behövs).

Jag valde fyra huvudnätverk och ett par ikoner för nyhetsprenumerationer med ikonstorlekar på 24 gånger 24, så min sprite ser ut så här (dock maskade den sig fortfarande dit, men det spelar ingen roll):

Nu har vi alla ingredienser - länkar till grupper eller sidor i sociala nätverk och ikoner för att visa dem på webbplatsen. Det återstår bara att förbereda allt detta korrekt, d.v.s. utgöra. Min blogg drivs av WordPress, så jag kommer att klistra in knappkoden i en av . I mitt fall heter det sidebar.php. html-kod detta resulterar i en mycket enkel:

Tja, det mest intressanta. Med hjälp avgör vi vilket område av vår sprite som kommer att visas på just den här platsen som bakgrund (i vårt fall är denna bakgrund placerad under en hyperlänk). Det tar väldigt lång tid att förklara hur detta går till, så läs artikeln på länken så blir allt klart (det finns också illustrativa exempel). Om du är för lat, experimentera bara med siffrorna, som, som du kanske har märkt, inte är förgäves en multipel av 24.

Ja, ladda upp sprite-filen via FTP till din webbplats och ange sökvägen till den i bakgrunden (). Det är allt. Om det inte fungerar, läs materialet på länkarna ovan mer noggrant, ja, och om inget händer alls, beskriv sedan din situation i kommentarerna (i detalj - för att infoga koden, glöm inte det i PHP-taggar bifogas med hakparenteser).

Lycka till! Vi ses snart på bloggen

Du kanske är intresserad

Vi fortsätter att socialisera våra sajter. Det är ofta bekvämt för läsare att få blogguppdateringar direkt till sin favorit socialt nätverk. Låt oss ge dem den möjligheten. För att göra detta måste du registrera dig i samma sociala nätverk. Du kan skapa en profil för administrationen eller webbplatsens författare, eller så kan du offentlig sida företag eller projekt. I framtiden kommer du att regelbundet behöva publicera nyheter och webbplatsuppdateringar i dina profilers nyhetsflöden så att dina prenumeranter kan bekanta dig med dem. Detta är förresten bekvämt att göra med hjälp av de vi installerade tidigare. Länkar till sociala profiler kommer att utfärdas med hjälp av CSS sprite-tekniken eller CSS-sprites.

Vad är CSS-sprites och sprites i allmänhet?

Sprites- en uppsättning små bilder som kombineras till en. Detta görs för att inte ladda ner 10-20 små lätta bilder från servern till användarens dator, utan för att skicka dem i en ström, kombinera dem till en fil. Sprites inom webbdesign kom från spelindustrin, där de användes för att skapa animerad 2D-grafik, som att skjuta monster osv.

Inom webbdesign används också en teknik där olika ikoner kombineras till en fil, till exempel så här:

Som du kan se i det här exemplet samlades inte bara ikoner för sociala medier, utan även andra designelement, som pilar, "gilla"-knappar, etc., i en fil. Men att kombinera absolut all grafik som används på sajten till en sprite är inte helt korrekt. Det är bättre att dela in elementen i grupper och ladda bara de som är nödvändiga på en viss typ av sida.

På den här bilden försökte jag schematiskt visa principen för css-sprites. Om blocket är större än bakgrundsbilden, placeras det som standard i det övre vänstra hörnet, om i css-stilar inställd på ingen upprepning. Men vi kan ändra positionen för bakgrundsbilden i förhållande till blockets övre vänstra hörn. Detta är särskilt användbart om blocket, till exempel, är lika stort som en separat ikon. Vi har sju ikoner 32x32 vardera. De är anordnade horisontellt, så vi behöver inte ändra positionen för bakgrunden vertikalt. Ställ in positionen för bakgrundsbilden till -32 px, vi får ikonen i blocket, -64 px - Facebook-ikonen, etc.

Hur gör man knappar-länkar till profiler i sociala nätverk?

Efter att ha registrerat mig i relevanta gemenskaper och i fick jag länkar till profiler, adressen till mitt RSS-flöde och en länk till ett prenumerationsformulär för att få uppdateringar via post. Jag kombinerade dem sedan till följande kod och klistrade in den i en textwidget i WordPress adminpanel:

Länkankaret i denna kod använder taggen : . Det är han som är själva blocket där den önskade ikonen visas. Förskjutningen av bakgrundsbilden ställs in i stilfilen style.css via fastighet bakgrundsposition:

/* Uppdatera prenumerationsknappar*/ .spmenu ( utfyllnad: 0px; marginal: 0px; färg: #4682B4; text-align: left; font-size: 100%; ) .spmenu a, .spmenu a:hover ( cursor: pointer ; färg: #1E90FF; text-dekoration: ingen; font-size: 100%; ) .spmenu span (display: inline-block; width: 32px; height: 32px; background: url("images/icons.png" ) no-repeat; ) .spmenu span.sprite_gplus (bakgrundsposition: 0px 0px;) .spmenu span.sprite_twitter (bakgrundsposition: -32px 0px;) .spmenu span.sprite_fbook (bakgrundsposition: -64px 0px;) . spmenu span.sprite_rss(background-position: -96px 0px;) .spmenu span.sprite_email(background-position: -128px 0px;)

Så för varje element inne i klassen" spmenu» bakgrundsbilden är inställd icons.png, som är en uppsättning ikoner. Lägg märke till att är ett inline-inline-element enligt HTML-specifikationen, så för att ge det strikta dimensioner (bredd och höjd), måste vi ändra sättet det visas för att blockera i CSS-egenskaper (rad: display: inline-block). Blockstorlekarna 32x32 motsvarar bara formatet på våra ikoner.

Ofta istället för använd taggar , , etc., jag tycker att detta tillvägagångssätt är fel. Varför ändra stilarna för standardtaggar om det finns en universell . En tagg skapar vanligtvis en extra förfrågan till servern, och vi använder bara sprites för att försöka minska antalet förfrågningar.

Var kan jag få tag i ikonerna för spriten?

1. Rita dig själv.
2. Sök i sökmotorn bland bilderna.
3. Det finns speciella samlingar av ikoner på webben som ofta ges bort gratis.
4. Många sociala nätverk och tjänster visar officiella logotyper och ikoner på sina webbplatser som kan användas i deras applikationer.
5. För att göra en sprite-fil med sociala medier-ikoner automatiskt kan du använda tjänsten. Välj ikonerna i rätt ordning, spara arkivet med skriptet, packa upp och se bilden icons.png- färdig sprite-fil.

Sprites, förutom att visa ikoner, är användbara när du utvecklar en animerad meny, när du håller muspekaren över dess objekt, antingen dämpas den eller lyser upp. Sedan lagras två uppsättningar knappar i sprite-filen och vid "mouseover"-händelsen ändrar de dynamiskt positionen för bakgrundsbilden med JS.

Menyn med knappar-länkar till kanalerna för att ta emot uppdateringar, som utlovades i början av noten, har gjorts, och detta avslutar artikeln. Prenumerera på uppdateringar, det mest intressanta har precis börjat.