20 лучших руководств по CSS3 для улучшения навыков веб-разработки

Каскадные таблицы стилей (CSS) становятся больше, чем просто языком для стилизации Интернета. Он медленно превращается в полноценный язык, способный обрабатывать аспекты динамического дизайна. Во многих отношениях CSS может заменить традиционный HTML и JavaScript для достижения интерактивности и независимости от внешних библиотек и фрагментов кода. Все стили, которые мы видим сегодня в сети, напрямую связаны с CSS. Поскольку стандарты продолжают расти и совершенствоваться, оставаться в курсе дел как никогда важно. Веб-браузеры визуализировали CSS, как и HTML, что иногда может означать, что старые браузеры не могут поддерживать новые функции.

Начать работу с интерфейсной веб-разработкой и веб-дизайном в последние годы, безусловно, стало проще. Мы видим гораздо больше учебных пособий, руководств и курсов, на которые можно записаться. Но в конечном итоге все сводится к готовности работать с недавно приобретенными навыками и применять их в реальных проектах. CSS - один из тех языков сценариев, которые требуют от пользователя использования определенных шаблонов и параметров макета для применения к таким языкам, как JavaScript и HTML. При создании нового веб-сайта с использованием HTML и CSS лучше всего работать поэтапно, чтобы в полной мере применить полученные знания.

Наша цель сегодня - охватить самые известные и современные руководства по CSS3 от ведущих разработчиков и дизайнеров интерфейса. Все уроки здесь основаны на последних стандартах, чтобы помочь вам стать лучше в веб-дизайне. В конце поста мы также упомянем пару учебных ресурсов по CSS3 для дальнейшего изучения. Как и любой язык программирования, чтобы лучше что-то понять, лучше всего позволить себе выполнять повторяющееся кодирование либо через динамическую онлайн-платформу, либо в наших личных редакторах кода.

Редактирование изображений в CSS

Использование изображений в веб-дизайне имеет смысл, но история становится более технической. Хотя использовать фотографии по своему вкусу в веб-дизайне весело, иногда есть вещи, которые мы должны учитывать. Подходит ли размер файла изображения для нашего проекта? Можем ли мы добавлять фильтры через CSS, а не через внешние приложения, такие как Photoshop? Что мы действительно можем сделать с помощью CSS, чтобы наши фотографии выглядели лучше? Уна Кравец отправляет нас в 15-минутное путешествие. В нем она рассказывает о редактировании изображений CSS и о том, как мы можем преобразовать CSS, чтобы он действовал больше как отдельная программная платформа для редактирования изображений, а не просто как способ управления аспектами дизайна.

Использование современного CSS для создания адаптивной сетки изображений

Продолжая тему изображений, у нас есть Джордж Марцуко. Он представляет нам простой легкий учебник о том, как использовать современные функции CSS3 для создания адаптивных сеток изображений. Сетки изображений (или иногда называемые галереями) предназначены для отображения визуального контента в контексте сетки. Такие сетки становятся полезными для тех, кто делится своими фотографиями или использует сетку изображений как способ расширить элементы своего портфолио. В этом руководстве Джордж рассказывает нам о том, как убедиться, что создаваемые сетки одинаково реагируют на настольные и мобильные приложения.

Изучите макет CSS

Веб-дизайн - это все о макете. Мы создаем макет, а затем используем другие доступные элементы и функции для его стилизации и построения на нем. И это известный факт, что большая часть макетов веб-дизайна полностью зависит от CSS. Изучение CSS позволяет нам больше узнать о макетах веб-сайтов и о том, как они работают. Но если у вас еще нет знаний, Микито Такада написал онлайн-книгу, которая разделена на 5 разных глав о том, как правильно создавать макеты с помощью CSS3. Он говорит о позиционировании, а также о выравнивании различных элементов бокса, чтобы начать создание элементов сетки, прямо сейчас он более подробно рассказывает о позиционировании и доступных функциях. Последние две главы он посвящает Flexbox (функции CSS). Также есть статья о лучших советах и ​​приемах стилей CSS из его собственного пути веб-дизайнера.

Заметки по обновлению CSS

Примечания и руководства по стилю - движущая сила для многих веб-дизайнеров. Очень важно не забыть отложить наши любимые ресурсы для заметок, чтобы их было легче использовать в будущем. Что касается CSS3, заметки об обновлении CSS - одни из самых популярных в сообществе GitHub; сотни звезд и множество отзывов сообщества о том, как расширить этот ресурс, чтобы стать лучшим из существующих. Заметки об обновлении CSS посвящены наиболее важным аспектам разработки CSS3. Это также позволяет дизайнерам быстро обращаться к справочным материалам по большинству функций CSS3. Будь то позиционирование или селекторы, с которыми вам нужна помощь, возможно, медиа-запросы для адаптивного дизайна или как лучше всего использовать SVG в ваших шаблонах проектирования CSS3 - эти заметки пригодятся, даже если вы не сразу почувствуете это.

Переменные: основа архитектуры CSS

