Shrift (WOFF) va oddiy vektorli animatsiya

Salom. Anchadan beri bootstrapni ishlataman. Oldinlari ICON ka qo’yaman desangiz rasmdan chaqirib ishlatardi. Oxirgilarida esa TTF/WOFF ya’ni shriftlar ishlatilishi boshlandi. Keyin qiziqdim. Qanday qilib chiqaryapti. Shriftdan ko’ra rasm yaxshimasmidi deb ham o’yladim. Keyin tushunsam shrift eng qulayi ekan.

Nimaga rasm emas shrift? — Tasavvur qiling, tahrirlash degan tugmaga qalam rasmini qo’ymoqchisiz. Sizning rasmingiz o’lchami 16×16 pixel bo’lsin. Shunday vasiyatlar bo’ladiki katta o’lchamdagu tugmani (button) ni yasashga to’g’ri keladi. Bunda siz 16×16 ni katta o’lchamda qo’ya olmaysiz. Xiralashib qoladi. Agar katta o’lchamdagini kichkina qilsangiz ham xunuklashib qoladi.

Endi keling shu rasm qo’yishni shrift yordamida ko’rsak. Shunda o’zingiz hammasiga tushunib yetasiz.

Biz bilamizki shriftlar vektor grafika hisoblanadi. Ya’ni qancha kattalashtirsangiz ham o’z sifati va shaklini saqlab qoladi. Ishonmasangiz notepad ni ochingda «A» harfini yozib o’lchamini 100px berib ko’ring. «A» harfi hech qanday sifatlari buzulmasdan kattalashadi.

Avvalo
www.high-logic.com/font-editor/fontcreator.html (bunisi shamollagan)
rutracker.org/forum/viewtopic.php?t=4625570 (bunisi 100% sog’lom 🙂 )
shulardan bittasini (ikkalasi ham bitta narsa) ko’chirib olib, ishlating. O’zingiz hohlagan nomda bitta shrift yarating va rasmdagini kiriting.

Rasmdagi qizil joyidagi 16 likdagi kodni eslab qoling. Sal pastroqda kerak bo’ladi. Katakka man oddiy aylana chizganman, siz hohlagan narsangizni chizsangiz bo’ladi.

Agar chizib bo’lgan bo’lsangiz, File -> Export -> WOFF qilib saqlab oling va man keltirgan HTML kodni ham bitta faylga saqlab va @font-face dagi «AnimationFont.woff» ga o’zingizning shrift nomingizni yozing. Agar HTML ni browserda ochib ko’rsangiz siz chizgan shakl chiqishi kerak.

	
		
		
		
	
	
		

			 
		
	

bu yerda {16-lik kod} yoki {10-lik kod} qator. Tanlangan shriftdagi {kod} ga mos keladigan belgini ko’rsat deganini anglatadi. Agar HTML kodga e’tibor bergan bo’lsangiz &#xF001 yozilgan demak F001 kodli belgini ko’rsatishi kerak. F001 kodli belgini o’zimiz chizganmiz shuning uchun ham o’zimiz chizgan belgini ko’rsatadi. 0xF001 (16) = 61441 (10)

Manimcha tushungingiz, agar 1 deb yozsangiz «1» raqami chiqadi. Nimaga ekanligini FontCreator dagi kodlardan qidirib ko’ring.

Endi bootstrap holatiga qaytamiz. Nimaga shriftdan foydalanilgan. Chunki siz chizgan «narsani» siz CSS yordamida hohlagancha o’lchamini o’zgartirishingiz yoki rangini o’zgartirishingiz mumkin. Ya’ni tugmadagi rasmning o’lchami rangini o’zgartirish uchun oddiy CSS yozib qo’ysak bas. Qolganini browserning o’zi qiladi. Siz shunda har xil rasmlarni yasashdan qutilasiz. Bitta rasmni xohlagan yerda xohlagan o’lchamda xohlagan rangda ishlatish imkoniyatini beradi.

Manimcha mavzuyimizning 90% ni yozib qo’ydim. Endi keling animatsina ko’rsak. Animatsiya qilish uchun faqat bitta joydagi belgini o’zgartirib turish kerak bo’ladi. Buning uchun JS dan foydalanamiz.

Manimcha kodga izoh qilishim shartmas.

	
		
		
		
		
		
	
	
		

			Qoshimcha tekstlar
		
	

Agar kodga e’tibor bergan bo’lsangiz ::before ni ham ko’rsatganman. Chunki CSS3 dagi «content» paramtrida shriftdagi belgini chaqirish uchun {16-lik kod} ko’rinishida yoziladi.

Natijani ko’rish

Savollar bo’lsa marhamat.