Уроки и статьи
Подписка
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт
Моя группа
Опрос
Какая тема Вас интересует больше?
Бесплатный курс
Основы C++ в Unreal Engine 5
Особенности курса:
- 5 часов видео
- 53 задания
- Поддержка от автора
- Все исходники приложены
Чтобы получить Видеокурс,
заполните форму
Бесплатный онлайн-семинар
10 шагов к созданию своей Web-студии
После семинара:
- Вы узнаете главное отличие богатых от бедных.
- Вы увидите разоблачения множества мифов об успешности и о бизнесе.
- Вы получите свой личный финансовый план прямо на семинаре.
- Мы разберём 10 шагов к созданию своей успешной Web-студии.
- Я расскажу о своих личных историях: об успешных и неуспешных бизнесах. Это мой многолетний опыт, которым я поделюсь с Вами.
Умные цитаты
Научитесь любить ад и окажетесь в раю.
Пифагор
Поиск: :hover
Что искали: :hover
Всего найдено: 134 записей
- 1. как изменить шапку сайта (часть 2
- CSS/CSS3
... slab'; /* google font */
}
/* стили для навигационных ссылок при наведении */
nav a:hover {
background: #c5e56e; /* цвет фона */
color: #212121; /* цвет ссылок при ...
- 2. необычный эффект при наведении на карточку
- CSS/CSS Основы
... #fff;
transition: 0.5s;
}
/* появление тени при наведении */
.container .card:hover{
box-shadow: 0 30px 50px rgba(0,0,0,.2);
}
стилизация карточек ...
- 3. примеры свойства transform в css
- CSS/CSS3
... псевдокласс hover (состояние при наведении) свойство transform: rotate.
.button_rotate:hover {
background-color: #4feac8;
transform: rotate(15deg);
}
обратите ...
- 4. трансформация сложенных карточек на css
- CSS/CSS Основы
...
общие css-свойства для всех карточек для hover-эффекта.
.container:hover .card{
position: absolute;
top: 50%;
left: 50%; ...
- 5. анимация подчеркивания ссылок на css
- CSS/CSS Основы
... процесс подчеркивания ссылок еще интереснее - с элементами анимации.
a:hover {
text-decoration: underline;
}
анимация подчеркивания ссылок ...
- 6. верстаем админку на css grid
- HTML/HTML Основы
... ::-webkit-scrollbar-thumb {
background: #092742;
}
/* handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.sidebar-menu {
background-color: #0e2438; ...
- 7. скрывающееся меню сайта на html и css
- HTML/HTML 5
... /* ссылки левого меню при наведении и при активном состоянии */
.container .sidebar ul li a:hover,
.container .sidebar ul li a.active {
color: var(--primary-color); ...
- 8. создание всплывающей подсказки
- CSS/CSS Основы
... none; color: #000000; border-bottom: dashed 1px #000;}a.help span { display: none;}a.help:hover { position: relative;}a.help:hover span { position: absolute; display: block; left: 10px; top: 25px; border: ...
- 9. красиво оформленная секция с услугами
- CSS/CSS Основы
... уменьшается в размерах и становится видим текстовый контент.
.container .servicebox:hover .icon {
top: 30px;/*перемещение иконки наверх*/
left: ...
- 10. красивый эффект при наведении (:before и :after)
- CSS/CSS3
... прописываем стили для псевдокласса hover псевдоэлемента before, звучит забавно.
ul li a:hover:before {
transform: scaley(1.2); /* масштабирование уменьшение */
opacity: ...
- 11. как использовать псевдоклассы в css
- CSS/CSS3
... класса указывается внутри тега html разметки.
псевдоклассы для ссылок
:hover – при наведении курсора
:link – не посещенная ссылка
:active – состояние ...
- 12. эффект многослойного текста
- CSS/CSS Основы
... пустой внутри текст заполнится белым цветом. это будет нижний слой.
ul li a:hover{
color: #fff;/*цвет текста*/
-webkit-text-stroke: 1px #000;/*обводка ...
- 13. анимированная кнопка на чистом css
- CSS/CSS3
... linear infinite;
}
hover эффект убирает рамку и заполняет кольцо фоном.
.square:hover div:nth-child(1) {
border: none;
background: rgba(255,255,255);
}
...
- 14. рейтинг со смайликами на чистом css
- CSS/CSS Основы
... 0;/*значение прозрачности*/
text-align: center;/*текст в центре*/
}
.rating:hover label{
width: 160px;
opacity: 0.2;
}
но мы не ...
- 15. эффект многослойности при наведении на карточку
- CSS/CSS Основы
... вверх.
.card:hover:before{
transform: rotate(20deg);/*поворот карточки на 20 градусов*/
box-shadow: 0 2px 20px rgba(0,0,0,.2);/*новая тень*/
}
.card:hover:after{
transform: ...
- 16. эффект тени при наведении в css
- CSS/CSS3
... исчезает полупрозрачность, и размер иконки увеличивается в 1.5 раза.
ul li a:hover i {
opacity: 1;
transform: scale(1.5)
}
делаем двойную ...
- 17. креативный эффект при наведении на изображения. часть 2
- CSS/CSS Основы
... неожиданный эффект.
.container:hover .clip{
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);/*значения меняющие фигуру*/
}
.container .clip:hover{
transition-delay: ...
- 18. эффект увеличения картинки.
- CSS/CSS Основы
... / $grid-root;
// scss has a neat percentage() function which
// takes our 1.5 and turns it into 150%
&:hover ~ img {
height: percentage($zoom-factor);
width: percentage($zoom-factor);
}
...
- 19. эффект размытия и фокуса на css
- CSS/CSS Основы
... размываться, увеличиваясь в размерах до полупрозрачного отображения.
.airline:hover {
filter: blur(10px); // радиус размытия
transform: scale(1.2); ...
- 20. три эффекта наведения на кнопку
- CSS/CSS Основы
... цвет
transition: transform .2s ease-in-out; // плавная анимация
}
.buttonleft:hover::before {
transform: translatex(0); // показываем псевдоэлемент
}
...
- 21. css-эффект при наведении курсора на элемент списка
- CSS/CSS Основы
... курсора, элемент списка вместе с рамкой будет сдвигаться вправо.
.list ul li:hover{
left: 10px;
}
создадим поля вокруг элементов ...
- 22. эффект анимированного неонового свечения у кнопки
- CSS/CSS Основы
... становиться ярче, за счет изменения значения c 0.4 до 1 у альфа-канала (rgba).
a:hover span {
color: rgba(255, 255, 255, 1);
}
a span:before {
content: ""; ...
- 23. горизонтальное выпадающее меню на css
- CSS/CSS Основы
... none;
}
ul.menu li ul {
display: none;
padding-left: 10px;
}
ul.menu li:hover ul {
display: block;
position: absolute;
}
ul.menu li:hover ul li {
float: none;
}
ul.menu li:hover ul li a {
padding: 6px 0 ...
- 24. креативный css hover-эффект для меню навигации
- CSS/CSS Основы
... уменьшим прозрачность текста через альфа-канал, при наведении мыши.
ul li a:hover {
color: rgba(255,255,255,0.1);/*приглушаем белый цвет*/
transition-delay: ...
- 25. имитация печатной машинки при наведении на текст
- CSS/CSS Основы
... символами, похожей на печатную машинку.
ul:hover li a:before{
animation: animate2 0.5s steps(8) forwards;
}
ul li:hover a:before{
animation: animate 2s steps(8) forwards; ...
- 26. как сделать всплывающую форму
- JavaScript/JavaScript Основы
... кнопок эффект при наведении – полная непрозрачность.
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
js код
функция openform открывает форму. ...
- 27. как сделать поиск по сайту на html
- CSS/CSS3
... left;
display: block;
}
меняем цвет фона под ссылками при наведении.
nav a:hover {
background-color: #8bc34a;
}
стилизуем активный элемент для выделения ...
- 28. эффект раскрытия обложки при наведении курсора
- CSS/CSS Основы
... background: #333;
color: #fff;
transition: 0.2s;
}
.card .details .social-icons a:hover{
background: #e21212;
}
стилизация фотографий
.card .imgbox{ ...
- 29. изменение внешнего вида курсора при наведении
- JavaScript/JavaScript Основы
... самим иконкам. он пока не двигается за мышкой.
ul li:hover a{
color: #b71c1c;
}
ul li:hover ~ .cursor {
transform: translate(-50%,-50%);
width: ...
- 30. переключатель для бокового меню
- JavaScript/JavaScript Основы
...
область переключателя меняет цвет при наведении на красный.
.toggle:hover{
background: #ea1d63; / * цвет фона под переключателем * /
}
...
- 31. адаптивное боковое навигационное меню
- JavaScript/JavaScript Основы
... текстом с иконкой изменит цвет.
.navigation.active,
.navigation:hover{
width: 300px;
}
.navigation ul li:hover{
background: #263238;
}
посмотрите ...
- 32. препроцессор less, начиная с простого
- CSS/CSS Основы
... {
position: relative;
background-color: #3c3c3c;
}
&:hover {
background-color: #ccc;
}
}
css
.portfolio__item ...
- 33. всплывающая подсказка в html
- HTML/HTML 5
... наведении на ссылку, показать всплывающую подсказку.
[aria-label]:hover:after, [aria-label]:hover:before {
display: block;
}
пример всплывающей подсказки ...
- 34. подменю на css
- CSS/CSS Основы
... none;
left: 99px;
position: absolute;
top: 0;
}
li:hover ul {
display: block;
}
самое главное здесь - это селектор "li:hover ul". фактически, он и показывает содержимое ...
- 35. плавный переход. css свойство transition
- CSS/CSS Основы
... transition-delay: 0.1s, 0.2s;
transition-timing-function: ease, ease-out;
}
.button:hover{
background-color: #c4a7be;
color: #4d1d49;
}
короткая ...
- 36. красивый hover эффект для блока
- CSS/CSS Основы
... вертикали и невидима, благодаря свойству overflow:hidden.
.container .box:hover .imgbx{
transform: translatey(-100%);
}
.container .box .imgbx img{
max-width: ...
- 37. css эффект потери фокуса и наоборот
- CSS/CSS Основы
... увеличивается, а картинка визуально уменьшается, как бы ловит на себе фокус.
h2:hover{
filter: blur(10px); / * размытие фона * /
transform: scale(1.2); ...
- 38. css-эффект при наведении на меню
- CSS/CSS Основы
... data-атрибутов */
transition: 0.5s; /* плавная смена состояний */
}
ul li:hover a:before {
opacity: 1;
}
вот то, что должно получиться.
...
- 39. почему нужно использовать svg графику на сайтах
- HTML/HTML Основы
... .tag-icon:hover {
fill: darkorange;
cursor: pointer;
}
при наведении на png иконку меняется цвет фона, а не самой иконки.
img:hover { ...
- 40. необычный эффект наведения для дизайна веб-сайтов
- CSS/CSS Основы
... становится цветным и увеличивается в размерах сама фотография.
.container .box:hover {
filter: grayscale(0);/*отмена черно-белого фильтра*/
}
.container .box ...
- 41. стильная кнопка при наведении (графика + css)
- CSS/CSS Основы
... текст ссылки меняется на белый, то есть сливается с фоном страницы.
a:hover{
color: #fff;
}
создадим для ссылки псевдоэлемент before, чтобы ...
- 42. эффект появления рамки при наведении
- CSS/CSS Основы
... значение scale с 0 на 1 и тогда мы увидим этот красивый эффект.
button:hover:before,
button:hover:after{
transform: scale(1);
}
посмотрите пример на codepen
- 43. css свойство filter grayscale на практике
- CSS/CSS3
... наведении курсора, фотографии получат обратно свой оригинальный цвет.
.holder:hover .img-1 {
filter: grayscale(0); /* 0 – исходное цветное изображение */
transition: ...
... -webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
.slide-up-boxes a:hover h5 {
margin-top: -65px;
opacity: 0;
}
.slide-up-boxes div {
position: relative;
...
- 45. замена картинки с искажением при наведении
- CSS/CSS Основы
... одно изображение.
.imgbx:hover img:nth-child(2){
opacity: 0;
filter: blur(10px);
transform: translatex(-50%) scalex(2);
}
.imgbx:hover img:nth-child(1){
opacity: ...
- 46. изучаем sass. расширение родительского селектора.
- CSS/CSS Основы
...
&:hover
text-decoration: underline
в скомпилированном виде это будет выглядеть следующим образом:
a {
font-weight: bold;
text-decoration: none;
}
a:hover { ...
- 47. делаем вместе анимированное выпадающее меню на css3
- CSS/CSS3
... строчки кода и при наведении курсора невидимая часть станет видимой.
#nav li:hover .second{
display: block;
}
после придания внешнего вида, сделаем так, ...
- 48. свойство «float» на практике
- CSS/CSS3
... normal;
line-height: 18px;
color: #7c7c7c;
text-decoration: none;
}
.copy a:hover {
text-decoration: underline;
}
.blue a {
font-family: 'open sans'; ...
- 49. css эффект при наведении на ссылку
- CSS/CSS3
... .link-up a:hover::before,
.link-up a:focus::before {
transform: translatey(4px) translatex(-4px);
opacity: 0;
}
а белая рамка появляется и делает движение вниз.
.link-up a:hover::after, ...
- 50. верстка сайта с нуля. верстка портфолио. часть 2
- HTML/HTML 5
... кнопки */
left: 750px; top: 370px; /* отступы от краев браузера */
}
.mops_text .da-butt:hover
{
background:#d0a5a5;
}
.butt-img{
width: 50px;
height: 50px;
display: ...
- 51. верстка сайта с нуля. верстка портфолио. часть 3
- HTML/HTML 5
... font-weight: 600; /*жирность текста */
cursor: pointer; /*вид курсора */
}
#valantin li span:hover
{
background:#a97b7b; /*фон при наведении меняет цвет */
}
#valantin li span.active ...
- 52. плавный переход в css - transition на примерах
- CSS/CSS3
... font-size: 22px;
text-decoration: none;
transition: all 1s ease;
}
.button:hover {
background-color: #4feac8;
}
анимация фона при наведении при ...
- 53. эффект переворачивающейся карточки на css
- CSS/CSS Основы
... .work-card__background .vacancies-list li a {
color: #fff;
}
.work-card__background .vacancies-list li a:hover {
color: #debc0f;
}
.work-card__background .vacancies-list li::before {
content: ""; ...
- 54. верстаем карточку с эффектом раскрывающейся шторки при наведении на css
- CSS/CSS Основы
... .container:hover .flap::after {
transform: translatex(300px);
}
.container:hover .flap::before { ...
- 55. hover эффект для кнопки + псевдокласс :nth-child
- CSS/CSS3
... принципе сдвига на заданное число.
a:hover span:nth-child(1) {
transform: translatex(0);
transition: .5s;
}
a:hover span:nth-child(2) {
transform: translatex(100%); ...
- 56. всплывающие подсказки при наведении
- CSS/CSS3
... наведении курсора на иконку, меняется цвет иконки и вид курсора.
ul li:hover {
color: #03a9f4;
cursor: pointer;
}
всплывающая подсказка
при ...
- 57. фигуры с hover-эффектом из сериала "игра в кальмара"
- CSS/CSS Основы
... hovre-эффекта*/
overflow: hidden;/*скрыт выходящее за рамки*/
}
.container .card:hover {
background: #1a1a1a;/*цвет карточки при наведении*/
background-size: ...
- 58. создаем выпадающее боковое меню на html, css и javascript
- JavaScript/JavaScript Основы
... }
.menu-item__header:hover,
.submenu-item:hover {
background-color: beige; ...
- 59. иконки соц. сетей для сайта
- CSS/CSS3
... рамок меняться цвет.
.box ul li:hover {
border: solid 4px #b63a64;
}
у иконок изменится цвет и увеличится размер:
.box ul li:hover .icon {
font-size: ...
- 60. выбор из выпадающего списка в html
- HTML/HTML 5
... наведении курсора на иконку меняется цвет фона.
.box select option:hover {
background: #da00e0;
}
.box:hover::before {
background: #9b03a0;
}
если для кого-то ...
- 61. поворот карточки с картинкой в css
- CSS/CSS3
... просто с помощью псевдокласса hover и свойстав rotate.
.card:hover .front {
transform: rotatey(180deg);
}
.card:hover .back {
transform: rotatey(360deg);
}
сейчас ...
... font-size: 24px;
}
.menu-btn:hover {
color: #666;
} ...
- 63. вставка изображения на страницу из буфера обмена на javascript
- JavaScript/JavaScript Основы
... max-width: 800px;
}
img:hover {
transform: translatey(5px);
box-shadow: inset 0px 10px 20px 2px rgba(0, 0, 0, 0.25); ...
- 64. навигационное меню с иконками + hover эффект
- CSS/CSS Основы
... просто мы перестали его прятать, не прописали свойство overflow:hidden.
ul li a:hover .icon .fa{
transform: translatey(-100%);
}
10) стилизация ...
- 65. скрывающееся левостороннее меню на bootsrap 5
- HTML/HTML Основы
... color: white;
}
.nav-link:hover {
color: cyan;
} ...
- 66. css-эффекты. градиентная рамка у блока
- CSS/CSS Основы
...
hover effect
при наведении курсора, блоки двигаются вверх.
.box:hover{
transform: translatey(-20px);
}
оформление блоков
чисто ...
- 67. создание шаблона пагинации на html, css и javascript
- HTML/HTML 5
... color: white;
border: 1px solid #4caf50;
}
.pagination a:hover:not(.active) {
background-color: #4caf50;
color: white; ...
- 68. как сделать кнопку для плавного прокручивания страницы наверх?
- JavaScript/JavaScript Основы
... display: none; /* кнопка скрыта по умолчанию */
transition: opacity 0.3s;
}
.scroll-top-btn:hover {
background-color: #2980b9;
}
шаг 3: добавление javascript для прокрутки ...
- 69. как сделать слияние полей у формы поиска
- CSS/CSS Основы
... cursor: pointer;
background: #4dd0e1;
color: #fff;
}
input[type="submit"]:hover {
background: #0097a7; / * меняется цвет при наведении * /
}
на ...
- 70. эффект увеличивающегося изображения при клике на css и javascript
- JavaScript/JavaScript Основы
... width: 100%;
}
img:hover {
opacity: 0.7;
} ...
- 71. svg hover эффект для кнопки
- CSS/CSS Основы
... наведении на кнопку вместо сплошной линии появляется пунктирная линия.
.button:hover svg rect {
stroke-width: 5;
stroke-dasharray: 35, 275; /* пунктир ...
- 72. анимированное круговое меню на javascript
- JavaScript/JavaScript Основы
... развернутого меню
.menu.active li {
transform: rotate(calc(360deg / 8 * var(--i)));
}
.menu li a:hover {
color: #ff1252;
}
.menu.active .toggle {
transform: rotate(315deg); ...
- 73. выпадающее меню выбора с использованием javascript
- JavaScript/JavaScript Скрипты
... делать свой выбор.
.dropdown.active .option {
display: block;
}
.dropdown .option div:hover {
background: #62baea;/*окрашивает синим цветом*/
color: ...
- 74. изображения внутри треугольников
- CSS/CSS Основы
... clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.container .card img{
transition: 0.5s;
}
.container .card:hover img{
transform: scale(1.5);/*масштабирование при наведении*/
}
...
- 75. кастомизация иконок fontawesome
- CSS/CSS Основы
... приподниматься вверх, подтягивая за собой едва заметную мягкую тень.
ul li a:hover{
color: #999;
transform: translatey(-20px); / * трансформация ...
- 76. перемещение placeholder над полем ввода при фокусе
- CSS/CSS Основы
... max-width: 120px;
cursor: pointer;
font-weight: 500;
}
.inputbox input[type="submit"]:hover{
background: #e91e63;
}
посмотрите пример на codepen
- 77. изменение внешнего вида курсора при наведении
- JavaScript/JavaScript Основы
... действия*/
pointer-events: none; /*запрет быть целью события мыши*/
}
ul li:hover ~ .cursor {
transform: translate(-50%,-50%) scale(5); /*масштабирование при наведении*/ ...
- 78. плавающая кнопка на reactjs
- JavaScript/JavaScript Основы
... при наведении курсора мыши делаем кнопку немного прозрачной
*/
.floatingbutton:hover {
opacity: 0.85;
}
html-код + jsx:
<!doctype html>
<html> ...
- 79. как сменить фон при наведении на ссылку меню
- JavaScript/JavaScript Основы
... font-weight: 600;
text-decoration: none;
color: rgba(255,255,255,0.5);
}
.navarea ul li:hover a{
color: #fff;
}
css стили для фоновых картинок
фоновая ...
- 80. дизайн карточки на чистом css
- CSS/CSS Основы
... переход*/
transform-origin: top;/*направление трансформации*/
}
.imgbx:hover img{
transform: scale(1.5);/*масштабирование*/
}
и последнее ...
- 81. кнопка-перевертыш с 3d-эффектом
- CSS/CSS Основы
... наведении мыши, кнопка совершает поворот вокруг своей оси на 360 градусов.
a:hover{
transform: rotatex(360deg);/*поворот на 360*/
}
текст на кнопке ...
- 82. дизайн и верстка страницы contact us. часть #3
- HTML/HTML Основы
... font-size: 2em;
display: flex;
color: #ccc;
}
.sci li a:hover {
color: #fff;
}
google карта
карта должна занять весь ...
- 83. простой footer у веб-сайта
- CSS/CSS Основы
... text-decoration: none;/*ссылка без подчеркивания*/
display: inline-block;
}
.menu li a:hover {
opacity: 1;
}
footer p {
color: #fff;
text-align: ...
- 84. самое важное о ссылках в html
- HTML/HTML Основы
... цвет), при наведении на неё курсора, следует задать ей псевдокласс hover.
a:hover {
color: #11dd77;
}
ссылка на изображение
если поместить ...
- 85. анимированный блик у кнопки на чистом css
- CSS/CSS Основы
... при наведении на кнопку, блик проскользит по всей длине кнопки.
.button:hover:before {
animation: movelight 0.5s;
}
@keyframes movelight {
from {
transform: ...
- 86. как сделать изогнутую тень на чистом css3.
- CSS/CSS3
... content: ' ';
top: 0;
right: 0;
left: 0;
bottom: 0;
border-radius: 5px;
}
button:hover:after {
box-shadow: inset 0 -3px rgba(0, 0, 0, .25);
}
вот так просто можно сделать довольно ...
- 87. адаптивное навигационное меню с иконками
- CSS/CSS3
... font-size: 17px;
}
меняем цвет фона при наведении мышки на ссылки.
nav a:hover {
background-color: #d1c4e9;
}
задаем цвет текущей активной ссылке.
...
- 88. адаптивное меню для сайта. часть 1
- CSS/CSS3
... простой эффект при наведении и не забываем про плавный переход.
ul li a:hover {
background: #000;
color: #fff;
transition: .5s ...
- 89. плавное подчеркивание ссылки при наведении
- CSS/CSS3
... background: #cddc39;
transition: .5s;
}
hover эффект плавного подчеркивания ссылок
ul li:hover a:after {
width: 100%;
transform: translationx(100%);
}
при наведении курсора, ...
... transition: none 200ms ease-out;
transition-property: color, background;
}
header a:hover
{
background: #e81c4f;
color: white;
}
и вуаля!
мы разработали ...
- 91. верстка формы обратной связи. часть 5
- HTML/HTML 5
... color: #666d89;
text-align: center;
}
.copy_val a {
color: #eee;
}
.copy_val a:hover {
color: #a97b7b;
}
полный код представлен на
фиддле
смотрите ...
- 92. верстка сайта с нуля. меню навигации. часть 1.
- HTML/HTML 5
... -moz-transition: 0.9s;
-o-transition: 0.9s;
transition: 0.9s;
}
.nav > ul > li > a:hover {
color: #fff;
background: #d0a5a5;
}
код html разметки шапки сайта: ...
- 93. как сделать 404 страницу
- HTML/HTML 5
... глубину */
}
.notfound a {
color: #fff;
font-size: 0.8em;
}
.notfound a:hover {
color: yellow;
text-decoration: none;
}
</style>
</head>
<body> ...
- 94. nodejs. как создать "список дел". часть 1.
- JavaScript/JavaScript Основы
... box-sizing: border-box;
font-family: arial;
font-size: 20px;
cursor: pointer;
letter-spacing: 1px;
}
li:hover{
text-decoration: line-through;
background: rgba(0,0,0,0.2);
}
h1{
background: url(/logo.png) ...
- 95. изучаем sass. функции.
- CSS/CSS Основы
... вы можете изменять строки:
$color = #2196f3;
a {
padding: 10px;
color: $color;
}
a:hover {
color: darken($color, 10%);
}
как понятно из названия, функция darken затемняет ...
- 96. как сделать выпадающий список с красивым эффектом на css и jquery.
- JavaScript/jQuery
...
}
}
}
&.withbg {
.option {
transition: background-color 0.1s;
&:not(.placeholder):hover {
background-color: $blue;
}
&:not(.placeholder).active {
background-color: $blue;
}
...
- 97. как вставить видео на html сайт
- HTML/HTML 5
... border: none;
background: #0e0d0d;
color: #f4f4f4;
cursor: pointer;
}
#mybtn:hover {
background: #d6d5d5;
color: #000;
}
шаг 3) добавить javascript код
<script> ...
- 98. эффект серого оттенка на css.
- CSS/CSS3
... -webkit-filter: grayscale(100%);
transition: filter 0.5s ease;
-webkit-transition: filter 0.5s ease;
}
.profile img:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
}
мы создали div с классом profile ...
- 99. что такое svg? стилизуем объекты.
- HTML/HTML Основы
... fill: #ccc;
stroke: #000;
stroke-width: 1;
}
rect:hover {
stroke: #0f0;
fill: yellow;
}
]]>
</style>
</head> ...
- 100. верстаем круглые кнопки на css3.
- CSS/CSS3
... конечный результат:
теперь реализуем поведение при наведении на блок
.button:hover {
box-shadow: inset 0 0 20px rgba(0,0,0,.2),
0 2px 0 rgba(255,255,255,.4),
inset 0 2px 0 rgba(0,0,0,.1); ...
- 101. создаём сокращатель url. часть 1.
- PHP/PHP Основы
... border: 1px solid blue;
}
input[type="submit"] {
padding: 9px;
transition: all .3s;
}
input[type="submit"]:hover {
box-shadow: 0 0 3px #faf;
transition: all .3s;
}
стили пояснять тоже нет смысла, ...
- 102. анимация на css3.
- CSS/CSS3
... останавливалась. за это отвечает свойство animation-play-state со значением paused.
.block:hover {
animation-play-state: paused;
}
в конце приведу короткую запись
.block {
...
- 103. плавные переходы в css3.
- CSS/CSS3
...
}
вот, что у нас получилось:
теперь зададим стили при наведении
.block:hover {
background: #fafafa;
color: #ccc;
box-shadow: 1px 3px 5px #ccc;
}
сейчас стили ...
- 104. обработка события click на css
- CSS/CSS Основы
... display: block; /* когда кликаем по вкладке, открываем содержимое content */
}
.content:hover {
display: block; /* пока курсор наведён на контент, не закрываем его */ ...
- 105. что такое css спрайты?
- CSS/CSS Основы
... width: 50px; // ширина кнопки
text-decoration: none; // убрать черту подчёркивания
}
a:hover {
background-position: right top; // меняем позицию фона, чтобы было смещение изображения ...
- 106. псевдоэлементы в css
- CSS/CSS Основы
... стиль для "необычных" элементов. давайте с вами разберём простой пример:
img:hover {
border: 2px solid #f00; // устанавливаем красную рамку
}
данный код означает, ...
- 107. как менять картинку при наведении курсора мыши
- CSS/CSS Основы
... умолчанию
height: 100px; // высота картинки
width: 100px; // ширина картинки
}
.img:hover {
background: url("image_2.jpg") no-repeat; // подставляем ту картинку, которая будет ...
- 108. адаптивная контактная форма
- CSS/CSS3
...
при наведении мыши, кнопка отправить, изменит цвет фона.
input[type=submit]:hover {
background-color: #c2185b;
}
все элементы стилизованы, на десктопном ...
- 109. меню аккордеон на js
- JavaScript/JavaScript Основы
... смены цвета при клике, мы повесим на функцию в js класс active.
.active, .accordion:hover {
background-color: #607d8b;
}
стилизация блоков с текстом (ответы на ...
- 110. как изменить курсор мыши на javascript
- JavaScript/JavaScript Основы
... текст, кастомный курсор увеличится в размерах и начнет вращаться.
h2:hover ~ .cursor {
width: 120px;
height: 120px;
border: ...
- 111. верстка сайта по psd макету (часть 3)
- HTML/HTML 5
... transition-duration: /* 0.4s; задаёт время в секундах сколько должна длится анимация */
}
.button:hover {
background-color: #ededed;
}
итоги
почему я решил делать верстку на ...
- 112. адаптивная навигация на html и css
- HTML/HTML 5
... text-decoration: none;
color: #555555;
padding: 1rem;
}
.navbar-links li:hover {
background-color: rgb(255, 240, 200);
}
/**
кнопка гамбургер меню ...
- 113. пример простого слайдера на javascript (#2)
- JavaScript/JavaScript Основы
... /* поля внутри кнопок */
font-size: .9rem; /* размер шрифта */
}
button:hover {
background: #fa5aff; /* при наведении меняется цвет */
}
button:active ...
- 114. как изменить полосу прокрутки на css
- CSS/CSS3
... border: 3px solid #f5cdcd; /* толщина, стиль и цвет рамки */
}
::-webkit-scrollbar-thumb:hover {
background: #b91414; /* ползунок меняет цвет при наведении */
} ...
- 115. пишем приложение на react
- JavaScript/JavaScript Основы
... animation: box-shadow 3s ease;
cursor: pointer;
}
.giftcard:hover {
box-shadow: 10px 10px 5px #aaaaaa;
}
.gc-image {
width: 100%; ...
- 116. скошенный блок при помощью clip-path
- CSS/CSS Основы
... border-radius: 100px;
transition: all .2s;
position: relative;
}
.btn:hover {
transform: translatey(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); ...
- 117. свойство transform-origin на примере
- CSS/CSS Основы
... увидите как работает данное свойство, при наведении мыши на объект.
.sticker_move:hover {
transform: rotate(10deg); // поворот на 10 градусов
transform-origin: ...
- 118. адаптивное мобильное меню для сайта (часть 3)
- JavaScript/JavaScript Основы
... 600; // жирность ссылок
font-size: 22px; // размер шрифта
}
.mobile-nav__link:hover {
color: #ff0800e7; // цвет ссылок при наведении
}
подготовим ...
- 119. адаптивное мобильное меню для сайта (часть 1)
- JavaScript/JavaScript Основы
...
text-decoration: none;
}
// стилизация эффекта наведения
.nav__link:hover {
color: #ff0800e7;
}
вторая часть урока выйдет в следующей ...
- 120. создаем вкладки на js (часть 1)
- JavaScript/JavaScript Скрипты
... background-color: #e5dfe3;
margin-top: 4px;
transition: 0.4s;
}
.content .header-tab:hover:after {
width: 60%;
}
.content .tabcontent {
width: 70%;
display: ...
- 121. как изменить цвет картинки при наведении указателя мыши с помощью css?
- CSS/CSS Основы
... * при наведении курсора мыши применяем к изображению фильтр через css свойство filter
*/
.grayscale-image:hover
{
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s; ...
- 122. mobile first верстка
- JavaScript/jQuery
... сверху */
}
.gamburger{
display: none; /* прячет кнопку гамбургер */
}
a:hover{
width: 10vw; /* ширина эффекта наведения */
}
}
демонстрация ...
- 123. как сделать чекбокс на html/css
- CSS/CSS3
... #eec321;
}
при наведении курсора, делаем цвет фона немного темнее.
.container:hover input ~ .checkmark {
background-color: #ccc678;
}
для отмеченного чекбокса, ...
- 124. адаптивное меню гамбургер
- JavaScript/jQuery
... center; /* выравнивание по центру */
}
/* эффект наведения мыши на ссылки */
a:hover{
background-color: #efc5fa;
width: 100vw;
}
jquery код
если ...
- 125. анимация кнопки меню гамбургер
- JavaScript/jQuery
... рамка кнопки */
box-shadow: 2px 2px 5px 0 rgba(50,50,50,0.45);/* тень кнопки */
}
.gamburger:hover{
cursor: pointer;
}
/* стилизация полоски */
.gamburger span{
display: block;/* ...
- 126. верстка кнопок на сайте
- HTML/HTML 5
... плавный ховер эффект */
color: #f7f8e8; /* цвет текста на кнопке */
}
.button:hover {
background-color: #949a9a; /* замена цвета кнопки при наведении */
}
скриншот ...
- 127. верстка по сетке bootstrap (часть 1)
- CSS/CSS Основы
... display: block;
}
/* подчеркивание ссылок при наведении */
.link-color:hover {
display: block;
border-bottom: 2px solid #5094f2;
}
демонстрация ...
- 128. цифровая лупа на javascript
- JavaScript/JavaScript Скрипты
... width: 500px;
overflow: hidden;
cursor: zoom-in;
}
.zoomer img:hover {
/*
* скрываем начальное изображение ...
- 129. всплывающее окно popup на jquery (часть 1)
- JavaScript/jQuery
... 26px;
}
при наведении или в фокусе, крестик меняет свой цвет.
.popup-close:hover,
.popup-close:focus {
color: #000;
cursor: pointer;
}
обратите внимания, ...
- 130. иконки для меню сайдбара
- CSS/CSS3
...
меняем цвет текста при наведении мышки на ссылки сайдбара.
.sidebar a:hover {
color: #d1c4e9;
}
медиа-запрос для маленьких экранов
когда высота ...
- 131. меню для мобильной версии сайта
- CSS/CSS3
... цвет фона всех ссылок внутри блока-контейнера, станет светлее.
.nav-wrap a:hover {
background-color: #d7ccc8;
color: #000;
}
создадим активный класс, ...
- 132. как сделать фиксированное меню
- CSS/CSS3
...
color: #fff;
font-size: 18px;
}
поменяем цвет при наведении.
.nav a:hover {
color: #000;
background: #f8bbd0;
}
внимательный читатель возможно ...
- 133. как сделать вкладки в html
- JavaScript/JavaScript Основы
... городов и плавным переходом.
3) поменяем цвет фона при наведении на кнопки button:hover.
4) зададим цвет фона и цвет ссылки для активной кнопки вкладки button.active. ...
- 134. material design: современный подход к дизайну интерфейсов
- HTML/HTML 5
... transition: box-shadow 0.3s ease;
background-color: #fff;
margin: 16px;
}
.card:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.card-header { ...