Tarkib
- 01. Rasmlarni sayt rang sxemalariga moslang
- 02. Tarmoqning oxirgi qatorida bo'sh joyni teng ravishda taqsimlang
- 03. Shadow box yordamida zarrachalar animatsiyasini yarating
- 04. O'zgarishlar bilan ko'pburchakni jonlantirish
- 05. Joylashtirish uchun master 'calc ()'
- 06. "Box-sizeing" yordamida quti modelini aql-idrok qiling.
- 07. CSS bilan vertikal ravishda markazlashtiring
- 08. Tegishli ob'ektlar bankini maqsad qilib qo'ying
- 09. Defisni boshqarish
- 10. Yozish rejimlaridan foydalaning
- 11. Gradientlardan noodatiy usullarda foydalaning
- 12. Havolalarda string-Matching-dan foydalaning
- 13. FOUTni o'zingiz uchun yarating
- 14. SVG-ni orqa fon uchun o'rganing
- 15. 3D o'tish bilan foydalanuvchilarga e'tibor qarating
- 16. CSS va matematikadan iborat doiraviy menyularni yarating
- 17. Hover-da havolalarni jonlantirish
- 18. Oddiy kadrli animatsiyalarni yarating
- 19. Soya bilan suzuvchi 3D effektlarni yarating
- 20. Elementlarni sahifasini ': target' yordamida yangilang.
- 21. Nozik animatsiyalar bilan fikr bildiring
- 22. "will-animate" ga tayyorlaning
- 23. Humanise kirish maydonlari
- 24. CSS animatsiyalarini pauza qiling va o'ynang
- 25. CSS o'zgaruvchilaridan foydalanmang
Har qanday texnologiya bilan biron bir vaqtda, deyarli hamma narsa amalga oshirilganligi hissi mavjud. Biror narsa endi shunchalik yangi va porloq bo'lmaganda, qiziqish susayadi va e'tibor keyingi katta narsaga qaratiladi. Bu tez-tez veb-sohada tez-tez uchraydigan bo'lib, u ilgari yoki kechroq uni dunyoviy hayotga qaytarib, texnologiyaning ma'lum bir jihati bilan hayajonlanishga moyil.
CSS birinchi marta paydo bo'lganida, u inqilobiy edi va vaqt o'tishi bilan u dizaynerlarga moslashuvchan, mahkam tayyorlangan va chiroyli veb-sahifa maketlarini yaratish imkoniyatini yaratdi. Kech kirgan bo'lsa-da, har xil joylardan CSS charchagan va ehtimol quyoshdagi vaqti ketgan degan takliflar bo'lgan.
CSS dunyosida hali ham juda ko'p hayajon va hayot borligini ko'rsatmoqchiman, bu siz hali o'rganmagan zamonaviy xususiyatlarda bo'ladimi yoki CSS-ning bir jihatini siz ilgari o'ylamagan tarzda ishlatish orqali.
Bu erda sohaning ba'zi eng yaxshi CSS mutaxassislaridan ba'zi maslahatlar mavjud.
(Izoh: Ushbu funktsiyadagi ba'zi texnikalar eng zamonaviy va barcha brauzerlarda qo'llab-quvvatlanmasligi mumkin. Har qanday ishni jonli efirga berishdan oldin sinchkovlik bilan sinab ko'ring va kamchiliklar mavjudligiga ishonch hosil qiling.)
01. Rasmlarni sayt rang sxemalariga moslang
Kristofer Shmitt, konferentsiya tashkilotchisi
Konferentsiyalar o'zlarining rang sxemalariga ega va ko'plab ma'ruzachilar bilan portretlarni boshqarish uchun ish jarayoni murakkab bo'lishi mumkin. Filtrlarni qo'lda qo'llash masshtabni kengaytirmaydi va sizga, masalan, fotoshopning aniq harakatiga kirishingizga ishonadi. Endi men yuqori darajadagi kulrang PNG-lardan foydalanaman va CSS filtrlari yordamida ohanglar qo'shaman. Bu menga har qanday portretni tadbir sxemasi bilan moslashtirishga, shuningdek rasmlarni bir nechta mavzular bo'yicha qayta ishlatishga imkon beradi. Menga har biri uchun yangi CSS qoidasi kerak. Namoyishni ko'ring.
02. Tarmoqning oxirgi qatorida bo'sh joyni teng ravishda taqsimlang
Stiven Xey, dizayner va muallif
Agar sizda katakchada ko'rsatiladigan noma'lum narsalar mavjud bo'lsa, siz oxirgi qatorni teng ravishda ajratish uchun Flexbox-dan foydalanishingiz mumkin. Shunday qilib, agar bitta element bo'lsa, u butun qatorni egallaydi; agar ikkita narsa bo'lsa, satr ikkiga bo'linadi va hokazo. Namoyishni ko'ring.
03. Shadow box yordamida zarrachalar animatsiyasini yarating
Ana Tudor, koder va matematik fanatik
Aralashtirish orqali soya ba'zi matematikalar va Sass yordamida siz 2 o'lchovli egri chiziqlarni chizishingiz, 3D harakatga taqlid qilishingiz va zararli zarracha animatsiyalarni yaratishingiz mumkin, chunki hamma tuval uchun yanglishadi! Demo va boshqasini ko'ring.
04. O'zgarishlar bilan ko'pburchakni jonlantirish
Ana Tudor, koder va matematik fanatik
Ehtimol siz chegaralar bilan yaratilgan toza CSS ko'pburchaklarini ko'rgansiz, ammo bizda juda kuchli vosita mavjud o'zgartirish mulk. O'rnatilgan elementlarda zanjirlarni yaratish va o'zgartirishlar bizga tasvir fonlari yoki chegaralari va shaffof ichki qismlari bilan murakkab ko'pburchaklarni yaratishga imkon beradi. 3D formatidagi transformatsiyalar yordamida biz ushbu 2 o'lchovli shakllarni ko'p qirrali shaklga birlashtira olamiz va qattiq jismlarni birlashtiramiz, ochamiz, portlaymiz yoki WebGL bilan osonlikcha adashtiramiz. Namoyishni ko'ring.
05. Joylashtirish uchun master 'calc ()'
Ana Tudor, koder va matematik fanatik
sevgandim kaltsiy () men uni kashf etgan paytdan boshlab. Bu chekkalarni, plomba yoki o'lchamlarni ramkalash uchun foydalidir va orqa fonlarni, gradientlarni yoki transformatsiyalarni joylashtirish yoki o'lchash uchun ishlatilganda va xuddi o'sha eski birliklar bilan emas, balki yangi va ajoyib ko'rinish oynalari bilan birlashtirilganda qutqaruvchi bo'lishi mumkin.
06. "Box-sizeing" yordamida quti modelini aql-idrok qiling.
Sawyer Hollenshead, Oak Studios kompaniyasi va dizayner
Foydalanish qutini o'lchamlari aqlingizni saqlab qolish uchun. Usiz, belgilangan kengligi 250px va 25px bo'lgan plomba elementi 300px kenglikda birlashib, aralashtirish piksellari va foizlarini qiyinlashtiradi. Bilan quti o'lchamlari:chegara qutisi o'rniga chegaralar va to'ldirish belgilangan kenglik ichida joylashtiriladi.
07. CSS bilan vertikal ravishda markazlashtiring
Paravel asoschisi Trent Uolton
Tarixiy nuqtai nazardan, CSS-ga vertikal ravishda markazlashtirish juda qiyin bo'lgan, masalan, siz vertikal ravishda hizalamoqchi bo'lgan qo'shni matnli rasmingiz bo'lsa. Bosish va la'natlash o'rniga, moslashuvchanlik muammolarini engish uchun Flexbox-dan foydalaning. Namoyishni ko'ring.
08. Tegishli ob'ektlar bankini maqsad qilib qo'ying
Jonathan Smiley, Zurb-ning hamkori va dizayni bo'yicha etakchi
CSS liniyasi vaznini har bir sinfga umumiy atributlarni biriktirish o'rniga, tegishli ob'ektlarning katta bankini nishonga olish uchun sinf nomlari bo'yicha taxminiy atributlar tanlovchilaridan foydalanib qirqing. Masalan ... [class * = "- block-grid-"] {} ... o'xshash narsalarga yo'naltiriladi: .small-block-grid-3 .large-block-grid-5
09. Defisni boshqarish
Savid Storey, ochiq veb-advokat
Difenatsiya bosma nashrda qabul qilinadi va ba'zi ishlab chiquvchilar tire mulk onlayn, ammo ozgina nafis nazoratni ta'minlaydigan boshqa xususiyatlardan xabardor. Agar siz ehtiyot bo'lmasangiz, siz defisli narvonlarni olasiz, bu erda bir nechta satrlarda defislar ishlatiladi. Bosh barmoqning umumiy qoidasi ketma-ket ikkitadan ko'p emas, uni ishlatishingiz mumkin chiziq chegaralari. Shuningdek, defis-limit-belgilar defis qo'yiladigan so'zning minimal uzunligini hamda defis tanaffusidan oldin va keyin minimal belgilar sonini belgilashga imkon beradi.
10. Yozish rejimlaridan foydalaning
Devid Stori, ochiq veb-advokat
Yozish rejimlari matn oqimining yo'nalishini aniqlashga imkon beradi. Ba'zi bir Sharqiy Osiyo matni vertikal ravishda yozilgan, chiziqlar o'ngdan chapga o'sib boradi yozuv rejimi: vertikal-rl (tb-rl IE da). Vertikal matn Evropaning yozuv tizimlarida haqiqatan ham qo'llanilmaydi, ammo gorizontal bo'shliqni cheklaganingizda jadval sarlavhalari uchun qulay bo'lishi mumkin.
11. Gradientlardan noodatiy usullarda foydalaning
Rut Jon, dizayner
Fon gradiyentlari chegaralar va o'qlar bilan ishlatilganda juda yaxshi ko'rinishi mumkin. Men o'z blogimda ham foydalanayapman, ham qo'lda takrorlamaslik uchun qayta ishlatilgan kod bilan mixinni chaqirishim mumkin. Ajoyib aqldan ozmang, chunki gradientlar og'ir protsessorga ega bo'lishi mumkin. Ro'yxat o'qlari uchun SCSS mixin:
@mixin gradedBullet ($ color) {background-image: lineer-gradient (chap, ochish ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color , 15%) 30px, shaffof 31px); }
12. Havolalarda string-Matching-dan foydalaning
Rut Jon, dizayner
O'z blogimda men ijtimoiy piktogramma uslubini yaratish uchun CSS atributlari selektorlarini satrlarni moslashtirish bilan ishlatdim. Ular mening blogimda ba'zan matnli, ba'zida matnsiz, lekin har doim belgi bilan paydo bo'ladi. To'g'ri ijtimoiy belgi bilan to'g'ri havolani stilizatsiya qilish uchun men href langar elementining atributi. Men foydalanaman *= shunday href langar elementida faqat men ko'rsatgan qatorni o'z ichiga olishi kerak.
/ * barcha ijtimoiy havolalar uchun * / .social a: oldin {displey: inline-block; to'ldirish-o'ng: 30px; font-family: ’FontAwesome’;} / * Har bir aniq havola * / .social a [href * = "twitter"]: oldin {content: " f099"; color: # 52ae9f;} .social a [href * = "github"]: oldin {content: " f09b"; color: # 5f2e44;} .social a [href * = "feed"]: oldin {content: " f09e"; rang: # b47742;}
13. FOUTni o'zingiz uchun yarating
Jeyson Pikal, H + W dizayni bo'yicha direktor
Veb-brauzer bling-ni ko'rsatolmasa ham, u tarkibni taqdim etishi kerak bo'lgan asosda qurilgan. Sekin yuklanadigan veb-shriftlar ko'ngilsizliklarni keltirib chiqarishi mumkin, FOUT (O'chirilmagan matnning chirog'i) navigatsiya va shriftlar yuklab olinayotganda matnni qayta tiklash. Google va Typekit javob beradi: veb-shrift yuklagichi. Shriftlarni yuklash holatiga asoslanib, sahifalarga sinflarni kiritish orqali siz qayta oqimni minimal darajada ushlab turish uchun o'sha sinflar bilan kamchiliklarni shakllantirishingiz, shuningdek WebKitning "ko'rinmas tarkib" sindromini yo'q qilishingiz mumkin. Namoyishni ko'ring.
14. SVG-ni orqa fon uchun o'rganing
Emil Byorklund, veb-dasturchi dasturidan foydalaning
Hozirda SVG-ni qo'llab-quvvatlamaydigan yagona brauzer IE8 va undan pasti va Android 2 WebKit hisoblanadi, shuning uchun CSS-da fon uchun SVG-dan foydalanish, ayniqsa Grunticon kabi PNG-ning echimini topish bilan birga, amalga oshiriladi. SVG-ni CSS-da yaratish mumkin va biz SVG-dan CSS xususiyatlarini (filtrlarni!) Qiziqarli qon ketishi mavjud, biz ularni HTML-ga nisbatan o'ynay olamiz.
15. 3D o'tish bilan foydalanuvchilarga e'tibor qarating
Emil Byorklund, veb-dasturchi dasturidan foydalaning
3D transformatsiyalaridan foydalanish va z o'lchovi foydalanuvchi interfeyslarida haqiqatan ham foydali bo'lishi mumkin, ayniqsa tarkibni yashirish / ko'rsatish yoki qulash / kengaytirish uchun. Bunday vaziyatlarda 2 o'lchovli o'tish imkoniyatiga ega bo'lish yoki umuman o'tishsiz o'tish juda oson. Bu ozgina progressiv takomillashtirish uzoq yo'lni bosib o'tishi mumkin bo'lgan joy.
16. CSS va matematikadan iborat doiraviy menyularni yarating
Sara Soueidan, frontend dasturchisi
Dairesel menyular mobil ilovalarda mashhur bo'lib, oddiy dumaloq menyu yaratish uchun siz CSS formatidagi o'zgartirishlar va o'tishlardan foydalanishingiz mumkin. Ushbu menyu yuqoriga yoki pastga qarab ochiladigan menyu yaratish uchun o'zgartirilishi va sozlanishi mumkin. CSS-da elementni diagonal tarjima qilishning to'g'ridan-to'g'ri usuli yo'q, lekin siz elementlarni joylashtirmoqchi bo'lgan aylana radiusining qiymatidan foydalanishingiz va gorizontal va vertikal tarjima qiymatlarini hisoblash uchun oddiy matematik qoidalarni qo'llashingiz mumkin. translateX () va translateY () funktsiyalari. Shunday qilib, siz a diagonal menyu elementlarini doiradagi to'g'ri pozitsiyalarga o'tkazish uchun tarjima. Menyuni yopadigan / ochadigan chertish hodisasi JavaScript-ni ishlatishi mumkin yoki siz uni bir qadam oldinga olib borishingiz va CSS-ning tasdiqlash qutisi yordamida faqat CSS menyusiga ega bo'lishingiz mumkin. Mening demomda men JavaScript-ni va HTML5 classList API-dan foydalanaman, bu barcha brauzerlarda qo'llab-quvvatlanmaydi, shuning uchun demoni ishlash uchun zamonaviy brauzerda ko'rishingiz yoki classList API-ning o'rniga jQuery kodini o'chirib qo'yishingiz kerak bo'ladi. kod.
Namoyish va to'liq qo'llanmani ko'ring. CSS Checkbox-ni buzish misoli.
17. Hover-da havolalarni jonlantirish
Pol Lloyd, Guardian o'zaro ta'sirlar dizayneri
Hover holatlariga harakatni amalga oshirish yoki muhim ma'lumotlarni taqdim etish uchun ishonmaslik kerak, ammo siz hali ham sichqonchaga asoslangan foydalanuvchilar uchun interfeyslarni yaxshilashingiz mumkin. 24ways.org saytida avvalgi / keyingi navigatsiyadagi havolalar ustiga siljiganingizda maqola sarlavhalarini ochib beramiz. Bunga yaratish orqali erishildi :: keyin a qiymatidan kelib chiqadigan tarkibni o'z ichiga olgan psevdoelement ma'lumotlar atributi, uni hover-da ko'rinishga siljitish uchun CSS-ga o'tish qo'llaniladi. Namoyishni ko'ring.
18. Oddiy kadrli animatsiyalarni yarating
Pol Lloyd, Guardian o'zaro ta'sirlar dizayneri
24ways.org saytida biz hoverda ochilgan xulosalarga animatsion burchakli qopqoqlarni qo'shdik. Bu birlashtirib amalga oshirildi @keyframes Sprite-ga asoslangan animatsiyaga erishish uchun fon rasmining holatini o'zgartirib, animatsiya xususiyati bilan qoidalar. Hiyla - animatsiya sprite-dagi kadrlar sonini qadamlar () qiymat. Namoyishni ko'ring.
19. Soya bilan suzuvchi 3D effektlarni yarating
Ketrin Farman, Happy Cog dasturchisi
Yaqinda amalga oshirilgan loyiha uchun suzuvchi mahsulot fotosurati kerak edi, uning ostida dumaloq soya paydo bo'lib, ekrandan chiqib ketishning 3D effekti yaratildi. Soya bir nechta CSS3 xususiyatlaridan foydalanadi: chegara radiusi alfa shaffofligi va soya. U mahsulot tarmoqlari, uy sahifasi qahramonidagi tasvirlarni namoyish qilish yoki skuomorfik egilgan har qanday injiq dizayn uchun yaxshi ishlaydi. Namoyishni ko'ring.
20. Elementlarni sahifasini ': target' yordamida yangilang.
Simon Madine, HeRe-ning katta veb-ishlab chiquvchisi
CSS odatdagi ma'noda dasturlash tili emas, lekin siz hali ham JavaScript-ga qaytmasdan aqlli narsalarni qilishingiz mumkin. Masalan, : maqsad pseudo-class bosilgan havolaning maqsadi bo'lgan elementlarga nisbatan qo'llaniladi.
Siz bu bilan sahifaning holatini aniqlash, ko'plab elementlarni o'z ichiga olgan ota-onani nishonlash uchun foydalanishingiz mumkin va sizning havolalaringiz bir marta bosish orqali barcha bolalarning ko'rinishini va tartibini boshqarish vositasiga aylanadi. Namoyishni ko'ring.
21. Nozik animatsiyalar bilan fikr bildiring
Nil Reniker, dizayner va ishlab chiquvchi
CSS psevdoelementlari :: oldin va :: keyin CSS o'tishlari bilan bir qatorda sichqoncha foydalanuvchilariga nozik mulohazalarni taqdim etadigan yoqimli animatsiyani yoqishi mumkin. Masalan, psevdoelement ichida CSS o'qini yarating, psevdoelementga o'tishni qo'llang (o'tish: barcha qulayliklar .15s;) -ga o'ting va keyin-ga oddiy tartib o'zgarishini qo'shing : hover psevdo-sinf (masalan, o'zgartirish kiritish) margin-top). Namoyishni ko'ring.
22. "will-animate" ga tayyorlaning
Pol Lyuis, kodlovchi va Chrome dasturchilar bilan aloqalar jamoasi a'zosi
Agar siz foydalangan bo'lsangiz -webkit-transform: translateZ (0) sehrli ravishda sahifalaringizni tezroq qilish uchun ko'plab brauzerlarda shunchaki yangi kompozitor qatlamini yaratadigan xaker o'rnini bosadi jonlantiradi. Yaqinda siz element haqida nimani o'zgartirishni rejalashtirganingizni (uning pozitsiyasi, hajmi, tarkibi yoki aylantirish holati) aytib bera olasiz va brauzer qopqoq ostida to'g'ri optimallashni qo'llaydi. Qo'shimcha ma'lumot.
23. Humanise kirish maydonlari
Yaron Schoen, Odamlar uchun yaratilgan
Foydalanuvchilar o'zaro ta'sir qiladigan elementlarga tezkor animatsiyalar qo'shilishi interfeysni kamroq hisoblashga olib keladi. Kirish maydonlari bilan o'tish qo'ng'irog'i ichida, shuning uchun har doim diqqatni qaratganingizda yoki unga e'tiboringizni qaratganingizda, silliq o'tish mavjud.
kiritish, textarea {-moz-o'tish: barchasi 0,2 soniyani osonlashtiradi; -o o'tish: barcha 0.2s osonlashadi; -webkit-o'tish: barcha 0,2 soniyalarni osonlashtirish; -ms-o'tish: barcha 0.2 soniyalarni osonlashtirish; o'tish: barcha 0,2 soniyalarni osonlashtirish;
24. CSS animatsiyalarini pauza qiling va o'ynang
Val Xed, dizayner va maslahatchi
Siz CSS animatsiyasini o'zgartirib, uni "pauza qilishingiz" va "o'ynashingiz" mumkin animatsiya-o'yin holati mulk. Uni "pauza" ga o'rnatish animatsiyani o'zgartirguncha to'xtatadi animatsiya-o'yin holati ga yugurish, masalan, hoverda.
.animating_thing {animatsiya: spin 10s chiziqli cheksiz; animatsiya-o'yin holati: pauza qilingan; }. animating_thing: hover {animation-play-state: running; ishlaydigan; }
25. CSS o'zgaruvchilaridan foydalanmang
Deyv Shea, dizayner va muallif
Nihoyat, biz CSS o'zgaruvchilarini olamiz, masalan, rangning hex qiymatini bir marta yozish va uni jadvalga havola qilish uchun. Ammo rasmiy spetsifik so'zma-so'z, sintaktik murakkablikni qo'shadi, funktsional imkoniyatlarni taklif qiladi va aksariyat brauzerlar tomonidan qo'llab-quvvatlanmaydi. Sass keng ommalashgan va maxsus funktsiyalar va if / else bayonotlari kabi kuchli dasturlash mantig'iga ega o'zgaruvchilardan tashqarida bo'lgan davrda rasmiy ma'lumot juda qisqa.
Umid qilamanki, ushbu eng yaxshi maslahatlar sizning CSS haqidagi qarashlaringizni va veb-ishlab chiqish va dizayndagi uning imkoniyatlarini yangiladi. Har qanday ishni jonli efirga qo'yishdan oldin brauzerni qo'llab-quvvatlashni tekshirish uchun ushbu usullardan birini sinab ko'rishni unutmang.
So'zlar: Kreyg Grannel Rasm: Mayk Chipperfild
Ushbu maqola dastlab net jurnalining 253-sonida paydo bo'lgan.
