Мигание css. Избавляемся от мерцания при CSS-трансформации в Safari
Прежде чем разбираться с кнопками, рассмотрим общие для всех них установки.
HTMLДля кнопок будет использоваться очень простой HTML код:
Подписаться
CSSТакже все кнопки будут иметь общие установки для текста надписи и отмену выделения ссылок:
ButtonText { font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; } a { color: #fff; text-decoration: none; }
Обычно, пользователь ожидает достаточно мягкого эффекта при навдении курсора мыши на ссылку или кнопку. А в нашем случае кнопка меняет размер - она увеличивается, показывая дополнительное сообщение.
Основной код CSSДля начала нам нужно только задать кнопке форму и цвет. Определяем высоту 28px и ширину 115px, добавляем поля и отступы, а также задаем кнопке светлую рамку.
#button1 { background: #6292c2; border: 2px solid #eee; height: 28px; width: 115px; margin: 50px 0 0 50px; padding: 0 0 0 7px; overflow: hidden; display: block; }
Эффекты CSS3Некоторым людям нравится, когда простая кнопка сопровождается достаточно большим кодом CSS. В данном разделе приводятся дополнительные стили CSS3 для нашей кнопки. Вполне можно обойтись и без них, но они придают кнопке более современный вид.
Округляем углы рамки и добавляем градиент. Здесь используется небольшой трюк с темным градиентом, который взаимодействует с любым цветом фона.
/*Скругленные углы*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Анимация CSSТеперь установим переход CSS. Анимация будет использоваться для любых изменений свойств и длиться полсекунды.
Наведение курсора мышиОсталось только добавить стиль для расширения кнопки при наведении курсора мыши на нее. Кнопка должна иметь ширину 230px для отображения всего сообщения.
#button1:hover { width: 230px; }
Простое изменение тональности цвета
Очень простой и популярный эффект CSS для кнопки. При наведении курсора мыши плавно меняется тональность фонового цвета.
Основной код CSSКод CSS очень похож на предыдущий пример. Используется другой цвет фона и немного изменена форма. Также центрируется текст и установлена высота строки для кнопки, чтобы происходило вертикальное центрирование.
#button2 { background: #d11717; border: 2px solid #eee; height: 38px; width: 125px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 38px; }
Эффекты CSS3Устанавливаем скругление углов, градиент для фона и дополнительную тень. С помощью rgba делаем тень черной и прозрачной.
/*Скругленные углы*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Тень*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
Анимация CSSАнимация практически не отличается от предыдущего примера.
/*Переход*/ -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease;
Наведение курсора мышиПри наведении курсора мыши будет устанавливаться другой цвет фона. Попробуйте выбрать более светлый вариант цвета в Photoshop, чтобы получился отличный эффект.
#button2:hover { background-color: #ff3434; }
Данный эффект может получиться весьма впечатляющим в зависимости от выбора фонового изображения. В демонстрации используется невзрачный фон и эффект выглядит невзрачно. Попробуйте использовать другую картинку и может получиться ошеломляющий эффект.
Основной код CSSОсновная часть кода не отличается от предыдущих примеров. Обратите внимание на то, что мы используем фоновое изображение. Начальное положение фона установлено в "0 0". При наведении курсора положение сдвигается по вертикали.
#button3 { background: #d11717 url("bkg-1.jpg"); background-position: 0 0; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height: 58px; width: 155px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 58px; }
Эффекты CSS3В данном примере нет ничего особенного - скругленные углы и тени.
/*Скругленные углы*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Тень*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
Анимация CSSАнимация для данного случая длится дольше, чтобы создать плавный и интересный эффект.
/*Переход*/ -webkit-transition: All 0.8s ease; -moz-transition: All 0.8s ease; -o-transition: All 0.8s ease; -ms-transition: All 0.8s ease; transition: All 0.8s ease;
Наведение курсора мышиТеперь пришла пора сдвигать фоновое изображение. Начальное положение было "0 0". Устанавливаем второй параметр в значение 150px. Для сдвига по горизонтали требуется изменить первый параметр.
#button3:hover { background-position: 0px 150px; }
3D имитация нажатия кнопки
Последний пример в нашем уроке посвящен популярному методу 3D имитации нажатия кнопки при наведении на нее курсора мыши. Анимация для данного случая настолько проста, что даже не требуется задавать переход CSS. Но конечный результат получается вполне впечатляющим.
Основной код CSSКод CSS для нашей кнопки.
#button4 { background: #5c5c5c; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height: 58px; width: 155px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 58px; }
Эффекты CSS3В данном случае CSS3 перестает быть приятным опционом. Для получения эффекта требуются тени и градиент. Резкая тень создает видимость 3D кнопки.
/*Скругленные углы*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Тень*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Наведение курсора мышиВ данном случае мы имеем самую большую секцию hover . Длина тени уменьшается, и с помощью полей создается смешение темной зоны. Все вместе создает иллюзию нажатия кнопки. Переворот градиента усиливает эффект.
#button4:hover { margin-top: 52px; /*Тень*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Градиент*/ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); }
Не в первый раз замечаю, что при использовании CSS-трансформаций, некоторые элементы на странице в Safari таинственным образом меняют свои свойства. В других браузерах подобное наблюдается значительно реже.
Особенно заметны такие артефакты когда трансформация стоит на псевдоклассе :hover , т.е срабатывают при наведении мыши на элемент. В моём случае увеличение кнопки .btn при наведении на неё мыши, перманентно вызывало изменение типа сглаживания текста в соседних блоках.
Btn { transition: all .2s ease-in-out; } .btn:hover { transform: scale(1.1); }
Проблема связана с нехваткой ресурсов для рендеринга, и довольно легко лечится.
Translate3DСамый простой способ решения задачи - это активизация аппаратного ускорения, которое для двухмерной анимации в CSS по-умолчанию отключено. Для этого просто создаём пустую 3D-анимацию.
Webkit-transform: translate3d(0,0,0);
Всё, но это костыль.
Will-ChangeВ CSS существует относительно новое и пока малоизвестное свойство will-change , которое заранее передаёт браузеру информацию о возможном предстоящем изменении того или иного элемента. Например, если элемент планируется трансформировать, об этом можно предупредить браузер, чтобы он приберёг силы, как говорится. В случае с вышеупомянутой кнопкой, выглядит это так:
Btn { transition: all .2s ease-in-out; will-change: transform; }
Если планируется изменение нескольких параметров, их можно задать последовательно через запятую. Например, для трансформации с изменением прозрачности:
Will-change: transform, opacity;
Таким образом, браузер сможет заранее подготовиться к тяжёлой обработке и оптимизировать использование ресурсов. Что позволит избежать появления на странице различных побочных эффектов.
Подпишитесь на мой телеграм и первыми получайте новые материалы, в том числе которых нет на сайте.
Всем, доброго времени суток. Давным давно я публиковала пост как блога. Сегодня под настроения захотелось ещё заняться его дизайном. Сам родной гаджет об авторе ну совсем скучный и не привлекательный.
В результате получилось создать индивидуальный стиль, под собственный дизайн вполне симпатичный и информативный, скорее всего даже не виджет, а карточку - профиля. Так её назовём. Ну вот как - то так примерно
Рабочий вариант на тестовом блоге в сайдбаре в самом низу
Что на ней присутствует
1. Ваша фотография профиля.
2. Красивый дизайн самой карты, который легко настраивается
3. Ваш ник, имя или фамилия
4 Можно указать род занятий, хобби
5.Добавим 2 кнопки на нужные страницы. Это могут быть ссылки на вашу полную страницу об авторе, на главную страницу, карту, мастер классы, на паблики в социальных сетях. Всё что угодно.
6. Карточка прекрасно впишется в боковой панели блога.
Скопируйте, приведённый ниже код и будем ваять именно вашу карту профиля дальше.
" alt="profile" class="profile" />
Вика Барад
Блоггер
мой блогГруппа в ВК
.snip1 {
font-family: "Roboto", Arial, sans-serif;
color: #fff;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #ffffff;
text-align: left;
line-height: 1.4em;
background-color: #141414;
}
.snip1 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.snip1 img {
max-width: 100%;
vertical-align: top;
opacity: 0.85;
}
.snip1 figcaption {
width: 100%;
background-color: #141414;
padding: 25px;
position: relative;
}
.snip1 figcaption:before {
position: absolute;
content: "";
bottom: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 55px 0 0 400px;
border-color: transparent transparent transparent #141414;
}
.snip1 figcaption a {
padding: 5px;
border: 1px solid #ffffff;
color: #ffffff;
font-size: 0.7em;
text-transform: uppercase;
margin: 10px 0;
display: inline-block;
opacity: 0.65;
width: 47%;
text-align: center;
font-weight: 600;
letter-spacing: 1px;
text-decoration: none;
}
.snip1 figcaption a:hover {
opacity: 1;
}
.snip1 .profile {
border-radius: 50%;
position: absolute;
bottom: 100%;
left: 25px;
z-index: 1;
max-width: 90px;
opacity: 1;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1 .follow {
margin-right: 6%;
border-color: #2980b9;
color: #2980b9;
}
.snip1 h2 {
margin: 0 0 5px;
font-weight: 300;
}
.snip1 h2 span {
display: block;
font-size: 0.5em;
color: #2980b9;
}
.snip1 p {
margin: 0 0 10px;
font-size: 0.8em;
letter-spacing: 1px;
opacity: 0.8;
}
.snip1:hover:before,
.snip1.hover:before {
bottom: 0;
box-shadow: 0 0 0px white;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
$(".hover").mouseleave(
function () {
$(this).removeClass("hover");
}
);
https://w-dog.ru/wallpapers/10/19/380923269777589.jpg - это адрес картинки - фона в верхней части
https://lh3.googleusercontent.com/a-/AAuE7mA2BanaiBKNuN8BR_ECcqksSRfEzyzRUwTkbQwKqw=s96-cc - адрес вашей миниатюры. Его можно скопировать в вашем профиле Гугл или установить другой аватор.
В строках отмеченных розовым цветом пишите свой ник, имя, занятие и пояснительный текст.
Соответственно, то что выделено зелёным это адреса страниц на которые будет переход при нажатии на кнопку.
Основной фон карточки профиля я тоже отметила цветом в нескольких местах #141414;
Настройки самые элементарные и не думаю, что могут возникнуть вопросы. Если будут - пишите в комментариях. Разберёмся.
Готовый код виджета устанавливаем в разделе ДИЗАЙН - гаджет HTML/JavaScript
в боковой панели блога. Кстати, думаю, что она не плохо будет смотреться и вверху, когда у пользователя есть возможность сразу познакомиться с автором. Фон и картинку можно легко менять в зависимости от вашего настроения или времени года. Она всегда будет новой. Ну это на ваше усмотрение.
Всем добра и удачи.