В последние годы действительно стали популярны препроцессоры, простые фреймворки и наборы инструментов, которые позволяют дизайнерам расширять базовую функциональность CSS3 такими вещами, как миксины, функции и переменные. Типа функций, которые вы обычно ожидаете увидеть в жестко запрограммированном языке программирования, таком как JavaScript. Возможно, каждый должен хорошо владеть CSS3, чтобы иметь возможность плавно писать код без использования препроцессоров. Тем не менее, такие вещи, как время разработки, остаются важными. Переменные помогают использовать CSS3 в более динамичной среде. Вот почему Карен Менезес собрала один из самых обширных материалов по этой теме, который вы когда-либо могли найти.

Разработка макета страницы продукта с помощью Flexbox

Flexbox - это новый режим макета CSS3, призванный помочь дизайнерам оптимизировать свои проекты для различных устройств. Новая функция все еще является довольно новой и чужой для многих, но использование Flexbox становится все более популярным в таких областях, как электронная коммерция. Это руководство по CSS3 разработано командой из Shopify, где они делают отчет о том, как им удалось создать один из своих новейших шаблонов Shopify с помощью Flexbox, что потребовалось для этого процесса и как выглядел конечный результат. Зная репутацию Shopify на рынке электронной коммерции и изучив само руководство, это может быть одним из самых удобных руководств, которые помогут вам больше узнать о Flexbox и о том, как вы можете начать использовать его в своих собственных веб-дизайнах.

Все, что я знаю об адаптивной веб-типографике с помощью CSS

Когда люди думают об адаптивном веб-дизайне, большую часть времени они думают о том, чтобы превратить стандартный веб-сайт во что-то, что будет хорошо работать с мобильными устройствами. Это не ложное понимание, но, безусловно, это еще не все. Зелл Лью написал блестящую статью о том, как работать с адаптивной веб-типографикой и что это означает для создания прочной основы для ваших шаблонов типографики на всех типах устройств. Излишне говорить, что раздел комментариев к учебным пособиям также стал огромной помощью. Это все благодаря дополнительному вкладу других веб-дизайнеров сообщества.

Простейшее слайд-шоу CSS

Слайд-шоу с CSS3? Это должно быть невозможно! Такие концепции обычно нацелены на такие языки, как JavaScript или jQuery. Эти языки позволяют легко создавать динамический контент на ходу. Но как насчет CSS3? Джонатан Снук на самом деле не обещает нам ничего нового, вместо этого он дает нам пример того, как мы можем использовать эффекты анимации CSS3 для создания слайд-шоу без использования каких-либо внешних ресурсов, таких как, например, JavaScript. Его небольшое вводное руководство по анимации CSS3 - прекрасный пример того, как творчество превосходит сомнения.

Модули CSS - Решение проблем CSS в большом масштабе

CSS неизбежно вырастет за пределы своих текущих ограничений, как это сделал JavaScript. Оглядываясь на очень старое прошлое CSS, мы прошли долгий путь от возможности манипулировать цветами и внешним видом элементов, в наши дни CSS предоставляет гораздо более сложный набор инструментов для разработчиков, которые хотят работать на одном языке, чтобы делать все свои задачи развития. Модули CSS помогают разработчикам лучше согласовывать свой код CSS, который затем можно масштабировать, когда приложение или проект начинает выходить из-под контроля. В этом великолепном руководстве Том Корнилиак объясняет нам, как мы можем комбинировать разные таблицы стилей и использовать их в качестве модулей для наших проектов, которые мы запускаем через такие фреймворки, как React. Кто знал, что импортировать таблицы стилей и получить доступ к их предопределенным функциям будет так просто.

Шаблоны отображения контента

Контент - это все. Даже те сайты, которым не хватает соответствующих навыков презентации веб-сайтов, но которые все еще могут поддерживать высокое качество контента, обычно являются теми, на которые люди будут ссылаться чаще всего. Хорошими примерами для этого являются такие сайты, как Reddit и Hacker News - сайты с высоким содержанием контента, без каких-либо реальных принудительных мер в дизайне веб-сайтов. Шаблоны отображения контента связаны не с шаблонами отображения, а с тем, как общий дизайн элементов контента работает вместе, чтобы обеспечить удобство просмотра, которое полностью интегрируется между отображением контента и фактическим контентом. Это руководство от Дэна Молла - одно из самых кратких руководств по шаблонам отображения контента, и его отчет об опыте говорит сам за себя - он работал с проектами редизайна для таких сайтов, как TechCrunch, и даже мы должны признать, что новый дизайн TechCrunch довольно гладкий!

Анимация обрезанных элементов в SVG

Анимация SVG и CSS3 - одна из самых актуальных тем в веб-разработке прямо сейчас. Это связано с тем, что мы начинаем отходить от необходимости использовать тяжелые файлы изображений и анимации для отображения нашего контента, и вместо этого дизайнеры учатся имитировать эти точные анимации, используя родные языки для браузера. Деннис Гэбель-младший дает нам краткое изложение использования обрезки CSS для достижения потрясающих анимационных эффектов, помимо использования потрясающих векторных изображений.

Выразительный CSS

Экспрессивный - это термин, придуманный сообществом разработчиков в течение некоторого времени. Это термин, вольно заимствованный из концепции выразительности языков программирования. Язык программирования обычно считается выразительным, если он позволяет естественным образом выражать свои мысли в легком для понимания коде. Как правило, «выразительность» не является чем-то новым, и разработчики говорили об этом много лет назад, но каждый раз, когда появляется новая функция, разработчикам и особенно дизайнерам требуется некоторое время, чтобы адаптироваться к их выразительному рабочему процессу, поэтому иногда проекты могут запутаться и оказаться в ловушке слишком большого количества функций, пытающихся работать сразу. Expressive - это легкий подход к написанию кода, который хорошо работает, хорошо выглядит и прост в обслуживании. Используйте это как руководство по стилю и не забудьте выразить благодарность автору; Джон Полачек.

Анимация в адаптивном дизайне

Как уже было сказано в этой статье, анимация и отзывчивость - две очень горячие темы для дизайнеров, и их объединение становится все более интересным для тех, кто хочет по-настоящему проверить пределы возможностей современной веб-разработки. Вал Хед опубликовал очень содержательную статью об использовании анимации CSS3 в адаптивных веб-дизайнах и о том, как лучше всего представить эти анимации там, где они не теряют своей ценности. Занимает статью несколькими демонстрационными демонстрациями с других успешных веб-сайтов, которые установили свои анимации как на настольных, так и на мобильных устройствах.

Почему меня так интересуют нативные переменные CSS

Настраиваемые свойства CSS, также известные как переменные, помогают разработчикам CSS3 ускорить процесс разработки CSS3 за счет включения динамических функций. Препроцессоры уже давно этим занимаются, и многие уже адаптировались к идее постоянного использования препроцессора, но неизбежно все эти функции (доступные в стандарте) найдут свое применение в современных браузерах, потому что нет ничего лучше, чем разработка в родная среда, не беспокоясь об обслуживании и надежности внешнего программного обеспечения. Инженер Google Филип Уолтон потратил свое драгоценное время на то, чтобы составить очень проницательную работу о новой функции CSS и о том, почему сообщество должно принять такие изменения и не беспокоиться о таких глупых вещах, как внешний вид синтаксиса.

Анимация сердца Twitter в полном CSS

Twitter был ВСЕМ в новостях, и по многим веским причинам. Одна из этих причин закончилась тем, что Twitter решил заменить кнопку «Избранное» значком «Любовь». Это смелый, но необходимый шаг для создания на сайте более ориентированной на сообщество атмосферы. Объявление было сделано на одном из официальных аккаунтов Twitter в виде анимированного изображения в формате GIF. Он продемонстрировал классную анимацию «всплеск сердца» в сопровождении текста. Николя Эскоффье, дизайнер, интересовался, сможет ли он собрать аналогичную анимацию, используя только чистый CSS3, и угадайте, что - ему это удалось, и сообщество не могло не быть более счастливым!

Серьезно, используйте иконочные шрифты

SVG делает Интернет лучше. Несмотря на то, что разработчики по сей день должны учитывать тот факт, что многие все еще просматривают веб-страницы из устаревших версий мобильных операционных систем, и такое понимание требует от разработчика дополнительных усилий, чтобы все работало. Иконочные шрифты все еще изучают другие. Но эта функция становится очень популярной на современных рынках разработчиков, где разработчики хотят создавать удобные и приятные в работе интерфейсы.

Увеличение продукта CSS - без JavaScript

В электронной коммерции это увеличение, но также и увеличение, которое позволяет клиентам приближать продукт и исследовать его менее заметные для глаза аспекты. Это определенно крутой эффект, но для многих он необходим для успеха их бизнеса. Майкл Уивер - хакер CSS3, которому в голову пришла идея создать виджет увеличения без использования какого-либо кода JavaScript, подвиг, который он успешно выполнил, и теперь любой может просматривать его код и создавать аналогичные виджеты на своих сайтах.

Действительно адаптивные таблицы с использованием CSS3 Flexbox

Таблицы помогают нам согласовывать нашу информацию в более удобной форме. Иногда хорошо оформленный элемент таблицы даже не отображается как один. Но благодаря расширяемости jQuery, HTML5 и JavaScript мы можем сделать наши таблицы более похожими на документы Excel, чем на что-либо еще. Васан Субраманиан опубликовал подробное руководство о том, как использовать функцию Flexbox CSS3 для создания потрясающих и гибких таблиц для вашего следующего веб-сайта или проекта приложения.

Оптимизация доставки CSS

Последнее руководство по CSS3 будет посвящено скорости и тому, как лучше кодировать наши таблицы стилей, чтобы по крайней мере гарантировать некоторое увеличение скорости сверх обычного. Оптимизация доставки CSS - это техническое руководство по стилю, в котором показано, как писать собственный код 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.