Создание красивого сайта с поддержкой темной темы (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 tutorial for non-designers to design headers
In this article, I’ll show you how to create a beautiful header when you use the custom HTML mode in Serenytics. This mode gives you full control over what appears in your header. This tutorial will explain you the required HTML/CSS basics to create your own dashboard headers. It is mostly intended to data engineers, data scientists or business intelligence experts.
The most efficient way to follow this tutorial is to copy/paste the given snippets into a Serenytics dashboard. You’ll be able to quickly modify the code to better understand how it works.
A very simple first example
We’ll start with a first example showing a centered title with a border on a simple background. Here is the html code to copy/paste in the custom HTML input field in Serenytics:
The only tricky line is margin: 0 auto. It is used to center the child div in its parent div.
Using a gradient background
In many cases, you will change the background color to be white. One issue with pure white is that the dashboards tabs are often also white. This leads to a poor design. A easy trick is to use a vertical gradient from white to a light grey as background:
Of course, you are not limited to such simple gradient. As creating your own gradients is not so easy, you can pick good ones on websites such as https://webgradients.com/.
Here is an example using:
background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
Using a photo as background
Using photos is always complicated as you need to find one that you are allowed to use, it should fit with your content (e.g. be blurred at the position of the title) and it should fit with the design of your dashboard.
I usually use pictures from www.pexels.com corresponding to the keyword texture. Here is an example:
This gives this output:
Using a pattern as background
An alternative to a photo is to repeat a SVG pattern in the background. The easiest option is to pick a pattern from http://www.heropatterns.com/. For your favourite pattern, copy the provided CSS and paste it in a class in the Serenytics CSS editor of your dashboard (in Advanced Styles Editor). And then apply this class to your header background.
Here is an example of a CSS we selected from http://www.heropatterns.com/:
And the custom HTML code we use:
The only changes compared to a simple title header are:
- we applied the class levels-pattern to the parent div.
- we changed background color and color of the child div to create a contrast with the white background.
A 3-column layout
So far, the layout we used is composed of a single centered div. But in many cases, we want 3 columns, vertically aligned and we want the middle one to be centered. This is not so easy to achieve. In this example, we’ll do it with the flex approach (the easiest one, but it may not work on old browsers). If you want to know more about flex, here is a good tutorial: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The html we use is:
This gives the following output:
What’s important here is that the “main title” block is well centered. This is achieved by the following lines:
In the parent div:
- display: flex. Use flex for this div.
- align-items: center. Center child divs along the vertical direction.
In the middle child div:
- width: 50%. This div will occupy 50% of the parent div.
- flex: 0 0 auto. This div will use the specified width (i.e. 50% of the parent div).
In the first and last child div:
- flex:1. This div will adapt its width to fit the parent div and both divs using it will have the same width.
One issue with this code is that the left and right div backgrounds span the full div. Said another way: there is no empty space between the middle div and the right/left div. To be able to tune these two divs precisely, we have to add another level of divs inside them:
This leads to a middle div which is still centered, and two side divs which span only the required width:
In this version, the left/right children have another div level, with the option display: inline-block. This is used to specify that the div size adapts to the content and don’t span the parent full width.
Here is an example using this layout and a SVG pattern as background:
Conclusion
In this article, we’ve explained the HTML/CSS code for a few header examples. You can use them as a starting point for your first projects. And they are simple enough to be modified to create your own custom headers.
Трюки CSS и JavaScript, которые вдохнут жизнь в ваш статический сайт
Последние несколько недель я работал над своим сайтом и хотел придать ему некоторый динамизм. Эта статья не о создании веб-страницы. Я покажу готовые сниппеты с объяснениями.
3D-анимация на JS
Первый трюк — замечательный трёхмерный эффект на JS.
Как видите, когда указатель мыши проходит по этой «карточке», элементы внутри нее обретают трёхмерность.
Как это делается
Сначала создаётся HTML div:
Здесь у нас есть основной класс (card) и два других класса внутри card (header and info). Header будет классом, содержащим изображение (в нашем примере — логотип Medium), а info будет содержать текст в карточке. Теперь давайте добавим CSS, чтобы карта выглядела лучше.
Здесь я объявил высоту, ширину, границу, отступ и тень. Обновите страницу, и вы увидите результаты. Последний шаг — добиться 3D-эффекта при наведении курсора мыши на карту. Для этого я воспользовался JS:
- Объявите переменные.
- Создайте два прослушивателя событий для card.
- В mouseenter переведите Z на 3 пикселя для title, header и description. Вы также можете решить, вращать эти элементы или нет (rotateZ).
- По событию mouseleave верните всё в нормальное состояние.
Откройте для себя Vanta.js для анимации фона
Устали от статичных цветов и изображений на фоне веб-страницы? VantaJs разработана, чтобы оживить фон:
Как это делается
Это довольно просто. Добавьте в HTML такой код:
Это установит фон Vanta.js Globe для идентификатора htmlid.
Чтобы переключаться между ними, измените VANTA.GLOBE на VANTA.[Backgroundname]. Конечно, перед этим нужно добавить соответствующий cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.[backgroundname].min.js.
ScrollReveal
Для тех, кто не знал об этой фантастической библиотеке JS, ScrollReveal может отображать элементы при прокрутке веб-страницы:
Как это делается
- Добавьте в заголовок вашего HTML.
- В файле JS напишите:
Код отобразит элемент с классом .htmlclass с задержкой 400мс при прокрутке страницы.
Изменение размера и цвета букв
Этот небольшой трюк с CSS действительно впечатляет при правильном использовании:
Как это делается
Создайте несколько новых HTML-элементов span и укажите их класс:
3. Применяя CSS :hover, мы изменяем размер букв и их цвет:
Теперь, когда вы наведёте указатель на буквы, вы увидите, как они меняют размер и цвет. Чтобы добиться еще более динамичного эффекта, я предлагаю создать отдельный класс для каждой буквы с разными размерами и цветами. Кроме того, вы можете применить CSS :hover к каждому типу элемента в HTML. Например, я тоже применил его к своей контактной форме:
Свойство animation
Дополнили материал описанием свойства из статьи Криса Койера.
Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как color, background-color, height, или width. Каждая анимация должна быть определена с помощью @keyframes, которое затем вызывается с помощью свойства animation, например:
Каждое правило @keyframes определяет, что должно происходить в определённые моменты анимации. Например, 0 % — это начало анимации, а 100 % — её конец. Этими ключевыми кадрами можно управлять либо с помощью сокращённого свойства animation, либо с помощью его восьми подсвойств, чтобы обеспечить больший контроль над ключевыми кадрами.
Подсвойства
- animation-name: объявляет имя правила @keyframes, которым нужно управлять.
- animation-duration: продолжительность одного цикла анимации.
- animation-time-function: устанавливает предустановленные кривые ускорения, такие как ease или linear.
- animation-delay: время между загрузкой элемента и началом анимационной последовательности (интересные примеры).
- animation-direction: устанавливает направление анимации после цикла. Его значение по умолчанию сбрасывается в каждом цикле.
- animation-iteration-count: сколько раз должна быть выполнена анимация.
- animation-fill-mode: устанавливает, какие значения применяются до/после анимации.
Например, вы можете установить последнее состояние анимации так, чтобы оно оставалось на экране, или можете настроить его на переключение назад, когда анимация началась. - animation-play-state: приостановить/воспроизвести анимацию.
Вот полный список значений, которые может принимать каждое из этих вложенных свойств:
| animation-timing-function | ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) |
| animation-duration | Xs или Xms |
| animation-delay | Xs или Xms |
| animation-iteration-count | X |
| animation-fill-mode | forwards, backwards, both, none |
| animation-direction | normal, alternate |
| animation-play-state | paused, running, running |
Несколько шагов
Если анимация имеет одинаковые начальные и конечные свойства, полезно разделять запятыми значения 0 и 100 % внутри @keyframes:
Несколько анимаций
Вы можете разделить значения запятыми, чтобы также объявить несколько анимаций в селекторе. В приведённом ниже примере мы хотим изменить цвет круга в @keyframe, одновременно перемещая его из стороны в сторону с помощью другого свойства.
Производительность
Анимация большинства свойств является проблемой производительности, поэтому мы должны соблюдать осторожность перед анимацией любого свойства. Однако есть определённые комбинации, которые можно безопасно анимировать:
- transform: translate()
- transform: scale()
- transform: rotate()
- opacity
Какие свойства можно анимировать?
На MDN есть список свойств CSS, которые могут быть анимированы. Они имеют тенденцию быть цветами и числами. Пример неанимируемого свойства — background-image.
Поддержка браузерами
Эти данные о поддержке браузера взяты с сайта Caniuse, где имеется более подробная информация. Число означает, что браузер поддерживает функцию в этой версии и выше.
Настольные
| Chrome | Firefox | IE | Edge | Safari |
| 4* | 5* | 10 | 12 | 5.1* |
| Android Chrome | Android Firefox | Android | iOS Safari |
| 87 | 83 | 4* | 6.0-6.1* |
Префиксы
Хотя поддержка этого свойства в современных браузерах достаточно хороша, мы, возможно, захотим поддерживать как можно больше старых браузеров. В этом случае нужно использовать префиксы поставщиков:
Такие трюки подойдут для того, чтобы вдохнуть жизнь в ваш сайт-визитку или сайт пет-проекта, над которым вы работаете. Если у вас есть какие-то свои трюки — призываю делиться ими в комментах. И не забывайте о промокоде HABR, который дает дополнительную скидку 10% к той, что указана на баннере.
Шапка сайта в css – как ее сделать
От автора: приветствуем вас на нашем блоге о сайтостроении. У любого сайта есть то, чем он обычно запоминается и выделяется среди остальных. Обычно это именно шапка сайта. CSS позволяет сделать ее такой, как вам нужно.
Шапка сайта – какой она бывает
Поразительно, как много может зависеть сегодня от одного только дизайна веб-ресурса. Но что особенно сильно отделяет веб-ресурс от других? Как правило, это именно шапка сайта с фирменным логотипом и уникальным оформлением. Обычно именно по ней люди запоминают какой-то интернет-проект. Это очень хорошо запоминается в памяти людей.
Например, если вы видите белую букву “В” на синем фоне, то наверняка сразу делаете вывод – это иконка социальной сети Вконтакте. А изображение почтового голубя у всех сразу же ассоциируется с Twitter. Все это стало возможным потому, что в шапках у этих сайтов были именно такие изображения и они очень хорошо запомнились людям.
Так, это было немного размышлений, теперь давайте перейдем непосредственно к технической части.
Как в CSS можно оформить шапку сайта?
Вообще шапки бывают разными. По ширине их можно разделить на две группы: выровненные по центру и те, что на всю ширину веб-страницы.
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Раньше шапку делали также, как и любой другой блок – обычному тегу div давали нужный идентификатор, после чего в него попадало все нужное содержимое, а потом все это оформлялось. Сегодня же уже принято верстать по-другому. Специально для создания шапки сайта в HTML5 появился парный тег – header. Его использование приветствуется, это позволяет браузерам понимать, что это за часть шаблона и за что она отвечает. Кстати, если вы хотите изучить основы HTML5, то вам прямая дорога в наш премиум-раздел, где вы можете посмотреть уроки по этой технологии.
Поэтому, для создания простейшей шапки достаточно написать в html вот такой код: