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

Записи пользователя: Изумрудный Демон (список заголовков)
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. Да. 
75  (100%)
2. Нет. 
0  (0%)
Всего: 75

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

17:44 

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

Изумрудный Демон
Угрюм - и - Пиздат
Размер.


Форма.

Обводка.



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

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

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

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

21:02 

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



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

Вопрос: Полезно?
1. Да. 
86  (93.48%)
2. Нет. 
6  (6.52%)
Всего: 92

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

02:12 

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

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


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

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

13:12 

Изумрудный Демон
Угрюм - и - Пиздат
Интересует подробный разбор создания платника такого вида?

Вопрос: Интересно?
1. Да. 
60  (84.51%)
2. Нет. 
11  (15.49%)
Всего: 71

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

10:56 

Пост о наболевшем.

Изумрудный Демон
Угрюм - и - Пиздат
Заказчикам CSS посвящается.
Все кто заказывали у меня оформления могут подтвердить, что Я на редкость терпелив и исполнителен. Однако это не означает, что получив мое согласие на оформление вашей обители, вы получаете и меня в безраздельное, безвозмездное и бесконечно долгое рабское пользование. Ниже Я приведу список того, как не надо себя вести, чтобы у меня не остались о вас неприятные воспоминания, как о заказчике, и мне захотеть с вами сотрудничать дальше.
1. Расплывчато формулировать идею в стиле "я не знаю чего хочу". В этом случае вы должны понимать что получиться может что угодно. И пенять соответственно на себя.
2. Просить использовать конкретную картинку "девушка пролетающая на ковре самолете над морем, играющая на скрипке и чтоб все ноты превращались в бабочек ". Если вы видели сие чудо пожалуйста поделитесь сами. Если нет расширьте параметры поиска.
3. Просить поменять что либо в дизайне после утверждения макета. Особенно это касается расположения панели меню. Нет. Нет. И еще раз нет.
4. Вообще просить переделать что либо из уже утвержденного и оформленного. Дополнить всегда пожалуйста. Ну вот не хотели вы оформлять цитаты и аватарки, а тут вдруг надумали. Никаких проблем. Но полностью перекроить основные блоки, когда уже пишется код, увольте.
5. Исчезать в процессе работы. Я могу понять, что ситуации бывают разные, как то нет возможности выйти в инет или не до него совсем. В этом случае ставьте меня в известность. Я могу подождать и три дня и неделю ответа на свой умыл но дольше не стану. За вами еще есть люди в очереди. Вообще если вы не уверены, что сможете отзываться в процессе в течение двух суток лучше не заказывайте.
6. Платить мне меньше указанной суммы. То что Я беру за минимум неделю работы это символический плата, которой хватает на оплату двух моих аккаунтов и инета. И оказаться она должна на моем счету полностью, учитывайте проценты за перевод средств. Пожалуйста, уважайте мой труд.
И вообще если вы думаете что это все легко и быстро, попробуйте сами. Спасибо за внимание.
запись создана: 11.12.2013 в 10:32

@темы: полезное, административное

16:29 

Изумрудный Демон
Угрюм - и - Пиздат
Возможно кому то будет полезно. Коды кнопок соцсетей которые открываются по клику на "поделиться" под постом.
span.b-share-icon.b-share-icon_vkontakte
span.b-share-icon.b-share-icon_facebook
span.b-share-icon.b-share-icon_twitter
span.b-share-icon.b-share-icon_odnoklassniki
span.b-share-icon.b-share-icon_lj

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

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

11:32 

Изумрудный Демон
Угрюм - и - Пиздат
Не смог пройти мимо арта. Отдаю в безвозмездное пользование.

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

Вопрос: Нравится оформление?
1. Да 
127  (86.39%)
2. Нет 
4  (2.72%)
3. Одел 
16  (10.88%)
Всего: 147
Всего проголосовало: 135

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

00:22 

Изумрудный Демон
Угрюм - и - Пиздат
Дизайн для Amelia maD hatter.


видео

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

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

01:56 

Изумрудный Демон
Угрюм - и - Пиздат
21:31 

Изумрудный Демон
Угрюм - и - Пиздат
Дизайн для T-K.Grimm.


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

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

16:29 

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


Отдаю в безвозмездное пользование. Если для вас диз пустоват можете дополнить по своему вкусу дополнительными блоками:
Изучить

Установить автоматически (без дополнительных блоков)
Причины нажать на эту ссылку вы возможно обнаружите на видео:



Настройки:
СМОТРЕТЬ

Вопрос: Нравится оформление?
1. Да. 
46  (83.64%)
2. Нет. 
6  (10.91%)
3. Одел. 
3  (5.45%)
Всего: 55

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

21:58 

Изумрудный Демон
Угрюм - и - Пиздат
Адаптация шаблона wordpress.

Отдаю в безвозмездное пользование. Установить автоматически
Причины нажать на эту ссылку вы возможно обнаружите на видео:


запись создана: 30.09.2014 в 00:54

Вопрос: Нравится оформление?
1. Да. 
24  (72.73%)
2. Нет. 
7  (21.21%)
3. Одел. 
2  (6.06%)
Всего: 33

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

16:44 

Изумрудный Демон
Угрюм - и - Пиздат
Если кто либо из моих заказчиков примет участие мне будет приятно:

22.04.2015 в 11:20
Пишет La mignonne:

Конкурс
Может кто помнит, было такое чудесное сообщество @designsCSS — КОНКУРС ДНЕВНИКОВ
Там проводились в том числе и не тематические конкурсы дизайнов. Суть такая: у Вас в дневнике есть красивый CSS дизайн на любую тему, Вы хотите его представить для участия в конкурсе. Вы подаете заявку, как и еще 9 человек, и потом путем голосования читателей из всех работ выбирается самый красивый, продуманный, лучший дизайн.
То есть - 1) специально рисовать ничего не нужно для конкурса, 2) все прелести дизайна и кода видны, т.к. дизайн стоит в Вашем дневнике в открытом доступе, 3) Вы можете просто показать свой красивый дизайн для сторонней оценки и получить похвалу/критику и плюсик к самооценке, если Ваш дизайн выберут лучшим из всех.

Так как надежды на возрождение сообщества нет, можно провести такой конкурс тут, если найдутся желающие показать себя, свое творчество и возможности в дайри-дизайне.
Ставлю голосовалку.

URL записи

На данный момент от вас требуется перейти по ссылке и выбрать первый вариант в голосовании. Отдельная просьба просто так туда не тыкать)

@темы: административное

20:09 

Изумрудный Демон
Угрюм - и - Пиздат
Дизайн для Itan Hunt

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

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

главная