Мазмұны
- 01. Суреттерді сайттың түс схемаларына сәйкес келтіріңіз
- 02. Тордың соңғы қатарында кеңістікті бірдей бөліңіз
- 03. Бөлшек анимацияларын көлеңке көлеңкесімен жасаңыз
- 04. Түрлендірулермен полиэдраны жандандыру
- 05. Позицияға арналған Master 'calc () ’
- 06. Қораптың моделін 'қораптың өлшемімен' ақылға қонымды етіп жасаңыз
- 07. CSS-ті тік орталықтандыру
- 08. Байланысты объектілердің банкі
- 09. Басқару дефисі
- 10. Жазу режимдерін пайдаланыңыз
- 11. Градиенттерді ерекше тәсілдермен қолданыңыз
- 12. Сілтемелерде string-Matching қолданыңыз
- 13. FOUT-ты өзіңіз үшін жұмыс жасаңыз
- 14. Өңдер үшін SVG зерттеңіз
- 15. 3D өткелдері бар пайдаланушыларға фокустау
- 16. CSS және математикамен дөңгелек мәзірлер жасаңыз
- 17. Қозғалыс үстіндегі сілтемелерді тірілту
- 18. Қарапайым кадрлық анимацияларды жасаңыз
- 19. Көлеңкелі қалқымалы 3D эффекттерін жасаңыз
- 20. eleMents парағын ‘: target’ көмегімен жаңартыңыз
- 21. Жіңішке анимациялармен кері байланыс жасаңыз
- 22. 'will-animate' дайындаңыз
- 23. Гуманизацияның енгізу өрістері
- 24. CSS анимацияларын уақытша тоқтату және ойнату
- 25. CSS айнымалыларын пайдаланбаңыз
Кез-келген технологиямен белгілі бір уақытта, кез-келген нәрсе жасалуы мүмкін деген сезім бар. Бірдеңе жаңа әрі жылтыр болмай қалса, қызығушылық азайып, келесі үлкен нәрсеге назар аударылады. Мұндай жағдай веб-индустрияда жиі кездеседі, ол бұрын-соңды технологияның белгілі бір аспектісімен қатты қобалжуға бейім, оны ертеде ме, кеш пе, оны күнделікті өмірге жібереді.
CSS алғаш пайда болған кезде ол революциялық болды және уақыт өте келе дизайнерлерге икемді, тығыз және әдемі веб-беттің макеттерін жасауға мүмкіндік берді. Кеш болғанымен, әр түрлі топтардан CSS-тің шаршап қалғандығы, мүмкін оның уақыты күн сәулесімен кеткені туралы ұсыныстар болды.
CSS әлемінде сіз әлі зерттемеген мүмкін қасиеттеріңіз болсын немесе CSS аспектісін сіз бұрын ойламаған әдіспен қолдану арқылы әлі де көптеген толқулар мен өмірлер бар екенін көрсеткім келеді.
Мұнда саланың кейбір CSS сарапшыларының бірнеше кеңестері берілген.
(Ескерту: бұл мүмкіндіктің кейбір әдістері озық болып табылады және барлық шолғыштарда толық қолдау көрсетілмеуі мүмкін. Кез-келген жұмысты тірі етпес бұрын мұқият тексеріп, кемшіліктер бар екеніне көз жеткізіңіз.)
01. Суреттерді сайттың түс схемаларына сәйкес келтіріңіз
Кристофер Шмитт, конференция ұйымдастырушысы
Конференциялардың өзіндік түс схемалары бар және көптеген спикерлермен бірге портреттерді басқаруға арналған жұмыс процесі күрделі болуы мүмкін. Сүзгілерді қолмен қолдану масштабтамайды және сізге, мысалы, белгілі бір Photoshop әрекетіне қол жеткізе алатындығыңызға негізделген. Мен қазір жоғары сұрғылт PNG-ді қолданамын және CSS сүзгілері арқылы тондарды қосамын. Бұл маған кез-келген портретті оқиғаның схемасымен сәйкестендіруге, сонымен қатар кескіндерді бірнеше тақырып бойынша қайта пайдалануға мүмкіндік береді. Маған әрқайсысы үшін жаңа CSS ережесі қажет. Демонстрацияны қараңыз.
02. Тордың соңғы қатарында кеңістікті бірдей бөліңіз
Стивен Хэй, дизайнер және автор
Егер сізде торда көрсетілетін элементтер саны белгісіз болса, Flexbox-ты соңғы жолды біркелкі бөлу үшін пайдалануға болады. Егер бір ғана элемент болса, ол бүкіл жолды алады; егер екі элемент болса, қатар екіге бөлінеді және т.б. Демонстрацияны қараңыз.
03. Бөлшек анимацияларын көлеңке көлеңкесімен жасаңыз
Ана Тюдор, фанатик және математик
Араластыру арқылы көлеңке кейбір математикалар мен Sass көмегімен сіз 2D қисықтарын графикке түсіре аласыз, 3D қозғалысын еліктей аласыз және әркімнің кенеп үшін қателесетін бөлшектері үшін анимациялық анимациялар жасай аласыз! Демонстрацияны және басқасын қараңыз.
04. Түрлендірулермен полиэдраны жандандыру
Ана Тюдор, фанер және математик
Сіз шекарамен жасалған таза CSS көпбұрыштарын көрген шығарсыз, бірақ бізде әлдеқайда күшті құрал бар түрлендіру мүлік. Кірістірілген элементтерге трансформацияларды тізбектеу және қолдану бізге кескін фондары немесе шекаралары және мөлдір интерьерлері бар күрделі көпбұрыштар жасауға мүмкіндік береді. Біз 3D түрлендірулерін қолдана отырып, осы 2-өлшемді пішіндерді полиэдраларға біріктіре аламыз және қатты бөлшектерді WebGL-мен оңай жаңылысатындай етіп біріктіріп, жайып, жарып немесе рекомбинациялай аламыз. Демонстрацияны қараңыз.
05. Позицияға арналған Master 'calc () ’
Ана Тюдор, фанер және математик
Мен жақсы көрдім кальк () мен оны ашқан сәттен бастап. Бұл шеттерді, төсеуді немесе өлшемдерді үйрету үшін пайдалы және фондарды, градиенттерді немесе түрлендірулерді орналастыру немесе мөлшерлеу үшін қолданылған кезде және сол ескі қондырғылармен ғана емес, сонымен қатар жаңа және салқын көрініс терезелерімен үйлескенде құтқарушы бола алады.
06. Қораптың моделін 'қораптың өлшемімен' ақылға қонымды етіп жасаңыз
Сойер Холленсхед, Oak студиясының маманы және дизайнері
Пайдаланыңыз қораптың өлшемі есіңді сақтау үшін. Онсыз, ені 250px және 25px толтырылған элемент ені 300px дейін біріктіріліп, араластыру пиксельдері мен пайыздарын қатал етеді. Бірге қорап өлшемі:қорап жиектер мен толтырулар оның орнына белгіленген енге орналастырылады.
07. CSS-ті тік орталықтандыру
Трент Уолтон, Paravel негізін қалаушы
Тарихи тұрғыдан CSS-ті тігінен орталықтандыру өте қиын болды, мысалы, егер сізде тігінен тураластырғыңыз келетін көршілес мәтіні бар сурет болса. Тегістеу мен қарғаудың орнына түзету қиындықтарымен күресу үшін Flexbox пайдаланыңыз. Демонстрацияны қараңыз.
08. Байланысты объектілердің банкі
Джонатан Смайли, Zurb серіктесі және дизайн жетекшісі
Әрбір сыныпқа жалпы атрибуттарды тіркеуден гөрі, байланысты объектілердің үлкен банкіне бағыттау үшін, класс атауларындағы атрибуттарды таңдау құралдары арқылы CSS сызығының салмағын қырыңыз. Мысалы ... [class * = «- block-grid-»] {} ... ұнайды: .small-block-grid-3 .large-block-grid-5.
09. Басқару дефисі
Savid Storey, ашық адвокат
Дефисирование баспа түрінде қабылданады, ал кейбір әзірлеушілер оны пайдаланады дефис Интернет-меншік, бірақ аз ғана бақылауды қамтамасыз ететін басқа қасиеттер туралы аз біледі. Егер сіз абай болмасаңыз, сызық сызықтары бойынша сызықшалар қолданылатын сызықша баспалдақтарын аласыз. Жалпы ереже - қатарынан екеуден көп емес, оны сіз басқара аласыз сызық сызықтары. Сондай-ақ, сызықшалар сызықшаға қойылатын сөздің минималды ұзындығын және дефис үзілісіне дейінгі және кейінгі таңбалардың минималды санын көрсетуге мүмкіндік береді.
10. Жазу режимдерін пайдаланыңыз
Дэвид Стори, веб-адвокат
Жазу режимдері мәтін ағымының бағытын анықтауға мүмкіндік береді. Шығыс Азияның кейбір мәтіндері тігінен жазылған, жолдар оңнан солға қарай өсіп, көрсетілген жазу режимі: тік-rl (tb-rl ЖК-де). Тік мәтін шынымен де еуропалық жазу жүйелерінде қолданылмайды, бірақ көлденең кеңістікті шектеген кезде кесте тақырыптары үшін ыңғайлы болуы мүмкін.
11. Градиенттерді ерекше тәсілдермен қолданыңыз
Рут Джон, дизайнер
Фондық градиенттер шекаралармен және маркерлермен қолданылған кезде өте жақсы көрінуі мүмкін. Мен өзімнің блогымда да қолданамын, сонымен қатар қолмен қайталамас үшін қайта қолданылған кодпен миксин шақыра аламын. Супер ақылға берілмеңіз, өйткені градиенттер процессорға ауыр тиеді. Тізім оқтары үшін SCSS миксині:
@mixin gradedBullet ($ color) {өң-сурет: сызықтық-градиент (сол жақта, ашық ($ color, 15%) 10px, $ color 11px, $ color 20px, darken ($ color, 15%) 21px, darken ($ color) , 15%) 30px, мөлдір 31px); }
12. Сілтемелерде string-Matching қолданыңыз
Рут Джон, дизайнер
Блогымда мен әлеуметтік белгішелерді стильдеу үшін жолдарды сәйкестендіретін CSS атрибуттары селекторларын қолдандым. Олар менің блогымда кейде мәтінмен, кейде мәтінсіз, бірақ әрқашан белгішемен бірге пайда болады. Қажетті сілтемені дұрыс әлеуметтік белгішемен стильдеу үшін мен href якорь элементінің атрибуты. Мен қолданамын *= сондықтан href якорь элементінде мен көрсеткен жолды ғана қамтуы керек.
/ * барлық әлеуметтік сілтемелер үшін * / .social a: алдында {дисплей: inline-block; оң жақ төсеу: 30px; font-family: ’FontAwesome’;} / * Әрбір нақты сілтеме * / .social a [href * = «twitter»]: {content: « f099» дейін; color: # 52ae9f;} .social a [href * = «github»]: алдында {content: « f09b»; color: # 5f2e44;} .social a [href * = «feed»]: алдында {content: « f09e»; түс: # b47742;}
13. FOUT-ты өзіңіз үшін жұмыс жасаңыз
Джейсон Пементал, H + W дизайнының директоры
Веб-сайт браузерде блингті көрсете алмаса да, мазмұнды қамтуы керек. Баяу жүктелетін веб-қаріптер көңілге қаяу түсіруі мүмкін, FOUT (пішімделмеген мәтіннің жарқылы) навигация мен қаріптерді жүктеу кезінде мәтін қайта жаңарады. Google және Typekit жауап береді: веб-қаріп жүктеуші. Қаріптердің жүктелу күйіне негізделген беттерді сыныпқа енгізу арқылы сіз қайтадан ағынды азайту үшін кемшіліктерді стильдермен түзете аласыз, сонымен қатар WebKit-тің «көрінбейтін мазмұны» синдромын жоя аласыз. Демонстрацияны қараңыз.
14. Өңдер үшін SVG зерттеңіз
Эмиль Бьорклунд, веб-әзірлеушіні пайдаланыңыз
Қазір SVG қолдауы жоқ жалғыз браузер IE8 және одан төмен және Android 2 WebKit болып табылады, сондықтан SVG-ді CSS-тегі фондар үшін қолдану, әсіресе Grunticon сияқты PNG резервтік шешімімен бірге мүмкін. SVG-ді CSS-пен безендіруге болады және SVG-ден CSS-тің қызықты қасиеттері (сүзгілер!), Біз оларды HTML-ге қолданып ойнай аламыз.
15. 3D өткелдері бар пайдаланушыларға фокустау
Эмиль Бьорклунд, веб-әзірлеушіні пайдаланыңыз
3D түрлендірулерін пайдалану және z өлшемі пайдаланушы интерфейстерінде шынымен пайдалы болуы мүмкін, атап айтқанда мазмұнды жасыру / көрсету немесе құлату / кеңейту үшін. Сондай-ақ, мұндай жағдайларда 2-деңгейлі ауысуға немесе мүлдем ауыспауға мүмкіндік беру өте оңай. Бұл сәл прогрессивті жақсарту ұзақ уақытқа созылуы мүмкін аймақ.
16. CSS және математикамен дөңгелек мәзірлер жасаңыз
Сара Суйейдан, фронталды әзірлеуші
Дөңгелек мәзірлер мобильді қосымшаларда танымал, және сіз қарапайым айналмалы мәзір жасау үшін CSS түрлендірулер мен ауысуларын қолдана аласыз. Бұл мәзірді жоғары немесе төмен ашылатын мәзір жасау үшін өзгертуге және өзгертуге болады. CSS-те элементті диагональмен аударудың тікелей әдісі жоқ, бірақ сіз элементтерді орналастырғыңыз келетін шеңбердің радиусының мәнін пайдалана аласыз және көлденең және тік аударма мәндерін есептеу үшін қарапайым математикалық ережені қолдана аласыз. translateX () және translateY () функциялары. Осылайша сіз а диагональ мәзір элементтерін шеңбердің дұрыс орындарына жылжыту үшін аударма. Мәзірді жабатын / ашатын нұқу оқиғасы JavaScript көмегімен өңделуі мүмкін немесе сіз оны бір қадам алға алып, CSS құсбелгісін пайдаланып, тек CSS мәзіріне ие бола аласыз. Менің демонстрацияларымда мен JavaScript пен HTML5 classList API-ді қолданамын, ол барлық шолғыштарда қолданыла бермейді, сондықтан оны демонстрацияны жұмыс жасау үшін заманауи шолғышта қарау керек немесе classList API пайдалану орнына jQuery кодын алып тастау керек код.
Демо және толық оқулықты қараңыз. CSS құсбелгісін бұзу мысалы.
17. Қозғалыс үстіндегі сілтемелерді тірілту
Пол Ллойд, Guardian өзара әрекеттесу дизайнері
Әрекет ету немесе маңызды ақпарат беру үшін апару күйлеріне сенуге болмайды, бірақ сіз тінтуірге негізделген пайдаланушылар үшін интерфейстерді жақсартуға болады. 24ways.org сайтында алдыңғы / келесі навигациядағы сілтемелердің үстінен жылжытқан кезде біз мақалалардың атауларын ашамыз. Бұл a құру арқылы қол жеткізілді :: кейін а-дан алынған генерацияланған мазмұнды қамтитын жалған элемент деректер- төлсипат, оны CSS-ті көшіру кезінде оны көріністе сырғыту үшін қолдану керек. Демонстрацияны қараңыз.
18. Қарапайым кадрлық анимацияларды жасаңыз
Пол Ллойд, Guardian өзара әрекеттесу дизайнері
24ways.org сайтында біз тіркеуге ашылған анимациялық бұрыштық жапқыштарды қысқаша мазмұнға қостық. Бұл біріктіру арқылы жасалды @keyframes спрайтқа негізделген анимацияға қол жеткізу үшін фондық суреттің орнын өзгерте отырып, анимация қасиетімен ереже. Айла-шарғы - анимациялық спрайттағы кадрлар санын жариялау қадамдар () мәні. Демонстрацияны қараңыз.
19. Көлеңкелі қалқымалы 3D эффекттерін жасаңыз
Кэтрин Фарман, Бақытты Cog әзірлеушісі
Жақында жасалған жоба үшін экраннан қалқып шығудың 3D эффектісін құрайтын дөңгелек көлеңкесі бар қалқымалы өнім фотосуреті қажет болды. Көлеңкеде бірнеше CSS3 мүмкіндіктері қолданылады: шекара радиусы альфа мөлдірлігі және көлеңке. Ол өнімнің торларына, үйдегі кейіпкердің суреттерін немесе скевоморфты бүгілген кез-келген қызық дизайн үшін жақсы жұмыс істейді. Демонстрацияны қараңыз.
20. eleMents парағын ‘: target’ көмегімен жаңартыңыз
Simon Madine, HeRe аға веб-әзірлеушісі
CSS әдеттегідей бағдарламалау тілі емес, бірақ сіз JavaScript-ке оралмай ақылды нәрселер жасай аласыз. Мысалы, : мақсат жалған сынып басылған сілтеменің нысаны болып табылатын элементтерге қолданылады.
Сіз мұны парақтың күйін анықтау үшін, көптеген элементтері бар ата-аналарға бағыттау үшін қолдана аласыз және сіздің сілтемелеріңіз барлық балалардың сыртқы түрін және орналасуын бір басу арқылы басқарудың құралы болады. Демонстрацияны қараңыз.
21. Жіңішке анимациялармен кері байланыс жасаңыз
Нил Реникер, дизайнер және әзірлеуші
CSS жалған элементтері :: бұрын және :: кейін CSS-тің ауысуларымен қатар, тышқан пайдаланушыларына нәзік кері байланыс беретін жағымды анимацияны қосуға болады. Мысалы, псевдоэлемент ішінде CSS көрсеткіні құрыңыз, псевдоэлементке көшуді қолданыңыз (ауысу: барлық жеңілдік .15s;), содан кейін қарапайым орналасуын өзгертіңіз : hover жалған сынып (түзету сияқты) жоғарғы жиек). Демонстрацияны қараңыз.
22. 'will-animate' дайындаңыз
Пол Льюис, кодер және Chrome әзірлеушілерімен қатынастар тобының мүшесі
Егер сіз қолданған болсаңыз -webkit-өзгерту: translateZ (0) сіздің беттеріңізді сиқырлы түрде жылдамдату үшін көптеген браузерлерде жай композитор қабатын жасайтын хак ауыстырылады ерік береді. Көп ұзамай, сіз элемент туралы өзгертетін нәрсені (оның орны, өлшемі, мазмұны немесе айналдыру орны) шолушыға айта аласыз және браузер капоттың астына оңтайландыруды қолданады. Көбірек ақпарат.
23. Гуманизацияның енгізу өрістері
Yaron Schoen, Адам үшін жасалған
Пайдаланушылар өзара әрекеттесетін элементтерге жылдам анимацияларды қосу интерфейсті есептеуді аз сезінеді. Енгізу өрістерімен а. Қойып көріңіз өтпелі қоңырау ішінде, сондықтан сіз оны шоғырландырған немесе шоғырландырған кезде тегіс ауысу болады.
енгізу, мәтіндік бөлім {-moz-ауысу: барлық 0,2с жеңілдету; - ауысу: барлық 0,2-лерді жеңілдету; -webkit-ауысу: барлық 0.2s жеңілдетіледі; -ms-ауысу: барлық 0.2s жеңілдетіледі; ауысу: барлық 0.2s жеңілдету;
24. CSS анимацияларын уақытша тоқтату және ойнату
Вал Хед, дизайнер және кеңесші
CSS анимациясын өзгерту арқылы оны «кідіртуге» және «ойнауға» болады анимациялық-ойнату күйі мүлік. Оны «кідіртуге» қою анимацияңызды өзгерткенше тоқтатады анимациялық-ойнату күйі дейін жүгіру, мысалы, hover.
.animating_thing {анимация: спин 10s сызықты шексіз; анимациялық-ойнату күйі: кідіртілді; }. animating_thing: hover {animation-play-state: running; іске қосу; }
25. CSS айнымалыларын пайдаланбаңыз
Дэйв Ши, дизайнер және автор
Біз CSS айнымалыларын алдық, мысалы, бір реттік алтылық мәнін бір рет жазып, оны стиль кестесі арқылы анықтаңыз. Бірақ ресми спецификалық сипатта, синтаксистік күрделілікті қосады, функционалдылықты ұсынады және көптеген браузерлерде негізінен қолдау көрсетілмейді. Sass кеңінен танымал және өзгермелілер шеңберінен шығатын, тұтынушылық функциялар мен if / else операторлары сияқты қуатты бағдарламалау логикасы бар дәуірде ресми сипаттама өте қысқа болады.
Осы кеңестер CSS-ке деген көзқарасыңызды және оның веб-дизайн мен дизайндағы мүмкіндіктерін жаңартты деп үміттенемін. Тікелей эфирге шығармас бұрын браузердің қолдауын тексеру үшін осы әдістердің кез-келгенін мұқият тексеруді ұмытпаңыз.
Сөздер: Крейг Граннелл Сурет: Майк Чипперфилд
Бұл мақала бастапқыда 253 журналдың нет-журналында пайда болды.
