16:55 

Немного о перемещении и полупрозрачности.

Изумрудный Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Возьмем для примера аватарку.
Она обведена полоской шириной в 4 пикселя и ей заданы два положения: обычное и с мышкой сверху.
.avatar img { border:4px solid #81735C !important;}
.avatar img { margin-left:20px;width:100px; margin-top:20px; }
.avatar img:hover { margin-left:0px;width:100px; margin-top:20px; }

Добавим эффекту полу прозрачности и плавности.
.avatar img { opacity : 0.5 !important;-moz-transition: all 1s; -webkit-transition:all 1s; -o-transition: all 1s; transition: all 1s; }
.avatar img:hover { opacity : 1.0 !important;-moz-transition: all 1s; -webkit-transition:all 1s; -o-transition: all 1s; transition: all 1s;}

Поменяем ширину картинки при наведении мышки:
.avatar img:hover { margin-left:0px;width:80px; margin-top:20px; }

Зададим другую обводку:
.avatar img:hover { border:2px dotted #000 !important;}

Варианты ограничены только вашей фантазией. Эффекты можно привинтить к любым селекторам оформления.

Вопрос: Полезно?
1. Да. 
63  (95.45%)
2. Нет. 
3  (4.55%)
Всего: 66

@темы: как это сделано, возможности CSS, Кареглазый Демон, урок

Комментарии
2015-12-05 в 18:29 

*ЭльфА
Вот они, Водолеи, не предсказуемые... сами себя предсказать не могут
ого!!!! даже и не думала, что так можно использовать этот эффект, здорово!

2015-12-05 в 19:05 

Marciana
Верните меня в прошлое, там было такое счастливое будущее...
Потрясающе!

2015-12-05 в 19:27 

Изумрудный Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Elfa Elenya, Я кстати тоже именно в таком виде ни у кого не видел) Принцип думаю понятен, но если нужно могу и подробнее расписать.

2015-12-05 в 19:27 

Изумрудный Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Marciana, благодарю)

2015-12-05 в 22:05 

*ЭльфА
Вот они, Водолеи, не предсказуемые... сами себя предсказать не могут
Кареглазый Демон, но если нужно могу и подробнее расписать.спасибо! мне в общем -то понятно, надо попробовать, если не выйдет ну совсем никак, то спрошу.

2015-12-05 в 22:06 

Изумрудный Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Elfa Elenya, договорились.

2016-02-25 в 14:33 

чердачный мышь
души по расписанию
большое спасибо за все мануалы, просто спасибо!

2016-02-25 в 14:41 

Изумрудный Демон
Ко мне на "ВЫ", шепотом и с придыханием...
чердачный мышь, пожалуйста) Рад что пригодилось.

2018-01-01 в 20:04 

Bacca.
Рано или поздно, так или иначе
Спасибо, очень интересно! Сделала себе полупрозрачность наоборот, при наведении мыши, потом подумала, что так, как у вас, как раз приглушаются аватарки и так лучше, вернула обратно))
наверное и перемещение добавлю, поиграться. А может найду у вас про поворот)

2018-01-01 в 21:52 

Изумрудный Демон
Ко мне на "ВЫ", шепотом и с придыханием...
А может найду у вас про поворот) нет, про поворот пока не рассказывал)

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

Original Designs бесплатники, CSS и уроки по созданию оформлений.

главная