Режимы наложения CSS
Что касается технологий, в CSS может быть много уникальных инноваций, неизменными остаются режимы наложения, которые вы можете использовать для преобразования макета веб-сайта. Двухцветные изображения и эффекты раскрашивания являются одними из главных тенденций в веб-дизайне.
Использование режимов наложения CSS, это не просто фантастический способ объединить внешний вид. Это также позволяет создавать различные варианты цвета для изображения. Существует пятнадцать режимов наложения: экран, наложение, осветление и т.д.
Это можно сделать несколькими способами, вы можете использовать как фоновое изображение, так и цвет фона, включенный в фоновый режим контейнера: кроме того, затем вы можете затемнить или использовать псевдоэлементы для создания на оболочке изображения, которое вы используете для эффекта раскрашивания.
Эксперты рекомендуют использовать изображение с высокой контрастностью и черно-белый цвет. При этом вы можете применить CSS-фильтры для настройки оттенков серого и высокого уровня контрастности. Если вы примените режимы наложения, вы можете быть уверены, что создадите фантастический макет веб-сайта.
Анимация
Использование анимации на вашем веб-сайте сделает его забавным и захватывающим. Часто люди используют это не только для привлечения желаемой аудитории, но и потому, что это тенденция, которой пользуются многие люди.
Вы можете создавать такие эффекты, как анимированные подчеркивания, появляющийся текст и т.д.
Если вы хотите отложить анимацию, есть способ позволить ей запуститься, например, через 2 секунды. Вот код, который поможет вам добиться этого эффекта.
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Отрицательные числа также приемлемы. Анимация начинается так, как будто она воспроизводилась в течение N секунд, если используются отрицательные числа.
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
Вы также можете позволить анимации запускаться столько раз, сколько захотите, она может выполняться бесконечно долго. Например, следующий код повторит анимацию примерно три раза.
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
И если вы хотите продолжить его, не останавливая бесконечное количество раз, вот код, которому вы можете следовать.
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
Анимация отлично подходит для того, чтобы текст перемещался по браузеру, это делается с помощью следующего кода.
p {
animation-duration: 3s;
animation-name: slide-in;
}
@keyframes slide in {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
Типографика
Если вы не хотите набирать весь текст заглавными буквами, не хотите перепечатывать то, что написали, из-за проблемы с заглавными буквами, что ж, мы только что нашли для вас решение. Этот CSS нацелен на тег заголовка h2.
h2 {text-transform: верхний регистр;} – все заглавные буквы
h2 {text-transform: нижний регистр;} – все строчные
h2 {text-transform: capitalize;} – заглавными буквами выделяется 1-я буква каждого слова.
Кроме того, мы постоянно стремимся к эстетическому хаосу в нашем названии и так далее, вы всегда можете поиграть в перспективу и создать более визуальный хаос.
Вы можете включить самую начальную букву фразы, используя раскрывающуюся шапку, чтобы придать ей вид газеты, которая выделяется. Это придаст значительность заглавной букве, а затем вы сможете оформить ее по своему усмотрению.
<span class="dropcap">T</span>
Then
.dropcap {
float: left;
font-size: 400%;
color: #cf142b;
margin: -13px 7px -13px 0;
}
Эффект пишущей машинки
Создать эффект для текста с помощью приемов CSS возможно, во-первых, вам нужно знать, как вы должны обрезать текст между текстовой и анимационной частями.
Ниже вы найдете код, который вам нужно использовать, пустое пространство предназначено для размещения текста в одном контейнере, а не для его обтекания.
Чтобы выровнять текст по центру, мы используем flexbox в теге body. Есть также анимационная часть, их две- Движение пишущей машинки изменило ширину текста с 0% до 100% за 3 секунды, в то время как другая анимация курсора была добавлена к курсору для более реалистичного вида.
Это изменяет цвет границы с прозрачного на #FF8D8D на 1 секунду.
‘overflow: hidden’ предназначен для того, чтобы остальные предложения с буквами не отображались до завершения анимации. С помощью ‘border-right’ мы добавили реалистичный курсор.
<div class="demo-typewriter">
<span>typewriter effect!</span>
</div>
.demo-typewriter span {
color: #262626;
overflow: hidden;
border-right: .10em solid #FF8D8D;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .4rem;
animation: demo-typewriter 3s steps(30, end), demo-cursor 1s step-end infinite;
}
@keyframes demo-typewriter {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes demo-cursor {
from, to {
border-color: transparent;
}
50% {
border-color: #FF8D8D;
}
}
Состояние ссылки
Псевдокласс: link управляет всеми ссылками, по которым еще не переходили. Псевдокласс: visited обрабатывает оформление всех ссылок, которые вы уже посетили. Это информирует аудиторию о том, где они уже были на сайте, и о тех частях сайта, которые они еще не видели.
a:link { color: blue; }
a:visited { color: purple; }
Прокрутка
Функция плавной прокрутки в CSS имеет два варианта: автоматический и плавный. Когда она включена, окно прокрутки прокручивается мгновенно, в то же время при плавном переключении оно прокручивается в соответствии с функцией синхронизации, которую выбирает пользователь.
Эффект наведения
Если цвета должны меняться при наведении курсора мыши пользователя на текст, значки, кнопки и так далее, вам нужно добавить: hover в CSS, чтобы изменить стиль. Например:
.entry h2{
font-size:36px;
color:#000;
font-weight:800;
}
.entry h2:hover{
color:#f00;
}
Это преобразует цвет тега Hz из красного в черный при наведении на него курсора мыши. Он переключается только на то, что вы хотите, поэтому размер шрифта или что-либо еще не изменится.
Если вы хотите более управляемый переход к цвету и не такой внезапный, вы можете использовать приведенный ниже код; на переход отводится 0,3 секунды.
Чтобы увеличить изображение и придать ему цвет при наведении курсора мыши, вам нужно окружить используемое изображение контейнером, давайте назовем контейнер ‘image-of’.
Для атрибута переполнения контейнера должно быть установлено значение ‘hidden’, чтобы это работало. По умолчанию изображение имеет оттенки серого, но фильтр удаляется при наведении на него курсора мыши. Масштабирование можно изменить с помощью 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-of:hover img {
filter: grayscale(0);
transform: scale(1.1);
}
Использование свойства width и max-width
Если для свойства width установлено значение в процентах, а для свойства height: auto; изображение будет адаптивным и масштабироваться вверх и вниз:
img {
width: 100%;
height: auto;
}
Изображение можно увеличить до размера, превышающего его первоначальный размер. Однако лучшим решением было бы использовать вместо этого свойство max-width.
Использование свойства max-width
Если для свойства max-width установлено значение 100%, изображение уменьшится, если потребуется, но никогда не увеличится до размера, превышающего его первоначальный размер:
img {
max-width: 100%;
height: auto;
}
Вырезки
Чаще всего дизайнеры хотят сделать что-то уникальное. Чтобы создать что-то уникальное и привлекательное, дизайнеры пытаются придать изображению определенную форму, например, треугольник или любую другую фигуру.
В этом сценарии рекомендуется использовать контур обрезки. Функция обрезки CSS великолепна; граница фигуры, это контур обрезки, а вырезки определяют, какие части изображения должны быть видны. Все, что находится вокруг или внутри контура, будет видно и скрыто за пределами контура.
clip-path: circle(radius at x, y);
clip-path: URL(#clipping); /* ссылка на элемент SVG*/
Если функция circle имеет обтравочную маску, встроенную в верхнюю часть изображения, будет видно только изображение внутри этого круга.
Функции формы и SVG могут использоваться в качестве контуров обрезки, предоставляя вам различные опции, такие как анимация их в виде трансформируемых фигур. Фон изображения можно удалить с помощью контура обрезки.
Если функция circle имеет обтравочную маску, встроенную в верхнюю часть изображения, будет видно только изображение внутри этого круга.
Придайте форму внутрь и наружу
Текстовые контейнеры не всегда должны быть прямоугольными, это способ сделать макет вашего сайта богаче и качественнее.
Внутренняя и внешняя части позволяют обернуть содержимое вокруг пользовательского пути в рамках CSS tricks. Примените код к изображению или контейнеру:
shape-outside: circle(50%);/ * содержимое будет перемещаться на 360 градусов по кругу*/
Вам нужно определить размер свойства float; необходимо определить элементы, соответственно ширину и высоту. Затем вы можете выбрать, круг, многоугольник, вставку или эллипс для фигур.
Другим вариантом является функция URL(); это позволяет вам формировать внешний элемент для определения геометрии элемента на основе изображения.
Вы можете использовать эту функцию вместо полигона, когда у вас много кривых и точек и вы хотите, чтобы содержимое аккуратно обтекало их ().
Вы можете использовать свойство shape margin, если хотите увеличить пространство между контентом и используемыми элементами — оно будет действовать как функция формы поля, которую можно анимировать, но только для определенных полигонов.
Например, функция URL() не может быть анимирована.
Прежде чем применять все вышеупомянутые приемы, вот несколько дополнительных советов, которые сделают ваш опыт успешным.
Градиенты на основе изображений загружаются быстрее, чем градиенты на основе CSS, потому что это большая часть вычислений и выполняется после завершения остальной части CSS.
Это полезно при использовании изображения со стандартным линейным градиентом. Поэтому вы можете создать его в формате JPG шириной 1 пиксель. Однако, если это радиальный или какой-либо другой градиент, лучше всего использовать команду CSS, поскольку общий размер файла будет значительно меньше.
Еще один полезный совет - объединить все CSS в один файл и убедиться, что он архивирован и имеет увеличенный срок годности. Кроме того, делайте это в своей производственной системе, а не в разработчике.
В заключение
Если вы хотите полностью изменить макет своего веб-сайта, рекомендуется использовать приемы, упомянутые выше. Эти приемы специально протестированы и подобраны вручную, чтобы помочь вам усовершенствовать макет вашего веб-сайта.