Ознакомьтесь с нашей политикой обработки персональных данных
23:47 

Мой первый CSS...

Ко мне на "вы", шепотом и с придыханием...
Работа первая, поэтому мнения приветствуются.
Захотите взять поносить, пожалуйста.


смотреть
Спасибо Иринаре за помощь в поиске исходников и Mori за критику.

P.S. Оформление делалось при разрешении 1024 на 768 в Google Chrome.

Вопрос: Нравится оформление?
1. Да!  34  (100%)
Всего: 34

@темы: дизайн, Кареглазый Демон, css

22:36 

№1379

Ester Calhoun
Вечная Призрачная встречная
Ну раз уж пошла тема простенького... ) Скоро Хэллоуин, Господа!



При использовании дизайна просьба ставить баннер сообщества
Настройки

@темы: Праздничные, Осень, by Ester Calhoun, CSS

13:52 

Michella
Ну что ж, рискну показать свою первую работу в этом сообществе (точнее, вторую, если считать конкурсную). Строго не судите) Но если есть какие-то замечания, я с удовольствием выслушаю)

Настройки

Вопрос: Нравится?)
1. да  80  (88.89%)
2. нет  10  (11.11%)
Всего: 90

@темы: желто-оранжевое, еда, дизайн, to be itself

18:02 

Заказ jultschik

Esperanta
И даже яркое сияние софитов не сможет скрыть тьму человеческой души©



Настройки
При использовании дизайна, пожалуйста, не забывайте про баннер сообщества.

Вопрос: Нравится дизайн?
1. Да  60  (100%)
Всего: 60

@темы: Esperanta, дизайн, желто-оранжевое, заказ, кошки, мрачное, черно-белое

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. Да.  56  (96.55%)
2. Нет.  2  (3.45%)
Всего: 58

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

02:01 

Заказ для wolf_dead

Литари
Всё, что мне нужно, это: тёплая постель, доброе слово и неограниченная власть

Вопрос: Нравится оформление?
1. да  80  (100%)
Всего: 80

@темы: стимпанк, песочно-бежевое, мрачное, коричневое, заказ, дизайн, волки, Литари

11:32 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Не смог пройти мимо арта. Отдаю в безвозмездное пользование.

Установить автоматически

Вопрос: Нравится оформление?
1. Да  118  (87.41%)
2. Нет  4  (2.96%)
3. Одел  13  (9.63%)
Всего: 135
Всего проголосовало: 124

@темы: фэнтези, стимпанк, коричневое, желто-оранжевое, дизайн, Кареглазый Демон, css

21:37 

lock Доступ к записи ограничен

Кэссэн
Чукча фенриссийская /Так, казнить нельзя, помиловать тоже нельзя. Что же будем делать? - Пытать, Ваше Высочество. Пытать можно./ victoria sexta legionae
Закрытая запись, не предназначенная для публичного просмотра

14:44 

lock Доступ к записи ограничен

Элнен
Все наши дороги ведут туда, куда мы на самом деле хотим попасть
Закрытая запись, не предназначенная для публичного просмотра

15:37 

lock Доступ к записи ограничен

Тайо
Мяу, высказанное словами, не есть истинное мяу.
Закрытая запись, не предназначенная для публичного просмотра

18:07 

lock Доступ к записи ограничен

Glaswen
Мой бедный друг, из глубины твоей души стучит копытом сердце Петербурга.
Закрытая запись, не предназначенная для публичного просмотра

17:34 

lock Доступ к записи ограничен

Тайо
Мяу, высказанное словами, не есть истинное мяу.
Закрытая запись, не предназначенная для публичного просмотра

09:39 

lock Доступ к записи ограничен

Тайо
Мяу, высказанное словами, не есть истинное мяу.
Закрытая запись, не предназначенная для публичного просмотра

10:04 

lock Доступ к записи ограничен

Тайо
Мяу, высказанное словами, не есть истинное мяу.
Закрытая запись, не предназначенная для публичного просмотра

12:41 

lock Доступ к записи ограничен

Тайо
Мяу, высказанное словами, не есть истинное мяу.
Закрытая запись, не предназначенная для публичного просмотра

16:45 

lock Доступ к записи ограничен

Тайо
Мяу, высказанное словами, не есть истинное мяу.
Закрытая запись, не предназначенная для публичного просмотра

12:42 

lock Доступ к записи ограничен

Тайо
Мяу, высказанное словами, не есть истинное мяу.
Закрытая запись, не предназначенная для публичного просмотра

09:09 

lock Доступ к записи ограничен

Тайо
Мяу, высказанное словами, не есть истинное мяу.
Закрытая запись, не предназначенная для публичного просмотра

15:35 

Каким должен быть качественн­­­­­­ый пуэр, или Пуэрные Мифы и Легенды в картинках

Grindelwald
бомж-вуду
О чае пуэр сейчас очень много грамотной и интересной­­­­­­ информации­­­­­­ и еще больше мифов, легенд и недопониманий. Я не страстный фанат пуэра, но мое общение с этим чаем довольно продолжите­­­­­­льное­ и спокойное. Здесь расскажу о том, каким должен быть качественн­­­­­­ый шу пуэр, и каким он быть не должен.

читать дальше

Источник: http://irecommend.ru/

@темы: советую, пу-эр, обзор

11:30 

lock Доступ к записи ограничен

Тайо
Мяу, высказанное словами, не есть истинное мяу.
Закрытая запись, не предназначенная для публичного просмотра

Ящик яркой ящерки

главная