20 лучших руководств по CSS3 для улучшения ваших навыков веб-разработки
Опубликовано: 2022-05-06Каскадные таблицы стилей (CSS) становятся больше, чем просто языком для стилизации веб-сайтов. Он постепенно превращается в полнофункциональный язык, способный обрабатывать аспекты динамического проектирования. Во многих отношениях CSS может заменить традиционные HTML и JavaScript для достижения интерактивности и независимости от внешних библиотек и фрагментов кода. Все стили, которые мы видим сегодня в Интернете, создаются непосредственно с помощью CSS. Поскольку стандарт продолжает расти и улучшаться, быть в курсе событий важнее, чем когда-либо. Веб-браузеры отображают CSS так же, как HTML, что иногда может означать, что старые браузеры не способны поддерживать новые функции.
В последние годы начать работу с интерфейсной веб-разработкой и веб-дизайном стало проще. Мы видим гораздо больше учебных пособий, руководств и курсов, на которые можно записаться. Но в конечном итоге все сводится к готовности работать с недавно полученными навыками и применять их в реальных проектах. CSS — это один из тех языков сценариев, которые требуют от пользователя использования определенных шаблонов и параметров макета для применения к таким языкам, как JavaScript и HTML. При создании нового веб-сайта с помощью HTML и CSS лучше работать поэтапно, чтобы полностью применить полученные знания.
Сегодня наша цель — охватить самые известные и современные руководства по CSS3 от ведущих фронтенд-разработчиков и дизайнеров. Все уроки здесь основаны на последних стандартах, которые помогут вам стать лучшим веб-дизайнером. В конце поста мы также упомянем пару учебных ресурсов по CSS3 для дальнейшего изучения. Как и в любом языке программирования, чтобы лучше что-то понять, мы должны позволить себе повторяющееся кодирование либо через динамическую онлайн-платформу, либо в наших личных редакторах кода.
Редактирование изображений в CSS
Использование изображений в веб-дизайне имеет смысл, но история становится более технической. Хотя использование фотографий, которые вам нравятся, в веб-дизайне — это весело, иногда нужно принимать во внимание некоторые вещи. Подходит ли размер файла изображения для нашего проекта? Можем ли мы добавлять фильтры через CSS, а не через внешние приложения, такие как Photoshop? Что мы можем сделать с помощью CSS, чтобы наши фотографии выглядели лучше? Уна Кравец берет нас в 15-минутное путешествие. В нем она рассказывает о редактировании изображений CSS и о том, как мы можем преобразовать CSS, чтобы он действовал больше как отдельная программная платформа для редактирования изображений, а не просто как способ манипулирования аспектами дизайна.
Использование современного CSS для создания адаптивной сетки изображений
Продолжая тему изображений, у нас есть Джордж Марцукос. Он представляет простой легкий учебник о том, как использовать современные функции CSS3 для создания адаптивных сеток изображений. Сетки изображений (или иногда называемые галереями) предназначены для отображения визуального контента в контексте сетки. Эти типы сеток становятся полезными для тех, кто делится своими фотографиями или использует сетку изображений для расширения элементов своего портфолио. В этом руководстве Джордж рассказывает нам о процессе обеспечения того, чтобы созданные нами сетки одинаково реагировали на настольные и мобильные приложения.
Примечания по обновлению CSS
Примечания и руководства по стилю являются движущей силой для многих веб-дизайнеров. Мы должны не забыть отложить наши любимые ресурсы для заметок, чтобы их было легче использовать в будущем. Что касается CSS3, CSS Refresh Notes — один из фаворитов в сообществе GitHub; сотни звезд и множество отзывов сообщества о том, как расширить этот ресурс, чтобы он стал лучшим из существующих. CSS Refresh Notes фокусируется на наиболее важных аспектах разработки CSS3. Это также позволяет дизайнерам быстро использовать справочные примечания для большинства функций CSS3. Будь то позиционирование или селекторы, с которыми вам нужна помощь, возможно, медиа-запросы для адаптивного дизайна или как лучше всего использовать SVG в шаблонах дизайна CSS3 — эти заметки пригодятся, даже если вы так не считаете.
Переменные: основа архитектуры CSS
В последние годы получили распространение препроцессоры, простые фреймворки и наборы инструментов, которые позволяют дизайнерам расширять базовую функциональность CSS3 с помощью примесей, функций и переменных. Обычно вы ожидаете увидеть такие функции в жестко запрограммированном языке программирования, таком как JavaScript. Возможно, каждый должен владеть CSS3, чтобы кодировать без использования препроцессоров. Тем не менее, такие вещи, как время разработки, остаются важными. Переменные помогают использовать CSS3 в более динамичной среде. Вот почему Карен Менезес собрала один из самых обширных материалов по этой теме, которые вы когда-либо найдете.
Разработка макета страницы продукта с помощью Flexbox
Flexbox — это новый режим макета CSS3, призванный помочь дизайнерам наилучшим образом оптимизировать свои проекты для различных устройств. Новая функция все еще довольно нова и чужда многим, но использование Flexbox становится все более популярным в таких областях, как электронная коммерция. Это руководство по CSS3 исходит от команды Shopify, где они сообщают о том, как им удалось создать один из своих новейших шаблонов Shopify с помощью Flexbox, что потребовалось для этого процесса и как выглядел конечный результат. Зная репутацию Shopify на рынке электронной коммерции и сами изучая руководство, это может быть одним из самых удобных руководств, которые помогут вам больше узнать о Flexbox и о том, как вы можете начать использовать его в своем собственном веб-дизайне.
Простейшее слайд-шоу CSS
Слайд-шоу с CSS3? Это должно быть невозможно! Такие концепции обычно нацелены на такие языки, как JavaScript или jQuery. Эти языки упрощают создание динамического контента на ходу. Но как насчет CSS3? Джонатан Снук не обещает нам ничего нового, вместо этого он дает нам пример того, как мы можем использовать анимационные эффекты CSS3 для создания слайд-шоу без необходимости использования каких-либо внешних ресурсов, таких как, например, JavaScript. Его небольшое вводное руководство по CSS3-анимациям — прекрасный пример того, как креативность побеждает сомнения.
Модули CSS — Решение проблем CSS в масштабе
CSS неизбежно выйдет за пределы своих нынешних ограничений, как и JavaScript. Оглядываясь назад на очень старое прошлое CSS, мы прошли долгий путь от возможности манипулировать цветами и внешним видом элементов, в наши дни CSS предоставляет гораздо более сложный набор инструментов для разработчиков, которые хотят жить в одном языке, чтобы выполнять все свои задачи. задачи развития. CSS-модули помогают разработчикам лучше согласовывать свой CSS-код, который затем можно масштабировать, когда приложение или проект начинает выходить из-под контроля. В этом великолепном руководстве Том Корнилиак объясняет, как мы можем комбинировать разные таблицы стилей и использовать их в качестве модулей для наших проектов, которые мы запускаем через такие фреймворки, как React. Кто знал, что импорт таблиц стилей и доступ к их предопределенным функциям будет простым.
Анимация обрезанных элементов в SVG
Анимации SVG и CSS3 являются одними из самых популярных тем в веб-разработке. Это связано с тем, что мы начинаем отходить от необходимости использовать тяжелые файлы изображений и анимации для отображения нашего контента, и вместо этого дизайнеры учатся имитировать эти точные анимации, используя родные языки для браузера. Dennis Gaebel Jr дает нам краткое изложение того, как использовать отсечение CSS для достижения потрясающих анимационных эффектов и использования потрясающих векторных изображений.
Выразительный CSS
Термин «выразительность» был придуман в сообществе разработчиков уже довольно давно. Этот термин свободно заимствован из концепции выразительности в языках программирования. Язык программирования обычно считается выразительным, если он позволяет вам естественно выражать свои мысли в коде, который легко понять. Вообще, «выразительность» не является чем-то новым. Разработчики говорили об этом много лет назад. Тем не менее, каждый раз, когда новая функция выпускается в дикой природе, разработчикам и особенно дизайнерам требуется некоторое время, чтобы адаптироваться к их выразительному рабочему процессу, поэтому иногда проекты могут быть запутанными и зацикливаться на слишком большом количестве функций, пытающихся работать одновременно. Expressive — это упрощенный подход к написанию кода, который хорошо работает, хорошо выглядит и прост в обслуживании. Используйте это как руководство по стилю и не забудьте выразить благодарность автору; Джон Полачек.
Анимация в адаптивном дизайне
Как уже говорилось в статье, анимация и адаптивность — две очень горячие темы для дизайнеров, и их объединение становится все более интересным для тех, кто хочет по-настоящему проверить пределы возможностей современной веб-разработки. Вэл Хед опубликовал очень познавательную статью об использовании анимации CSS3 в адаптивном веб-дизайне и о том, как лучше всего представить эту анимацию так, чтобы она не потеряла своей ценности. Статья занимает несколько демонстраций с других успешных веб-сайтов, которые установили свою анимацию на настольных и мобильных устройствах.
Почему я в восторге от нативных CSS-переменных
Пользовательские свойства CSS, также известные как переменные, помогают разработчикам CSS3 ускорить процесс разработки CSS3 за счет включения динамических функций. Препроцессоры делают это уже некоторое время. Многие уже адаптировались к идее постоянного использования препроцессора. Тем не менее, неизбежно все эти функции (доступные в стандарте) найдут применение в современных браузерах. Нет ничего лучше, чем разрабатывать в родной среде, не заботясь об обслуживании и надежности внешнего ПО. Филип Уолтон, инженер Google, потратил свое драгоценное время на то, чтобы собрать воедино очень познавательную работу о новой функции CSS и о том, почему сообщество должно принять такие изменения и не беспокоиться о таких глупых вещах, как внешний вид синтаксиса.
Анимация сердца Twitter в полном CSS
Твиттер был во ВСЕХ новостях, и по многим веским причинам. Одной из таких причин было то, что Twitter решил заменить кнопку «Избранное» значком «Люблю». Это смелый, но необходимый шаг, чтобы создать более ориентированную на сообщество атмосферу вокруг сайта. Объявление было сделано на одном из официальных аккаунтов Twitter с помощью анимированного GIF-изображения. Он продемонстрировал крутую анимацию «всплеск сердца», сопровождаемую текстом. Николя Эскофье, дизайнер, интересовался, сможет ли он собрать подобную анимацию, используя только чистый CSS3, и угадайте что — ему это удалось, и сообщество не могло быть более счастливым!
Серьезно, используйте иконочные шрифты
SVG делает Интернет лучше. Несмотря на это, разработчики должны учитывать тот факт, что многие все еще просматривают веб-страницы с устаревших версий мобильных операционных систем, и такое понимание требует от разработчика дополнительных усилий, чтобы все заработало. Другие все еще изучают иконочные шрифты. Но эта функция становится очень популярной на современных рынках разработчиков, где разработчики хотят создавать плавные и приятные условия для работы.
Увеличение продукта с помощью CSS — без JavaScript
В электронной коммерции приближение и увеличение позволяют покупателям приблизиться к продукту и изучить его менее заметные аспекты. Это круто, но для многих это важно для успеха их бизнеса. Майкл Уивер — хакер CSS3, которому пришла в голову идея создать виджет увеличения без использования кода JavaScript, и он совершил подвиг. Теперь любой желающий может просматривать его код и делать подобные виджеты на своих сайтах.
Действительно адаптивные таблицы с использованием CSS3 Flexbox
Таблицы помогают нам упорядочить информацию в более удобной форме. Иногда хорошо оформленный элемент таблицы даже не отображается как таковой. Но с расширяемостью jQuery, HTML5 и JavaScript мы можем сделать наши таблицы более похожими на документы Excel, чем на что-либо еще. Vasan Subramanian опубликовал подробное руководство по использованию функции Flexbox в CSS3 для создания потрясающих и адаптивных таблиц для вашего следующего проекта веб-сайта или приложения.
Оптимизируйте доставку CSS
Последнее руководство по CSS3 будет посвящено скорости и тому, как лучше кодировать наши таблицы стилей, чтобы, по крайней мере, гарантировать некоторое увеличение скорости сверх обычного. Optimize CSS Delivery — это техническое руководство по стилю, в котором показано, как писать собственный код CSS без ущерба для ресурсов. Написание CSS должно быть забавным, и это то, о чем этот урок.
Учебные ресурсы для современного CSS3
Без надлежащей основы обучение по учебникам иногда может показаться довольно сложным. Это имеет смысл, учебник может охватывать только определенную тему до того, как он иссякнет, учебные пособия предназначены для тех, кто уже что-то создавал, и хочет расширить эти проекты новыми функциями, интересными концепциями и другими вдохновленными возможностями. сообществом. И чтобы помочь вам лучше понять учебные пособия по CSS3, о которых мы говорили в посте, мы собираемся перечислить некоторые действительно отличные и бесплатные ресурсы для изучения CSS3 (в том числе и современного) в Интернете.
Полное руководство по CSS3
Опять же, мы подчеркиваем необходимость демонстрации учебных ресурсов, которые помогут вам узнать все о CSS. Этот ресурс представляет собой полное руководство по CSS3, в котором рассказывается о функциях CSS3 и их использовании в реальном мире. В этом руководстве подробно обсуждались селекторы, расширенные селекторы, блочные модели, тексты и шрифты, а также другие функции, а также множество примеров, с которыми вы можете начать играть. Любой, кто начинает разработку CSS, сможет быстро реализовать свой прогресс, выполнив всего несколько простых проектов.
Учебник по CSS
W3Schools — это дом для начинающих разработчиков интерфейсов. Этот ресурс помог миллионам и миллионам разработчиков лучше понять определенные части HTML и CSS. Он также предлагает бесплатный учебный контент, который вы больше нигде не найдете. W3Schools — идеальное место для изучения CSS для тех, кто действительно не имеет опыта работы в Интернете и хочет быстро освоиться.
HTML и CSS
Вы не можете начать изучать CSS3 или HTML5 с нуля и не попробовать Codecademy. Даже раздел отзывов полон отзывов о том, как люди смогли найти отличную и хорошо оплачиваемую работу после окончания обучения в Codecademy. Многие учебные сайты обучают прямому синтаксису с помощью примеров кода. С другой стороны, Codecademy «заставляет» вас экспериментировать с кодом. Это делается с помощью прямых и интерактивных задач, назначенных людьми, стоящими за каждым учебным курсом. Такие платформы стали очень популярными и теперь доступны почти для каждого языка программирования. Без сомнения, очень эффективный способ обучения.
Изучите макет CSS
Ранее в этом посте мы уже узнали, что макет — это основа CSS3. Но теперь пришло время испытать эту концепцию. Давайте рассмотрим футуристический пример того, как работают свойства макета CSS3 и что мы можем с ними делать. Выделите себе несколько дней, чтобы выполнить этот урок. После этого вы будете на твердом промежуточном уровне понимания свойств макета и их использования.
CSS — изучение Интернета
Mozilla Developer Network остается одним из ведущих источников всего, что связано с HTML5, CSS3 и JavaScript. MDN, полностью управляемый сообществом, предлагает руководства по стилю для всех упомянутых языков таким образом, который наиболее подходит для вашего темпа обучения и, в первую очередь, для общего понимания CSS3.