Двухмерные трансформации CSS: наклон, масштабирование и сдвиг
По сравнению с трансформацией поворота остальные двухмерные трансформации CSS, вероятно, менее полезны: масштабирование и сдвиг всегда можно было так или иначе создать с помощью свойств CSS, изменяя ширину и высоту элемента или задавая ему абсолютное или относительное позиционирование. Основное преимущество использования этих значений трансформаций CSS в том, что они более непосредственные и их можно очень легко анимировать.
Трансформация наклона
Трансформация наклона, вероятно, наиболее сложная для понимания, так как ее значения в градусах применяются не так, как можно было бы ожидать. Можно рассматривать наклон как оттягивание противоположных сторон блока элемента для создания заданного угла. Для краткости здесь и далее показан код CSS без приставок производителей, которые в этом случае и не понадобятся для большинства современных версий браузеров:
img#car {
transform: skewX(21deg);
}Также можно наклонять вертикально с помощью значения skewY(21deg). Отрицательное значение наклонит элемент в противоположную сторону. Если использовать эти значения вместе и аккуратно задать значения расположения, можно создать эффект коробки из трех изображений одинакового размера, т. е., трехмерный эффект с помощью CSS.
Трансформация масштабирования
Масштабирование — просто скалярная величина: множитель, на который увеличивается или уменьшается размер элемента:
img#car {
transform: scale(2);
}Как и при трансформации поворота и других трансформациях CSS смасштабированный элемент не влияет на свое окружение.
Зачем использовать трансформацию масштабирования, если можно использовать свойства ширины и высоты?
Так как свойства ширины и высоты влияют только на размер изображений напрямую, использование этих свойств на других элементах, таких как блоки, ограничивает их форму, но не изменяет их масштаб, по меньшей мере по умолчанию. Попробуйте расположить изображение и несколько абзацев текста в блоке и применить к нему свойства ширины, высоты и трансформацию масштабирования, чтобы увидеть разницу.
Так же, как и трансформацию наклона, трансформацию масштабирования можно ограничить значениями только x или только y с помощью записи scaleX и scaleY.
Трансформация сдвига
Трансформация сдвига сдвигает элемент из его текущего положения. Это очень похоже на относительное позиционирование. У этой трансформации нет особых преимуществ перед относительным позиционированием, хотя ее можно очень плавно анимировать с помощью CSS.
img#obj {
transform: translateX(2em);
}Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Косая граница блока или граница с наклоном
Чтобы сделать такой же наклон для границ блоков, подвала или шапки сайта, нужно всего лишь воспользоваться CSS. Делается все с помощью псевдоэлементов after или before.
К примеру, у вас есть подвал footer и вы решили сделать ему границу с наклоном как в примере. Он должен быть на всю ширину экрана, то бишь — width:100%;. Ну и добавляем ему псевдоэлемент before.
footer{
margin-top:100px;
position:relative;
width:100%;
background:#212121;
}
footer:before{
content:'';
position:absolute;
top:-50px;
width:0;
height:0;
border-bottom: 50px solid #212121;
border-right: 100vw solid transparent;
}
Давайте немного разберем параметры, которые мы присвоили подвалу:
- margin-top:100px; — отступаем от основного контента, чтобы наклон не налез на предыдущий блок.
- position:relative; — чтобы псевдоэлемент был рядом с подвалом и не подскочил в верх страницы. Можно так же устанавливать и position:absolute; если это требуется. Тот же подвал, вы можете прижимать к низу страницы с помощью абсолютного позиционирования.
- width:100%; — растягиваем на всю ширину страницы.
- background:#212121; — фон подвала, он должен быть таким же, как и цвет обводки нашего псевдоэлемента.
И его псевдоэлементу footer:before
- content:»; — обязательный параметр для псевдоэлементов.
- position:absolute; — абсолютное позиционирование для псевдоэлемента. Чтобы поднять его над подвалом.
- top:-50px; — высота, на которую поднимаем псевдоэлемент над подвалом. Она должна соответствовать толщине нижней линии/обводке.
- width:0;height:0; — обязательно задаем ширину и высоту с нулевым значением.
- border-bottom: 50px solid #212121; — параметры нижней границы обводки. Высота 50 пикселей. Именно та высота, что должна быть одинаковой с высотой на которую мы поднимаем наш псевдоэлемент. так же определяем, что это полоса с цветом, таким же как сам подвал.
- border-right: 100vw solid transparent; — параметр правой границы. Задаем ширину в единицах viewport —
По своей сути, мы с вами применили создание геометрических фигур с помощью CSS и создали треугольник. делается это с помощью границ обводки. Сам псевдоэлемент без размеров, а границы окрашены, что и создало треугольник, который мы разместили над подвалом. это создало эффект наклона и косого футера.
Все это можно провернуть для любого блока. данный пример показан для треугольника что размещается над блоком, Чтобы разместить под, то указываются такие параметры границ:
border-top:50px solid #212121; border-right:100vw solid transparent;
Можно так же менять правую границу
Как видите, мы просто поменяли border-bottom на border-top. Так же можно менять и правую границу с левой и будет так:
border-top:50px solid #212121; border-left:100vw solid transparent;
В общем, можете подбирать свои варианты и менять направление наклона и его расположение над блоком или под.
Кстати, чтобы разместить под блоком, позиционирование нужно тоже правильно указывать то бишь top:-50px; заменить на bottom:-50px;
Надеюсь, вам будет полезной данная статья и когда-то вы примените данный материал на своем проекте.
На этом все, спасибо за внимание. 🙂
Создание наклонного меню с использованием только CSS
Дизайнеры постоянно создают макеты сайтов с наклонными меню, потому что такие меню «выглядят по-другому». Для понимания, что главным требованием к пользовательскому интерфейсу является четкость и ясность, требуется время. Это не означает, что меню на сайте должны быть однообразными и скучными: при использовании обычного горизонтального меню остается много возможностей. Нас заинтересовала возможность создания пунктов меню в наклонной рамке с помощью чистого CSS.
Разметка HTML для этого примера очень проста. Здесь воплощено меню для выдуманной компании «Quantum Foam», специализирующейся на захватывающих симуляциях экзотических мест:
<ul>
<li><a href="#">Everest</a>
<li><a href="#">Mars</a>
<li><a href="#">Belize</a>
<li><a href="#">Monaco</a>
</ul>Код CSS поставил перед нами несколько интересных задач. Сначала список должен быть наклонен с помощью трансформации наклона, а элементы списка помещены бок о бок:
ul#quantum-navigation {
transform: skewX(-15deg);
font-family: Agenda-Medium, Agenda, Arial Narrow, Arial, sans-serif;
text-transform: uppercase; font-size: 1.5rem;
line-height: 0;
padding-left: 0;
}
ul#quantum-navigation li {
width: 12rem;
box-shadow: 8px 0 3px rgba(0,0,0,0.2);
position: relative;
background-color: #ff0;
background-size: 100% 120%;
background-repeat: no-repeat;
overflow: hidden;
}
ul#quantum-navigation li,
ul#quantum-navigation li a {
display: inline-block;
transition: .8s;
} Обратите внимание, что приставки производителей не показаны в коде ради краткости и ясности.
Каждому элементу списка заданы фиксированная ширина и тень справа. У каждого элемента будет собственное фоновое изображение, так что общие свойства и значения также объявлены тут.
Элементы накрывают друг друга, но в обратном порядке: т. е., первая ссылка накрывает вторую, вторая накрывает третью и так далее, что противоположно тому, как браузер располагает элементы при нормальных условиях. Каждому элементу задано относительное позиционирование, чтобы добиться этого эффекта.
Трансформации CSS будут унаследованы текстом ссылки. Чтобы решить эту проблему, нужно наклонить ссылки в противоположную
ul#quantum-navigation li a {
transform: skewX(15deg);
text-decoration: none;
color: #fff;
text-shadow: 2px 2px 2px rgba(0,0,0,0.4);
letter-spacing: .25rem;
width: 18rem;
background: rgba(0,0,0,0.3);
margin-left: -1rem;
padding: 1rem 3rem;
}Добавление тени текста, увеличение расстояния между буквами и затемнение фона делает текст более читабельным. Обратите внимание, что ссылки на 50% шире, чем элементы списка, внутри которых они находятся, чтобы они всегда полностью заполняли свой блок. Использование свойства скрытия переполнения для родительских элементов не допускает вылезания ссылок за рамки.
После этого элементам списка заданы неповторяющиеся фоновые изображения и порядок отображения. Некоторые элементы отодвинуты влево для лучшей композиции:
#everest {
z-index: 5;
background-image: url(everest.jpg);
}
#mars {
z-index: 4;
background-image: url(mars.jpg);
left: -20px;
}
#belize {
z-index: 3;
background-image: url(belize.jpg);
left: -40px;
}
#monaco {
z-index: 2;
background-image: url(monaco.jpg);
} При наведении указателя мыши на элемент списка происходят два события: ссылка светлеет, т. е., исчезает темный фон, и элемент сдвигается вправо:
ul#quantum-navigation li:hover {
transform: translateX(10px);
}
ul#quantum-navigation li:hover a {
background: rgba(0,0,0,0);
}Меню автоматически адаптивное в том смысле, что элементы списка перенесутся влево, если не будет достаточно места, чтобы показать меню целиком. Но существует много других возможностей, которые Вы можете испробовать.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Создание блока с наклонной нижней рамкой
Сегодня поговорим о том, как создать наклонную нижнюю рамку, подобную показанной ниже. Этот урок можно считать посвященным новому взгляду на верстку веб-сайтов: долгое время мы полагались на сетки из трех столбцов и углы в 90 градусов. Но применив воображение, мы можем создать намного больше.
Для этого решения дополнительный элемент не требуется. Вместо этого используются множественные фоны и линейный градиент. Полный код HTML следующий:
<div>
<h2>Sign Up</h2>
<img src="adriana.jpg" alt>
<label for="name">Name</label>
<input type="text" name="name">
<label for="email">Email</label>
<input type="email" name="email">
<label for="password">Password</label>
<input type="password" name="password">
<input type="submit" value="Done">
</div>Ключевой код CSS:
#login {
font-family: Avenir, Calibri, sans-serif;
width: 33%;
margin: 0 auto;
background-image:
linear-gradient(175deg, transparent 36%, white 36.05%),
url(nahatlatch.jpg);
text-align: center;
background-size: 100%, cover;
background-repeat: no-repeat;
}Накрывая растровое фоновое изображение линейным градиентом и не забывая, что в коде CSS последнее фоновое изображение в объявлении накладывается первым, получаем расположение градиента над изображением. Начиная градиент с прозрачного, добиваемся видимости изображения из-под градиента, а помещая переход прозрачной части градиента очень близко к белой части, достигаем эффекта остро обрезанного края.
Остальной код CSS просто задает стили блоку, который может представлять собой буквально любые блочные элементы, и его содержимому. Он приведен ниже на всякий случай:
#login h2 { font-weight: 100; padding-top: 6rem; }
#login img {
width: 33%;
height: auto;
border-radius: 50%;
border: 5px solid white;
}
#login label { color: #666; margin-top: 1rem; }
#login input, #login label {
display: block;
width: 90%;
margin: 0 auto;
padding: .5rem;
}
#login input {
text-align: center;
border: none;
border-bottom: 1px solid #aaa;
font-size: 1rem;
}
#login input[type="submit"] {
width: 100%;
margin-top: 1rem;
background: hsl(0, 90%, 60%);
color: #fff; padding: 1rem;
text-transform: uppercase;
}В демонстрации работы на сайте Codepen еще добавлен код для адаптивности.
Единственный минус этой версии эффекта — совместимость со старыми версиями браузеров: браузер Interner Explorer не поддерживает градиенты до 10 версии. Хотя можно добавить другую версию объявления свойства фонового изображения выше указанной именно для этого браузера.
Использована фотография Dru, лицензированная по лицензии Creative Commons.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также: