Kod ikon społecznych. Sprites CSS na przykładzie instalacji przycisków-linków na blogu „subskrypcja aktualizacji

• zmiana rozmiaru nie wpływa na jakość,
• doskonale wyświetla się na wszystkich urządzeniach, także tych z wyświetlaczami Retina,
• zastosowanie niemal dowolnego stylu tekstu, takiego jak tło, kolor, cienie itp.,
• Łatwość wdrożenia;

Dzięki tym zaletom ikony czcionek stały się popularne wśród projektantów, programistów i są wykorzystywane przez takie CSS/frameworki jak.
Dla Twojej uwagi czcionki z ikonami sieci społecznościowych.

1. RONDO IKONA SPOŁECZNA CZCIONKA

Doskonałe ikony czcionek niektórych z najpopularniejszych sieci społecznościowych i nie tylko, ale niestety nie ma naszej ikony, ulubionej przez wszystkich.

2. Fontello - generator czcionek ikon

Generator ikon z ogromnym zestawem gotowych ikon. Jedną z zalet jest możliwość wybrania tylko niezbędnych ikon i wygenerowania z nich czcionki, co korzystnie wpłynie na optymalizację strony i szybkość ładowania takiej czcionki. Wśród zalet można również podkreślić obecność ikon takich sieci społecznościowych, jak Vkontakte i Odnoklassniki.

3. Czcionka ikon społecznościowych mono

Idealne rozwiązanie do szybkiego zintegrowania ikon czcionek z projektem, istnieje już kod do embed dla CSS, SCSS i przykładowy HTML. Jedyną wadą jest brak popularnych rosyjskich sieci społecznościowych.

4. Pixeden — pakiet ikon społecznościowych

Ładne ikony z potężną stroną demonstracyjną, możesz zobaczyć piękno używania ikon czcionek i stylizowania ich za pomocą CSS

29 października 2019 r. Wpis został zaktualizowany

Jurij Nemets

Efekty przycisków mediów społecznościowych na stronie internetowej

Czy uważasz, że można łączyć przyciski mediów społecznościowych i obrazy? Aby oba wyglądały bardzo pięknie i kreatywnie. Tak, możesz to zrobić w bardzo ciekawy sposób. I nie jeden, ale kilka. Mówiąc dokładniej, w tym artykule znajdziesz 12 sposobów na uzyskanie fajnych efektów dla przycisków mediów społecznościowych po najechaniu kursorem na obraz. W niektórych przypadkach potrzebujesz nie tylko najechania kursorem, ale także kliknięcia myszą, co również dodaje interaktywności. Niezwykły sposób na wyróżnienie witryny za pomocą właśnie takich efektów, gdy najedziesz kursorem na obraz.

Zobacz wszystkie 12 przykładów i pobierz z poniższego linku:

Ściągnij

Nawiasem mówiąc, jeśli chodzi o efekty najechania, na stronie jest jeszcze kilka artykułów na ten temat:

Polub efekt – wykorzystaj go!

Na przykład podobał mi się pierwszy efekt. Najedź na obrazek poniżej, aby zobaczyć efekt.

(najedź na obraz)

Dość atrakcyjny sposób na podkreślenie najważniejszych obrazów zarówno w witrynie, jak i na jednostronicowej witrynie sprzedażowej. Ale, jak już pisałem, efektów jest znacznie więcej (12!).

Krok 1 — HTML

W przypadku ikon widocznych na przyciskach mediów społecznościowych używany jest FA (Font Awesome). Te ikony są połączone w jednej linii między blokami :

1	<link rel = „arkusz stylów” href = „http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”>

Po pobraniu wszystkich źródeł musisz wybrać efekt, który Ci się podoba. Mój efekt jest w pliku index.html... Ten plik zawiera również wszystkie niezbędne style do stworzenia efektu najechania.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<div class = "image-effect-fall-back"> <div class = "share-layer"> <a href = "#" class = "przycisk udostępniania udostępnij-przez-vk"> <I klasa = "fa fa-vk"> W kontakcie z</ a> <a href = "#" klasa = "przycisk udostępniania udostępnij-przez-facebook"> <I klasa = "fa fa-facebook"> Facebook</ a> <a href = "#" klasa = „przycisk udostępniania udostępnij-przez-twitter”> <I klasa = "fa fa-twitter"> Świergot</ a> </ dz> <div class = "warstwa-obrazu"> <img src = "images / tree.jpg" width = "500" alt = "(! LANG: California surf" > !} </ dz> </ dz>

Jest tam cała niezbędna struktura. Pozostaje tylko ustawić style w CSS. Przechodzimy zatem do drugiego i zarazem ostatniego kroku.

Krok 2 - CSS

Style znajdują się w każdym pliku HTML pomiędzy blokami ... Oznacza to, że w każdym pliku z różnymi efektami w tym bloku u góry dokumentu znajdują się odpowiednie style.

Musisz wziąć te style i umieścić je w swoim arkuszu stylów:

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 (szerokość: 500px; wysokość: 300px; pozycja: względna; margines: 0 auto; -webkit-perspective: 800px; perspective: 800px;) .image-effect-fall-back .image-layer (pozycja: bezwzględna; góra: 0; lewa: 0; wysokość: 300px; -webkit-transition: 0.6s; przejście: 0.6s; z-index: 1;) .image-effect-fall-back: hover .image- warstwa (-webkit-transform: rotateX (70deg); transform: rotateX (70deg); overflow: visible;) .image-effect-fall-back .image-layer img (wysokość: 100%;) .image-effect-fall -back .image-layer: before (treść: ""; pozycja: bezwzględna; góra: 0; lewa: 0; szerokość: 100%; wysokość: 100%; tło: rgba (0, 0, 0, 0,5); pudełko -shadow: 0 0 100px 50px rgba (0, 0, 0, 0,5); opacity: 0; -webkit-transition: wszystkie 0,5s; przejście: wszystkie 0,5s; -webkit-transform: rotateX (114deg) translateZ (-26px ) translateY (110px) skala (0,75 ); transform: rotateX (114deg) translateZ (-26px) translateY (110px) skala (0,75); -webkit-transform-origin: dół; -ms-transform-origin: dół; transform-origin: dół; ). 100%; wysokość: 100px; krycie: 0; z-index: 10; -webkit-transition: 0,6s; przejście: 0,6s; -webkit-transform: rotateX (70deg); transform: rotateX (70deg);) .image -effect-fall-back: hover .share-layer (przezroczystość: 1; -webkit-transform: rotateX (0deg) translateY (-70px); transform: rotateX (0deg) translateY (-70px);) / * style dla wszystkich przycisków * /.share-button (wyświetlacz: inline-block; text-decoration: none; color: #ffffff; padding: 12px; width: 90px; border-radius: 2px; margin: 25px 10px;) / * kolor przycisków mediów społecznościowych * /.share-przez-vk (kolor-tła: # 4C75A3;) .share-via-facebook (kolor-tła: # 3b5998;) .share-przez-twitter (kolor-tła: # 00aced;)

Od razu ostrzegam: niektóre przykłady używają jQuery, bo tam dla pełnego efektu trzeba kliknąć w obrazek. Wystarczy wziąć cały kod JS, który jest używany na stronie z przykładem, który lubisz.

Uwaga! Po wstawieniu kodu CSS do arkusza stylów przyciski mogą nie wyświetlać się dokładnie tak, jak pokazano w przykładzie. Może to wynikać z faktu, że twój arkusz stylów ma różne style dla elementów i klas używanych w demo.

Wniosek

Z reguły kreatywność zawsze była mile widziana. Myślę, że tutaj każdy będzie mógł wybrać dla siebie jeden z 12 efektów i wykorzystać w przyszłości we własnych projektach.

Wykopałem dobrą rzecz. Ikony interfejsu zawarte w jednym duszku. Jeśli ktoś nie wie, co to jest duszek, to jest to jedno zdjęcie, na którym jest kilka obrazków, które są wyświetlane na stronie osobno za pomocą css. Nie wiem, czy jasno to wyjaśniłem, ale możesz dowiedzieć się, czym jest duszek, używając tego zestawu jako przykładu.

Korzyści z duszków

Od dawna nie publikowałem ikon, prawdopodobnie dlatego, że wszystkie ikony, których potrzebowałem, były już na mojej stronie :)) ale potrzebowałem ikon w jednym sprite'ie, znalazłem je i podzieliłem się nimi. Nawiasem mówiąc, charakterystyczną cechą i najważniejszym plusem duszka jest to, że jeśli obraz duszka zostanie załadowany raz, to wszystkie elementy tego duszka nie będą już ładowane i odpowiednio zmniejszą prędkość strony html. Zazwyczaj duszki są używane do przycisków, które zmieniają się po najechaniu kursorem. Czasami zdarza się, że przycisk w normalnym stanie i przycisk po najechaniu to dwa różne obrazki, a na niektórych stronach zauważyłeś, że po najechaniu na przycisk obraz nie pojawia się od razu - jest ładowany. Z duszkiem to nie będzie problem. Kolejnym plusem sprite'ów jest oszczędność miejsca. Załóżmy, że masz jakąś wtyczkę, taką jak suwak, i trafia do niej kilkadziesiąt obrazów (rogów ramek, samych ramek, strzałek, punktorów, ikon mediów społecznościowych itd.). Tak więc, gdy wszystkie są zamknięte w jednym obrazie, znacznie wygodniej i schludniej jest wyglądać, jakby leżały w folderze z obrazami osobno.

Co jest przedstawione na tych ikonach

Jak zwykle powiem ci, jakie obrazy znajdują się wśród tych ikon, abyś mógł znaleźć niezbędne ikony do wyszukiwania, które znajduje się w menu głównym u góry strony: zamek, robot, diament lub kamień szlachetny, monitor, prezent , mikrofon, rakieta, lody, mężczyzna, zegar, nożyczki, ikony dowolnych sieci i usług społecznościowych, klucze, łuk, portfel, iPad, arbuz, portfel, joystick do gier, kalkulator, klaun, żarówka, łuk, kosz lub kosz , list, kula ziemska, burger, auto, chmura, aparat fotograficzny i wiele więcej. W sumie jest około 100 zdjęć.

Połączenie tych ikon jest bardzo proste:

1. Łączymy plik css sprite.css w ten sposób: utwórz folder css w katalogu głównym Twojej witryny, dodaj tam ten plik css i na stronie, na której będą wyświetlane ikony między tagami wstaw następujący kod:

3. W miejscu, w którym chcesz umieścić ikonę, wklej kod:

4. Możesz użyć mojego demo, są tam wszystkie prezentowane ikony i korzystając z przeglądarki elementów google chrome, zdefiniuj nazwę ikony i wstaw zamiast "icon name". Załóżmy, że ikona zegara ma następujący kod:

Cóż, myślę, że nie jest trudno wymyślić, jak wstawić te ikony z duszka, zwłaszcza, że ​​już wszystko wyjaśniłem :)) Miłej zabawy!

Witajcie drodzy czytelnicy serwisu blogowego. Możesz oczywiście użyć wtyczki do tego zadania, ale nie jest tak trudno zrobić to samemu, a będzie ich mniej, zwłaszcza, że ​​mam już wielu z nich pracujących dla nich (patrz artykuł pod podanym linkiem). Zaczerpnąłem ikonki z mediów społecznościowych, o których już szczegółowo pisałem (mam nadzieję, że Dimoks się temu nie sprzeciwi).

A także uznałem, że jest to odpowiednie dla poczty e-mail.

Stwórz sprite'a z przycisków i wstaw kod HTML na stronę

Po utworzeniu wszystkich niezbędnych grup i stron w sieciach społecznościowych, co oznacza, że ​​otrzymałeś wszystkie niezbędne linki, możesz być zaskoczony, dodając przyciski do witryny. Możesz oczywiście, zgodnie z moim postem na temat, wybrać odpowiednią ikonę dla każdej sieci społecznościowej i, jeśli to konieczne, zmniejszyć jej rozmiar do wymaganego w i.

Ale to nie jest najlepsza opcja. Czemu? Cóż, ponieważ w celu przesłania każdego obrazu sieci społecznościowej na twój serwer zostanie wysłane osobne żądanie. Jeśli masz kilkanaście ikon, oznacza to dziesięć żądań, które w jakikolwiek sposób spowodują dodatkowe obciążenie serwera i. Takie marnotrawstwo nam nie odpowiada, zwłaszcza że od dawna.

