Записи с темой: кареглазый демон (список заголовков)
22:15 

Заказ для Fans Sails

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

Вопрос: Нравится оформление?
1. Да. 
34  (79.07%)
2. Нет. 
9  (20.93%)
Всего: 43

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

00:38 

Бесплатник в общее пользование.

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

Вдохновивший меня автор арта: artcity.diary.ru/p112048736.htm

Вопрос: Нравится оформление?
1. Да. 
66  (97.06%)
2. Нет. 
2  (2.94%)
Всего: 68

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

22:23 

В общее пользование.

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

Вопрос: Нравится оформление?
1. Да. 
50  (75.76%)
2. Нет. 
16  (24.24%)
Всего: 66

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

10:08 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Заказ для Время....
Все настройки у заказчика.

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

01:27 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Заказ для KontRayen.
Все настройки у заказчика. Фон фиксированный.

@темы: по группам/фильмам/сериалам/играм, заказ, дизайн, Кареглазый Демон, css

23:48 

В общее пользование.

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

Вопрос: Нравится оформление?
1. Да. 
64  (76.19%)
2. Нет. 
17  (20.24%)
3. Одел. 
3  (3.57%)
Всего: 84

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

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, Кареглазый Демон, урок

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, Кареглазый Демон

10:46 

О цветах.

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Каждый кто пытался сам собрать оформление подтвердит что дело это нелегкое и на каждом этапе встречается куча подводных камней. Но с некоторыми можно справиться и довольно просто. Иногда выбирая цвет текста вручную можно столкнуться с некрасивым эффектом битых пикселей, искажениями и прочей пакостью. Чтобы цвета отображались красиво и одинаково во всех браузерах существует таблица именованных цветов css.yoksel.ru/pages/tablitsa-imenovanny-h-tsvet...

Пользоваться ей очень просто. Вместо шестизначного кода вставляем в код слово и наслаждаемся видом. А если нужно перевести название в привычный или rgb вид есть удобный сервис: leaverou.github.io/css-colors/#ivory

Вопрос: Полезно?
1. Да. 
74  (100%)
2. Нет. 
0  (0%)
Всего: 74

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

17:44 

Способы оформления аватарок.

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


Форма.

Обводка.



Тень. Интуитивно понятный и очень удобный инструмент для создания тени. www.layerstyles.org/builder.html

Для скругления углов изображений средствами CSS есть отдельная штука:
border-radius.com/

Вопрос: Полезно?
1. Да. 
75  (98.68%)
2. Нет. 
1  (1.32%)
Всего: 76

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

21:02 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Аттракцион невиданной щедрости продолжается и в этом посте вы сможете найти множество способов для оформления ссылок в своих дизайнах. Обратите внимание на то что гифки ухудшают качество эффектов. И пожалуйста используйте этот материал как отправную точку для собственных экспериментов, а не простого копирования.
И мне будет приятно если вы скажете спасибо.



Эффект срабатывает самостоятельно без наведения мышки

Вопрос: Полезно?
1. Да. 
84  (93.33%)
2. Нет. 
6  (6.67%)
Всего: 90

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

02:12 

Подробная инструкция по сборке платника.

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


Вопрос: Полезно?
1. Да. 
60  (100%)
2. Нет. 
0  (0%)
Всего: 60

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

13:12 

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

Вопрос: Интересно?
1. Да. 
59  (84.29%)
2. Нет. 
11  (15.71%)
Всего: 70

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

03:11 

Подробная инструкция по сборке платника часть I

Ко мне на "вы", шепотом и с придыханием...
Сразу оговорюсь что способов создания оформления бесчисленное множество как и их вариантов. И то что Я пишу мой личный опыт и тотальное ИМХО самоучки, а также отправная точка для ваших собственных экспериментов. Просто прочитав эти посты вы мало что поймете. Найдите время, сядьте и сделайте все по пунктам, а дальше творите сами.

Вопрос: Полезно?
1. Да. 
77  (100%)
Всего: 77

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

03:09 

Подробная инструкция по сборке платника часть II

Ко мне на "вы", шепотом и с придыханием...

Вопрос: Полезно?
1. Да. 
59  (100%)
Всего: 59

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

03:07 

Подробная инструкция по сборке платника часть III

Ко мне на "вы", шепотом и с придыханием...

Вопрос: Полезно?
1. Да. 
53  (100%)
Всего: 53

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

03:05 

Подробная инструкция по сборке платника часть IV

Ко мне на "вы", шепотом и с придыханием...


Я очень надеюсь что все это было хоть кому то полезно. Дайте мне об этом знать ткнув в кнопочку. Если появятся вопросы задавайте в комментариях к записям.

Вопрос: Полезно?
1. Да. 
65  (100%)
Всего: 65

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

11:32 

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

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

Вопрос: Нравится оформление?
1. Да 
126  (86.9%)
2. Нет 
4  (2.76%)
3. Одел 
15  (10.34%)
Всего: 145
Всего проголосовало: 133

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

00:22 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Дизайн для Amelia maD hatter.


видео

Все настройки у заказчика.

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

01:56 

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

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

главная