Css стили для сайта готовые: Готовые CSS шаблоны и генераторы

Содержание

25 мест, где можно найти бесплатные компоненты Tailwind CSS

Photo by ANTONI SHKRABA from Pexels

Экосистема Tailwind CSS неуклонно растет. Адам Ватан, основатель Tailwind, недавно сообщил, что его детище преодолело отметку в 2 миллиона загрузок в неделю.

А по мере роста экосистемы все больше и больше людей создают вспомогательные ресурсы для этого замечательного фреймворка.

Одним из самых популярных ресурсов для Tailwind CSS являются библиотеки компонентов (например, Tailwind UI). Они помогают ускорить процесс разработки, предоставляя готовые элементы, которые можно добавлять в свои проекты.

Библиотеки компонентов экономят время разработчика, но при этом могут быть довольно дорогими. Чтобы помочь вам найти альтернативные варианты, я составил список моих любимых бесплатных ресурсов. Я все их пробовал и тестировал, а некоторые даже использую в своих проектах.

Cruip Free Components

Cruip Free Components — это библиотека бесплатных шаблонов Tailwind CSS и экспериментов с кодом, созданная командой разработчиков Cruip. com. Галерея включает в себя набор фрагментов из различных премиальных шаблонов, таких как информационные панели приложений, лэндинги и сайты. Это полностью функциональные фрагменты кода, которые можно использовать в любом проекте или приложении.

Tailwind Design

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

Ghost UI

Не можете найти идеальный набор стилей для своего следующего веб-приложения? Создайте его сами с помощью Gust UI! Это галерея Tailwind CSS, в которой представлены адаптивные компоненты, элементы и примеры страниц. Вы можете быстро применить готовые стили к своему приложению, не перегружая его огромным количеством несвязанных стилей. Удалите то, что вам не нужно, измените то, что нужно, и создайте приложение, которое подходит именно вам.

FloatUI

Набор интерактивных компонентов и UI-элементов, которые позволяют быстро разрабатывать сайты и веб-приложения с помощью React. Float UI написан с нуля с использованием чистого React, React Router и Tailwind CSS, чтобы предоставить все необходимое для создания красивого сайта. Применение jQuery или сторонних плагинов не требуется.

Tailwind Awesome

Ищете самые крутые новые шаблоны и наборы UI-компонентов для сайта или веб-приложения? Tailwind Awesome — это тщательно подобранная коллекция лучших бесплатных ресурсов в Интернете. Команда этого проекта постоянно ищет новые темы, шаблоны, модули и наборы компонентов для использования с Tailwind CSS.

HyperUI

HyperUI — это бесплатная библиотека компонентов Tailwind CSS с открытым исходным кодом. Все компоненты настраиваются и готовы к использованию прямо из коробки. Вы можете скопировать исходный код или загрузить понравившиеся компоненты для простой интеграции в своем проекте. Цвета, размеры шрифта, контент и многое другое можно изменять.

a17t

a17t был создан как расширяемый, атомарный и независимый от дизайна способ создания UI-компонентов. Этот плагин является кульминацией нескольких месяцев работы и результатом многих дискуссий между двумя увлеченными людьми, которые спорят об идеальном подходе к CSS. Вы увидите, как сильно этот плагин упрощает создание служебных классов Tailwind.

Kometa UI Kit

Набор компонентов пользовательского интерфейса на основе Tailwind CSS. Вы можете использовать их как разделы Tailwind или просто как удобный набор элементов. Неважно, создаете ли вы панель администратора, SPA или просто сайт — эти разделы станут неотъемлемой частью вашего набора инструментов и существенно улучшат ваш рабочий процесс.

Tailwind Toolbox

Набор полезных базовых шаблонов с открытым исходным кодом, компонентов, удобных наборов для сборки, генераторов, плагинов и инструментов, которые помогут начать любой проект Tailwind CSS. Почти все на этом сайте имеет открытый исходный код и доступно для использования в ваших проектах.

Headless UI

Нужно что-то простое, быстрое и плоское? Headless UI — это коллекция совершенно не стилизованных, полностью доступных компонентов пользовательского интерфейса, которые вы можете использовать как угодно. Здесь есть все: от кнопок и заголовков до меню и переходов. Компоненты не связаны между собой.

Tailwind UI Kit

Tailwind UI Kit — это мощная библиотека доступных, полностью адаптивных и готовых к установке компонентов Tailwind CSS. С ее помощью вы сможете ускорить рабочий процесс и обеспечить красивый вид своего проекта на всех устройствах.

Благодаря простым в реализации стилям, функциональной анимации и удобным утилитам вы сможете начать работу буквально с нескольких строк кода.

DaisyUI

DaisyUI — это коллекция популярных компонентов Tailwind CSS. Репозиторий набрал больше 7 тысяч звезд на GitHub и тысячи подписчиков в Twitter. Здесь вы найдете гибкий набор виджетов, которые можно использовать с компонентным подходом Tailwind к стилизации.

Tailwind Components

Этот популярный сайт представляет собой репозиторий бесплатных UI-компонентов, созданных для фреймворка Tailwind CSS. Он включает в себя шаблоны, демо и документацию, которые помогут вам начать ваш следующий веб-проект, предоставив отправную точку для вашего нового сайта или приложения.

