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

01:03 

Изумрудный Демон
Угрюм - и - Пиздат
В предыдущих постах Я рассказал о простых эффектах на примере аватарок. Все они применимы и к изображениях в вашей ленте. Равно как и все эффекты приводимые ниже можно использовать и для аватарок.
Задаем картинкам в ленте фиксированную ширину 300 пикселей. Можно и больше, мне так удобнее для примера.
.paragraph img{max-width: 300px;max-height: auto;}

Делаем так чтобы она становилась полупрозрачной при наведении мышки.
.paragraph img{opacity : 1.0 !important;}
.paragraph img:hover {opacity : 0.5 !important;}

Или же наоборот, картинки изначально полупрозрачные, что красиво в темных оформлениях, а при наведении мышки они становятся ярче за счет полной прозрачности.
.paragraph img{opacity : 0.5 !important;}
.paragraph img:hover {opacity : 1.0 !important;}

Эффект есть, но хочется чтобы он был более плавным. Для этого мы задаем время в течение которого одно свойство заменится на другое.
.paragraph img{ -moz-transition: all 1s; -webkit-transition:all 1s; -o-transition: all 1s; transition: all 1s; } одна секунда. А чтобы прозрачность также плавно возвращалась в прежнее состояние то же свойство прописываем и для положения мышки над картинкой.
.paragraph img:hover { -moz-transition: all 1s; -webkit-transition:all 1s; -o-transition: all 1s; transition: all 1s; }

Качество изображения при этом хуже не становится. Это глюк записывающей проги.
Изображению можно задать еще одно интересное свойство, которое к сожалению не видит моя мозила, зато понимают опера и хром. Картинки становятся черно белыми, благодаря наложению фильтра.
.paragraph img{ -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-o-filter: grayscale(100%);-ms-filter: grayscale(100%); -moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s; transition: all 2s; }
.paragraph img:hover{ -webkit-filter: grayscale(0%);-moz-filter: grayscale(0%);-o-filter: grayscale(0%);-ms-filter: grayscale(0%); -moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s; transition: all 2s; }

Обратите внимание что наложение задается в процентах. Поэтому данный эффект можно использовать и для при глушения насыщенности, аватарок например.
.avatar img { -webkit-filter: grayscale(20%);-moz-filter: grayscale(20%);-o-filter: grayscale(20%);-ms-filter: grayscale(20%); }
Или смайликов. В темных оформлениях они особенно режут глаз.
#shsmile { -webkit-filter: grayscale(50%);-moz-filter: grayscale(50%);-o-filter: grayscale(50%);-ms-filter: grayscale(50%); }
Еще один интересный эффект изменение размера картинок. Главное чтобы он был плавным.
Дописываем в код .paragraph img:hover{max-width: 600px;max-height: auto;} и изображения ленты увеличатся вдвое при наведении мышки.


Вопрос: Полезно?
1. Да. 
59  (96.72%)
2. Нет. 
2  (3.28%)
Всего: 61

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

Комментарии
2015-12-05 в 01:08 

Огненный Бес
Скромник с чертиками в глазах
Спасибо.

2015-12-05 в 01:09 

Изумрудный Демон
Угрюм - и - Пиздат
Огненный Бес, всегда пожалуйста. Про плавающие менюшки напишу отдельно...

2015-12-05 в 09:50 

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

2015-12-05 в 14:45 

Изумрудный Демон
Угрюм - и - Пиздат
Elfa Elenya, пожалуйста)

2017-12-24 в 00:45 

Bacca.
Рано или поздно, так или иначе
Ого, вот это да! потрясающие эффекты! У меня аж глаза разбежались)))
очередное вам огромное спасибо! :dinlove:
Приглушение аватарок точно попробую)
И выезжание картинки интересное. А можно там использовать проценты вместо пикселей?

2017-12-24 в 00:50 

Изумрудный Демон
Угрюм - и - Пиздат
Очередное на здоровье) Изучайте...
А можно там использовать проценты вместо пикселей? а попробуйте. Заодно и расскажете. Я так не делал)

2017-12-24 в 01:01 

Bacca.
Рано или поздно, так или иначе
Да, с процентами тоже получается)) только почему-то не плавно

2017-12-24 в 01:06 

Изумрудный Демон
Угрюм - и - Пиздат
Bacca., это могут быть особенности восприятия браузером.

2017-12-24 в 01:12 

Bacca.
Рано или поздно, так или иначе
Но у вас тут увеличивается плавно, а у меня в просмотре - нет. Попробую сделать в пикселях.
А! я бестолочь! у вас пример записан)) ну да ладно, мне и без плавности понравилось. Хотя у меня тоже мозилла.

2017-12-24 в 01:15 

Изумрудный Демон
Угрюм - и - Пиздат
Bacca., плавно там за счет -moz-transition: all 1s; -webkit-transition:all 1s; -o-transition: all 1s; transition: all 1s; Возможно для вашего браузера нужно написать отдельно.

2017-12-24 в 01:18 

Bacca.
Рано или поздно, так или иначе
а, это было в предыдущем коде, я его не брала.
А можно сделать так, чтоб картинку эпиграфа это не затронуло?
Добавила строку, отвечающую за плавность, все получилось! :ura:

2017-12-24 в 01:29 

Изумрудный Демон
Угрюм - и - Пиздат
Bacca., Можно. Пишите для #epigraph .paragraph img
opacity : 1.0 !important;
max-width: какая у картинки ширина px;max-height: auto;
а для не изменения размера transition: none!important;
Должно помочь.

2017-12-24 в 01:53 

Bacca.
Рано или поздно, так или иначе
Помогло!!! :ura:
Вы настоящий волшебник :flower:

2017-12-24 в 01:56 

Изумрудный Демон
Угрюм - и - Пиздат
Есть немного)

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