Sosyal simgeler kodu. CSS, “güncellemelere abonelik” bloguna düğmeler-bağlantılar yükleme örneğinde sprite

• yeniden boyutlandırma kaliteyi etkilemez,
• Retina ekranlı olanlar da dahil olmak üzere tüm cihazlarda mükemmel görüntüleniyor,
• arka plan, renk, gölgeler vb. gibi metne uygulanabilen hemen hemen her stilin uygulanması,
• Uygulama kolaylığı;

Bu avantajlar sayesinde yazı tipi simgeleri tasarımcılar, geliştiriciler arasında popüler hale geldi ve bu tür CSS / çerçeveler tarafından kullanılıyor.
Sosyal ağların simgeleriyle dikkatinizi çeken yazı tipleri için.

1. RONDO SOSYAL İKON YAZI TİPİ

En popüler sosyal ağlardan bazılarının mükemmel yazı tipi simgeleri ve sadece değil, ne yazık ki hepimizin favorisi olan bizim bir simgemiz yok.

2. Fontello - simge yazı tipi oluşturucu

Çok sayıda hazır simge içeren simge oluşturucu. Avantajlardan biri, yalnızca gerekli simgeleri seçme ve bunlardan bir yazı tipi oluşturma yeteneğidir; bu, sayfa optimizasyonunu ve böyle bir yazı tipinin yükleme hızını olumlu yönde etkiler. Avantajlar arasında, Vkontakte ve Odnoklassniki gibi sosyal ağların simgelerinin varlığı da vurgulanabilir.

3. Mono Sosyal Simgeler Yazı Tipi

Yazı tipi simgelerini bir projeye hızlı bir şekilde entegre etmek için ideal bir çözüm, zaten CSS, SCSS ve örnek HTML için bir gömme kodu var. Tek dezavantajı, popüler Rus sosyal ağlarının olmamasıdır.

4. Pixeden - Sosyal Simge Paketi

Güçlü bir demo sayfasına sahip güzel simgeler, yazı tipi simgelerini kullanmanın ve bunları CSS ile şekillendirmenin güzelliğini görebilirsiniz.

29 Ekim 2019 giriş güncellendi

Yuri Nemets

Web sitesi için sosyal medya buton efektleri

Sizce sosyal medya butonları ve görselleri birleştirmek mümkün mü? Böylece ikisi de çok güzel ve yaratıcı görünüyor. Evet, bunu çok ilginç bir şekilde yapabilirsiniz. Ve bir bile değil, birkaç tane. Daha kesin olmak gerekirse, bu makalede, bir görüntünün üzerine geldiğinizde sosyal medya düğmeleri için harika efektler yapmanın 12 yolunu bulacaksınız. Bazı durumlarda, yalnızca fareyle üzerine gelmeniz değil, aynı zamanda etkileşim ekleyen bir fare tıklamanız da gerekir. Fareyle bir resmin üzerine geldiğinizde bu tür efektleri kullanarak sitenizi öne çıkarmanın alışılmadık bir yolu.

12 örneğin tümünü görün ve aşağıdaki bağlantıdan indirin:

İndirmek

Bu arada, vurgulu efektlerle ilgili olarak, sitede bu konuyla ilgili birkaç makale daha var:

Efekt gibi - kullanın!

Mesela ben ilk efekti beğendim. Efekti görmek için aşağıdaki resmin üzerine gelin.

(resmin üzerine gelin)

Hem sitedeki hem de tek sayfalık bir satış sitesindeki en önemli resimleri vurgulamanın oldukça çekici bir yolu. Ancak, daha önce yazdığım gibi, çok daha fazla etki var (12!).

1. Adım - HTML

Sosyal medya butonlarında gördüğünüz simgeler için FA (Font Awesome) kullanılmaktadır. Bu simgeler, bloklar arasında bir satırda bağlanır :

1	<link rel = "stil sayfası" href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Tüm kaynakları indirdikten sonra, beğendiğiniz efekti seçmeniz gerekir. Benim efektim dosyada index.html... Bu dosya ayrıca vurgulu efekti oluşturmak için gerekli tüm stilleri içerir.

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

<div sınıfı = "görüntü-etki-geri dönüş"> <div sınıfı = "paylaşım katmanı"> <a href = "#" class = "share-button share-via-vk"> <i sınıfı = "fa fa-vk"> Temas halinde</ bir> <a href = "#" sınıfı = "paylaş düğmesi facebook üzerinden paylaş"> <i sınıfı = "fa fa-facebook"> Facebook</ bir> <a href = "#" sınıfı = "paylaş düğmesi twitter üzerinden paylaş"> <i sınıfı = "fa-twitter"> heyecan</ bir> </ böl> <div sınıfı = "görüntü katmanı"> <img src = "images / tree.jpg" genişlik = "500" alt = "(! LANG: California sörfü" > !} </ böl> </ böl>

