Красиво оформленная страница html

12 приемов CSS для создания прекрасных сайтов

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «12 CSS tips and tricks which help you to create an amazing websites».

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

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

1. Вертикальное выравнивание при помощи flex

Flexible Box Layout Model (или просто Flexbox) со времени своего появления приобрел большую популярность. И это неудивительно, ведь данный подход существенно облегчает позиционирование и выравнивание элементов. Применение flex (свойство flexbox) сделало вертикальное выравнивание быстрым и легким. Давайте рассмотрим пример кода для вертикального позиционирования при помощи flex.

Как видите, чтобы наш элемент-потомок оказался точно в центре родительского элемента, мы использовали свойства display: flex и align-items: center, justify-content: center.

2. Режимы наложения (смешивания)

При помощи CSS можно делать много интересных вещей, в частности, применять режимы наложения слоев. Дли применения режимов наложения есть два свойства: mix-blend-mode (определяет смешивание элементов, находящихся друг за другом) и background-blend-mode (определяет смешивание фоновых изображений). Давайте посмотрим, как это работает:

В этом примере мы задаем изображение и заголовок в виде текста. Текст это тот элемент, который смешивается с изображением. Мы использовали значение overlay (режим перекрытия), но есть еще 15 других значений, которыми можно воспользоваться (попробовать можно здесь).

А теперь давайте посмотрим пример с применением background-blend-mode:

В этом варианте мы видим, как фоновое изображение смешивается с цветом. Первое изображение — исходное, а второе — после применения режима смешивания.

3. Параллакс-скроллинг

Параллакс (Parallax) это очень распространенная вещь в современном веб-дизайне. Эффект основан на том, что скорость прокрутки фонового изображения отличается от скорости прокрутки контента. Давайте посмотрим, как этого можно достигнуть при помощи CSS:

В этом примере вы видите, что наш текст и фоновое изображение движутся по-разному. Мы использовали transformZ для ускорения одного элемента и замедления другого. Круто выглядит, правда?

4. Shape outside (придание элементу непрямоугольной формы)

Еще одна прекрасная фича, имеющаяся в CSS, но мало используемая, — свойство shape-outside. Давайте посмотрим, как это работает:

В этом примере вы видите, как текст обтекает круг. Мы установили значение свойства shape-outside как circle 50%, но можно также поставить треугольник, квадрат (базовые фигуры) или какое-то изображение. Обратите внимание на это свойство — оно стоит того, чтобы познакомиться с ним поближе!

5. Обрезка строки

Терпеть не могу, когда мой текст не вмещается в div. В JavaScript есть несколько способов справиться с этим, но знаете ли вы, что CSS тоже позволяет обрезать текст? Давайте посмотрим:

Вы видите, как CSS обрезает строку и ставит на месте обрезки троеточие. Для обрезки использовались свойства overflow: hidden, white-space: nowrap, а для троеточия — text-overflow: ellipsis.

6. Обрезка изображения при помощи clip path

Бывает, дизайнер подходит к делу чересчур креативно, и вам приходится изыскивать способы вписать изображение в заданную геометрическую форму, например, в треугольник. Для этого можно воспользоваться свойством clip-path:

В этом примере мы создали круг, обрезанный круг и многоугольник.

7. Полная высота и ширина

Если мы хотим, чтобы наше приложение или сайт подгонялись под размер зоны просмотра, на помощь приходят единицы измерения vh и vw. Vh означает 100% высоты зоны просмотра, а vw — 100% ширины зоны просмотра. Давайте посмотрим это на примере:

Здесь мы для нашего элемента (синего блока) установили ширину в 50vw, а высоту в 50vh. Это означает, что он должен занимать в ширину 50% от ширины и 50% от высоты зоны просмотра. Если вы попробуете изменить зону просмотра, вы увидите, как будут меняться размеры нашего элемента.

8. Фильтры изображений

Если поработать с изображениями, можно достичь очень интересных эффектов. CSS позволяет использовать большое количество фильтров, чтобы разработчики могли работать с графикой, не прибегая к Photoshop. Ну, например:

Здесь мы для одного изображения использовали 7 разных фильтров.

9. CSS-анимации

Анимации на сайте привлекают внимание пользователя, именно поэтому они так часто используются в веб-дизайне. Давайте посмотрим, как создавать их при помощи CSS:

В этом примере мы создали маленькую точку, которая меняет свою позицию и непрозрачность: при каждом перемещении непрозрачность снижается на 25%, пока не достигнет 100%. Затем процесс повторяется. Разумеется, можно также менять цвет и другие свойства элементов.

10. Вращение элементов

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

11. Маска

Если вам случалось заниматься графическим дизайном, вы должны знать, насколько полезными бывают маски. А ведь их можно применять не только в графическом редакторе, но и в CSS. Давайте посмотрим, как сделать маску изображения:

В этом примере мы создали маску в форме круга с градиентной заливкой. Также можно в качестве маски использовать SVG-графику, для этого нужно указать путь к файлу (URL).

12. Приближение при наведении курсора

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

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

Заключение

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

Источник

Красивое оформление сайта — оформляем красиво одностраничный сайт

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

Чтобы увидеть эффекты перейдите на страницу с примером:

Посмотреть примерСкачать

Если у Вас есть трудности с созданием лендинга, тогда начните с данного мини-курса: «Лендинг за 60 минут».

Вот как выглядит блок при наведении:

Как сделать красивое оформление для своего продающего сайта?

1 HTML структура

Сперва подключаем иконки от FontAwesome между тегами , которые будем использовать для описания:

link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

У нас есть один общий блок, в котором находятся все 3 блока с описанием и иконками:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

div class="bulletsBlock"> div class="bullet-item"> span class="iconBullet fa fa-cog">/span> p class="titleBullet">Выгода 1/p> p class="hideText">Дополнительныйbr>скрытый текст 1/p> /div> div class="bullet-item"> /div> div class="bullet-item"> /div> /div>

Несколько слов по структуре:

• Строки: с 1 по 15 — общий блок, который содержит 3 блока с описанием.
• Строки: со 2 по 6 — один отдельный блок с описанием выгоды.
• Строка: 3 — иконка блока.
• Строка: 4 — видимая часть с описанием выгоды.
• Строка: 5 — скрытая часть с подробным описанием выгоды.

Структура прозрачна и проста. Переходим к оформлению и создании анимации.

2 CSS стили

Для создания анимации нам понадобится лишь CSS3 и никакого Javascript.

Прописываем общие стили для 3-х блоков:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

.bulletsBlock:after { content: ""; display: table; clear: both; } .bulletsBlock > div { width: 30%; float: left; background: rgba(0,0,0,0.3); margin-left:5%; text-align: center; position: relative; padding-bottom: 31.7%; cursor: pointer; -webkit-transition:all 0.35s linear; transition:all 0.35s linear; } .bulletsBlock > div:first-child { margin-left:0; } /*Тень снизу у блока при наведении*/ .bulletsBlock > div:hover { -webkit-box-shadow: 0 35px 35px -35px #000000; -moz-box-shadow: 0 35px 35px -35px #000000; box-shadow: 0 35px 35px -35px #000000; }

Далее идет иконка и ее анимация при наведении:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

.bullet-item span{ line-height: 1.5em; font-size: 12.5em; color:#fff; position: absolute; top:0; left:0; display: block; width: 100%; -webkit-transition:all 0.35s ease; transition:all 0.35s ease; } /*Анимация иконки при наведении - уменьшение и сдвиг вверх*/ .bulletsBlock > div:hover span.iconBullet{ line-height: 1.35em; font-size: 10.625em; top:-2.7%; }

Далее напишем стили для блоков с текстовым описанием:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

.titleBullet, .hideText { position: absolute; left:0; bottom:0; text-align: center; width: 100%; margin: 0; color: #fff; -webkit-transition:all 0.35s ease; transition:all 0.35s ease; } .titleBullet { line-height: 2.5em; font-size: 2.1875em; background:#3B3B3B; z-index: 10; } .hideText { line-height: 1.3em; font-size: 1.25em; padding: 1em 0; background:#3B3B3B; font-weight: 300; z-index: 8; height: 50px; -webkit-transition:all 0.35s linear 0.2s; transition:all 0.35s linear 0.2s; } /*Анимация при наведении видимого текстового блока*/ .bulletsBlock > div:hover p.titleBullet{ bottom:80px; } /*Анимация при наведении скрытого текстового блока*/ .bulletsBlock > div:hover p.hideText{ background:#454545; }

Вывод

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

ВНИМАНИЕ: я понимаю что не у всех получается установить эффекты, скрипты и плагины, которые находятся на сайте, поэтому я сделал возможность проконсультироваться по любому вопросу в сайтостроении здесь: SKYPE Консультация!

Источник

Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP) | Материалы урока

В этом уроке мы разработаем красивый сайт с плавной анимацией перемещения в области просмотра, рассмотрим самый простой способ оформления контента в виде плиток Masonry на чистом CSS и добавим поддержку темной темы ОС (Dark Mode). Кроме того, я покажу, как правильно разрабатывать прелоадер для подобных сайтов.

Материалы урока и готовый результат: Скачать

Рекомендуемые уроки и инструменты

• Настройка VS Code для верстки: Ознакомиться с уроком
• Справочник EMMET (быстрая верстка): Ознакомиться с уроком
• Cubic-Bezier CSS Generator: Перейти на сайт
• Instant Eyedropper: Скачать пипетку

Настройки CSS анимации:

Code snippets, short and long-hand:

transition: all 1000ms cubic-bezier(0.075, 1.000, 0.250, 1.000); transition-timing-function: cubic-bezier(0.075, 1.000, 0.250, 1.000);

Мобильные устройства

Анимация Draggable должна работать только на больших экранах. Соответственно, на смартфонах возвращаем дефолтные параметры для отображения всех плиток Masonry.

В «main.css» дописываем медиа-запрос с достаточным запасом по ширине:

/* MOBILE */ @media (max-width : 992px) < .header < position: relative; >body < overflow: scroll; display: block; padding: var(--gap); >.gallery < width: 100%; column-width: 10em; transform: scale(1); >.gallery__item:hover < transform: scale(1); >>

Полный JS-код урока

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

window.onload = function() < // После того, как окно загружено setTimeout(function() < // Устанавливаем таймаут на 200мс document.body.classList.add('loaded') // Добавляем класс готовности body if (window.matchMedia('(min-width: 992px)').matches) < // Если не смартфон Draggable.create('.gallery', < // Запускаем плагин Draggable bounds: 'body', inertia: true >) > >, 200) >

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

Премиум уроки от WebDesign Master

Создание сайта от А до Я. Комплексный курс

Создание современного интернет-магазина от А до Я

Я — фрилансер! Базовый курс для начинающих

Другие уроки по теме «Верстка»

Источник