Treact

Treact — это современная галерея шаблонов и UI-компонентов React, созданных с использованием Tailwind CSS.

Этот продукт поставляется с кучей крутых CSS-анимаций и множеством полезных структур, позволяющих очень просто настроить ваш следующий проект.

Все компоненты являются модульными и полностью адаптируются к работе как на мобильных устройствах, так и на больших экранах компьютеров.

Все ресурсы в Treact постоянно обновляются и на 100% бесплатны для личного и коммерческого использования.

Tail-Kit

Tail-Kit — это набор из 250+ наиболее распространенных компонентов и самых популярных шаблонов компонентов с подробным руководством по настройке.

Цель проекта — ускорить процесс разработки и помочь вам добиться наилучших результатов при использовании Tailwind CSS.

Lofi UI

Lofi UI был создан как забавная (но все же функциональная) галерея красивых компонентов Tailwind CSS, пригодных к многократному использованию и переделке.

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

Meraki UI

Набор красивых, созданных и составленных вручную компонентов Tailwind CSS. Эти компоненты поддерживают языки с письмом справа налево и полностью адаптивны, имеют элегантный темный режим. Meraki UI — это множество доступных элементов пользовательского интерфейса, контекстная иконографика и разумная веб-типографика.

VechaiUI

CSS-библиотека, работающая «из коробки» с create-react-app (включая TypeScript-версию), Preact cli, Next. js, Gatsby и любой другой средой.

VechaiUI была создана для людей, которым нравится писать стили для своего приложения, а не полагаться на уже созданную тему.

Используя эту библиотеку, вы можете сделать свое приложение красивым и доступным.

Mamba UI

Это библиотека компонентов и шаблонов, совместимых с Tailwind CSS. Она охватывает широкий спектр стилей интерфейса — от более простого дизайна на основе компонентов до сложных макетов таблиц данных, работающих «из коробки».

Mamba UI была создана, чтобы помочь вам в разработке красивых пользовательских интерфейсов, которые будут отлично смотреться на экранах любого размера.

Flowbite

Развивающаяся библиотека из более чем 400 бесплатных веб-компонентов и интерактивных элементов, созданных с помощью служебных классов из Tailwind CSS. Каждый элемент можно легко вставить в любой проект Tailwind, чтобы добавить новый и фирменный стиль. Эта библиотека — бесценный ресурс для быстрого создания любого приложения или сайта.

Tailwind Starter Kit

Бесплатное решение для пользователей Tailwind, которые хотят начать использовать этот фрейворк для комплексного оформления своих проектов, но не хотят устанавливать не выпущенный официально CSS.

Tailwind Starter Kit поставляется с несколькими компонентами, которые можно использовать в любом HTML-документе, и готов к использованию в проектах на основе React, Angular и Vue. Каждый может взять эти CSS-файлы из репозитория GitHub и начать использовать Tailwind в своих проектах.

Kutty

Kutty — это плагин Tailwind для создания современных и отзывчивых веб-приложений. Он имеет набор доступных компонентов, которые часто используются в веб-приложениях. Например — раскрывающийся список, группы input и вкладки. Все эти компоненты пригодны для многократного использования.

Kutty также предоставляет распространенные шаблоны интерфейса. Например, фиксированный заголовок, липкий футер, центрированную навигацию и полноэкранные макеты без навигации.

PostSrc

Это набор компонентов Tailwind CSS, в котором каждый найдет что-нибудь подходящее. Вы можете использовать поиск, чтобы отфильтровать то, что ищете. Обратите внимание, что страница обновляется ежедневно, поэтому вам, возможно, придется перезагрузить ее, чтобы увидеть новые посты.

Tailblocks

Tailblocks — это мощный конструктор страниц. Он сочетает в себе лучшее из Tailwind CSS и заготовленные шаблоны с разделами, которые вы можете использовать для создания всего сайта. Имея на выбор более 120 готовых к использованию блоков и более 10 шаблонов, вы можете создать любой сайт или лэндинг без необходимости писать что-либо с нуля.

Components Collection

Ищете редкие и необычные компоненты Tailwind CSS? Этот репозиторий включает в себя все лучшие компоненты и элементы, найденные в Интернете. Все они распределены по разделам, чтобы вы могли легко найти то, что вам нужно. Вам не понадобится обыскивать несколько разных библиотек компонентов, вы все сможете взять здесь.

Перевод статьи «25 Places Where You Can Get Free Tailwind CSS Components».

9 лучших фреймворков CSS, актуальных в 2021 году

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

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

Эту платформу создали в Twitter в 2011 году, чтобы сделать адаптивный дизайн доступным для разработчиков.

С тех пор проект развился и предлагает бесчисленное множество функций для повышения производительности интерфейса.

Преимущества:

  1. В самом популярном фреймворке можно найти решения практически любой проблемы. Множество бесплатных и премиальных шаблонов.
  2. Это не только среда разработки, но и предварительно созданный динамический шаблон с бесчисленным множеством готовых к использованию компонентов.
  3. Bootstrap легко настраивается с помощью SASS. Вы можете установить проект при помощи npm и импортировать нужные вам части.
  4. Большое сообщество разработчиков обеспечивает стабильные выпуски новых версий и долгосрочную поддержку.

