• ↓
  • ↑
  • ⇑
 
21:40 

Книга джунглей

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


Забирая дизайн себе, пожалуйста, не забывайте ставить баннер сообщества

Настройки

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

@темы: природа, по группам/фильмам/сериалам/играм, зеленое, дизайн, Огненный Бес

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. Да. 
49  (75.38%)
2. Нет. 
16  (24.62%)
Всего: 65

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

10:08 

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

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

20:30 

Заказ Клэр Фюхс

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


Забирая дизайн себе, пожалуйста, не забывайте ставить баннер сообщества

Настройки

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

@темы: Огненный Бес, дизайн, заказ, фэнтези

14:05 

Заказ ~Ахэ~

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


Забирая дизайн себе, пожалуйста, не забывайте ставить баннер сообщества

Настройки

Вопрос: Нравится дизайн?
1. Да 
44  (95.65%)
2. Нет 
2  (4.35%)
Всего: 46

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

01:27 

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

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

23:48 

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

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

Вопрос: Нравится оформление?
1. Да. 
63  (75.9%)
2. Нет. 
17  (20.48%)
3. Одел. 
3  (3.61%)
Всего: 83

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

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. Да. 
60  (95.24%)
2. Нет. 
3  (4.76%)
Всего: 63

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

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. Да. 
57  (96.61%)
2. Нет. 
2  (3.39%)
Всего: 59

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

10:46 

О цветах.

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

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

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

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

17:44 

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

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


Форма.

Обводка.



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

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

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

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

10:00 

Харука.
Бороться и искать, найти и перепрятать. (с)

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

@темы: Izanami., голубое-сине-фиолетовое, дизайн, женственное, книжно-писательское

09:56 

Харука.
Бороться и искать, найти и перепрятать. (с)

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

@темы: песочно-бежевое, нежное, кошки, книжно-писательское, дизайн, Izanami.

21:02 

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























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

Вопрос: Полезно?
1. Да. 
83  (93.26%)
2. Нет. 
6  (6.74%)
Всего: 89

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

02:12 

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

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


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

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

13:12 

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

Вопрос: Интересно?
1. Да. 
58  (84.06%)
2. Нет. 
11  (15.94%)
Всего: 69

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

03:11 

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

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

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

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

03:09 

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

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

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

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

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

главная