Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP) | Материалы урока
В этом уроке мы разработаем красивый сайт с плавной анимацией перемещения в области просмотра, рассмотрим самый простой способ оформления контента в виде плиток Masonry на чистом CSS и добавим поддержку темной темы ОС (Dark Mode). Кроме того, я покажу, как правильно разрабатывать прелоадер для подобных сайтов.
Материалы урока и готовый результат: Скачать
Рекомендуемые уроки и инструменты
- Настройка VS Code для верстки: Ознакомиться с уроком
- Справочник EMMET (быстрая верстка): Ознакомиться с уроком
- Cubic-Bezier CSS Generator: Перейти на сайт
- Instant Eyedropper: Скачать пипетку
Настройки CSS анимации:
Code snippets, short and long-hand:
Мобильные устройства
Анимация Draggable должна работать только на больших экранах. Соответственно, на смартфонах возвращаем дефолтные параметры для отображения всех плиток Masonry.
В «main.css» дописываем медиа-запрос с достаточным запасом по ширине:
Полный JS-код урока
Нам необходимо задать условие медиа-запроса для выполнения скрипта только на больших экранах. В настоящее время рекомендую в JavaScript работать именно с медиа-запросами, а не использовать в условиях физическую ширину экрана в пикселях, как делали раньше.
Существует огромное количество способов работы с мобильными устройствами в JS. Это условия по физической ширине, работа с медиа-запросами, использование комплексных решений в виде плагинов и прочие. В большинстве случаев я работаю именно с медиа-запросами, так как этот способ является нативным, наиболее надежным и предлагает дополнительные полезные функции.
Простой сайт на HTML и CSS — четыре различных способа создания макета
В этой статье я хочу рассказать о четырех различных способах создания макетов с несколькими столбцами. Каждый способ имеет свои плюсы и минусы. Чтобы продемонстрировать, как эти макеты работают и выглядят, я создал простой сайт, на котором используются HTML-таблицы , свойство CSS float , CSS-фреймворк и флексбокс.
Первый день новой жизни
В этой статье мы используем четыре различных способа верстки сайта:
- Таблицы . Вам даже не нужно использовать отдельный файл стилей. И, что более важно, они не ломаются.
- Float . Мы говорим о свойстве CSS . Это довольно распространенный способ создания макета веб-страницы. И в этом случае нам необходимо будет использовать отдельную таблицу стилей. Файл HTML используется, только чтобы определить контент веб-страницы. Если вы хотите выровнять контент, то должны использовать файл CSS .
- CSS-фреймворки . Они работают так же, как JavaScript-фреймворки . Подключите исходный файл в заголовке (например, <link rel=»stylesheet» type=»text/css» href=»stylesheets/framework_file.css»>), и он готов к работе! Вам не нужно задавать значения свойств самостоятельно. Для этого используются классы, которые разработчики фреймворка приготовили для вас.
- Флексбокс . Флексбокс — это короткое название CSS Flexible Box Layout Module . Это более новая по сравнению со свойством float технология. Основной принцип флексбокс — предоставить контейнеру возможность изменять ширину, высоту и порядок содержащихся в нем элементов. Если вы хотите наилучшим образом заполнить все свободное пространство, нужно использовать для верстки div флексбокс. Например, для охвата всех типов устройств и размеров экрана. Плавающий контейнер будет расширять содержащиеся в нем элементы, чтобы заполнить весь экран.
Теперь пора попробовать каждый из них.
Способы создания
Это дизайн моего сайта:
Таблицы
Для создания шапки сайта я использовал свойство position: relative . Давайте попробуем сделать это с нуля, используя табличную верстку.
Вот мой HTML-код :
И вот, что я получил:
Как видите, это не та же самая шапка. Она выглядит знакомо, но ее расположение немного изменилось. И вот почему. Вы знаете, что таблицы отлично подходят для симметричного позиционирования. Но для других целей они подходят не так хорошо. Также обратите внимание на громоздкость кода. Но у таблиц есть одна полезная особенность. Вот какую хитрость мы можем сделать:
И вы увидите, что макет стал выглядеть так:
Таким образом, можно легко определить, что где находится, если запутались.
Теперь плохая новость. Еще раз посмотрите на HTML-код . Это простая таблица, но представьте, как она будет выглядеть с десятками ячеек. Вот какой исходный код у меня:
В этом случае вам нужно использовать блочную верстку сайта с помощью CSS . Применив что-то наподобие этого:
Вы указываете переместить <div> на 100 пикселей вниз и на 100 пикселей вправо по отношению к его исходной позиции. С помощью этих свойств легко перемещать текст на странице. Можно перемещать его из одного угла в другой, чтобы определить, какое положение является наилучшим. Это лучше, чем таблица.
Float
Свойство float широко применяется при блочной верстке сайта. Мы будем использовать это свойство для вывода основной области размещения контента. Небольшой пример поможет вам лучше понять, как это работает:
В нем есть три разноцветных элемента <div>. Зеленый для основных статей, красный для новостных статей и синий для подвала.
И вот, что у нас получилось:
При верстке слоями вы указываете через свойство float , что хотите, чтобы ваш элемент <div> был плавающим. Затем задаете для него направление смещения. Обычно это float: left или float: right . Когда вы указываете элементу <div> смещаться влево, он это и будет делать, пока не закончится свободное пространство.
Следующий плавающей элемент будет смещаться, пока не встретит первый, и так далее. Следующий за плавающим элемент будет обтекать его как вода! Но если вы не хотите спускать все свои объекты » на воду «, можно использовать свойство clear . Оно определяет, какие стороны элемента не должны обтекать плавающие элементы.
Вот как выглядит часть моего макета для основного контента:
Теперь давайте сделаем ее плавающей:
Мы добавили несколько стилей и получили что-то вроде этого:
У нас есть большой блок для статей и блок поменьше для новостей. Мы использовали свойство float: left и для изображений. Обратите внимание, как они обтекаются тегом <p></p>. Этот макет выглядит, как ваш любимый журнал.
CSS-фреймворки
Если вы немного ленивы
Если у вас нет времени возиться с кодом при CSS верстке , можно использовать один из CSS-фреймворков . В нашем примере мы используем Bootstrap . Для этого нужно скачать его и подключить в HTML-файле .
Bootstrap содержит сетку, которая состоит из 12 равных по размеру столбцов. HTML-элементы упорядочиваются так, чтобы охватывать различное количество столбцов. Таким образом, создаются пользовательские макеты. Каждая часть контента выравнивается относительно этой сетки через указанное количество столбцов, на которые они растягиваются.
В этом примере мы создали строку. После этого поместили в нее два равных по размеру столбца. Каждый из них охватывает шесть из двенадцати доступных столбцов.
Далее мы создаем раздел » Скоро в прокате «. Он будет содержать четыре постера фильмов. Путем несложных математических вычислений определяем, что каждый из них будет охватывать по три столбца.
Я также добавил класс thumbnail , чтобы сделать постеры красивее. Он также содержится в Bootstrap .
И вот, что я получил:
Выглядит неплохо. И при верстке сайта из PSD вам даже не нужно редактировать файл CSS . Но вы не видите, что происходит внутри.
Флексбокс
Классика завтрашнего дня
Мы будем использовать флексбокс, чтобы создать раздел сайта » Бокс-офис «. Вот HTML-код :
Вот CSS-код для контейнера “ boxoffice ”:
Теперь пришло время создать гибкий контейнер. Для этого нужно задать для элемента display: flex . Согласно правилам верстки, все элементы флексбокса располагаются вдоль главной и поперечной осей:
Для флексбокса задаются два типа свойств. Первый используется для управления гибким контейнером, второй — для заполнения гибких элементов. Рассмотрим подробно первый тип.
По умолчанию, главная ось горизонтальная, поэтому элементы будут растягиваться в ряд. Для изменения основной оси мы можем использовать свойство flex-direction . Оно может принимать следующие значения: row , row-reverse , column и column-reverse . Мы будем использовать значение column . Давайте также добавим свойство height . Для чего это нужно, вы поймете чуть позже:
Вот как выглядит наш небольшой бокс-офис:
Мы использовали свойство height , потому что не хотим, чтобы контейнер флексбокса перекрывал изображение стрелки в нижней части фона.
Флексбокс также дает возможность вносить изменения в содержимое без изменения HTML-файла . Например, если вы хотите поменять расположение элементов на противоположное, вы можете изменить значение flex-direction на columns-reverse . Это изменит направление флексбокса на противоположное. Но вам нужно будет также изменить порядок расположения элементов внутри контейнера.
Для этого мы используем свойство justify-content . Доступные для него значения: flex-start , flex-end , center , space-between и space-around . Для него нужно установить значение justify-content , которое эквивалентно flex-end .
И вот каким образом отразились эти изменения:
Также можно перемещать элементы вдоль поперечной оси. Для этого используется свойство align-items. Вы можете задать для него следующие значения: flex-start , flex-end , center , baseline или stretch .
Чтобы использовать его, добавьте свойство в селектор флексбокса:
Все элементы сместятся к правому краю:
Есть еще одно полезное свойство — flex-wrap . Представьте, что бокс-офис быстро увеличивается. Что произойдет, если он станет больше, чем контейнер? Ничего плохого, если вы используете свойство flex-wrap .
Попробуйте добавить следующий код:
И вот, что в результате получится:
Как видите, элементы теперь укладываются в несколько столбцов. Значение по умолчанию для этого свойства – nowrap . При его применении элементы будут располагаться в один столбец ( или строку — это зависит от значения flex-direction ). Можно использовать значение wrap-reverse . Тогда элементы будут располагаться в обратном порядке.
Есть много полезных свойств. С их помощью вы можете изменять параметры каждого отдельно взятого элемента контейнера. Например, свойство order позволяет изменять порядок размещения элементов без необходимости вносить изменения в HTML-код .
Какой из способов выбрать?
Таблицы . В валидной верстке страниц таблицы не применяются. Они делают код грязным. Таблицы не так удобны в использовании, как может казаться. Если вы все еще не решили для себя, нужно ли использовать таблицы для макета страницы, то посмотрите на этот сайт .
Но они могут быть полезны, если речь идет о верстке электронных писем. Насчитывается не так уж много браузеров , которые люди используют в наше время, зато почтовых агентов просто огромное количество. Стационарные, онлайн и мобильные приложения используют различные движки отображения. HTML-таблицы выглядят одинаково во всех из них. Вот почему это отличный вариант для верстки электронных писем.
Float . Свойство float является наилучшим выбором, если у вас не слишком высокие требования. Это простой способ сделать ваш сайт более привлекательным. Его применение для изображений является, как по мне, признаком хорошего тона. Только нужно помнить, как работают свойства float и clear . Этого достаточно для начала.
Говоря о его недостатках, мы должны признать, что плавающие элементы привязаны к потоку документа, а это может существенно уменьшить его гибкость.
CSS-фреймворки . Если нужно создать макет быстро, используйте фреймворки. На сегодняшний день их много. Среди них выберите тот, который вам больше подходит.
Флексбокс . Придется потратить некоторое время, чтобы узнать, как он работает. Думаю, вы уже поняли, насколько удобны флексбоксы для управления отдельными элементами.
Но, как я уже сказал, это относительно новая функция CSS . Поэтому нужно учитывать ее поддержку браузерами . Вот подборка ошибок , которые мне удалось найти, и возможные пути их решения.
Надеюсь, теперь вы знаете, что такое верстка сайта. До новых встреч!
Вадим Дворников автор-переводчик статьи « 4 Different HTML-CSS Layout Techniques to Create a Site »
Как сделать красивый сайт в html
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
Создание сайта с нуля на HTML + CSS. Практика по пройденному материалу
Всем привет!
Вот и подошли мы к завершению изучения основ CSS.
Сегодня испробуем на практике все знания, которые вы получили, изучая основы CSS. Предлагаю вместе со мной создать простой сайт-визитку с использованием HTML + CSS.
Вот сама схема и план действий:
1). Создание файла «index.html» и «CSS».
2). Вставка в файл «index.html» скелет html (стандартный код).
3). Подключение «index.html»с «style.css».
4). Создание меню.
5). Вставка логотипа.
6). Создание блока для контента.
7). Создание подвала.
8). Создание остальных страниц.
Создание файла «index.html» и «CSS».
Итак, создайте себе отдельную папочку «Мой сайт». Теперь в этой папочке создайте два файла «index.html» и «style.css» .
Чтобы создать «index.html»:
на компьютере снизу в левом углу нажмите на кнопку «Пуск» .
Далее выберите «Все программы» => «Стандартные» => «Блокнот» .
Далее нажмите «Файл» => «Сохранить как» :
Укажите место, куда вы хотите сохранить файл, в нашем случае это папка под названием «Мой сайт».
В поле « Имя файла » напишите « index.html» , а не просто « index» ( это важно! ). Таким способом мы создаем файл с расширением « *.html » для веб-страниц. Далее нажмите на кнопку « Сохранить »:
Чтобы создать «style.css»:
кнопка «Пуск» => «Все программы» => «Стандартные» => «Блокнот» :
В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…» :
Далее укажите место, куда вы хотите сохранить файл, лучше файл разместить вместе с остальными HTML файлами.
В поле «Имя файла» напишите «style.css» , а не просто style ( это важно! ). Таким способом мы создаем файл с расширением « *.css ». Далее нажмите на кнопку « Сохранить »:
Вот, что должно получиться у вас в папке «Мой сайт»:
Вставка в файл «index.html» скелет html (стандартный код)
Откройте файл «index.html» через программу «Блокнот» и вставьте вот такой стандартный HTML код:
Сохраните файл «index.html».
Подключение «index.html» к «style.css»
Напомню вам, чтобы подключить файл со стилями « style.css » к « index.html » перед тегом </head> ,пропишите вот такой код:
Сохраните файл «index.html» .
Вот теперь можем создавать сайт.
Начнем с меню.
Создание меню
Через списки HTML создадим меню и, естественно, сразу пропишем для каждого раздела меню ссылку на другую страницу:
Вот полный пример:
В результате ничего особенного вы не увидите:
Теперь в CSS сделаем меню горизонтальным, уберем маркеры, сделаем отступы. Для этого в CSS пропишите:
Теперь выровняем меню посредине
Закрасим меню и добавим тень:
Осталось поменять размер и цвет в названиях меню:
Итак, вот весь CSS стиль для меню:
Смотрим на результат:
Вставка логотипа
Для логотипа создайте папку « image ». В этой папке будут храниться все изображения сайта-визитки.
Залейте в эту папку « image » ваш логотип, размерами примерно 200 х 200 px.
Дайте название логотипу « logo » и расширении файла « png ».
Вот так это будет выглядеть в HTML:
Выровняем лого по центру и закруглить через CSS:
Создание блока для контента
Теперь создадим блок для контента. Добавьте в HTML вот такой код:
В CSS выровняем блок «content» по центру. Укажем ему ширину, сделаем внутри отступы, выделим блок тенью:
Выровняем заголовок по центру, увеличим размер и поменяем цвет:
Теперь изменим размер и цвет текста. Добавим отступ для красной строки:
Вот весь CSS код для блока «content» :
Создание подвала
Теперь внизу сайта создадим подвал и разместим там копирайт.
В HTML добавьте вот такой код:
В CSS выровняем подвал по центру, изменим цвет текста и ссылки, поменяем размер:
Вот так выглядит мой абсолютно весь CSS код файла «style.css» :
Создание остальных страниц
Вот и готова первая страница. Весь HTML код файла « index.htm l»:
Она же нам послужит как шаблонная страница.
После того, как вы сохранили « index.html », создайте файлы:
- rabota.html – для страницы «Наши работы»
- prais.html – для страницы «Прайс»
- contakt.html – для страницы «Контакты»
И во все эти файлы вставьте такой же код, какой в файле « index.html », меняя только текст в <title> и текст с заголовками в блоке « content ».
Смотрим результат!
А те, кто пришел сюда случайно по запросу «создать сайт визитку бесплатно», могут скачать результат, который получился в процессе сегодняшней практики:
Поздравляю всех, кто изучал мои курсы от самого начала до сегодня, с окончанием изучения основ CSS.