Недостатки:

  1. В Bootstrap очень специфический дизайн и внешний вид, которые трудно переопределить, если вы выбираете другой стиль. Он широко использует декларацию
    !important
    .
  2. Инструментарий опирается на jQuery, что затрудняет его использование вместе с другими фреймворками JavaScript, вроде React или Vue.
  3. Он не такой легкий или модульный как другие фреймворки.

Foundation – идеальный выбор для опытных разработчиков, которым нравится свобода действий. Это не просто библиотека CSS, а скорее семейство инструментов для разработки внешнего интерфейса. Их можно использовать вместе или полностью независимо. Foundation for Sites – основная структура для создания веб-страниц, а Foundation for Emails позволяет создавать привлекательные электронные письма, которые можно читать с любого устройства. Motion UI нужен, чтобы делать расширенные CSS-анимации.

Преимущества:

  1. Не использует отдельный стиль. Широкий спектр модульных гибких компонентов отличается минимализмом и легко настраивается.
  2. Включены панели навигации, несколько типов контейнеров и удобная для разработчиков сетка. Foundation также предлагает доступ к готовым HTML-шаблонам.
  3. Foundation for Emails поможет вам создать адаптивные шаблоны электронной почты для любого клиента, включая старые версии Microsoft Outlook.
  4. Motion UI позволяет создавать переходы и анимацию с использованием встроенных эффектов.

Недостатки:

  1. Бесчисленное множество функций усложняет освоение фреймворка.
  2. Использует jQuery или Zepto. Zepto – это библиотека, которая работает с тем же синтаксисом, что и jQuery, но занимает меньше места (немногие разработчики с ней знакомы).

Bulma – отличная альтернатива Bootstrap с современным кодом и уникальной эстетикой. Инструментарий отличается простым синтаксисом, изобилует готовыми компонентами, к тому же его легко импортировать в проекты. Этот фреймворк сделает скучную веб-страницу яркой и привлекательной: более 40000 звезд на GitHub – важный показатель.

Преимущества:

  1. Отличается чистым и современным дизайном. Даже не изменив настройки по умолчанию, вы получите красивую веб-страницу.
  2. Модуль на основе flexbox упрощает создание адаптивных макетов.
  3. Инструментарий предлагает соглашение об именах, которые легко использовать и запоминать.
  4. Настройка параметров проекта по умолчанию производится за считанные минуты.
  5. Не включает функции JavaScript, однако без труда интегрируется с популярными фреймворками.

Недостатки:

  1. При чрезмерном использовании сайты получаются похожими друг на друга, как и в случае с Bootstrap.
  2. Уступает другим библиотекам, когда дело касается доступности и функций корпоративного уровня.

Tailwind не имеет определенного дизайна, но позволяет быстрее реализовать собственный уникальный стиль: с ним практически не требуется писать свойства CSS вручную. Опытные разработчики интерфейсов широко используют мощные функции инструментария в проектах.

Преимущества:

  1. Упрощает реализацию общих стилей, предлагая мощные служебные классы. Эту методологию иногда называют атомарным CSS, где классы элемента HTML четко описывают, как тот будет выглядеть.
  2. Нет готовых компонентов, поэтому вам не придется переопределять существующие стили при реализации нестандартного дизайна.
  3. Фреймворк позволяет создавать собственные настраиваемые компоненты, которые можно повторно использовать.
  4. Мощная интеграция PostCSS/SASS

Недостатки:

  1. Не лучший выбор для неопытных разработчиков из-за отсутствия готовых компонентов.
  2. Tailwind подключается к документу отдельным файлом CSS, но в официальном руководстве по установке поясняются связанные с этим подходом проблемы. Многие функции фреймворка будут недоступны, также не будет доступа к сжатой версии (27 КБ в сжатом виде, 348 КБ – в исходном).

Модульная структура внешнего интерфейса UIKit позволяет импортировать только нужные функции. У него более 16 тысяч звезд на GitHub, благодаря простому API и чистому дизайну. Существует профессиональная версия UIKit с тематическими страницами для WordPress и Joomla в сочетании с простым в использовании конструктором страниц.

Преимущества:

  1. Содержит десятки компонентов, позволяющих реализовать сложные макеты внешнего интерфейса, а также предоставляет доступ к расширенным элементам (панели навигации, боковые панели и конструкции с параллакс-эффектом).
  2. Легко настроить и расширить с помощью препроцессоров LESS или SASS.
  3. Предлагает веб-настройщик, который позволяет настраивать дизайн в режиме реального времени, а затем копировать в проект переменные SASS или LESS.

Недостатки:

  1. Не рекомендуется неопытным разработчикам, поскольку требует глубокого понимания процесса разработки внешнего интерфейса.
  2. Хотя npm-пакет UIKit загружается по 27 000 раз в неделю, он менее популярен по сравнению с другими упомянутыми фреймворками. Найти ответы на вопросы или опытных специалистов будет не так просто.

Milligram – созданный для повышения производительности и продуктивности фреймворк CSS, вокруг которого сплотилось небольшое сообщество разработчиков. С его помощью удобно начинать стилизовать новые проекты.

