Как добавить буквицы, наложения изображений и даже несколько спецэффектов
Вот простой веб-сайт. Это прекрасно - просто, информативно и читабельно. В нем даже есть несколько красивых картинок.
Но с помощью пары простых приемов мы собираемся превратить эту простую Джейн в мокрую мечту веб-дизайнера:
Выглядит сейчас довольно круто, не так ли? Добраться до него очень просто. Все, что вам нужно, это простой CSS. Давайте начнем!
1. Цвет выбора текста
Это то, что можно изменить в очень немногих строках кода, но это часто упускается из виду! Важны мельчайшие детали, и если вы измените цвета выбора / выделения по умолчанию на цвета, соответствующие выбранной вами теме, ваши посетители заметят это и смогут лучше просматривать ваш сайт.
Чтобы изменить цвет выделения / выделения и цвет текста, просто укажите их так:
::selection {
background-color: #013896;
color: #f1f1f1;
}
2. Буквицы
Чтобы получить этот профессиональный вид статьи / газеты, вы можете использовать буквицу для первой буквы вашего текста. Буквица - это большая заглавная буква, и вы можете стилизовать ее так, как хотите, в соответствии с темой вашей веб-страницы. Есть несколько способов реализовать буквицу в CSS. То, что я делаю, очень просто.
Я помещаю первую букву в тег span следующим образом:
<span class=”dropcap”>T</span>he places I dream of
Затем с помощью CSS я украшаю класс буквицы:
.dropcap {
float: left;
font-size: 400%;
color: #cf142b;
margin: -13px 7px -13px 0;
}
В основном, мне нужно убедиться, что я установил его как плавающий объект. Размер и цвет полностью на ваше усмотрение, и, чтобы подвести итог, просто отрегулируйте поля, чтобы он выглядел идеально.
Одна буква действительно имеет значение!
3. Наложение изображений
Наложение изображения - это визуальное удовольствие при наведении курсора мыши на изображение. Он может служить многим целям, от украшения до обнаружения скрытого элемента, такого как кнопка. В Интернете можно найти множество стилей, и здесь я решил заменить URL-ссылку на исходную статью изображением логотипа исходного издателя. При наведении курсора мыши на изображение появляется простой текст.
<div class=”container”> <a href=”https://luxurylondon.co.uk/travel/international/cambodia-luxury-hotels-review/"><img src=”https://luxurylondon.co.uk/images/frontend/logos/luxury-london-logo.png" alt=”Avatar” class=”image”></a> <div class=”overlay”> <div class=”text”>Go to site.</div> </div> </div>
Идея состоит в том, чтобы поместить изображение и оверлей (что бы это ни было) друг на друга. Сделайте наложение невидимым, если на него не наведется указатель мыши. Это можно изменить в атрибуте непрозрачности. Чтобы все было гладко, укажите также время перехода. Обратите внимание на переход и непрозрачность в приведенном ниже коде:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #cf142b;
}
.container:hover .overlay {
opacity: 0.8;
cursor: pointer;
}
4. Раскрашивайте и увеличивайте изображение при наведении курсора.
Это один из моих любимых приемов - он меняет изображение от скучного и статичного до интерактивного. Во-первых, вам нужно обернуть изображение в контейнер. Дадим контейнеру имя класса image image-colorize. Вы должны установить для атрибута переполнения контейнера значение «скрытый», чтобы эффект сработал.
Уловка - это трюк с наложением изображения. Установите изображение в оттенках серого по умолчанию, а затем уберите этот фильтр при наведении курсора мыши на изображение. Масштаб можно настроить с помощью transform: scale (your_ratio);
.image {
width: 100%;
overflow: hidden;
}
.image-colorize img {
transition: transform .5s, filter 0.5s ease-in-out;
filter: grayscale(100%);
}
.image-colorize:hover img {
filter: grayscale(0);
transform: scale(1.1);
}
Это намного больше, чем просто оттенки сепии и серого! Ознакомьтесь с этим отличным сообщением в блоге о различных других стилях, которые вы можете реализовать с помощью этого изящного трюка.
5. Играйте с маскировкой изображения
Теперь мы вступаем в круг профессионалов, но вам не нужны профессиональные навыки, чтобы добиться такого эффекта. Маскирование изображения - это метод обрезки изображения определенной формы. Эта форма определяется вторым изображением, где это изображение содержит только форму маски, а все остальное прозрачно. Это легче понять с помощью визуальных элементов.
Если это мой образ:
А это моя маска (белая часть на самом деле прозрачная):
Тогда это будет результат маскировки изображения:
Преимущество маскирования изображения заключается в том, что изображение не совсем стандартное прямоугольное поле, и это дает вам много творческого пространства, с которым можно поиграть (как видно из гифки в начале статьи). Например, представьте, что за Ангкор-Ватом садится / встает солнце!
Конечно, никто не узнает, что ваше изображение замаскировано, если вы не поместите что-то за ним. Если вы этого не сделаете, он будет выглядеть как обычный белый фон.
Как видите, я спрятал текст «Камбоджа» за Ангкор-Ватом при прокрутке вниз. В исходной версии, если вы прокрутите вниз, «Камбоджа» просто исчезнет наверху. Так что нам нужно предотвратить это. Что мы можем сделать, так это приклеить текст, чтобы он всегда оставался на виду, пока не исчезнет за нашим изображением.
Вот стиль текста:
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: -999;
padding: 50px;
text-align: center;
font-size: 150px;
margin-bottom: -70px;
}
«Position: sticky» - вот что делает этот элемент липким. Еще один важный параметр - z-index. Что-то с z-индексом выше, чем у другого, будет видно сверху. Мы хотим, чтобы текст исчез за изображением, поэтому мы устанавливаем его z-index меньшим (не обязательно до -999).
Последний шаг. Оберните изображение и текст в тег заголовка, иначе «Камбоджа» также будет видна за основной статьей.
<header> // all those mask tricks </header> // rest of document
Подведение итогов (предназначенный каламбур)
Все эти красивые уловки - больше, чем просто приятные мелочи. Если вы веб-разработчик, который только начинает, поиграйте с CSS - это отличный способ узнать о возможностях и ограничениях CSS, а также получить удовольствие от процесса проектирования. Если вы хотите создать веб-сайт для своего бизнеса, эти мелкие детали имеют большое значение для повышения качества обслуживания клиентов и побуждают их оставаться на вашем веб-сайте дольше.
Сегодня мы работали с чистым CSS, и с его помощью вы уже можете неплохо переделывать сайты. Включение JavaScript выведет его на совершенно новый уровень. В Интернете есть множество ресурсов для обучения, и после того, как вы овладеете основами, не бойтесь погружаться в стили, требующие дополнительных технических знаний.
Для исходного кода до и после этого примера, иди сюда.
Написано Далисом, студентом факультета информатики Национального университета Сингапура. Далис присоединилась к нашей летней программе IT-стажировки 2019 года.
Мы нанимаем. Посетите www.9cv9.com/jobs, чтобы узнать о других технических вакансиях.