Postanowiłem nie wymyślać koła od nowa (utworzyć duszka), ale skorzystałem z tego stworzonego przez konstruktora Share42 (link do opisu pracy z nim znajduje się tuż powyżej). W nim możesz wybrać te sieci społecznościowe, których ikony będziesz potrzebować, a wraz z kodem otrzymasz sprite CSS, tj. fizycznie jeden plik graficzny, który będzie zawierał wszystkie potrzebne ikony mediów społecznościowych i subskrypcje kanałów RSS (i e-mail, jeśli jest to wymagane).

Wybrałem cztery główne sieci i kilka ikon do subskrybowania wiadomości o rozmiarze ikony 24 na 24, więc mój sprite wygląda tak (chociaż nadal tam mam, ale to nie ma znaczenia):

Teraz mamy już wszystkie składniki - linki do grup lub stron mediów społecznościowych oraz ikony do wyświetlenia na stronie. Pozostaje tylko przygotować to wszystko poprawnie, tj. układ. Mój blog jest oparty na WordPressie, więc wkleję kod z przyciskami do jednego z nich. W moim przypadku nazywa się sidebar.php. Kod HTML okazuje się to niezwykle proste:

No i najciekawsza rzecz. Za jego pomocą ustalamy, który obszar naszego duszka będzie wyświetlany w tym konkretnym miejscu jako tło (w naszym przypadku to tło znajduje się pod hiperłączem). Wyjaśnienie, jak to się dzieje, zajmuje bardzo dużo czasu, więc przeczytaj artykuł pod linkiem, a wszystko stanie się jasne (podano przykładowe przykłady). Jeśli jesteś leniwy, po prostu poeksperymentuj z liczbami, które, jak być może zauważyłeś, nie są na darmo i są wielokrotnościami 24.

Tak, prześlij plik duszka do swojej witryny za pomocą FTP i określ ścieżkę do niego w tle (). To wszystko. Jeśli nie wyjdzie, że przeczytaj uważnie materiały na powyższych linkach, no cóż, jeśli nic nie działa, to opisz swoją sytuację w komentarzach (szczegółowo - aby wstawić kod, zapomnij zawrzeć go w tagach PHP z kwadratem wsporniki).

Powodzenia! Do zobaczenia wkrótce na stronach bloga

Możesz być zainteresowany

Ponieważ nadal utrzymujemy kontakty towarzyskie z naszymi witrynami, czytelnicy często mogą wygodnie otrzymywać aktualizacje blogów bezpośrednio w swojej ulubionej sieci społecznościowej. Dajmy im taką możliwość. Aby to zrobić, musisz zarejestrować się w tych sieciach społecznościowych. Możesz stworzyć profil administracji lub autora strony, możesz też stworzyć stronę publiczną dla firmy lub projektu. W przyszłości konieczne będzie regularne publikowanie aktualności i aktualizacji witryny w kanałach informacyjnych profilu, aby Twoi subskrybenci mogli się z nimi zapoznać. Nawiasem mówiąc, wygodnie jest to zrobić za pomocą tych, które zainstalowaliśmy wcześniej. Zaprojektujemy linki do profili społecznościowych za pomocą sprite CSS lub sprite CSS.

Czym ogólnie są sprite'y i sprite'y CSS?

duszki- zestaw małych obrazków, które są połączone w jeden. Odbywa się to, aby nie pobrać 10-20 małych lekkich obrazów z serwera na komputer użytkownika, ale wysłać je w jednym strumieniu, łącząc je w jeden plik. Sprite'y trafiły do ​​web designu z branży gier, gdzie służyły do ​​tworzenia animowanych grafik 2D, np. strzelania do potworów itp.

W projektowaniu witryn stosuje się również technikę, w której różne ikony są łączone w jeden plik, na przykład tak:

Jak widać na tym przykładzie, nie tylko ikony mediów społecznościowych zostały zebrane w jednym pliku, ale także inne elementy projektu, takie jak strzałki, przyciski „lubię to” itp. Ale połączenie absolutnie wszystkich grafik, które są używane na stronie w jeden sprite, nie jest do końca poprawne. Lepiej jest podzielić elementy na grupy i ładować tylko niezbędne na określonym typie stron.

Na tym obrazku próbowałem schematycznie pokazać jak działają sprite'y css. Jeśli blok jest większy niż obraz tła, to jest domyślnie umieszczany w lewym górnym rogu, jeśli w stylach CSS ustawiono brak powtarzania. Ale możemy zmienić położenie obrazu tła względem lewego górnego rogu bloku. Jest to szczególnie przydatne, jeśli na przykład blok ma taką samą wielkość jak pojedyncza ikona. Mamy siedem ikon o wymiarach 32x32 każda. Umieszczone są poziomo, więc nie musimy zmieniać położenia tła w pionie. Ustawiamy pozycję obrazka w tle -32px, w bloku dostajemy ikonę, -64px - ikonę Facebooka itd.

Jak tworzyć przyciski linków do profili w mediach społecznościowych?

Po zarejestrowaniu się w odpowiednich społecznościach i w otrzymałem linki do profili, adres mojego kanału RSS oraz link do formularza subskrypcji, aby otrzymywać aktualizacje pocztą. Następnie połączyłem je w poniższy kod i wkleiłem do widżetu tekstowego w panelu administracyjnym WordPressa:

W kotwicy linków ten kod używa tagu : ... To on jest tym samym blokiem, w którym wyświetlana jest pożądana ikona. Przesunięcie obrazu tła jest określone w pliku stylu styl.css poprzez własność pozycja w tle:

/ * Przyciski do subskrypcji aktualizacji * / .spmenu (dopełnienie: 0px; margines: 0px; kolor: # 4682B4; wyrównanie tekstu: do lewej; rozmiar czcionki: 100%;) .spmenu a, .spmenu a: hover (kursor : wskaźnik; kolor: # 1E90FF; dekoracja tekstu: brak; rozmiar czcionki: 100%;) .spmenu span (wyświetlacz: inline-block; szerokość: 32px; wysokość: 32px; tło: url ("obrazy / ikony.png " ) no-repeat;) .spmenu span.sprite_gplus (pozycja w tle: 0px 0px;) .spmenu span.sprite_twitter (pozycja w tle: -32px 0px;) .spmenu span.sprite_fbook (pozycja w tle: -64px 0px; ) .spmenu span.sprite_rss (pozycja w tle: -96px 0px;) .spmenu span.sprite_email (pozycja w tle: -128px 0px;)

Tak więc dla każdego elementu w klasie " spmenu»Ustawiono obraz tła ikony.png czyli zestaw ikon. Zauważ, że jest elementem inline zgodnie ze specyfikacją HTML, więc aby nadać mu ścisłe wymiary (szerokość i wysokość), musimy zmienić sposób jego wyświetlania na poziom blokowy we właściwościach CSS (linia: wyświetlacz: inline-block;). Rozmiar bloku 32x32 odpowiada formatowi naszych ikon.

Często zamiast użyj tagów , , itp., myślę, że to podejście jest błędne. Po co zmieniać style tagów standardowych, skoro istnieje jeden uniwersalny? ... I tag zazwyczaj tworzy dodatkowe żądanie do serwera, a my po prostu, używając ikonek, staramy się zmniejszyć liczbę tych żądań.

Gdzie mogę zdobyć ikony duszka?

1. Narysuj to sam.
2. Przeszukaj wyszukiwarkę wśród zdjęć.
3. W sieci znajdują się specjalne kolekcje ikon, które często są rozdawane za darmo.
4. Wiele sieci i usług społecznościowych wyświetla na swoich witrynach oficjalne logo i ikony, które można wykorzystać w ich aplikacjach.
5. Aby automatycznie utworzyć plik sprite ikon mediów społecznościowych, możesz skorzystać z usługi. Wybierz ikony w żądanej kolejności, zapisz archiwum ze skryptem, rozpakuj i zobacz zdjęcie ikony.png- gotowy plik duszka.

Oprócz wyświetlania ikon, duszki przydają się przy tworzeniu animowanego menu, gdy po najechaniu na jego element albo przyciemnia się, albo zapala. Następnie dwa zestawy przycisków są przechowywane w pliku duszka, a po zdarzeniu „mouse over” dynamicznie zmieniają położenie obrazu tła za pomocą JS.

Menu przycisków-linków do kanałów do otrzymywania aktualizacji, obiecane na początku notatki, jest gotowe, to koniec artykułu. Subskrybuj aktualizacje, zabawa dopiero się zaczyna.