Gerekli tüm yapı orada. Geriye kalan tek şey stilleri CSS'de ayarlamak. Bu nedenle 2. ve aynı zamanda son adıma geçiyoruz.

2. Adım - CSS

Stiller, bloklar arasındaki her HTML dosyasında bulunur ... Yani, farklı efektlere sahip her dosyada, belgenin üst kısmındaki bu blokta karşılık gelen stiller vardır.

Bu stilleri alıp stil sayfanıza yerleştirmeniz gerekir:

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 (genişlik: 500 piksel; yükseklik: 300 piksel; konum: göreli; kenar boşluğu: 0 otomatik; -webkit-perspektif: 800 piksel; perspektif: 800 piksel;) .image-effect-fall-back .image-layer (konum: mutlak; üst: 0; sol: 0; yükseklik: 300 piksel; -webkit-geçişi: 0,6 sn; geçiş: 0,6 sn; z-endeksi: 1;) .image-efect-fall-back: hover .image- katman (-webkit-transform: döndürmeX (70 derece); dönüştürme: döndürmeX (70 derece); taşma: görünür;) .image-effect-fall-back .image-layer img (yükseklik: %100;) .image-effect-fall -back .image-layer: önce (içerik: ""; konum: mutlak; üst: 0; sol: 0; genişlik: %100; yükseklik: %100; arka plan: rgba (0, 0, 0, 0,5); kutu -gölge: 0 0 100px 50px rgba (0, 0, 0, 0,5); opaklık: 0; -webkit-geçiş: 0,5 sn'nin tümü; geçiş: 0,5 sn'nin tümü; -webkit-dönüşüm: döndürmeX (114 derece) çeviriZ (-26 piksel) ) translateY (110 piksel) ölçek (0.75) ); transform: döndürmeX (114deg) translateZ (-26px) translateY (110px) ölçek (0.75); -webkit-transform-origin: alt; -ms-transform-origin: alt; transform-orijinal: alt; ) .image-effect-fall-back: vurgulu .image-layer: önce (opaklık: 0.3;) .image-effect-fall-back .share-layer (konum: mutlak; alt: 100 piksel; sol: 0; genişlik: %100; yükseklik: 100 piksel; opaklık: 0; z-endeksi: 10; -webkit-geçişi: 0,6 sn; geçiş: 0,6 sn; -webkit-transform: döndürmeX (70 derece); dönüştürme: döndürmeX (70 derece);) .image -effekt-fall-back: vurgulu .share-layer (opaklık: 1; -webkit-transform: döndürmeX (0deg) translateY (-70px); transform: döndürmeX (0deg) translateY (-70px);) / * tüm düğmeler için stiller * /.share düğmesi (ekran: satır içi blok; metin dekorasyonu: yok; renk: #ffffff; dolgu: 12 piksel; genişlik: 90 piksel; sınır yarıçapı: 2 piksel; kenar boşluğu: 25 piksel 10 piksel;) / * sosyal medya düğmelerinin rengi * /.share-via-vk (arka plan rengi: # 4C75A3;) .share-via-facebook (arka plan rengi: # 3b5998;) .share-via-twitter (arka plan rengi: # 00aced;)

Sizi hemen uyarıyorum: bazı örnekler jQuery kullanıyor, çünkü orada tam etki için resme tıklamanız gerekiyor. Beğendiğiniz örnekle sayfada kullanılan tüm JS kodlarını almanız yeterli.

Dikkat! CSS kodunu stil sayfanıza ekledikten sonra düğmeler tam olarak örnekte gösterildiği gibi görüntülenmeyebilir. Bunun nedeni, stil sayfanızın demoda kullanılan öğeler ve sınıflar için farklı stillere sahip olması olabilir.

Çıktı

Kural olarak, yaratıcılık her zaman memnuniyetle karşılanmıştır. Bence burada herkes 12 efektten birini seçip ileride kendi projelerinde kullanabilecek.

İyi bir şey kazdım. Tek bir hareketli grafik içine alınmış arayüz simgeleri. Biri sprite'ın ne olduğunu bilmiyorsa, bu, sitede css kullanılarak ayrı ayrı görüntülenen birkaç resmin bulunduğu bir resimdir. Açıkça anlattım mı bilmiyorum ama örnek olarak bu derlemeyi kullanan bir hareketli grafiğin ne olduğunu öğrenebilirsiniz.

Sprite'ların Faydaları

Uzun zamandır ikon paylaşmıyordum, muhtemelen ihtiyacım olan tüm ikonlar sitemde zaten vardı :)) ama ikonlara tek bir sprite içinde ihtiyacım vardı ve bunları buldum ve sizlerle paylaştım. Bu arada, hareketli grafiğin ayırt edici özelliği ve en önemli artısı, hareketli resim bir kez yüklenirse, bu hareketli grafiğin tüm öğeleri artık yüklenmeyecek ve buna bağlı olarak html sayfasının hızını azaltacaktır. Tipik olarak, hareketli grafikler, üzerine gelindiğinde değişen düğmeler için kullanılır. Bazen, normal durumdaki düğme ve üzerine gelindiğinde düğmenin iki farklı resim olduğu olur ve bazı sitelerde, fareyle düğmenin üzerine geldiğinizde görüntünün hemen görünmediğini fark etmiş olabilirsiniz - yüklenir. Bir sprite ile bu bir sorun olmayacak. Sprite'ların bir başka artısı da yerden tasarruf sağlamasıdır. Diyelim ki kaydırıcı gibi bir tür eklentiniz var ve ona birkaç düzine resim gidiyor (çerçevelerin köşeleri, çerçevelerin kendileri, oklar, madde işaretleri, sosyal medya simgeleri vb.). Bu nedenle, hepsi tek bir resimde toplandığında, resimlerin ayrı ayrı olduğu bir klasörde yatarken çok daha rahat ve düzgün görünüyorlar.

Bu simgelerde ne tasvir ediliyor?

Her zamanki gibi sitenin üst kısmındaki ana menüde bulunan arama için gerekli ikonları bulabilmeniz için bu ikonlar arasında hangi görsellerin olduğunu size anlatacağım: kale, robot, elmas ya da değerli taş, monitör, hediye , mikrofon, roket, dondurma, adam, saat, makas, herhangi bir sosyal ağ ve hizmetin simgeleri, İngiliz anahtarı, yay, cüzdan, ipad, karpuz, cüzdan, oyun kumandası, hesap makinesi, palyaço, ampul, yay, çöp kutusu veya sepet , mektup, küre, burger, otomobil, bulut, kamera ve çok daha fazlası. Toplamda yaklaşık 100 resim var.

Bu simgeleri bağlamak çok basittir:

1. css dosyası sprite.css'yi şu şekilde bağlarız: sitenizin kök dizininde bir css klasörü oluşturun, bu css dosyasını oraya ekleyin ve etiketlerin arasında simgelerin görüneceği sayfada aşağıdaki kodu girin:

3. Simgeyi koymak istediğiniz yere şu kodu yapıştırın:

4. Demomu kullanabilirsiniz, sunulan tüm simgeler var ve google chrome element görüntüleyiciyi kullanarak simgenin adını tanımlayın ve "simge adı" yerine ekleyin. Diyelim ki saat simgesi aşağıdaki koda sahip:

Pekala, sanırım bu simgeleri bir hareketli grafikten nasıl ekleyeceğinizi bulmak zor değil, özellikle zaten her şeyi açıkladığım için :)) İyi eğlenceler!

Merhaba blog sitesinin sevgili okuyucuları. Elbette bu görev için bir eklenti kullanabilirsiniz, ancak kendin yapmak o kadar zor değil, ve daha az olacak, özellikle de onlar için zaten çokça çalıştığım için (verilen bağlantıdaki makaleye bakın). Daha önce detaylı olarak yazdığım sosyal medya ikonlarını aldım (umarım Dimoks buna itiraz etmez).

Ayrıca E-posta için uygun olduğunu düşündüm.

Düğmelerden bir hareketli grafik oluşturun ve Html kodunu siteye ekleyin

Sosyal ağlarda gerekli tüm grupları ve sayfaları oluşturduktan sonra, yani gerekli tüm bağlantıları aldınız, siteye butonlar ekleyerek kafanız karışabilir. Tabii ki, hakkındaki yazıma göre, her sosyal ağ için uygun bir simge seçebilir ve gerekirse boyutunu ve içinde gerekli olana küçültebilirsiniz.

Ama bu en iyi seçenek değil. Niye ya? Eh, çünkü sosyal ağın her bir görüntüsünü yüklemek için sunucunuza ayrı bir istek yapılacaktır. Bir düzine simgeniz varsa, bu, herhangi bir şekilde sunucuda ek bir yük oluşturacak on istek anlamına gelir. Bu tür atıklar, özellikle uzun zamandan beri bize uymuyor.