Преимущества:

  1. Легко настроить и использовать. Хотя фреймворк предлагает мощные функции для повышения производительности, в сжатом виде он весит всего 2 КБ.
  2. Milligram не имеет стиля по умолчанию. Вам не нужно будет сбрасывать или переопределять свойства.
  3. Настолько прост, что его можно выучить за день. Для начала работы достаточно беглого чтения официальной документации.

Недостатки:

  1. Нет заготовок и шаблонов.
  2. Нет крупного сообщества – найти поддержку будет не так просто.

Крошечная библиотека с открытым исходным кодом от Yahoo, которая при использовании всех модулей занимает 3,7 КБ (в сжатом виде). Pure предлагает многоразовые отзывчивые модули CSS, которые можно добавить в любой веб-проект.

Преимущества:

  1. Легкий и производительный инструментарий.
  2. Возможность импортировать только нужную функциональность Pure по модульному принципу.
  3. Стабильный фреймворк для долгосрочного использования.
  4. Готовые компоненты адаптированы под современный Интернет.

Недостатки:

  1. Не подходит для малоопытных разработчиков

Tachyons – не столь известный фреймворк CSS, который включает расширенные служебные классы и предоставляет десятки способов их использования. Документация по проекту объясняет принципы разработки, наиболее важным из которых является повторное использование.

Преимущества:

  1. Фреймворк предоставляет служебные классы для повышения производительности, а также включает множество готовых к использованию компонентов.
  2. Предлагает функциональные шаблоны, которые можно использовать в статическом HTML, Rails, React, Angular и т. д.
  3. Отличный выбор для создания масштабируемых систем дизайна.

Недостатки

  1. Используется только с препроцессором PostCSS. Tachyons реализует интеграцию с SASS, но широко не применяется.

Созданный в Google фреймворк CSS с открытым исходным кодом. Он содержит множество интерактивных компонентов, ускоряющих разработку и помогающих улучшить взаимодействие с пользователями. Для визуальной обратной связи в Materialize применяются анимации.

Преимущества:

  1. Широко используется в различных проектах для разных целевых аудиторий.
  2. Включает готовые компоненты, а также продвинутые функции JavaScript для поддержки взаимодействия.
  3. Возможность создавать прогрессивные веб-приложения c плавающей панелью навигации и смахиванием.

Недостатки:

  1. Строгий язык дизайна не подходит для нестандартных интерфейсов.
  2. Небольшой и независимый проект без корпоративной поддержки.

***

Все CSS-фреймворки помогают повысить продуктивность фронтенд-разработки. Bootstrap, Bulma и Materialize хороши для начинающих, поскольку включают готовые компоненты. Tailwind, Milligram и Pure предоставляют только служебные классы и отлично подходят для более опытных разработчиков.

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

Расширенное оформление веб-страниц с помощью CSS (бесплатное руководство)

💬 «Мышление роста: вера в то, что вы способны чему-то научиться на практике».

Введение

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

Следующие два дня будут в равной степени заполнены новыми уроками веб-разработки: немного продвинутого CSS, а затем знакомство с последним столпом сети, JavaScript.

Сегодня все о цветах, стилях и анимации. К концу дня наш сайт засияет яркими красками!

Что мы будем делать сегодня?

  1. Добавьте изображения в нашу папку «images»
  2. Заменить изображения-заполнители проекта собственными
  3. Установить пользовательские шрифты на нашей странице
  4. Добавьте больше стилей в нижний колонтитул, чтобы он выглядел красиво 
  5. Научитесь изменять цвет фона нашей страницы
  6. Измените цвета шрифта на нашей странице

Как видите, у нас много работы. Давайте погрузимся прямо в!

1. Подготовка папки «images»

В общем, всякий раз, когда мы работаем с изображениями на веб-странице (что почти всегда), мы пытаемся разделить файлы по их типам. Таким образом, все изображения помещаются в одну папку, файлы CSS помещаются в другую папку и так далее. Поскольку у нас был только один файл CSS, мы не помещали его в отдельную папку. Но в следующем разделе мы будем работать с несколькими изображениями. Чтобы не загромождать наш рабочий каталог (так называется папка, в которой находится наш файл index.html), мы создадим новую папку с именем «images» для хранения всех наших изображений.

В эту папку «images» вам нужно добавить несколько изображений, которые мы будем использовать в этом курсе. Мы предоставим вам изображения, так как проще не иметь дело с проблемами размера изображения и соотношения сторон, но вы всегда можете поэкспериментировать со своими собственными изображениями позже. Все наши изображения взяты с Unsplash, сайта бесплатных стоковых изображений для использования в таких проектах, как наш.

Итак, первый шаг — создать папку с именем images в редакторе Sublime внутри папки портфолио .

После этого загрузите zip-файл по этой ссылке и распакуйте его в только что созданную папку. Как только это будет сделано, вот как это должно выглядеть в Sublime.

Теперь мы готовы начать использовать наши изображения. Во-первых, мы заменим изображение профиля. В нашем HTML-файле мы заменим эту строку в разделе введения:

на эту:

