Milyonlarca arayüz simgesi tek bir hareketli grafikte toplandı. Özel CSS sprite'larına sahip sosyal medya düğmeleri (görüntü optimizasyonu) Html için renkli sosyal medya simgeleri

Golovna / usunennya arızaları

Katlama için Çevrimiçi Kaynaklar CSS hareketli grafikleriörneğin http://spritepad.wearekiss.com/ veya http://www.spritecow.com/ . Vtim, sana neyin uygun olduğunu kolayca bileceksin. İşte kazanmaya hazırım CSS hareketli grafiği. Koku Ekseni:

html yapısı

kapsayıcı div uzay kapsayıcı div sosyal düğmeler geçiş.

Bilgi uçuran spritelar için CSS yapısı

gövde( arka plan: url("fon.png"); renk: #1aa5ca; ) .box ( kenar boşluğu: 250 piksel; dolgu: 25 piksel; arka plan: #; metin girintisi: -9999 piksel; görüntü: satır içi blok; ) .click ( arka plan: url("click.png"); genişlik: 200 piksel; yükseklik: 86 piksel; görüntü: 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 0px, geçiş: opaklık 0,5 sn; -moz-geçişi: opaklık 0,5 sn; opaklık 0,5 sn; /* Opera */ opaklık: 0,6; kayan nokta: sol;) .vk:hover ( arka plan: url(" vc.png"); genişlik: 51 piksel; yükseklik: 52 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 0px; geçiş: opacity 0.5s; 0.5s;/* Firefox 4 */ -webkit-transition: opacity 0.5s; /* Safari ve Chrome */ -o-transition: opacity 0.5s; :hover ( background: 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 y 0,5s; -moz-geçişi: opaklık 0,5s; /* Firefox 4 */ -webkit-geçiş: opaklık 0,5s; /* Safari ve Chrome */ -o-geçiş: opaklık 0,5s; /* Opera */ opaklık: 0.6; yüzer: sol; : url("ma.png"); genişlik: 51 piksel; yükseklik: 52 piksel; arka plan konumu: 0-51 piksel; opaklık: 1 )

Bu mümkün arka plan konumu: 00 piksel; Saygını unut, opaklığı 0.6'ya ayarladım, biraz şeffaflık. Üzerine gelinen opaklık: 1; her şey alınır (0,5s) geçiş: opaklık 0,5 sn; Gezinirken, görüntünün konumu değişti arka plan konumu: 0-51 piksel;

Vikoristovuyuchi tsyu tekhnіku önemli ölçüde görüntüyü optimize et(sunucuya daha az zvernen).

not Yazacak yemek gibi!

29, 2019 Gönderi güncellendi

Yuri Nimets

Site için sosyal medya butonlarının etkinliği

O görseli sosyal medya butonlarına nasıl ulaştırabileceğinizi düşünüyorsunuz? İkisi için de daha güzel ve yaratıcı görünüyordu. Yani, bunu farklı bir şekilde yapabilirsiniz. Birini değil, dekilkom'u geziyorum. Daha kesin olmak gerekirse, bir görüntünün üzerine geldiğinizde sosyal medya düğmeleri için harika efektler oluşturmanın 12 yolunu bulacaksınız. Bazı etkileşimler için sadece işaret etmek değil, aynı zamanda etkileşime de katkıda bulunan fareye tıklamak gerekir. Sitenizi görmenin benzersiz bir yolu, resmin üzerine geldiğinizde vekaleten ve aynı etki.

Aşağıdaki çabalar için hayret etmek ve zavantazhivayte için 12 örnek kullanın:

yararlanmak

Konuşmadan önce, işaret edildiğinde ne kadar etkili olduğu, sitede bu konuyla ilgili daha fazla makale var:

Etkiyi bahşeden - göz kırp!

Mesela ruhuma düşmüş olmak, ilk etki. Efekti görmek için aşağıdaki resmin üzerine gelin.

(resmin üzerine gelin)

En önemli görselleri hem sitede hem de tek taraflı sitede görmenin en iyi yolunu bulun. Ale, daha önce de yazdığım gibi, etkileri çok daha büyük (12!).

Krok 1 - HTML

Simgeler için, düğmelerde görebileceğiniz gibi sosyal önlemler FA (Font Awesome) kazanır. Bloklar arasında bir satırda bağlı simgeler :

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

Ayrıca, tüm vihіdnikilerden etkilendiğiniz için hak ettiğiniz efekti seçmeniz gerekiyor. Efektim dosyada bulundu index.html. Bu dosya, vurgulu efekti oluşturmak için gerekli tüm stillere sahiptir.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <div class="image-etki-yedek"> <div class="katmanı paylaş"> <a href = "#" class = "share-button share-via-vk" > <i sınıfı = "fa fa vk" > Temas halinde</a> <href = "#" sınıfı = "paylaş düğmesi facebook üzerinden paylaş"> <ben sınıfı = "fa facebook" > Facebook</a> <href = "#" sınıfı = "paylaş düğmesi twitter üzerinden paylaş"> <i sınıfı = "fa-twitter" > heyecan</a> </div> <div class="görüntü katmanı"> <img src = "images/tree.jpg" genişlik = "500" alt = "(!LANG:(!LANG:Kaliforniya sörfü)" > !}!} </div> </div>

Tüm gerekli yapı є. CSS'ye daha fazla stil koymak için kaybettim. Bunun için 2. i, bir saat, timsahın geri kalanına geçiyoruz.

Krok 2 - CSS

Stiller, dış görünüm HTML dosyasında bloklar arasında bulunur . Yani farklı efektlere sahip cilt dosyasında, belgenin bu bloğunun farklı stilleri vardır.

Bu stilleri alıp stil dosyanı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-etki-l-geri ( konum : mutlak ; üst : 0 ; sol : 0 ; yükseklik : 300 piksel ; -webkit-geçişi : 0,6 sn; geçiş : 0,6 sn; z-index : 1 ; ) .image-effect-fall-back :hover .image-layer( -webkit -dönüştürme : döndürmeX(70deg) ; dönüştürme : döndürmeX(70deg) ; taşma : görünür ; ) .image-effect-fall-back .image-layer img (yükseklik: %100; ) .image-effect-fall -back .image -layer :before (içerik: ""; konum: mutlak; üst: 0; sol: 0; genişlik: %100; yükseklik: %100; -gölge: 0 0 100px 50px rgba(0 , 0 , 0 , 0.5 ) ; opaklık : 0 ; -webkit-geçiş : tüm 0,5 sn; ) translateY(110px ) scale(0.75 ); transform : döndürmeX(114deg) translateZ(-26px ) translateY(110px ) scale(0.75) ; -webkit-transform-origin: alt; -ms-transform-origin: alt; transform-orijinal: alt; ) .image-effect-fall-back :hover .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ş : 0,6 sn; geçiş : 0,6 sn; -efekt-geri dönüş :hover .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-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 düğmelerinin rengi*/.share-via-vk ( background-color : #4C75A3 ; ) .share-via-facebook ( background-color : #3b5998 ; ) .share-via-twitter ( background-color : #00aced ; )

Size önceden haber vereceğim: bazı durumlarda jQuery kullanılır, bu nedenle tam etki için resme tıklamanız gerekir. Sadece onurlu olduğunuz popo ile tarafta galip gelen tüm JS kodunu almanız gerekiyor.

Saygı duymak! CSS kodunu stil dosyasına yapıştırdıktan sonra, düğmeler uygulamadakiyle aynı görünmeyebilir. Stil dosyasının, demoda yer alan öğeler ve sınıflar için başka stillere sahip olmasıyla ilgili olabilir.

Visnovok

Kural olarak, yaratıcılık her zaman yükselişte. Burada 12 efektten birini seçip projelerinize kazandırabileceğinizi düşünüyorum.

Sitelerimizi sosyalleştirmeye devam ediyoruz. Okuyucular genellikle en sevdikleri sosyal medyadaki blog güncellemelerini manuel olarak seçmek zorunda kalırlar. Onlara böyle bir ödül verelim. Kimler için bu sosyal hizmetlere kaydolmak gerekir. Bir yönetici profili veya sitenin yazarı oluşturabilir veya kamu tarafı projeye firma. Ödeme yapanların onları tanıması için sitede yeni güncellemeleri düzenli olarak yeni profil satırlarında yayınlamak gerekecektir. Tse, konuşmadan önce, daha önce yüklediklerimizin yardımı için kolayca çalışın. Sosyal profillerde paylaşım, CSS sprite veya CSS sprite yardımı ile yapılabilir.

CSS hareketli grafiği ve hareketli grafik nedir?

Sprite- Birleştirilmiş gibi küçük resimlerden oluşan bir koleksiyon. Sunucudan coristuvach'ın bilgisayarına 10-20 küçük hafif resim yakalamaya değil, onları tek bir dosyada birleştirerek tek bir akışta yakalamaya çalışmalısınız. Sprite, web tasarımına, örneğin canavarlar, ne çekileceği gibi animasyonlu 2D grafikler oluşturmak için kötü kokuların galip geldiği oyun endüstrisinden geldi.

Sitelerin tasarımı, bazı farklılıklarla, simgeler tek bir dosyada birleştirilir, örneğin:

Bu uygulamada tek bir dosyada nasıl çalışabilirsiniz, sadece sosyal medya simgelerini değil, aynı zamanda oklar, değiştirme düğmeleri gibi diğer tasarım öğelerini de aldılar. Ale poddnuvati kesinlikle tüm grafikler, tek bir hareketli sitede vikoristovuetsya olarak doğru değil. Elemanları gruplara ayırmak ve şarkı söyleme tipine gereğinden fazla eklemek daha iyidir.

Bu küçük üzerinde, robotik css sprite ilkesini şematik olarak göstermeye çalıştım. Blok arka plan görüntüsünden daha büyükse, css stillerinde tekrar yok ayarlandığından sol üst köşeye yerleştirilecektir. Ancak arka plan görüntüsünün konumunu mümkün olduğunca değiştirebiliriz. üst kut engellemek. Özellikle tse corisno, örneğin rozmіrom dorovnyuє okremiy іkontsі için bir blok gibi. 32x32 deri boyutunda bu simgeye sahibiz. Koku yatay olarak yayılıyor, ancak dikey olarak küllerin konumunu değiştirmemize gerek yok. Arka planın konumunu ayarlıyoruz baby -32 px blok simgesinde alınır, -64 px Facebook simgesidir vb.

Sosyal medya profillerinde butonlar nasıl oluşturulur?

İlgili kayıtlara kayıt olduktan sonra profildeki mesajı, RSS sayfamın adresini kaldırdım ve mail ile güncellemenin iptali için abonelik formuna gönderdim. Ardından aşağıdaki kodu birleştireceğim ve WordPress yönetici panelindeki metin widget'ına yapıştıracağım:

Bağlantıda, kodunuza bir etiket gönderin : . Simgenin gerekli olduğu bu bloğun hatası. Arka plan görüntüsü zsv, stil dosyasında belirtilir stil.css otorite aracılığıyla arka plan konumu:

/* Aboneliği güncelle düğmeleri*/ .spmenu ( dolgu: 0px; kenar boşluğu: 0px; renk: #4682B4; metin hizalama: sola; yazı tipi boyutu: %100; ) .spmenu a, .spmenu a:hover ( imleç: işaretçi ;color: #1E90FF;text-decoration: none;font-size: 100%; ) .spmenu yayılma alanı (ekran: satır içi blok; genişlik: 32 piksel; yükseklik: 32 piksel; ) tekrarsız; ) .spmenu span.sprite_gplus(arka plan konumu: 0px 0px;). .spmenu span.sprite_rss(arka plan konumu: -96px 0px;) .spmenu span.sprite_email(arka plan konumu: -128px 0px;)

Bu sıralamada, cilt elemanı için sınıfın ortasında spmenu" sormak arka plan görüntüsü simgeler.png, bir simgeler kümesidir. Neye saygı duy є specifіkatsієyu HTML için є satır vbudovanim elementіv, size katı razmіri (genişlik ve yükseklik) sormak için, yogo ekranının yolunu bloklu olarak değiştirmekten sorumluyuz CSS Yetkileri(kürek çekmek: ekran: satır içi blok). Simgelerimizin biçimine uyması için 32x32 bloğunu genişletin.

Genellikle zamіst etiketler , , vb., bu pidkhid'i yanlış buluyorum. Artık evrensel olmanın yanı sıra standart etiketlerin stillerini değiştirebilirsiniz. . bir etiket Bir anda sunucuya bir istek yaratırız ve biz, zastosovayuchi sprite olarak bu isteklerin miktarını hızlandırmaya yardım ederiz.

Sprite için simgeler nereden alınır?

  1. Kendini boya.
  2. Resimler arasında arama sisteminde arama yapın.
  3. Merezhya'da özel dobirki іkon vardır, yakі genellikle ücretsiz olarak lunayut.
  4. Eklerinizde kullanabileceğiniz resmi logo ve ikonların web sitelerinde birçok sosyal medya ve hizmet yayınlanmaktadır.
  5. Sosyal medya ikonu sprite dosyasını otomatik olarak sprite etmek için servis ile hızlandırabilirsiniz. Simgeleri gerekli sırayla seçiyoruz, bir komut dosyasıyla arşivleri seçiyoruz, paketi açıp bir resim bachimo simgeler.png- Hazır sprite dosyası.

Menü öğesinin üzerine gelindiğinde şarap karartılır veya kaydedilirse, animasyonlu menüyü genişletirken renkli simgeleri görüntülemek için pencereyi hareket ettirin. Ardından, hareketli grafik dosyasında, iki düğme kümesini kaydedin ve fareyi gezdirdikten sonra, JS yardımıyla küçük olanın arka planın konumunu dinamik olarak değiştirin.

Lütfen güncellemeyi kaldırmak için kanallardaki menü buton-gönder butonunu unutmayın, bozuk, yazının sonuna. Yeniden başlamanız gerekiyorsa güncellemelere abone olun.

Merhaba şımarık arkadaşlar. Bugünün makalesi, hizmetler ve eklentiler olmadan bir sosyal düğme bloğunun oluşturulmasına ayrılacaktır. Ve bu bloktan önce bile, siteyi bir tarafı teşvik etmek için desteklemenize, istatistiklere bir mesaj göndermenize izin veren düğmeler göreceksiniz. e-posta ve makalenize ipotek koyun. Bu tür düğmeler bugün cilt sitesinde görülebilir. Ek hizmetler veya eklentiler için yalnızca kokunun ekseni uygulanır. Ve size bağımsız olarak nasıl büyüyeceğinizi göstereceğim.

Müşterilerin web sitelerinde ve kendi blogumda bir galipmişim gibi hizmetler - i . Qi hizmetleri, belirlenen görevi kolayca uygulamanıza olanak tanır.

Sosyal düğmelerin gücü neden hizmetlerin ve eklentilerin önündedir?

  1. Geri dönüşü olmayan, çevresel olmayan bir faktör, siteye ilginin hızıdır. Yani örneğin bluz üzerinde vekaleten hizmet veren PLUSO servisi daha kısa yayılımla 633 milisaniyeye kadar ekler.

Bu blokta, içinde birleştirilmiş sosyal düğmelerin gerekli görüntüleri yoktur. Tüm stiller minimuma indirilir. Artı basit bir html çerçevesi.

  1. Telaffuz ettiğim yol, birinin intikamını almamaktır. merhaba. Hі, posilannya є, ama tüm pis koku, iç posilannya gibi olacak. Bajannya için zavzhdi yapabilirsiniz. Onları da göremezsiniz.

  1. duje kolay kurulum. Site tarafının çıkış kodundaki bloğa html kodunu eklemeniz, sprite'ı başlatmanız, eklemeniz yeterlidir. css stilleri bu kurulum tamamlandı. Düğme görüntüleriyle dosyanın yolunu düzenlemeniz gerekecek.
  2. Bu nokta, shvidshe, sosyal düğmeler bloğu için bir artı veya eksi değil. İşin püf noktası, bloğunuzun düğmelere basmak için bir lichnik olmamasıdır. І Bir eksi için düşünebilirsiniz. Ale, diğer taraftan skin butonunu takmanız mümkün ve butonlara kaç kez bastığınızı ve yazılarınızı izleyicilerinizin sosyal ağlarıyla paylaştığınızı kesinlikle bileceksiniz.
  3. Hizmetler tarafından toplanan istatistikler artık web sitenizdeki üçüncü şahıslara aktarılmayacaktır.

Çıkış koduna bir sosyal düğme bloğu ekleme

Makaleden sonra düğmeler genişletilirse klasik bir seçenek gibi görünüyoruz.

Ayrıca makalelerin yayınlanması için göndermeniz gereken dosyayı (single.php) açabilir ve çıktı koduna bir sosyal düğme bloğu ekleyebilirsiniz. Veya dosya işlevleri temaları (functions.php) aracılığıyla zrobiti yapabilirsiniz.

Sana seçenekleri göstereceğim ve sen de kendin için neye ihtiyacın olduğunu seçebilirsin.

Single.php çıktı koduna bir blok ekleme

Properedzhennya: Tüm diy filizlerinin koçanından önce yedek kopya single.php dosyası!

WordPress yönetici panelini açın. « yıldızlı görünüm» — "Editör" — "Tek giriş (single.php)".

Çıkış kodunda, yere bakın, istatistiklerin incelemesini sonlandırın ve yorumları veya navigasyon sonrası başlayın. Sosyal düğmeler bloğu için html kodunu aynı yere eklemeniz gerekecek.

Ekran görüntüsüne bakmak saygılıdır, koda odaklanmakbu yorumlar. І kılavuz kodunu aşağıya girin.

Doğal olarak, şablonlarınız çok fazla takdir yetkisine sahip olacak, ancak hiçbir değişiklik olmayacak, aklınıza ne gelirse gelsin, içinde daraltılabilir bir şey yok. O zamana kadar bir yedek kopyanız var, korkacak bir şey yok.

Ve i ekseninin kendisi, sosyal düğmeler bloğunun html kodudur:

Kodun arkasındaki açıklama: tse bir blok DIV sınıfıdır. Kaygan bir birleştirme penceresinde açılmaya zorlandı, bunun için onClick=window.open işlevi etkinleştirildi. Makale üzerindeki kuvvetin ikamesi, cim kodunun ekseni tarafından belirlenir.. Gücün derisi, düğmenin görüntüsünün olması gereken kendi sınıfına sahip olabilir.

Çıkış kodu aracılığıyla eklemenin tamamlandığı kişi. Size css stillerini etkinleştirmek için gerekli olanı verdim.

Temaların işlevleri aracılığıyla single.php çıktı koduna bir blok ekleme

Önceden: koçandan önce, functions.php dosyasının bir yedek kopyasını alın!

Bu seçeneği kazanmak için function.php dosyasını açmanız ve son olarak kodu eklemeniz gerekir:

/* Sosyal düğmeleri ekle */ add_action("comments_template","soc_button"); function soc_button() (?> Ve kodu eklerseniz dikkatli olun, diğer karakterleri kaçırmaktan suçlu değilsiniz. PHP kodunu kapatmak daha mı iyi?>. Aksi takdirde site çalışmayı durduracaktır.

Kodun arkasındaki açıklama: Sosyal medya butonlarının yerleştirileceği yer, yorumlar_şablon API anahtarı aracılığıyla belirlenir. Cim tuşunun arkasında yorumlardan önceki boşluk bulunur. Sosyal düğmelerin kodu, php kodunun ve php kodunun dönüş etiketlerine yerleştirilir. Kodda onları kırmızı bir renkle tanıdım. tüm kurnazlık kimde var HTML Kodu PHP'de, tema işlevleri aracılığıyla.

Bu şekilde ve bu şekilde bitmiş oluyor, görseli siteye taşımaya geçelim.

Düğme resimlerini sunucuya yükleyin

Örneğin sosyal butonların resimlerinden bir sprite sprite hazırladım. Onlardan yararlanabilirsiniz.

Sprite, popo gibi bir papaz gibi, daha az önemli 3.97 kb ve daha fazla gereksiz düğme. Ve eğer bu bir hareketli karakterse, o zaman dış görünüm düğmesi için değil, yalnızca üsse bir tane alacaktır.

Bir resim çekin veya kendinizinkini hazırlayın ve sitenizde çekin. Sanırım bu sorunları suçlamak benim suçum değil. Bu sprite'a bir mesaj göndermek, css stilleri aracılığıyla düğmelerin tasarımı için gereklidir.

CSS stillerini bağlama

Bu krok önce zvichayno, vikonati olabilir, ama ben voliyu vikonati'yi katlanmış olarak yapacağım teknik çalışma ve ardından css stillerinden alma öğelerine geçin.

Ayrıca sitenizin tasarımı için kullanılan style.css dosyasını da ekleyin. І q ekseni stilini ekleyin:

a paylaşın ( görüntüleme: satır içi blok; dikey hizalama: devralma; kenar boşluğu: 5 piksel 0 0 2 piksel; dolgu: 0 piksel; yazı tipi boyutu: 0 piksel; genişlik: 40 piksel; yükseklik: 40 piksel; arka plan: url("http://test ..png ") tekrarsız kaydırma 0px 0px şeffaf;) .share a.vkontakte ( arka plan: url("http://test..png ") tekrarsız kaydırma -168px 0px şeffaf; ) .share a.google ( arka plan: url("http://test..png ") tekrarsız kaydırma -252px 0px şeffaf; ) .share a.livejournal ( arka plan: url("http://test..png ") tekrarsız kaydırma -336px 0px şeffaf; ) .share a.twitter ( arka plan: url("http://test..png ") tekrarsız kaydırma -42px 0px şeffaf; ) .share a.mail ( arka plan: url("http ://test..png ") tekrarsız kaydırma -294px 0px şeffaf; ) .share a.odnoklassniki ( arka plan: url("http://test..png ") tekrarsız kaydırma -126px 0px şeffaf; ) .share a.pinterest ( arka plan: url("http://test..png ") tekrarsız kaydırma -210px 0px şeffaf; ) .share a.liveinternet ( arka plan: url("http://test..png) ") tekrarsız kaydırma -378px 0px şeffaf; ) .share a.evernote ( arka plan: url("http://test..png ") tekrarsız kaydırma -420px 0px şeffaf; ) .share a.bookmark ( background: url("http://test.. ) png ") tekrarsız kaydırma -462px 0px şeffaf; ) .share a.email ( arka plan: url("http://test..png ") tekrarsız kaydırma -504px 0px şeffaf; ) .share a.print ( arka plan: url("http://test.. png ") tekrarsız kaydırma -546px 0px şeffaf; ) .share a.digg ( arka plan: url("http://test..png ") tekrarsız kaydırma -588px 0px şeffaf; ) .share a.spring ( arka plan: url("http://test..png ") tekrarsız kaydırma -630px 0px şeffaf; )

Kodun arkasındaki açıklama: class.share bloğa parlak bir görünüm verir, dış görünüm düğmesini genişletir ve tek bir arka plan ayarlar. Ve daha uzak cilt gücü kendi sınıfına sahip olabilir ve bu tür cilt gücü, arka planın gücü aracılığıyla düğmenin görünümü atanır. css sprite ve skin button gibi Wicon düğmelerinin genişliği ve yüksekliği 40 piksel ve aralarında 2 piksellik bir kenar boşluğu vardır, bu da görüntüyü dış görünüm düğmesi için doğru bir şekilde belirlemenizi sağlar. İlk düğme 0, diğeri 42 olarak gösterilir ve bu şekilde devam eder. qi kodunda, anlam turuncu renkle işaretlenmiştir. Sprite'a gönderme de turuncu bir renkle görülür, sprite'ınıza giderken değiştirebilirsiniz.

Bunun için sosyal düğmeler bloğunuzu oluşturma sürecinin tamamı tamamlandı. Cesurca revizyona geçebilirsiniz.

Ayrıca, tüm okuma sürecinin doğrudan gösterildiği, direğin düğmelerin robotuna gösterildiği bir video eğitimim var. Web sitelerinizde ve bloglarınızda buna hayret edin.


Eksen şimdi bıyık. Z geri kalanının başlarını koyacağız. Yeni makaleler ve video dersleri ile size iyi şanslar ve iyi şanslar diliyoruz.

editör seçimi

© 2022 androidas.ru - Android hakkında her şey