Hogyan hozzunk létre a css gombok a szociális hálózatok

Jelölések és alapvető stílusok

Hozzá még itt vannak a stílusok:

Felhívtuk egy kis tartály maga kapcsolatokkal (méret, margók, háttér) és egy felirat.

Azt, hogy az ikonok

Az ingatlan display: inline-block, meggyőződtünk arról, hogy a linkeket átalakul tömb elemei, de ugyanakkor megtartják azt a képességüket, hogy álljon a sorban. Ezután adja meg a méretet, a behúzás és a jogot, hogy nem egybefüggő együtt egymással.

Nos, és miért kellene vertical-align: közepén. Ez a tulajdonság összehangolja a szöveget a tartályban, így lesz pontosan a függőleges központ. Szintén kérünk sejtjeink némi háttér vizuálisan látni őket ebben a szakaszban. Szerezzen be egy alkothatja. Itt az ideje, hogy végre hozzá ikonochki.

A végső szakaszban

Meg kell még elhelyezni az egyes egységek elkészítették ikonochku amely azonosítja az egyik vagy a másik társadalmi. hálózaton. Ebből a célból, azt javaslom, hogy használja a leginkább megfelelő módon -, hogy csatlakoztassa a kép sprite és használata háttér helymeghatározás, hogy mindent a helyére.

Röviden, szükségünk van egy ilyen képet. Megvan 120 40.

A css-stílusok hozzá az alábbi szabályokat:

Kapjuk a kimeneti egység teljesen díszített ikonok.

Alapértelmezésben az első 40 pixel szélességű és magasságú a háttérkép kerül sor ebben az esetben, de a magasság, és így minden rendben van - a teljes kép illeszkedik blokkok magassága. Ennek megfelelően, csak akkor tudjuk felírni a háttérben helyzetét ikonok Facebook és a Twitter.

Írás közben a háttérben: background: url (icon.png) -40px 0. Azt kifejezetten rámutatni, hogy blokkolja a társadalmi-fb. háttérkép jelenjen meg pontosan a megadott helyen - negyven pixel szélesség és magasság balra elfogulatlanul, mert nem szükséges. Ez olyan egyszerű, sőt.

Mi mást lehet tenni?

Másodszor, akkor add hozzá a kerethez.

Ön is érdekelt