Tekerleği yeniden icat etmemeye (bir hareketli grafik yaratmaya) karar verdim, ancak Share42 yapıcısı tarafından oluşturulanı kullandım (onunla nasıl çalışılacağına ilişkin bir bağlantı hemen yukarıda verilmiştir). İçinde, simgelerine ihtiyaç duyacağınız sosyal ağları seçebilir ve kodla birlikte bir CSS hareketli grafiği alırsınız, yani. fiziksel olarak ihtiyacınız olan tüm sosyal medya simgelerini ve RSS beslemesi aboneliklerini (ve gerekirse E-posta) içeren tek bir grafik dosyası.

Dört ana ağ ve haberlere abone olmak için 24'e 24 simge boyutuna sahip birkaç simge seçtim, bu yüzden hareketli grafiğim şöyle görünüyor (yine de oradaydım ama önemli değil):

Artık tüm içeriklere sahibiz - gruplara veya sosyal medya sayfalarına bağlantılar ve sitede görüntülenecek simgeler. Sadece tüm bunları doğru bir şekilde hazırlamak için kalır, yani. Yerleşim. Blogum WordPress tarafından destekleniyor, bu yüzden düğmeli kodu aşağıdakilerden birine yapıştıracağım. Benim durumumda buna sidebar.php denir. HTML Kodu son derece basit olduğu ortaya çıkıyor:

Ve en ilginç şey. Yardımla, hareketli grafiğimizin hangi alanının bu belirli yerde arka plan olarak görüntüleneceğini belirleriz (bizim durumumuzda, bu arka plan köprünün altına yerleştirilir). Bunun nasıl olduğunu açıklamak çok uzun zaman alıyor, bu nedenle bağlantıdaki makaleyi okuyun ve her şey netleşecektir (verilen açıklayıcı örnekler vardır). Tembelseniz, fark etmiş olabileceğiniz gibi, 24'ün katları olan boşuna olmayan sayıları deneyin.

Evet, hareketli grafiği FTP kullanarak sitenize yükleyin ve arka planda bunun yolunu belirtin (). Bu kadar. Yukarıdaki bağlantılardaki materyalleri dikkatlice okumak işe yaramazsa, eğer hiçbir şey işe yaramazsa, durumunuzu yorumlarda açıklayın (ayrıntılı olarak - kodu eklemek için, kare ile PHP etiketleri içine almayı unutmayın) parantez).

Sana iyi şanslar! Yakında blog sitesinin sayfalarında görüşürüz

ilgini çekebilir

Sitelerimizi sosyalleştirmeye devam ettikçe, okuyucuların blog güncellemelerini doğrudan favori sosyal ağlarında almaları genellikle uygun olur. Onlara bu fırsatı verelim. Bunu yapmak için, bu çok sosyal ağlara kaydolmanız gerekir. Sitenin yöneticisinin veya yazarının bir profilini oluşturabilir veya bir şirket veya proje için genel bir sayfa oluşturabilirsiniz. Gelecekte, abonelerinizin onları tanıması için profil haber akışlarında düzenli olarak haber ve site güncellemeleri yayınlamanız gerekecektir. Bu arada, daha önce kurduklarımızı kullanarak yapmak uygundur. CSS sprite veya CSS sprite kullanarak sosyal profillere bağlantılar tasarlayacağız.

Genel olarak CSS hareketli grafikleri ve hareketli grafikleri nelerdir?

Spritelar- bir araya getirilmiş bir dizi küçük resim. Bu, sunucudan kullanıcının bilgisayarına 10-20 küçük hafif görüntü indirmek için değil, onları tek bir dosyada birleştirerek tek bir akışta göndermek için yapılır. Sprite'lar web tasarımına oyun endüstrisinden geldiler ve burada animasyonlu 2D grafikler oluşturmak için kullanıldılar, örneğin canavarları vurmak vb.

Site tasarımında, çeşitli simgelerin tek bir dosyada birleştirildiği bir teknik de kullanılır, örneğin şöyle:

Bu örnekte de görebileceğiniz gibi, yalnızca sosyal medya simgeleri tek bir dosyada toplanmadı, aynı zamanda oklar, "beğen" düğmeleri gibi diğer tasarım öğeleri de toplandı. Ancak sitede kullanılan tüm grafikleri kesinlikle tek bir hareketli grafikte birleştirmek tamamen doğru değil. Öğeleri gruplara ayırmak ve yalnızca gerekli olanları belirli türdeki sayfalara yüklemek daha iyidir.

