Cum de a crea în butoane css de rețele sociale

Marcajele și stiluri de bază

Adăugați încă aici sunt stilurile:

Am tras un recipient mic în sine pentru link-uri (dimensiunea, marginile, fundal) și o inscripție.

Facem icoane

afișare de proprietate: inline-bloc, ne-am asigurat că link-urile noastre sunt transformate în elemente ale blocului, dar în același timp să păstreze capacitatea de a sta într-un rând. Apoi, specificați dimensiunea decupării și dreptul la blocuri necontigue împreună unul pentru celălalt.

Ei bine, și de ce ar trebui să ne vertical-align: mijloc. Această proprietate se va alinia textul în container, astfel încât acesta va fi exact pe centrul vertical. De asemenea, ne cerem celulele noastre unele de fundal pentru a le vedea vizual în această etapă. Se obține o preformă. Este timpul pentru a adăuga în cele din urmă ikonochki.

Etapa finală

Rămâne să fie plasate în fiecare dintre unitățile pregătite ikonochku lor, care să identifice unul sau celălalt social. de rețea. În acest scop, propun să utilizeze modul cel mai corect - pentru a conecta sprite imagine și poziționare folosind fundal pentru a pune totul în locul său.

Pe scurt, avem nevoie de o astfel de imagine. O am aproximativ 120 de 40.

CSS.Intr-stiluri se adaugă următoarele reguli:

Obținem unitatea de ieșire complet decorat cu icoane.

În mod implicit, primele 40 de pixeli lățime și înălțimea imaginii de fundal va fi luată în acest caz, dar cu altitudinea, și așa totul este în ordine - întreaga imagine se potrivesc în înălțime blocuri. În consecință, putem prescrie doar poziția de fond de icoane Facebook și Twitter.

Scrierea în fundal ca: fundal: url-ul (icon.png) -40px 0. Subliniem în mod explicit faptul că pentru a bloca social-fb. ar trebui să apară imaginea de fundal exact la poziția specificată - patruzeci de pixeli în lățime și înălțime la stânga fără părtinire, pentru că nu este necesar. Asta e atât de simplu, de fapt.

Ce altceva se poate face?

În al doilea rând, aveți posibilitatea să le adăugați la cadru.

Ați putea fi, de asemenea, interesat în