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

Заказ для zavieja

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

Вопрос: Нравится оформление?
1. Да. 
18  (90%)
2. Нет. 
2  (10%)
Всего: 20

@темы: коричневое, зеленое, дизайн, Кареглазый Демон, Волшебство, заказ

16:01 

Для Izanami.

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

Дальше нужно создать еще два слоя: с белым фоном и надписью в нашем случае.

Макет разрезаем по синим линиям и сохраняем в jpg.
В итоге получаем три картинки:
1.

2.

3.

Теперь используем теги MORE.


перваявторая

Первая нажимается и открывает третью. (кликабельно)


Для второй и третьей картинок прописываем карту ссылок. Опишу подробно, мало ли вдруг кто не умеет, а ему интересно. Через XnView смотрим координаты всего что должно нажиматься.
Общий вид:


Вторая картинка:






и ее код:


Третья картинка:



и ее код:
Мне удобнее сначала подписать названия и только потом добавлять ссылки:




Важный момент: там где img usemap нужно задавать новое имя для каждой картинки в посте, иначе ссылки отобразятся некорректно.

Теперь осталось только вставить готовые коды в шаблон MORE.



Итог:





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

01:17 

Заказ для bokuto-san

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

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

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

17:45 

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

Вопрос: Нравится оформление?
1. Да. 
29  (93.55%)
2. Нет. 
2  (6.45%)
Всего: 31

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

17:13 

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

Заказ для Кеиннари

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

Вопрос: Нравится оформление?
1. Да. 
10  (76.92%)
2. Нет. 
3  (23.08%)
Всего: 13

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

12:09 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Значит так. Я закрываю сообщество и отписываю всех ПЧ. Это необходимо и для того чтобы видеть кто реально нас смотрит и для того чтобы никто не жаловался что ему зафлудили ленту в процессе восстановления. Не знаю сколько уйдет времени. Может неделя, а может все лето. Когда перезапустимся вывешу сообщество в списке на главной, чтобы тот кто хотел мог подписаться обратно.
Upd.
Пожалуйста не вступайте в сообщество, а добавляйте его в избранное. Кнопка "вступить" для потенциальных мастеров и тех кто будет выкладываться. Поэтому те заявки что у меня сейчас висят удаляю. Не обижайтесь пожалуйста.
запись создана: 15.05.2016 в 20:11

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

23:49 

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

Тема Кареглазого Демона

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


ФОРМА ЗАКАЗА ДЛЯ CSS

ФОРМА ЗАКАЗА ДЛЯ ПРОСТОГО АККАУНТА


В работе заказ Сэйа Рианнон Атарем

Принимаю заказы на бесплатные оформления и CSS.
запись создана: 06.03.2011 в 12:59

@темы: Кареглазый Демон, Закажи у меня

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

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. Да. 
61  (95.31%)
2. Нет. 
3  (4.69%)
Всего: 64

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

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

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

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. Да. 
74  (98.67%)
2. Нет. 
1  (1.33%)
Всего: 75

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

21:02 

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























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

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

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

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

главная