Bu resimde css spritelarının nasıl çalıştığını şematik olarak göstermeye çalıştım. Blok arka plan görüntüsünden daha büyükse, css stillerinde tekrar yok ayarlanmışsa varsayılan olarak sol üst köşeye yerleştirilir. Ancak bloğun sol üst köşesine göre arka plan görüntüsünün konumunu değiştirebiliriz. Bu, örneğin bloğun boyutu tek bir simgeye eşitse özellikle yararlıdır. Her biri 32x32 olan yedi simgemiz var. Yatay olarak bulunurlar, bu nedenle arka planın konumunu dikey olarak değiştirmemize gerek yoktur. Arka plan görüntüsünün konumunu -32 piksel olarak ayarladık, blokta bir simge, -64 piksel - bir Facebook simgesi vb.

Sosyal medya profilleri için bağlantı butonları nasıl oluşturulur?

İlgili topluluklara kaydolduktan sonra, profillere bağlantılar, RSS beslememin adresi ve posta yoluyla güncellemeleri almak için bir abonelik formuna bağlantı aldım. Sonra bunları aşağıdaki kodda birleştirdim ve WordPress yönetici panelindeki bir metin widget'ına yapıştırdım:

Bağlantıların çapasında, bu kod etiketi kullanır : ... İstenen simgenin görüntülendiği blok odur. Arka plan görüntüsünün kayması stil dosyasında belirtilir. stil.css mülkiyet yoluyla arka plan konumu:

/ * Güncellemelere abone olmak için düğmeler * / .spmenu (dolgu: 0px; kenar boşluğu: 0px; renk: # 4682B4; metin hizalama: sola; yazı tipi boyutu: %100;) .spmenu a, .spmenu a: vurgulu (imleç : işaretçi; renk: # 1E90FF; metin dekorasyonu: yok; yazı tipi boyutu: %100;) .spmenu yayılma alanı (ekran: satır içi blok; genişlik: 32 piksel; yükseklik: 32 piksel; arka plan: url ("görüntüler / simgeler.png") " ) tekrarsız;) .spmenu span.sprite_gplus (arka plan konumu: 0px 0px;) .spmenu span.sprite_twitter (arka plan konumu: -32px 0px;) .spmenu span.sprite_fbook (arka plan konumu: -64px 0px; ) .spmenu span.sprite_rss (arka plan konumu: -96px 0px;) .spmenu span.sprite_email (arka plan konumu: -128px 0px;)

Böylece her bir eleman için sınıf içinde" spmenu»Bir arka plan resmi ayarlandı simgeler.png hangi simgeler kümesidir. Bunu not et HTML spesifikasyonuna göre satır içi bir öğedir, bu nedenle ona katı boyutlar (genişlik ve yükseklik) vermek için, CSS özelliklerinde görüntülenme şeklini blok düzeyinde değiştirmeliyiz (satır: ekran: satır içi blok;). 32x32 bloğun boyutu, simgelerimizin biçimiyle eşleşir.

Çoğu zaman yerine etiketleri kullan , , vb., bu yaklaşımın yanlış olduğunu düşünüyorum. Evrensel bir etiket varken neden standart etiketlerin stillerini değiştirelim? ... ve etiket genellikle sunucuya fazladan bir istek oluşturur ve biz sadece, sprite kullanarak bu isteklerin sayısını azaltmaya çalışıyoruz.

Sprite için ikonları nereden bulabilirim?

1. Kendin çiz.
2. Resimler arasında arama motorunu arayın.
3. Web'de genellikle ücretsiz olarak verilen özel simge koleksiyonları vardır.
4. Birçok sosyal ağ ve hizmet, web sitelerinde uygulamalarında kullanılabilecek resmi logolar ve simgeler görüntüler.
5. Sosyal medya simgelerinin bir hareketli dosyasını otomatik olarak oluşturmak için hizmeti kullanabilirsiniz. Simgeleri istediğiniz sırayla seçin, arşivi komut dosyasıyla kaydedin, paketi açın ve resme bakın simgeler.png- hazır sprite dosyası.

Simgeleri görüntülemeye ek olarak, hareketli bir menü geliştirirken, öğenin üzerine geldiğinizde, karardığında veya aydınlandığında, hareketli grafikler kullanışlıdır. Ardından, hareketli grafik dosyasında iki set düğme saklanır ve "fare üzerinde" olayında JS kullanarak arka plan görüntüsünün konumunu dinamik olarak değiştirirler.

Notun başında vaat edilen güncellemeleri almak için kanallara düğmeler menüsü yapılır, bu makalenin sonudur. Güncellemelere abone olun, eğlence daha yeni başlıyor.