Обратите внимание, что атрибут src изменился. По сути, мы говорим браузеру выбрать изображение, хранящееся локально (поэтому нет https:// ) и отобразить его. Давайте перезагрузим браузер и посмотрим, как это выглядит!

Посмотреть изменения кода на GitHub >

Неплохо, но, возможно, немного простовато, как квадратное изображение. Давайте сделаем его круглым и добавим тени. Добавьте класс с именем `profile-picture` к тому же тегу изображения в вашем HTML-файле, а затем выберите его в CSS, например:

CSS

Оооо, это слишком много. Там есть пара новых свойств, которых мы раньше не видели. Давайте кратко рассмотрим их сейчас:

  • border-radius превращает квадратное изображение в круг. Управляя размером радиуса границы, мы можем получить что угодно, от красивого прямоугольника со скругленными углами до круга. Попробуйте установить другой процент и посмотреть, что произойдет.
  • box-shadow добавляет приятные тени к элементу HTML. Значение этого свойства лучше всего описано на этой странице Mozilla Dev Docs.
  • transition устанавливает пару параметров для анимации (перехода). «all» указывает, что мы хотим анимировать все аспекты перехода этого элемента (например, изменение ширины, высоты, цвета и т. д.), easy-in-out — это временная функция, определяющая скорость кривой (подробнее здесь : https://css-tricks.com/ease-out-in-ease-in-out/), а .2s указывает время (в секундах), в течение которого должна выполняться анимация.
  • . profile-picture:hover { .. } устанавливает свойства CSS для элемента, когда мы наводим на него указатель мыши (или касаемся его на смартфонах и других устройствах с сенсорным экраном). Здесь мы просто увеличиваем размер тени, чтобы она реагировала на наш жест.

Обновите браузер и обратите внимание на тень. Теперь наведите указатель мыши на изображение и посмотрите, как меняется тень, создавая иллюзию того, что изображение поднимается с холста. Красиво, не правда ли?

Посмотреть изменения кода на GitHub >

Давайте теперь перейдем к шрифтам и посмотрим, какую разницу мы можем добиться, добавив собственный шрифт (или шрифты) на нашу страницу.

2. Замена изображений-заполнителей проекта нашими собственными

Давайте также заменим изображения в разделе проекта нашими собственными изображениями. В папке, которую вы загрузили ранее сегодня, есть четыре изображения с именами от project-1.jpg до project-4.jpg. Мы заменим изображения-заполнители каждым из них.

HTML

Теперь у вас должно появиться более красочное изображение. В будущем эти изображения могут быть заменены реальными портфолио проектами, над которыми вы работаете!

Посмотреть изменения кода на GitHub >

Дополнительное задание: добавление эффектов к изображениям

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

По сути, вот что мы делаем. Мы придадим изображениям закругленные углы. Затем мы добавим им тень и более глубокую тень при наведении. Пока что это именно то, что мы сделали для изображения профиля. Но теперь мы добавим каждое изображение в

и добавим h5 (это заголовок 4). Мы сделаем так, чтобы заголовок отображался только при наведении курсора на изображение.

В качестве бонуса добавим к изображению небольшой фильтр яркости, чтобы текст был читабельным, и переход, чтобы сделать все немного плавнее. Результат?

Посмотреть изменения кода на GitHub >

Выглядит здорово, не так ли? Вот краткое объяснение новых используемых свойств CSS:

  • . видимость: [видимый/скрытый] показывает или скрывает элемент
  • позиция: [относительная/абсолютная] позиция: абсолютная позиционирует элемент относительно родителя с позиция: относительная . То есть родитель с позицией : относительная становится точкой отсчета, а дочерний элемент с position: абсолютный может быть расположен относительно этого родителя, как мы сделали, расположив h5 так, чтобы он был на 50% сверху и на 50% слева, по сути, центрируя его внутри родителя, а именно. . класс проекта-образа-оболочки . Подробнее читайте здесь https://developer.mozilla.org/en-US/docs/Web/CSS/position
  • Преобразование : translate(X, Y) перемещает элемент на X процентов по оси X и на Y процентов по оси Y. Это полезно при центрировании дочернего элемента внутри родительского.
  • z-index относится к порядку наложения. Если два элемента накладываются друг на друга, элемент с более высоким z-индексом появится поверх элемента с более низким z-индексом.
  • Фильтр : яркость (0,75) создает фильтр яркости и уменьшает яркость до 75%, когда это свойство активно.

Вы найдете код для изменений кода в коммите, указанном выше.

3. Настройка пользовательских шрифтов

Шрифт определяет стиль отображения текста. Мы, веб-разработчики, любим делать красивые веб-сайты, и иногда нам нужно использовать шрифт (то есть стиль текста), который не предоставляется нам браузером напрямую (браузеры предоставляют нам некоторые шрифты из коробки). Это не проблема, потому что CSS позволяет нам загружать и использовать любой пользовательский шрифт, который мы хотим использовать.

Для этого курса мы выбрали для вас два красивых шрифта. Для заголовков и названий мы будем использовать Roboto Mono , а для основного текста — Noto Sans . Преимущество обоих этих шрифтов в том, что они бесплатны для использования и доступны для загрузки по адресу https://fonts.google.com/. Чтобы использовать их, мы просто вставим эту строку в раздел нашей HTML-страницы:

Посмотреть изменения кода на GitHub >

Мы будем использовать свойство font-family для элемента, который мы хотим стилизовать в этом определенный шрифт и добавьте значение «Roboto Mono» или «Noto Sans».

Для быстрого старта мы сделаем шрифт основного текста по умолчанию Noto Sans и шрифт заголовка по умолчанию Roboto Mono:

CSS

Обновите страницу и обратите внимание на разницу в стилях шрифтов! Вот как мы добавляем и используем пользовательские шрифты.

Посмотреть изменения кода на GitHub >

Теперь, когда мы позаботились о разделах вступления и портфолио, давайте сосредоточимся на нижнем колонтитуле. Давайте разобьем форму в нижнем колонтитуле, чтобы каждая метка ввода и поле ввода отображались на отдельной строке. Это делает его немного чище.

Просмотр изменений кода на GitHub >

Обратите внимание на различные варианты CSS, которые мы используем: ввод формы для выбора полей ввода, которые находятся внутри формы, и ввод формы[type=”submit”] для выбора полей ввода внутри формы, у которых атрибут типа установлен на «отправить» (это кнопка отправки внизу). Как мы обсуждали в День 3, вы действительно можете смешивать и сочетать селекторы CSS в зависимости от варианта использования!

5. Изменение цвета фона страницы

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

HTML-элемент


, h-r для горизонтального правила , идеально подходит для визуального разделения разделов страницы. Добавление поля также помогает создать визуальное разделение. Для цвета фона мы используем оттенок синего, близкий к небесно-голубому. Синий обычно выбирают веб-дизайнеры, и вы увидите, что он используется намного чаще, чем другие цвета (см. Facebook, Twitter, Linkedin и т. д.).

CSS

Мы также стилизуем элемент


, используя свойство background-image: linear-gradient() CSS. Мы передаем этой функции четыре значения: направление, начальный, средний и конечный цвет (и непрозрачность). Он начинается с 0% непрозрачности (прозрачность), доходит до 75% в середине и возвращается к 0% к концу. Другая интересная функция здесь — rgba(red, green, blue, alpha) , где red, green и blue — интенсивность цвета (то есть темнота. Так что 0 — это отсутствие цвета), а alpha — это установщик прозрачности/непрозрачности.

Обратитесь к приведенному выше коммиту и проверьте, где мы добавили


(разделители горизонтальных правил). Также обратите внимание на то, как структурирован код CSS. После внесения изменений у вас должны появиться интервалы и горизонтальные разделители, как на наших изображениях.

6. Изменение цвета шрифта

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

CSS

Посмотреть изменения кода на GitHub >

Откройте коммит и проверьте, как мы внесли изменения. Мы установили цвет шрифта #001f3f, т.е. темно-синий. Вы заметили, что текст стал немного легче для глаз? Вот что делает для нас небольшая настройка цвета!

😎Совет : ознакомьтесь с палитрой цветов от Google здесь https://www. google.com/search?q=color+picker и поэкспериментируйте с ней, чтобы понять, как работают шестнадцатеричные коды цветов.

Резюме

Было много CSS и головокружения, но посмотрите, с чего мы начали и где мы находимся прямо сейчас! Это сила нескольких строк CSS. Мы предлагаем вам просмотреть материал курса еще раз, возможно, через пару часов, и посмотреть, было ли что-то, что вы не поняли в первый раз, но теперь поняли. Мы считаем, что вы можете извлечь больше из курса, чем больше вы будете знакомиться с материалом курса.

🧐Ежедневное испытание

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

  • Измените цвет кнопки «Отправить» на тот, который соответствует общей теме страницы (здесь вам нужно будет использовать свойство CSS background-color )

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

📗Ссылки

  • Стиль текста CSS
  • CSS-позиционирование
  • Тени для блоков CSS
  • Распаковка файлов
  • Психология цвета

 

❓ Часто задаваемые вопросы

В. Действительно ли профессиональные разработчики помнят все эти свойства CSS и их значения?

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

В. Мы запускаем код в Google Chrome, но я также хочу, чтобы он работал в Mozilla Firefox/Safari/Opera. Как мне это сделать?

A. Наш веб-сайт совместим со всеми браузерами. Поэтому, если вы сделаете хороший веб-сайт, он будет выглядеть одинаково независимо от браузера. Здесь есть некоторые оговорки, но на данный момент вы можете предположить, что все, что мы создали и будем создавать, работает во всех основных браузерах.

Расширенное оформление веб-страниц с помощью CSS (бесплатное руководство)

💬 «Мышление роста: вера в то, что вы способны чему-то научиться на практике».

Введение

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

Следующие два дня будут в равной степени заполнены новыми уроками веб-разработки: немного продвинутого CSS, а затем знакомство с последним столпом сети, JavaScript.

Сегодня все о цветах, стилях и анимации. К концу дня наш сайт засияет яркими красками!

Что мы будем делать сегодня?

  1. Добавьте изображения в нашу папку «images»
  2. Заменить изображения-заполнители проекта собственными
  3. Установить пользовательские шрифты на нашей странице
  4. Добавьте больше стилей в нижний колонтитул, чтобы он выглядел красиво 
  5. Научитесь изменять цвет фона нашей страницы
  6. Измените цвета шрифта на нашей странице

Как видите, у нас много работы. Давайте погрузимся прямо в!

1. Подготовка папки «images»

В общем, всякий раз, когда мы работаем с изображениями на веб-странице (что почти всегда), мы пытаемся разделить файлы по их типам. Таким образом, все изображения помещаются в одну папку, файлы CSS помещаются в другую папку и так далее. Поскольку у нас был только один файл CSS, мы не помещали его в отдельную папку. Но в следующем разделе мы будем работать с несколькими изображениями. Чтобы не загромождать наш рабочий каталог (так называется папка, в которой находится наш файл index.html), мы создадим новую папку с именем «images» для хранения всех наших изображений.

В эту папку «images» вам нужно добавить несколько изображений, которые мы будем использовать в этом курсе. Мы предоставим вам изображения, так как проще не иметь дело с проблемами размера изображения и соотношения сторон, но вы всегда можете поэкспериментировать со своими собственными изображениями позже. Все наши изображения взяты с Unsplash, сайта бесплатных стоковых изображений для использования в таких проектах, как наш.

Итак, первый шаг — создать папку с именем images в редакторе Sublime внутри папки портфолио .

После этого загрузите zip-файл по этой ссылке и распакуйте его в только что созданную папку. Как только это будет сделано, вот как это должно выглядеть в Sublime.

Теперь мы готовы начать использовать наши изображения. Во-первых, мы заменим изображение профиля. В нашем HTML-файле мы заменим эту строку в разделе введения:

на эту:

Обратите внимание, что атрибут src изменился. По сути, мы говорим браузеру выбрать изображение, хранящееся локально (поэтому нет https:// ) и отобразить его. Давайте перезагрузим браузер и посмотрим, как это выглядит!

Посмотреть изменения кода на GitHub >

Неплохо, но, возможно, немного простовато, как квадратное изображение. Давайте сделаем его круглым и добавим тени. Добавьте класс с именем `profile-picture` к тому же тегу изображения в вашем HTML-файле, а затем выберите его в CSS, например:

CSS

Оооо, это слишком много. Там есть пара новых свойств, которых мы раньше не видели. Давайте кратко рассмотрим их сейчас:

  • border-radius превращает квадратное изображение в круг. Управляя размером радиуса границы, мы можем получить что угодно, от красивого прямоугольника со скругленными углами до круга. Попробуйте установить другой процент и посмотреть, что произойдет.
  • box-shadow добавляет приятные тени к элементу HTML. Значение этого свойства лучше всего описано на этой странице Mozilla Dev Docs.
  • transition устанавливает пару параметров для анимации (перехода). «all» указывает, что мы хотим анимировать все аспекты перехода этого элемента (например, изменение ширины, высоты, цвета и т. д.), easy-in-out — это временная функция, определяющая скорость кривой (подробнее здесь : https://css-tricks.com/ease-out-in-ease-in-out/), а .2s указывает время (в секундах), в течение которого должна выполняться анимация.
  • . profile-picture:hover { .. } устанавливает свойства CSS для элемента, когда мы наводим на него указатель мыши (или касаемся его на смартфонах и других устройствах с сенсорным экраном). Здесь мы просто увеличиваем размер тени, чтобы она реагировала на наш жест.

Обновите браузер и обратите внимание на тень. Теперь наведите указатель мыши на изображение и посмотрите, как меняется тень, создавая иллюзию того, что изображение поднимается с холста. Красиво, не правда ли?

Посмотреть изменения кода на GitHub >

Давайте теперь перейдем к шрифтам и посмотрим, какую разницу мы можем добиться, добавив собственный шрифт (или шрифты) на нашу страницу.

2. Замена изображений-заполнителей проекта нашими собственными

Давайте также заменим изображения в разделе проекта нашими собственными изображениями. В папке, которую вы загрузили ранее сегодня, есть четыре изображения с именами от project-1.jpg до project-4.jpg. Мы заменим изображения-заполнители каждым из них.

HTML

Теперь у вас должно появиться более красочное изображение. В будущем эти изображения могут быть заменены реальными портфолио проектами, над которыми вы работаете!

Посмотреть изменения кода на GitHub >

Дополнительное задание: добавление эффектов к изображениям

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

По сути, вот что мы делаем. Мы придадим изображениям закругленные углы. Затем мы добавим им тень и более глубокую тень при наведении. Пока что это именно то, что мы сделали для изображения профиля. Но теперь мы добавим каждое изображение в

и добавим h5 (это заголовок 4). Мы сделаем так, чтобы заголовок отображался только при наведении курсора на изображение.

В качестве бонуса добавим к изображению небольшой фильтр яркости, чтобы текст был читабельным, и переход, чтобы сделать все немного плавнее. Результат?

Посмотреть изменения кода на GitHub >

Выглядит здорово, не так ли? Вот краткое объяснение новых используемых свойств CSS:

  • . видимость: [видимый/скрытый] показывает или скрывает элемент
  • позиция: [относительная/абсолютная] позиция: абсолютная позиционирует элемент относительно родителя с позиция: относительная . То есть родитель с позицией : относительная становится точкой отсчета, а дочерний элемент с position: абсолютный может быть расположен относительно этого родителя, как мы сделали, расположив h5 так, чтобы он был на 50% сверху и на 50% слева, по сути, центрируя его внутри родителя, а именно. . класс проекта-образа-оболочки . Подробнее читайте здесь https://developer.mozilla.org/en-US/docs/Web/CSS/position
  • Преобразование : translate(X, Y) перемещает элемент на X процентов по оси X и на Y процентов по оси Y. Это полезно при центрировании дочернего элемента внутри родительского.
  • z-index относится к порядку наложения. Если два элемента накладываются друг на друга, элемент с более высоким z-индексом появится поверх элемента с более низким z-индексом.
  • Фильтр : яркость (0,75) создает фильтр яркости и уменьшает яркость до 75%, когда это свойство активно.

Вы найдете код для изменений кода в коммите, указанном выше.

3. Настройка пользовательских шрифтов

Шрифт определяет стиль отображения текста. Мы, веб-разработчики, любим делать красивые веб-сайты, и иногда нам нужно использовать шрифт (то есть стиль текста), который не предоставляется нам браузером напрямую (браузеры предоставляют нам некоторые шрифты из коробки). Это не проблема, потому что CSS позволяет нам загружать и использовать любой пользовательский шрифт, который мы хотим использовать.

Для этого курса мы выбрали для вас два красивых шрифта. Для заголовков и названий мы будем использовать Roboto Mono , а для основного текста — Noto Sans . Преимущество обоих этих шрифтов в том, что они бесплатны для использования и доступны для загрузки по адресу https://fonts.google.com/. Чтобы использовать их, мы просто вставим эту строку в раздел нашей HTML-страницы:

Посмотреть изменения кода на GitHub >

Мы будем использовать свойство font-family для элемента, который мы хотим стилизовать в этом определенный шрифт и добавьте значение «Roboto Mono» или «Noto Sans».

Для быстрого старта мы сделаем шрифт основного текста по умолчанию Noto Sans и шрифт заголовка по умолчанию Roboto Mono:

CSS

Обновите страницу и обратите внимание на разницу в стилях шрифтов! Вот как мы добавляем и используем пользовательские шрифты.

Посмотреть изменения кода на GitHub >

Теперь, когда мы позаботились о разделах вступления и портфолио, давайте сосредоточимся на нижнем колонтитуле. Давайте разобьем форму в нижнем колонтитуле, чтобы каждая метка ввода и поле ввода отображались на отдельной строке. Это делает его немного чище.

Просмотр изменений кода на GitHub >

Обратите внимание на различные варианты CSS, которые мы используем: ввод формы для выбора полей ввода, которые находятся внутри формы, и ввод формы[type=”submit”] для выбора полей ввода внутри формы, у которых атрибут типа установлен на «отправить» (это кнопка отправки внизу). Как мы обсуждали в День 3, вы действительно можете смешивать и сочетать селекторы CSS в зависимости от варианта использования!

5. Изменение цвета фона страницы

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

HTML-элемент


, h-r для горизонтального правила , идеально подходит для визуального разделения разделов страницы. Добавление поля также помогает создать визуальное разделение. Для цвета фона мы используем оттенок синего, близкий к небесно-голубому. Синий обычно выбирают веб-дизайнеры, и вы увидите, что он используется намного чаще, чем другие цвета (см. Facebook, Twitter, Linkedin и т. д.).

CSS

Мы также стилизуем элемент


, используя свойство background-image: linear-gradient() CSS. Мы передаем этой функции четыре значения: направление, начальный, средний и конечный цвет (и непрозрачность). Он начинается с 0% непрозрачности (прозрачность), доходит до 75% в середине и возвращается к 0% к концу. Другая интересная функция здесь — rgba(red, green, blue, alpha) , где red, green и blue — интенсивность цвета (то есть темнота. Так что 0 — это отсутствие цвета), а alpha — это установщик прозрачности/непрозрачности.

Обратитесь к приведенному выше коммиту и проверьте, где мы добавили


(разделители горизонтальных правил). Также обратите внимание на то, как структурирован код CSS. После внесения изменений у вас должны появиться интервалы и горизонтальные разделители, как на наших изображениях.

6. Изменение цвета шрифта

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

CSS

Посмотреть изменения кода на GitHub >

Откройте коммит и проверьте, как мы внесли изменения. Мы установили цвет шрифта #001f3f, т.е. темно-синий. Вы заметили, что текст стал немного легче для глаз? Вот что делает для нас небольшая настройка цвета!

😎Совет : ознакомьтесь с палитрой цветов от Google здесь https://www. google.com/search?q=color+picker и поэкспериментируйте с ней, чтобы понять, как работают шестнадцатеричные коды цветов.

Резюме

Было много CSS и головокружения, но посмотрите, с чего мы начали и где мы находимся прямо сейчас! Это сила нескольких строк CSS. Мы предлагаем вам просмотреть материал курса еще раз, возможно, через пару часов, и посмотреть, было ли что-то, что вы не поняли в первый раз, но теперь поняли. Мы считаем, что вы можете извлечь больше из курса, чем больше вы будете знакомиться с материалом курса.

🧐Ежедневное испытание

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

  • Измените цвет кнопки «Отправить» на тот, который соответствует общей теме страницы (здесь вам нужно будет использовать свойство CSS background-color )

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *