Yoqimli interfeys piktogrammalari, bitta spriteda saqlanadi. Maxsus CSS spritlaridan ijtimoiy media tugmalari (tasvirni optimallashtirish) HTML uchun rangli ijtimoiy media piktogrammalari
Katlama uchun onlayn manbalar CSS spritlari masalan http://spritepad.wearekiss.com/ yoki http://www.spritecow.com/. Vtim, sizga nima mos kelishini osongina bilib olasiz. Mana men g'alaba qozonishga tayyorman CSS sprite. Xushbo'y o'qi:
html tuzilishi
Konteyner div maydoni konteyner div ijtimoiy tugmalar o'tish bilan.
Xushbo'y spritlar uchun CSS tuzilishi
body( fon: url("fon.png"); rang: #1aa5ca; ) .box (chegara: 250px; toʻldirish: 25px; fon: #; matn chegarasi: -9999px; displey: inline-block; ) .click (fon: url("click.png"); kenglik: 200px; balandlik: 86px; displey: blok; ) .vk( fon: url("vc.png"); kenglik: 51px; balandlik: 52px; fon pozitsiyasi : 0 0px; o'tish: shaffoflik 0,5s; -moz-o'tish: shaffoflik 0,5s; /* Firefox 4 */ shaffoflik 0,5s; /* Opera */ shaffoflik: 0,6; float: chap; ) .vk: hover ( fon: url("vc.png"); xiralik: 1; ) .ya( fon: url("ya.png"); kenglik: 50px; balandlik: 50px; chekka: 10px; fon pozitsiyasi: 0 0px; oʻtish: shaffoflik 0,5s; 0,5s;/* Firefox 4 */ -webkit-o'tish: shaffoflik 0,5s; /* Safari va Chrome */ -o-o'tish: shaffoflik 0,5s; :hover (fon: url("ya.png") ; kenglik: 50px; balandlik: 50px; fon holati: 0-50px; shaffoflik: 1; ) .ma( fon: url("ma.png"); kenglik: 51px; balandlik: 52px; chekka: 10px; fon- pozitsiya: 0 0px; o'tish: shaffoflik 0,5s; -moz-o'tish : shaffoflik 0,5s; /* Firefox 4 */ -webkit-o'tish: shaffoflik 0,5s; /* Safari va Chrome */ -o-o'tish: shaffoflik 0,5s; /* Opera */ shaffoflik: 0,6; : url("ma.png"); kengligi: 51px; balandligi: 52px; fon holati: 0-51px; shaffoflik: 1 )Bu mumkin fon holati: 00px; Hurmatingizni unuting, men shaffoflikni 0,6 ga qo'ydim, biroz shaffoflik. Hovered xiralik: 1; hamma narsa olinadi (0,5s) o'tish: shaffoflik 0,5s;. Tugmani olib o'tishda tasvirning o'rni o'zgardi fon holati: 0-51px;.
Vikoristovuyuchi tsyu tehnyku sezilarli darajada mumkin tasvirni optimallashtirish(serverga kamroq zvernen).
P.S. Yozish uchun ovqat kabi!
Jovten 29, 2019 yil Xabar yangilandi
Yuriy Nimets
Sayt uchun ijtimoiy media tugmalarining samaradorligi
Sizningcha, bu tasvirni ijtimoiy media tugmachalarini qanday olish mumkin? Ularning ikkalasi uchun bu yanada chiroyli va ijodiy ko'rinardi. Shunday qilib, siz buni boshqa yo'l bilan qilishingiz mumkin. Va bitta emas, balki guruhga o'ting. Aniqroq qilib aytadigan bo'lsak, sichqonchani tasvir ustiga olib borganingizda ijtimoiy tarmoq tugmalari uchun ajoyib effektlar yaratishning 12 ta usulini topishingiz mumkin. Bunday shovqinlar uchun nafaqat ishora qilish, balki sichqonchani bosish ham kerak, bu ham interaktivga qo'shiladi. Saytingizni ko'rishning o'ziga xos usuli, sichqonchani rasm ustiga olib borganingizda bir xil effekt.
Quyidagi harakatlar uchun hayratga tushish va zavantazhivayte qilish uchun 12 ta misoldan foydalaning:
foyda oling
Nutqdan oldin, ishora qilinganda qanchalik samarali bo'lsa, saytda ushbu mavzu bo'yicha ko'proq maqolalar mavjud:
Effektni kafolatlagandan so'ng - ko'z qisib qo'ying!
Misol uchun, mening qalbimga tushib, birinchi ta'sir. Effektni ko'rish uchun quyidagi rasmni suring.
(rasmga ishora)
Siz sotayotgan saytda ham, bir tomonlama saytdagi ham eng muhim rasmlarni ko'rishning eng yaxshi usulini oling. Ale, men allaqachon yozganimdek, effektlar ancha katta (12!).
Krok 1 - HTML
Belgilar uchun, xuddi tugmalarda ko'rganingizdek ijtimoiy chora-tadbirlar, FA (Font Awesome) g'alabasi. Bloklar orasidagi bir qatorda ulangan piktogramma :
| 1 | <havola rel="stylesheet" href= "http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> |
Barcha vizual tasvirlarni yuklab olganingiz uchun siz o'zingizga munosib bo'lgan effektni tanlashingiz kerak. Mening effektim faylda topilgan index.html. Ushbu faylda hover effektini yaratish uchun barcha kerakli uslublar mavjud.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <div class="image-effect-fallback"> <div class="qatlamni almashish"> <a href = "#" class = "share-button share-via-vk" > <i sinf = "fa fa vk" > Bilan aloqada</a> <href = "#" sinf = "Facebook orqali almashish tugmasi"> <i sinf = "fa facebook" > Facebook</a> <href = "#" sinf = "Twitter orqali almashish tugmasi"> <i sinf = "fa fa-twitter" > Twitter</a> </div> <div class="image-layer"> <img src = "images/tree.jpg" width = "500" alt = "(!LANG:(!LANG:Kaliforniya sörf)" > !}!} </div> </div> |
Barcha kerakli tuzilma ê. CSS-ga ko'proq uslublar kiritish yo'qolgan. Bunga biz 2-chi i, bir soat, qolgan timsohga o'tamiz.
Krok 2 - CSS
Uslublar teri HTML faylida bloklar orasida joylashgan . Shunday qilib, turli effektlarga ega teri faylida, hujjatning tog'laridagi ushbu blokda turli xil uslublar mavjud.
Siz ushbu uslublarni olishingiz va ularni uslublar faylingizga joylashtirishingiz kerak:
| 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 (kenglik : 500px ; balandlik : 300px ; pozitsiya : nisbiy ; chekka : 0 auto ; -webkit-perspective : 800px ; perspektiv : 800px ; ) .image-effect-l-back (pozitsiya: mutlaq ; tepa : 0 ; chap : 0 ; balandlik : 300px ; -webkit-o'tish: 0,6s; o'tish: 0,6s; z-indeks: 1 ; ) .image-effect-fall-back :hover .image-layer( -webkit -transform : rotateX(70deg) ; transform : rotateX(70deg) ; overflow : visible ; ) .image-effect-fall-back .image-layer img (balandlik: 100% ; ) .image-effect-fall-back .image -qatlam :oldin (tarkib : "" ; pozitsiyasi : mutlaq ; tepa : 0 ; chap : 0 ; kenglik : 100% ; balandlik : 100% ; -shadow : 0 0 100px 50px rgba(0 , 0 , 0 , 0.5 ) shaffoflik : 0 ; -webkit-o'tish : hammasi 0,5 soniya; ) translateY(110px ) shkalasi(0,75 ); transform : rotateX(114deg) translateZ(-26px ) translateY(110px ) shkala(0.75 ); -webkit-transform-origin: pastki; -ms-transform-origin: pastki; transform-kelib chiqishi: pastki; ) .image-effect-fall-back :hover .tasvir-qatlami :oldin ( noaniqlik : 0.3 ; ) .image-effect-fall-back .share-layer( pozitsiya : mutlaq ; pastki : 100px ; chap : 0 ; kenglik : 100%; balandlik: 100px; shaffoflik: 0; z-indeks: 10; -webkit-o'tish: 0,6s; o'tish: 0,6s; -effect-fall-back:hover .share-layer (shaffoflik: 1 t; aylantirish: rotateX(0deg) translateY(-70px ) ; transform : rotateX(0deg) translateY(-70px ) ; ) /*barcha tugmalar uchun uslublar*/.share-button( displey : inline-block; matn bezatish : yo‘q ; rang : #ffffff ; to‘ldirish : 12px ; kenglik : 90px ; chegara radiusi : 2px ; chet : 25px 10px ; ) /*ijtimoiy tarmoqlar tugmalarining rangi*/.vk orqali ulashing (fon rangi: #4C75A3; ) .facebook orqali ulashing (fon rangi: #3b5998; ) .twitter orqali ulashing (fon rangi: #00aced; ) |
Men sizga oldindan xabar beraman: ba'zi hollarda jQuery ishlatiladi, shuning uchun to'liq ta'sir qilish uchun rasmni bosishingiz kerak. Siz sharafga sazovor bo'lgan dumba bilan g'olib bo'lgan barcha JS kodini olishingiz shart emas.
Hurmat! CSS kodini uslublar fayliga joylashtirganingizdan so'ng, tugmalar ilovadagi kabi ko'rinmasligi mumkin. Bu sizning uslublar faylingizda demoda taqdim etilgan ushbu sinf elementlari uchun o'rnatilgan boshqa uslublar mavjudligi bilan bog'liq bo'lishi mumkin.
Visnovok
Qoidaga ko'ra, ijodkorlik doimo yuksalishda. O'ylaymanki, bu erda siz o'zingiz uchun 12 ta effektdan birini tanlashingiz va loyihalaringiz uchun eng yaxshisini tanlashingiz mumkin.
Biz saytlarimizni ijtimoiylashtirishda davom etamiz. O'quvchilar ko'pincha o'zlarining sevimli ijtimoiy tarmoqlarida blog yangilanishlarini qo'lda tanlashlari kerak. Keling, ularga shunday imkoniyat beraylik. Kim uchun ushbu ijtimoiy xizmatlarda ro'yxatdan o'tish kerak. Siz administrator profilini yoki sayt muallifini yaratishingiz mumkin, yoki mumkin jamoat tomoni kompaniya loyihaga. To'lovchilaringiz ular bilan tanishishlari uchun muntazam ravishda yangi profillar qatorida saytga yangi yangilanishlarni e'lon qilish kerak bo'ladi. Tse, nutqdan oldin, biz ilgari o'rnatganlarning yordami uchun qulay ishlang. Ijtimoiy profillarga joylashtirish CSS sprite yoki CSS sprite yordamida amalga oshirilishi mumkin.
CSS sprite va sprayt nima?
Sprite- Kichik rasmlar to'plami, xuddi bittaga birlashtirilgan. Siz serverdan koristuvach kompyuteriga 10-20 ta kichik yorug'lik uchun muhim rasmlarni suratga olishga emas, balki ularni bitta faylga o'tkazib, bitta oqimga o'tkazishga harakat qilishingiz kerak. Sprite veb-dizaynga o'yin sanoatidan keldi, u erda jonlantirilgan 2D grafikalarni yaratishda g'alaba qozondi, masalan, yirtqich hayvonlar, nima otish kerak va hokazo.
Saytlarning dizayni ham to'xtatilishi mumkin, ba'zi farqlar bilan piktogrammalar bitta faylga birlashtiriladi, masalan:
Ushbu ilovada bitta faylda qanday ishlash mumkin, ular nafaqat ijtimoiy media piktogrammalarini, balki boshqa dizayn elementlarini, masalan, o'qlar, o'zgartirish tugmalari va boshqalarni ham oldilar. Ale poddnuvati mutlaqo barcha grafikalar, bir sprite saytida vikoristovuetsya sifatida to'g'ri emas. Elementlarni guruhlarga bo'lish va tomonlarning qo'shiq turiga kerak bo'lgandan ko'ra ko'proq qo'shish yaxshiroqdir.
Ushbu rasmda men robot CSS spritlari printsipini sxematik ravishda ko'rsatishga harakat qildim. Agar blok fon tasviridan kattaroq bo'lsa, u holda u yuqori chap burchakda joylashtiriladi, chunki CSS uslublarida takrorlashsiz o'rnatiladi. Ammo biz fon tasvirining o'rnini iloji boricha o'zgartirishimiz mumkin yuqori kut blok. Ayniqsa, tse korisno, blok kabi, masalan, rozmírom dorivnyuê okremiy íkontsí uchun. Bizda 32x32 o'lchamdagi teri belgisi mavjud. Xushbo'y hid gorizontal ravishda tarqaladi, lekin vertikal ravishda, biz kulning o'rnini o'zgartirishimiz shart emas. Biz fon fonining o'rnini belgilaymiz chaqaloq -32 px blok belgisida olinadi, -64 px Facebook belgisi va hokazo.
Ijtimoiy tarmoq profillarida tugmachalarni qanday yaratish mumkin?
Tegishli yozuvlar bilan ro'yxatdan o'tgandan so'ng, men profildagi xabarni, RSS sahifamning manzilini olib tashladim va uni pochta orqali yangilanishni bekor qilish uchun obuna shakliga yubordim. Keyin yuqoridagi kodni birlashtirdim va uni WordPress boshqaruv panelidagi matn vidjetiga joylashtirdim:
Ankorda kodingizga teg yuboring : . Ushbu blokning aybi, unda belgi kerak. Fon rasmi zsv uslublar faylida ko'rsatilgan style.css hokimiyat orqali fon holati:
/* Obuna tugmalarini yangilash*/ .spmenu ( to‘ldirish: 0px; hoshiya: 0px; rang: #4682B4; matnni tekislash: chap; shrift o‘lchami: 100%; ) .spmenu a,. ko'rsatgich; rang: #1E90FF; matn-bezak: yo'q; shrift hajmi: 100% . ) takrorlanmaslik;) .spmenu span.sprite_gplus (fon pozitsiyasi: 0px 0px;). .spmenu span.sprite_rss (fon pozitsiyasi: -96px 0px;) .spmenu span.sprite_email (fon pozitsiyasi: -128px 0px;)
Bu darajadagi teri elementi uchun sinf o'rtasida spmenu» so'rang fon tasviri icons.png, bu piktogrammalar to'plamidir. Nimani hurmat qiling ê qator vbudovanim elementlari HTML spetsifikatsiyasi uchun, shuning uchun siz uni qat'iy razmíri (kenglik va balandlik) belgilashingiz kerak, biz aybdormiz. CSS vakolatlari(qator: displey: inline-block). 32x32 blokni piktogramamiz formatiga mos ravishda kengaytiring.
Ko'pincha zamíst
teglar
,
,
va hokazo, men bu pidhidni noto'g'ri deb hisoblayman. Endi siz standart teglarning uslublarini o'zgartirishingiz mumkin, shuningdek universal bo'lishingiz mumkin
. Teg
bir lahzada serverga so'rov yarating va biz, zastosovayuchi sprite, ushbu so'rovlar miqdorini tezlashtirishga yordam beramiz.
Sprite uchun piktogrammalarni qayerdan olish mumkin?
- O'zingizni bo'yang.
- Poshukati rasmlarning o'rtasida poshukovik bor.
- Merezhya da maxsus dobirki ikon bor, yaky ko'pincha xarajatsiz lunayut.
- Ko'plab ijtimoiy tarmoqlar va xizmatlar rasmiy logotiplar va piktogrammalarning veb-saytlarida joylashtirilgan, shuning uchun siz o'zingizning qo'shimchalaringizdan yutib olishingiz mumkin.
- Ijtimoiy media piktogramma sprite faylini avtomatik ravishda sprite qilish uchun uni xizmat yordamida tezlashtirishingiz mumkin. Biz piktogrammalarni kerakli tartibda tanlaymiz, skript bilan arxivlarni tanlaymiz, rasmni ochamiz va bachimo qilamiz icons.png- Tayyor sprayt fayl.
Animatsiyalangan menyuni kengaytirayotganda rangli piktogrammalarni ko'rsatish uchun oynani Sprite qiling, agar kursorni menyu bandi ustiga olib borganingizda, sharob qorayadi yoki saqlanadi. Keyin sprite faylidan ikkita tugmalar to'plami olinadi va sichqonchani olib borgandan so'ng JS yordamida kichik fonning holatini dinamik ravishda o'zgartiradi.
Iltimos, maqolaning oxirigacha yangilanishni olib tashlash uchun kanallar menyusi tugmasi-yuborish tugmasiga e'tibor bering, u buzilgan. Agar siz qaytadan boshlashingiz kerak bo'lsa, yangilanishlarga obuna bo'ling.
Salom aziz do'stlar. Bugungi maqola xizmatlar va plaginlarsiz ijtimoiy tugmalar blokini yaratishga bag'ishlanadi. Va bu blokdan oldin ham siz saytni qo'llab-quvvatlashga imkon beruvchi tugmalarni ko'rasiz, bu esa bir tomonni targ'ib qilish, statistikaga xabar yuborish. elektron pochta va maqolangiz uchun ipoteka qiling. Bunday tugmalarni bugungi kunda teri saytida ko'rish mumkin. Qo'shimcha xizmatlar yoki plaginlar uchun faqat hidning o'qi amalga oshiriladi. Va men sizga qanday qilib mustaqil ravishda o'sishni ko'rsataman.
Mijozlarning saytlarida va o'z blogimda vikoristav kabi xizmatlar - i . Qi xizmatlari belgilangan vazifani osongina amalga oshirish imkonini beradi.
Nima uchun ijtimoiy tugmalarning kuchi xizmatlar va plaginlar oldida
- Qaytarib bo'lmaydigan, periferik bo'lmagan omil - bu saytga qiziqish tezligi. Masalan, bluzkadagi o'rinbosar bo'lgan PLUSO xizmati qisqaroq tarqalish bilan 633 millisekundgacha qo'shiladi.
Ushbu blokda birlashtirilgan ijtimoiy tugmalarning boshqa kerakli rasmlari yo'q. Barcha uslublar minimal darajaga tushiriladi. Bundan tashqari, oddiy html ramka.
- Men aytmoqchi bo'lgan yo'l - o'zidan o'ch olmaslik Salom. Salom, posilannya ê, lekin barcha badbo'y hid, ichki posilannya kabi bo'ladi. Bajannya uchun siz zavzhdi mumkin. Siz ularni ham ko'ra olmaysiz.
- duje oson o'rnatish. Saytning yon tomonidagi chiqish kodidagi blokga HTML kodini kiritish, spraytni ishga tushirish, qo'shish kifoya. css uslublari o'rnatish tugallangan. Siz tugma tasvirlari bilan faylga yo'lni tahrirlashingiz kerak bo'ladi.
- Ushbu element tezroq va ijtimoiy tugmalar bloki uchun ortiqcha va minus emas. Ayyorlik shundaki, sizning blokingizda tugmachalarni bosish uchun lichnik yo'q. Í tse minus uchun vvazhat mumkin. Ale, boshqa tomondan, teri tugmachasini qo'yish mumkin va siz tugmalarni necha marta bosganingizni va maqolalaringizni tomoshabinlaringizning ijtimoiy tarmoqlari bilan baham ko'rganingizni aniq bilasiz.
- Xizmatlar tomonidan to'plangan statistik ma'lumotlar endi saytingizdagi uchinchi shaxslarga berilmaydi.
Chiqish kodiga ijtimoiy tugmalar blokini kiritish
Maqoladan keyin tugmalar kengaytirilsa, biz klassik variantga o'xshaymiz.
Shuningdek, siz maqolalarni chop etish uchun yuborishingiz kerak bo'lgan faylni (single.php) ochishingiz va chiqish kodiga ijtimoiy tugmalar blokini qo'shishingiz mumkin. Yoki mavzular bilan funktsiya fayli orqali zrobiti mumkin (functions.php).
Men sizga variantlarni ko'rsataman va siz o'zingiz uchun kerakli narsani tanlashingiz mumkin.
single.php chiqish kodiga blok kiritish
Properedzhennya: Barcha o'z qo'llari bilan niholdan oldin zaxira nusxasi single.php fayli!
WordPress boshqaruv panelini oching « Yulduzli ko'rinish» — "Muharrir" — "Yagona kirish (single.php)".
Chiqish kodida, joyga qarang, maqolani ko'rib chiqishni yakunlang va sharhlar yoki navigatsiyani boshlang. Ijtimoiy tugmalar blokining html kodini xuddi shu joyga kiritishingiz kerak bo'ladi.
Skrinshotga qarash, kodga e'tibor qaratish hurmatdirbu sharhlar. I pastga yo'l-yo'riq kodini kiriting.
Tabiiyki, sizning shablonlaringiz juda ko'p ixtiyoriylikka ega bo'ladi, lekin hech qanday o'zgarishlar bo'lmaydi, siz nima deb o'ylaysiz, unda yiqilib bo'lmaydigan narsa yo'q. Ungacha sizda zaxira nusxasi bor, qo'rqadigan hech narsa yo'q.
Va i o'qining o'zi ijtimoiy tugmalar blokining html kodi:
Kodni tushuntirish: tse bir blok DIV íz sinf. Silliq birlashma oynasida ochishga majbur, buning uchun onClick=window.open funksiyasi yoqilgan. Buyumdagi kuchni almashtirish sim kodining o'qi bilan belgilanadi. Kuchning terisi o'z sinfiga ega bo'lishi mumkin, bu orqali tugma tasviri bo'lishi kerak.
Bunda chiqish kodi orqali kiritish tugallanadi. Men sizga CSS uslublarini yoqish uchun kerakli narsalarni berdim.
Mavzular funksiyalari orqali single.php ning chiqish kodiga blok kiritish
Oldindan: kobdan oldin, functions.php faylining zaxira nusxasini yarating!
Ushbu tanlovni yutib olish uchun siz functions.php faylini ochishingiz va nihoyat kodni qo'shishingiz kerak:
/* Ijtimoiy tugmalarni kiritish */ add_action("sharhlar_shablon", "soc_button"); soc_button() funktsiyasi (?>). Va agar siz kodni kiritsangiz, ehtiyot bo'ling, siz boshqa belgilarni o'tkazib yuborishda aybdor emassiz. PHP kodini yopish haqida nima deyish mumkin?>. Boshqa navbatda sayt ishlamay qoladi.Kodni tushuntirish: Ijtimoiy media tugmalari joylashtiriladigan joy API kaliti comments_template orqali o'rnatiladi. Cim kalitining orqasida sharhlar oldidagi bo'sh joy mavjud. Ijtimoiy tugmalar kodining o'zi PHP kodining va PHP kodining qaytish teglarida joylashgan. Kodda men ularni qizil rang bilan tanidim. kiritishning barcha hiyla-nayranglari bor html kodi PHP da, mavzular funksiyalari orqali.
Shu tarzda va shu tarzda u tugadi, keling, rasmni saytga olib kirishga o'tamiz.
Tugma tasvirlarini serverga yuklang
Masalan, men ijtimoiy tugmalar tasvirlaridan sprayt-sprite tayyorladim. Siz ulardan foydalanishingiz mumkin.
Sprite, dumba kabi vikorist kabi, kamroq muhim 3,97 kb va undan ko'p keraksiz tugmalar. Va agar bu sprite bo'lsa, u faqat bitta bazaga olib boradi, teri tugmasi uchun emas.
Rasmga oling yoki o'zingizni tayyorlang va uni saytingizda suratga oling. Menimcha, bu muammolarni ayblash mening aybim emas. Ushbu spraytga xabar yuborish CSS uslublari orqali tugmalarni loyihalash uchun zarur bo'ladi.
CSS uslublarini ulash
Bu krok zvichayno bo'lishi mumkin, vikonati birinchi, lekin men volíyu vikonati barcha buklangan bo'ladi texnik ish, va keyin CSS uslublarini qabul qilishga o'ting.
Shuningdek, saytingiz dizayni uchun foydalaniladigan style.css faylini qo'shing. I q o'qi uslubini kiriting:
Ulashish a ( displey: inline-block; vertical-align: inherit; hoshiya: 5px 0 0 2px; toʻldirish: 0px; shrift oʻlchami: 0px; eni: 40px; balandlik: 40px; fon: url("http://test" ..png ") takrorlanmaydigan aylantirish 0px 0px shaffof;) .share a.vkontakte ( fon: url("http://test..png ") takrorlanmaydigan aylantirish -168px 0px shaffof; ) .share a.google ( fon: url("http://test..png ") takrorlanmaydigan aylantirish -252px 0px shaffof; ) .livejournalni ulashing (fon: url("http://test..png") takrorlanmaslik scroll -336px 0px transparent; ) .share a.twitter ( fon: url("http://test..png ") takrorlanmaydigan aylantirish -42px 0px shaffof; ) .share a.mail (fon: url("http) http://test..png ") takrorlanmaydigan aylantirish -294px 0px shaffof; ) .odnoklassniki-ni ulashing (fon: url("http://test..png ") takrorlanmaydigan aylantirish -126px 0px shaffof; ) .share a.pinterest (fon: url("http://test..png") takrorlanmaydigan aylantirish -210px 0px shaffof; ) .share a.liveinternet (fon: url("http://test..) png") takrorlanmaydigan scr oll -378px 0px shaffof; ) .share a.evernote (fon: url("http://test..png") takrorlanmaydigan aylantirish -420px 0px shaffof; ) .share a.bookmark (fon: url("http://test.. png ") takrorlanmaydigan aylantirish -462px 0px shaffof; ) .e-mailni almashish (fon: url("http://test..png") takrorlanmaydigan aylantirish -504px 0px shaffof; ) .share a.print ( fon: url("http://test..png") takrorlanmaydigan aylantirish -546px 0px shaffof; ) .share a.digg (fon: url("http://test..png") takrorlanmaydigan aylantirish -588px 0px shaffof; ) .share a.spring (fon: url("http://test..png") takrorlanmaydigan aylantirish -630px 0px shaffof; )
Kodni tushuntirish: class.share blokga yorqin ko'rinish beradi, teri tugmachasini kengaytiradi va bitta fonni o'rnatadi. Va uzoqroq teri sizning sinfingizga yuboriladi va teri bunday jo'natuvchiga yuboriladi, fonning kuchi orqali tugmaning ko'rinishi tayinlanadi. Ikonik tugmalar CSS spritlariga o'xshaydi va teri tugmasi kengligi va balandligi 40px va ular orasida 2px chetiga ega, bu sizga teri tugmasi uchun tasvirni aniq belgilash imkonini beradi. Birinchi tugma 0, ikkinchisi esa 42 va hokazo sifatida ko'rsatiladi. Qi kodida ma'no to'q sariq rang bilan belgilangan. Spritega jo'natish ham to'q sariq rangda ko'rinadi, uni spraytingizga boradigan yo'lda o'zgartirishingiz mumkin.
Buning uchun ijtimoiy tugmalar blokini yaratishning butun jarayoni yakunlandi. Siz jasorat bilan qayta ko'rib chiqishga o'tishingiz mumkin.
Va menda video darsim ham bor, unda o'qishning butun jarayoni to'g'ridan-to'g'ri ko'rsatiladi, qutb tugmachalarning robotiga ko'rsatiladi. Veb-saytlaringiz va bloglaringizda bunga hayron bo'ling.
Eksa hozir hammasi. Z qolganlarning boshlarini qo'yamiz. Muvaffaqiyat uchun barchangizga rahmat va yangi maqolalar va video darslarda omad tilayman.
