CSS, bir bloga "güncellemelere abone ol" bağlantı düğmelerinin kurulması örneğini kullanarak sprite oluşturur. Tek bir grafikte yer alan hoş arayüz simgeleri. Bu simgelerin bağlanması çok kolaydır

Oluşturmak için çevrimiçi kaynaklar CSS spriteları, örneğin http://spritepad.wearekiss.com/ veya http://www.spritecow.com/ . Ancak kendinize uygun olanı kolaylıkla bulabilirsiniz. Burada hazır kullanacağım CSS spriteları. İşte buradalar:

HTML yapısı

Ortak bir div kapsayıcısı, div kapsayıcılarını içerir sosyal düğmeler geçiş ile.

Spriteları kullanmak için CSS yapısı

body( arka plan: url("fon.png"); renk: #1aa5ca; ) .box ( kenar boşluğu: 250 piksel; dolgu: 25 piksel; arka plan: #; metin girintisi: -9999 piksel; ekran: satır içi blok; ) .click ( arka plan: url("click.png"); genişlik: 200 piksel; yükseklik: 86 piksel; görüntüleme: blok; ) .vk( arka plan: url("vc.png"); genişlik: 51 piksel; yükseklik: 52 piksel; kenar boşluğu: 10 piksel ; arka plan konumu: 0 0 piksel; geçiş: opaklık 0,5 sn; -moz-transition: opaklık 0,5 sn; /* Firefox 4 */ -webkit-transition: opaklık 0,5 sn; /* Safari ve Chrome */ -o-transition: opaklık 0,5s; /* Opera */ opaklık: 0,6; float: left; ) .vk:hover ( arka plan: url("vc.png"); genişlik: 51 piksel; yükseklik: 52 piksel; arka plan konumu: 0 -51 piksel; opaklık: 1; ) .ya( arka plan: url("ya.png"); genişlik: 50 piksel; yükseklik: 50 piksel; kenar boşluğu: 10 piksel; arka plan konumu: 0 0 piksel; geçiş: opaklık 0,5s; -moz-geçiş: opaklık 0,5s; /* Firefox 4 */ -webkit-transition: opaklık 0,5s; /* Safari ve Chrome */ -o-transition: opaklık 0,5s; /* Opera */ opacity: 0,6; float: left; ) .ya :hover ( arka plan: url("ya.png"); genişlik: 50 piksel; yükseklik: 50 piksel; arka plan konumu: 0 -50 piksel; opaklık: 1; ) .ma( arka plan: url ("ma.png"); genişlik: 51 piksel; yükseklik: 52 piksel; kenar boşluğu: 10 piksel; arka plan konumu: 0 0 piksel; geçiş: opaklık 0,5s; -moz-transition: opaklık 0,5s; / * Firefox 4 */ -webkit-transition: opaklık 0,5 sn; /* Safari ve Chrome */ -o-transition: opaklık 0,5 sn; /* Opera */ opaklık: 0,6; float: sol; ) .ma:hover ( arka plan : url("ma.png"); genişlik: 51 piksel; yükseklik: 52 piksel; arka plan konumu: 0 -51 piksel; opaklık: 1; )

Biz belirtiyoruz arka plan konumu: 0 0px;. Opaklığı biraz şeffaflık olan 0,6'ya ayarladığımı unutmayın. Opaklık üzerinde gezinirken: 1;, tüm bunlar (0,5s) içinde gerçekleşir geçiş: opaklık 0,5s; Fareyle üzerine gelindiğinde görüntünün konumu değişti arka plan konumu: 0 -51 piksel;

Bu tekniği kullanarak önemli ölçüde şunları yapabilirsiniz: görüntüleri optimize et(sunucuya daha az çağrı).

Not: Sorularınız varsa yazın!

Sitelerimizi sosyalleştirmeye devam ediyoruz.Okuyucular genellikle blog güncellemelerini doğrudan favori sosyal ağlarından almayı uygun buluyorlar. Onlara bu fırsatı verelim. Bunu yapmak için aynı sosyal ağlara kaydolmanız gerekir. Sitenin yönetimi veya yazarı için bir profil oluşturabilir veya bir şirket veya proje için genel bir sayfa oluşturabilirsiniz. Gelecekte, abonelerinizin onları tanıyabilmesi için haberleri ve site güncellemelerini profil haber akışlarınızda düzenli olarak yayınlamanız gerekecektir. Bu arada, bunu daha önce kurduklarımızı kullanarak yapmak uygundur. CSS sprite tekniğini veya CSS spritelarını kullanarak sosyal profillere bağlantılar tasarlayacağız.

Genel olarak CSS spriteları ve spriteları nelerdir?

Spritelar- tek bir resimde birleştirilmiş bir dizi küçük resim. Bu, sunucudan kullanıcının bilgisayarına 10-20 küçük, hafif görüntüyü indirmek değil, bunları tek bir dosyada birleştirerek tek bir akışta göndermek için yapılır. Web tasarımındaki sprite'lar, canavarları vurmak gibi animasyonlu 2D grafikler oluşturmak için kullanıldıkları oyun endüstrisinden geldi.

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

Bu örnekte görebileceğiniz gibi, yalnızca sosyal ağ simgeleri değil, aynı zamanda oklar, "beğen" düğmeleri vb. gibi diğer tasarım öğeleri de tek bir dosyada 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 belirli bir sayfa türüne gerekli olanları yüklemek daha iyidir.

Bu resimde CSS spritelarının çalışma prensibini şematik olarak göstermeye çalıştım. Blok arka plan görüntüsünden büyükse, css stillerinde tekrarlama yapılmaması belirtilmişse varsayılan olarak sol üst köşeye yerleştirilir. Ancak arka plan görüntüsünün konumunu bloğun sol üst köşesine göre değiştirebiliriz. Bu, örneğin bloğun boyutu ayrı bir simgeye eşitse özellikle kullanışlıdır. Her biri 32x32 boyutunda yedi ikonumuz var. Yatay olarak yerleştirildiklerinden arka planın konumunu dikey olarak değiştirmemize gerek kalmıyor. Arka plan görüntüsünün konumunu -32 piksel olarak ayarlıyoruz, blokta bir simge, -64 piksel - bir Facebook simgesi vb. alıyoruz.

Sosyal ağlardaki profillere bağlantı düğmeleri nasıl yapılır?

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

Bu koddaki bağlantı çapası etiketini kullanır : . Bu, gerekli simgenin görüntülendiği bloktur. Arka plan görüntüsü ofseti stil dosyasında ayarlanır stil.css mülk yoluyla arka plan konumu:

/* Güncellemelere abone olma düğmeleri*/ .spmenu ( dolgu: 0px; kenar boşluğu: 0px; renk: #4682B4; text-align: left; font-size: 100%; ) .spmenu a, .spmenu a:hover ( imleç : işaretçi; renk: #1E90FF; metin dekorasyonu: yok; yazı tipi boyutu: %100; ) .spmenu span ( display: satır içi blok; genişlik: 32 piksel; yükseklik: 32 piksel; arka plan: url("images/icons.png) " ) tekrarlama yok; ) .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 element için sınıfın içinde" menü» arka plan resmini ayarla simgeler.png, bir simgeler kümesidir. Lütfen bunu not al HTML spesifikasyonuna göre satır içi bir öğedir, bu nedenle ona kesin boyutlar (genişlik ve yükseklik) vermek için, görüntülenme şeklini bloke edecek şekilde değiştirmeliyiz. CSS özellikleri(astar: ekran: satır içi blok;). 32x32'lik blok boyutları, simgelerimizin formatına tam olarak karşılık gelir.

Bunun yerine sıklıkla etiketleri kullan , , vb. bu yaklaşımın yanlış olduğunu düşünüyorum. Evrensel bir etiket varsa neden standart etiketlerin stilleri değiştirilsin? . Bir etiket genellikle sunucuya ekstra bir istek oluşturur ve bu isteklerin sayısını azaltmaya çalışmak için sprite kullanıyoruz.

Sprite için simgeleri nereden alabilirim?

  1. Kendin çiz.
  2. Arama motorunda resimler arasında arama yapın.
  3. İnternette genellikle ücretsiz olarak dağıtılan özel simge koleksiyonları vardır.
  4. Birçok sosyal ağ ve hizmet, web sitelerinde, uygulamalarında kullanılabilecek resmi logo ve simgeleri gösterir.
  5. Sosyal ağ simgeleri için otomatik olarak bir sprite dosyası oluşturmak için hizmeti kullanabilirsiniz. Simgeleri istediğiniz sırayla seçin, arşivi komut dosyasıyla birlikte kaydedin, paketinden çıkarın ve resmi görün simgeler.png- sprite dosyası tamamlandı.

Simgeleri görüntülemenin yanı sıra, spritelar animasyonlu bir menü geliştirirken kullanışlıdır; öğenin üzerine geldiğinizde kararır veya yanar. Daha sonra sprite dosyasında iki düğme seti saklanır ve "farenin üzerine gelme" olayına bağlı olarak arka plan görüntüsünün konumu JS kullanılarak dinamik olarak değiştirilir.

Notun başında vaat edilen, güncellemeleri almak için kanallara bağlantıların bulunduğu düğmeler menüsü tamamlandı ve makaleyi burada sonlandırıyorum. Güncellemelere abone olun, eğlence daha yeni başlıyor.

29 Ekim 2019 Gönderi güncellendi

Yuri Nemets

Düğme efektleri sosyal ağlar site için

Sosyal medya butonlarını ve görsellerini birleştirmenin mümkün olduğunu düşünüyor musunuz? Böylece her ikisi de çok güzel ve yaratıcı görünüyor. Evet, bu çok iyi yapılabilir ilginç bir şekilde. Ve bir tane bile değil, birkaç tane. Daha kesin olmak gerekirse, bu makalede, bir görselin üzerine geldiğinizde sosyal medya düğmeleri için harika efektler oluşturmanın 12 yolunu bulacaksınız. Bazı durumlarda yalnızca işaretlemek değil, aynı zamanda etkileşimi de artıran bir fare tıklaması da gereklidir. Bir görselin üzerine geldiğinizde bu tür efektleri kullanarak sitenizi vurgulamanın alışılmadık bir yolu.

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

İndirmek

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

Efekti beğendiyseniz kullanın!

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

(resmin üzerine gelin)

Hem sitede hem de tek sayfalık bir satış sitesinde en önemli görselleri öne çıkarmanın oldukça çekici bir yolu. Ancak daha önce de yazdığım gibi, çok daha fazla etki var (12!).

Adım 1 – HTML

Sosyal medya butonlarında gördüğünüz simgeler FA (Font Awesome) kullanır. Bu simgeler bloklar arasında tek bir satıra bağlanır :

1 <bağlantı 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 gerekiyor. Efektim dosyada indeks.html. Bu dosya aynı zamanda vurgulu efekti oluşturmak için gerekli tüm stilleri de 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ü efekti-geri dönüş" > <div sınıfı = "paylaşım katmanı" > <a href = "#" class = "vk aracılığıyla paylaş düğmesi" > <i sınıfı = "fa fa-vk" > Temas halinde</a> <a href = "#" sınıf = "facebook aracılığıyla paylaş düğmesi"> <i sınıfı = "fa fa-facebook" > Facebook</a> <a href = "#" sınıf = "Twitter aracılığıyla paylaş düğmesi"> <i sınıfı = "fa fa-twitter" > heyecan</a> </div> <div sınıfı = "görüntü katmanı" > <img src = "images/tree.jpg" genişlik = "500" alt = "Kaliforniya sörfü" > !} </div> </div>

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

Adım 2 – CSS

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

Bu stilleri alıp stil dosyanıza koymanız 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 : 500px ; yükseklik : 300px ; konum : göreceli ; kenar boşluğu : 0 otomatik ; -webkit-perspective : 800px ; perspektif : 800px ; ) .image- effect-fall-back .image-layer ( pozisyon : mutlak ; üst : 0 ; sol : 0 ; yükseklik : 300 piksel ; -webkit-transition : 0,6 sn; geçiş : 0,6 sn; z-index : 1 ; ) .image- effect-fall-back :hover .image- Layer( -webkit-transform : RotateX(70deg) ; transform : RotateX(70deg) ; overflow : görünür ; ) .image- effect-fall-back .image-layer img ( height : 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 -shadow: 0 0 100px 50px rgba(0, 0, 0, 0,5) ; opaklık: 0 ; -webkit-transition: tümü 0,5s; geçiş: tümü 0,5s; -webkit-transform: rotaryX(114deg) TranslateZ(-26px) ) TranslateY(110px ) Scale(0,75 ) ; transform : RotateX(114deg) TranslateZ(-26px ) TranslateY(110px ) Scale(0,75 ) ; -webkit-transform-origin: alt; -ms-transform-origin: alt; dönüşüm-kökeni: alt; ) .image- effect-fall-back :hover .image-layer :before ( 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-index: 10; -webkit-transition: 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 - effect-fall-back :hover .share-layer ( opaklık : 1 ; -webkit-transform : RotateX(0deg) TranslateY(-70px ) ; transform : RotateX(0deg) TranslateY(-70px ) ; ) /*tüm butonların stilleri*/.share-button( ekran: satır içi blok; metin dekorasyonu: yok; renk: #ffffff; dolgu: 12 piksel; genişlik: 90 piksel; kenarlık yarıçapı: 2 piksel; kenar boşluğu: 25 piksel 10 piksel; ) /*sosyal medya butonlarının rengi*/.share-via-vk ( arka plan rengi : #4C75A3 ; ) .facebook yoluyla paylaş ( arka plan rengi : #3b5998 ; ) .twitter aracılığıyla paylaş ( arka plan rengi : #00aced ; )

Sizi hemen uyarıyorum: bazı örneklerde jQuery kullanılıyor, çünkü orada tam etki için görsele tıklamanız gerekiyor. Beğendiğiniz örneğin bulunduğu sayfada kullanılan JS kodunun tamamını almanız yeterli.

Dikkat! CSS kodunu stil sayfanıza yapıştırdıktan sonra düğmeler örnekteki gibi görünmeyebilir. Bunun nedeni stil dosyanızın demoda kullanılan öğeler ve sınıflar için farklı stiller içermesi olabilir.

Çözüm

Kural olarak yaratıcılık her zaman memnuniyetle karşılanır. Burada herkesin 12 efektten birini seçip ileride kendi projelerinde kullanabileceğini düşünüyorum.

  • boyutu değiştirmek kaliteyi etkilemez,
  • Retina ekranlı olanlar da dahil olmak üzere tüm cihazlarda mükemmel görüntüleme,
  • arka plan, renk, gölgeler vb. gibi metne uygulanabilen hemen hemen tüm stillerin uygulanması,
  • Uygulama kolaylığı;
Bu avantajlar nedeniyle yazı tipi simgeleri tasarımcılar, geliştiriciler arasında popüler hale geldi ve .
Yazı tiplerini sosyal ağ simgeleriyle dikkatinize sunuyoruz.

1. RONDO SOSYAL SİMGE YAZI TİPİ

En popüler sosyal ağlardan bazıları ve daha fazlası için mükemmel yazı tipi simgeleri, ancak ne yazık ki sevdiğimiz kişinin simgesi eksik.

2. Fontello - simge yazı tipi oluşturucu

Çok sayıda hazır simgeye sahip bir simge oluşturucu. Avantajlarından biri, yalnızca gerekli simgeleri seçme ve bunlardan bir yazı tipi oluşturma yeteneğidir; bu, sayfa optimizasyonu ve böyle bir yazı tipinin yükleme hızı üzerinde faydalı bir etkiye sahip olacaktır. Diğer bir avantaj ise VKontakte ve Odnoklassniki gibi sosyal ağlara yönelik simgelerin varlığıdır.

3. Mono Sosyal Simgeler Yazı Tipi

Yazı tipi simgelerini bir projeye hızlı bir şekilde entegre etmek için ideal bir çözüm; CSS, SCSS ve HTML örneği. 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.

Web siteniz, blogunuz, çevrimiçi mağazanız veya diğer web kaynağınız için en iyi 30 sosyal ağ simgesi setini dikkatinize sunuyoruz.

Her sitenin kendine has bir tarzı, odak noktası ve hedef kitle uygun simgeleri seçmek oldukça zor olabilir.

Bu seçim her ikisi için de en iyi simge setlerini sunar evrensel kullanım ve en benzersiz web sitesi tasarımına bile mükemmel şekilde uyacak olanlar.

Tipik olarak simgeler bir web sitesinin veya blogun altbilgisine yerleştirilir.

En fazla 5-6 simge teşvik edilir.

Eski Şişe Taçları Simge Seti

Şişe kapakları şeklindeki orijinal stilize simgeler, bir kafe, bar veya temalı bir çevrimiçi mağazanın web sitesine mükemmel bir katkı olacaktır.

Öğelerin yüksek kaliteli çizimi ve parlak tasarım, web kaynağı ziyaretçilerini sosyal ağlardaki sayfalarınızı tanımaya kesinlikle çekecektir.

Set, her biri PNG formatında ayrı bir resim olarak tasarlanmış 20 simgeden oluşur.

Vintage Sosyal Medya Pulları

Vintage sosyal medya simgeleri, bir seyahat web sitesinin veya dünyadaki turistik mekanlar hakkındaki blogun temasına mükemmel bir şekilde uyacaktır. Bu simgeler genellikle profesyonel fotoğrafçılar tarafından portföylerine sosyal medya bağlantıları eklemek için kullanılır.

Dosya formatları – PNG, PSD. Her simgenin çözünürlüğü 256x256 pikseldir.

Ahşap Sosyal

Set on sosyal medya ikonundan oluşuyor.

Ayrıca RSS beslemesi ve e-posta aboneliği için bir resim de bulunmaktadır.

Arşivdeki grafik belgelerinin her birinin, çizimi bağımsız olarak düzenleyebileceğiniz veya başka bir formatta kaydedebileceğiniz kendi kaynak dosyası vardır.

Varsayılan format PNG'dir.

SosyalMate

Set evrenseldir ve herhangi bir web sitesinde veya web projesinde kullanıma uygundur.

Dosyaların kişisel olarak düzenlenmesi için her öğeye eşlik eden Orijinal dosya PSD.

Resimlerin çözünürlüğü 128x128px, 64x64px ve 32x32p'dir.

Vektör 3D Sosyal Simgeler

Vector'un 3D simgeleri, web sitenizin altbilgisi için tamamen ücretsiz olarak dağıtılan eksiksiz bir öğe kümesini temsil eder.

Parlak ve akılda kalıcı bir tasarım, sosyal ağlardaki sayfalarınıza yeni aboneler çekecektir.

Dosya formatı PNG'dir (artı orijinal PSD belgesi). Çözünürlük - 256x256 piksel.

Sosyal Çizimler

Social Sketches, sosyal ağlardaki tıklanabilir bağlantılar için ücretsiz bir orijinal çıkartma simgeleri setidir.

Benzersiz görüntü türü kaynak kullanıcılarının dikkatini çekecektir.

İçeriği ayarlayın:

  • 16 simge;
  • 6 farklı çözünürlükler her öğe için (32 piksel, 48 piksel ve 64 piksel, 128 piksel, 256 piksel ve 512 piksel);
  • Standart PNG formatı.

Sosyalleştirmek

Socialize, sosyal ağlar için 12 düzgün yuvarlak simgeden oluşan bir dizidir. Lütfen her sitenin aynı anda birden fazla resim sunduğunu unutmayın.

Bu şekilde web sitenizin veya blogunuzun tarzına en uygun öğeyi seçebilirsiniz.

Vektör tipi görseller SVG formatında kaydedilir.

Somakro

Somacro, aşağıdakiler de dahil olmak üzere tüm popüler sosyal medya için 45 yüksek kaliteli simgedir: Facebook , heyecan, Steam ve ödeme PayPal sistemleri, İnternet parası.

Çok sayıda simge, büyük bir çevrimiçi mağazanın veya kişisel web sitesinin altbilgilerini aynı tarzda tasarlamanıza olanak tanır.

Dosya çözünürlüğü 500×500 pikseldir. Her resim çerçevesiz veya çerçevesiz olarak mevcuttur ve toplamda 90 farklı dosya elde edilir.

Ampul Sosyal Medya Simgeleri

Ampul Simgeleri, bilim temalı kaynaklar için popüler bir simge kümesidir.

Her resmin ilginç tasarımı bilimle ilgili bir bloğa mükemmel bir şekilde uyacaktır, ilginç gerçekler, teknoloji.

Şekil 9

Şeffaf Sosyal Medya Simgeleri

Simge, tasarımı ve teması ne olursa olsun her web sitesiyle uyumludur.

Minimalizmi sevenler için uygun bir set.

Tek sorun, resimlerin çok açık renkli bir arka planla karışabilmesidir.

Mevcut boyutlar: 48, 56, 72, 96, 128, 256 ve 512 piksel. Arşivdeki görsel sayısı 40'tır.

Daire Düz Simgeler Retinaya Hazır

Her resim parlak bir renk şemasına sahiptir ve her bir sosyal ağın tarzını yansıtır.

Set, web siteleri, popüler programlar, oyun alanları ve diğer araçlar için 65 benzersiz görsel içerir.

Sosyal Medya Simge Çıkartmaları

Vectezy'nin web siteleri için parlak simgeler, kullanıcıları siteye çekmek için mükemmel bir araç olacaktır. sosyal sayfalarşirketin.

Resimler web sayfalarının genel tasarımından bağımsız olarak kullanılabilir.

Hem koyu hem de açık arka planlarda eşit derecede iyi görünecekler.

Gölgeli Sosyal Medya Simgeleri

Gölgeli Sosyal Medya Simgeleri paketi, gölge efektli 40 görsel içerir.

Parlak tasarım, hafif tasarıma sahip sitelerde kullanım için mükemmeldir.

Arşiv iki versiyonda indirilebilir.

Birincisi ücretsiz lisansa sahip, ikincisi ise kaynak kodunu içeriyor ve 3 dolara satılıyor.

Mevcut çözünürlükler 48, 56, 72, 96, 128 ve 256 pikseldir. Biçim - PNG.

Basit Çizgi Simgeleri

Tüm resimler yalnızca beyaz renkte mevcuttur, bu nedenle set, koyu arka plana sahip altbilgilerde kullanılmalıdır.

Yalnızca popüler sitelerin simgeleri değil, aynı zamanda ödeme sistemleri, Wi-Fi ve daha birçokları için görseller de mevcut.

İkon gösterisi

Iconmount, geliştiricinin web siteleri için benzersiz simgelerini düzenli olarak yayınladığı tam bir kaynaktır.

500'den fazla resim arasında herhangi bir web sitesi veya araç için siyah beyaz simgeler bulacaksınız.

Tüm dosyalar ücretsiz olarak indirilebilir.

Ayrıca kaynak sayfasında tercih ettiğiniz çözünürlüğü ve dosya formatını seçebilirsiniz.

Sosyal Medya Uzun Gölge Simge Seti

Sosyal Medya Uzun Gölge Simge Seti, farklı sosyal ağlar için 35 dosya içerir. Her simge kare şeklindedir, belirlenen kaynağın renklerinde yapılmıştır ve her türden site için mükemmeldir.

Arşiv yalnızca PNG formatındaki dosyaları içerir.

Materyal Tasarımı Sosyal Simgeler

SVF formatındaki 8 vektör simgesi, yalnızca web sitenize çekici tıklanabilir bağlantılar eklemenize değil, aynı zamanda dosyada kendi ayarlamalarınızı yapmanıza da olanak tanır. Çözünürlüğü değiştirebilir, gölge ekleyebilir, rengi değiştirebilir, şeffaflığı ayarlayabilir ve çok daha fazlasını yapabilirsiniz.

Görseller Instagram, YouTube Facebook, Pinterest, Linkedin, Skype, Google+ için mevcuttur.

Picons Sosyal

Picons Social, 60'tan fazla farklı görsel içeren profesyonel bir sosyal medya simge paketidir.

Tüm resimler siyah beyaz formatta yapılmış olup hoş ve "hafif" bir tasarıma sahiptir.

Hafif tasarımlı şantiyelerde evrensel kullanım için mükemmeldir.

Arşivde her simge için çeşitli formatlar mevcuttur:

  • .PSD;
  • .EPS;
  • .PDF;
  • .PNG;
  • .EMF.

Daire ve Yuvarlak Sosyal Medya Simgeleri

16 sosyal medya simgesi web sitenize harika bir katkı sağlayacaktır.

Parlak tasarım, diğer kaynaklardaki sayfalara bağlantı alanını güzel bir şekilde vurgulamanıza olanak tanır.

Her görüntünün boyutu 58 ve 40 pikseldir.

Ayrıca Photoshop'ta düzenleme yapmak için kaynaklar da vardır.

Düz Minimalist Sosyal Medya Simgeleri

Arşiv, sosyal ağlar için 85 adet minimalist, hacimsiz simge içerir.

Her fotoğrafta 4 adet var farklı stiller web sayfasının tasarımına en uygun tasarımı seçmenizi sağlar.

Simgeler iki formatta gelir: PNG ve SVG.

Renkli ve siyah beyaz versiyonları mevcuttur.

Hex Sosyal Medya Simgeleri

Bu simge seti altıgen şeklinde yapılmıştır.

Geliştirici renk şemasını her sosyal ağa aktardı.

Geliştiricinin web sitesinde, formatını ve çözünürlüğünü seçtikten sonra her simgeyi ayrı ayrı indirebilirsiniz.

Toplam 32 benzersiz tasarım mevcuttur.

Düz Sosyal Medya Simge Vektör Paketi

Video barındırma, RSS, ödeme sistemleri ve blog yazarının web sitesinin bölümleri için simgeler vardır.

Ayrıca sette HTML5 ve CSS simgeleri de bulunur.

Dosya formatı - Png. Çözünürlük – 58 piksel.

Gelişmiş Düz Sosyal Medya Simgeleri

Her simgenin bir gölge efekti vardır ve parlak renklerde yapılmıştır.

Mevcut boyutlar 72, 96, 128, 256 ve 512 pikseldir.

Her bir öğe sitenin açık ve koyu tonlarına uygun tasarımda mevcuttur.

iOS Stili Sosyal Medya Simgeleri

Arşivi geliştiricinin web sitesinden indirin ve içeriğin kişisel olarak düzenlenmesi için kaynak kodunu alın.

Kullanılabilir formatlar .EPS ve .AI'dir.

Grunge Düz Sosyal Simgeler

Grunge tarzındaki harika simgeler en iyi seçim bir dans stüdyosu, spor salonu, müzik portalı, plak şirketinin web sitesi ve ayrıca tarzı kentsel yönde yapılan diğer organizasyonlar ve kaynaklar için.

Her dosya PSD formatında mevcuttur.

Geometrik Sosyal Medya Simgeleri

Geometrik tarzda yapılmış sosyal medya için ücretsiz simgeler, bir kozmetik mağazasına, parfümeri mağazasına veya bloga iyi bir katkı olacaktır.

Simgelerin standart renk şeması açık yarı tonlarda yapılmıştır.

Ayrıca daha parlak veya daha koyu stil seçeneklerini de seçebilirsiniz.

Hepsi tek arşivde mevcuttur.

Rogie Sosyal Medya Simgeleri

Ünlü bir web illüstratörünün hazırladığı bir dizi simge, web kaynağının bireyselliğini vurgulayacak ve sosyal medyanıza daha fazla abone çekecektir.

Tüm resimler renkli ve siyah beyaz olarak ayrı ayrı yapılır.

Oyun alanı görüntüleri mevcut, Bulut depolama ve sosyal ağlar.

Adobe Muse Simgeleri

Adobe'nin vektör simgeleri, minimalist bir altbilgi tasarlamak için en iyi seçeneklerden biridir.

Set, popüler sitelerin, mobil sitelerin 60 görselini içerir işletim sistemleri, bulut depolama, ödeme sistemleri ve diğer popüler web kaynakları.

120 Elle Çizilmiş Sosyal Medya Simgeleri

Bu seti indirerek 120 benzersiz elle çizilmiş sosyal medya ikonuna sahip olacaksınız.

Her görsel başarılı bir tasarıma ve net çizgi çizimine sahiptir.

DIY temalı bir web sitesinin veya yaratıcılığa adanmış herhangi bir kaynağın tasarımına çok iyi uyum sağlayacaktır.

Kullanılabilir formatlar PNG ve SVG'dir.