Layout ikonok segítségével css-sprite és pszeudoelem előtt - Popel iroda

Abban az időben a bevezetését elrendezés gyakran szükséges elhelyezni mellett a link szövegét, egy kis ikon. Minden jó coder azt akarja, hogy olyan szerves része az ikon linkeket. A leggyakoribb módszer a probléma megoldására -, hogy egy ikon a háttérben, és a linkeket a linket padding. Sajnos, ez a technika korlátozásokat a képre használható ikonok. Ha azt akarjuk, hogy a sprite minden ikonok, az árrés ikonok között függ a méret a linkeket. A nagy számú ikonok egy kobold is nagyon lenyűgöző méretű, gyakran egy nagy része a kép üres. Akkor, persze, minden ikon menteni egy külön fájlban, de a fájl növeli minden egyes alkalommal az oldal betöltésekor. Ennek eredményeképpen meg kell találnunk az egyensúlyt a mérete és száma a használt képek. A feladat bonyolult, ha új grafikát az oldalon.

Balra - a régi verziót a Sprite. Tény, hogy minden az ikonok benne vannak elrendezve függőlegesen egy sorban, és nem két sorban, mint a képen

Azt javaslom, egy új módszert, amely lehetővé teszi, hogy optimálisan használja fel a sprite fájl, és így nem korlátozza a méret a linkeket. A módszer alapja a használata pszeudo-elemek: korábban. Támogatás a pszeudo-elem jelen van az összes modern böngészőben. IE7 modern böngésző, nem hisszük, hogy csak az ikonok nem jelennek meg. Vágjunk bele.

Először hozzon létre egy sprite minden szükséges számunkra ikonok. Nem számít, hogy milyen sorrendben vannak elhelyezve. Példaként a cikket, én választottam több ikont a népszerű készlet Fat Cow Hosting:

Saját sprite bizonyítani az eljárás

Azt javasoljuk, hogy elhagyja az ikonok között 1-2 üres pixel, különben a növekedés a szövege egy böngésző jelenti a szomszédos ikonok lesznek a látható tartományban.

Először hozzon létre egy alap osztály minden .icon ikonok:

Most nyissa ki a szolgáltatás SpriteCow. Mi feltölt és letölt a sprite határozza meg a koordinátáit az összes ikont, és hozzon létre egy külön osztály minden ezek a koordináták. Maga nyújt nemcsak koordinálja, hanem a méret és egyéb tulajdonságok, de még mindig nincs rá szükség.

A szerencsések, hogy kevesebb vagy Sass, lehetnek közös .icon osztály az egyes osztályok speciális ikonok, akkor a link lesz elég hozzá csak a legutóbbi példa class = „ikon-youtube” helyett a class = „ikon ikon-youtube”

Annak igazolására, a használata ezen osztály létre egy gombot, hogy küldjön mail:

Most a gomb tudjuk használni bármelyik ikont már definiált, hozzátéve, hogy ő ikon blokk osztályok és az osztályt a koordinátákat a legtöbb ikonok. Oldal példákkal kapcsolatok ikonok találhatók itt.