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

12:34 

Per aspera ad astra

Dark Wood
Ранимый эстет
Темный дизайн с двумя эпиграфами: статичным и анимированым.

Вопрос: Нравится?
1. Да 
32  (84.21%)
2. Нет 
4  (10.53%)
3. С чайком потянет 
2  (5.26%)
Всего: 38

@темы: дизайн, голубое-сине-фиолетовое, аниме/арты, абстрактные, Спящий Эльф

17:59 

Легкий и простой дизайн

Dark Wood
Ранимый эстет

Вопрос: Нравится?
1. Да 
23  (82.14%)
2. Нет 
1  (3.57%)
3. Верните мне зрение 
4  (14.29%)
Всего: 28

@темы: песочно-бежевое, дизайн, Спящий Эльф

17:52 

Аватарки

Dark Wood
Ранимый эстет
Девушки фэнтези арт
150 х 150




120 х 120

Вопрос: Нравится?
1. Да 
23  (76.67%)
2. Нет 
2  (6.67%)
3. С чайком потянет 
5  (16.67%)
Всего: 30

@темы: фэнтези, песочно-бежевое, красное, коричневое, желто-оранжевое, голубое-сине-фиолетовое, аниме/арты, аватары, Спящий Эльф

19:53 

Малахитовая шкатулка

Dark Wood
Ранимый эстет

Вопрос: Нравится?
1. Да 
29  (74.36%)
2. Нет 
5  (12.82%)
3. С чайком потянет 
5  (12.82%)
Всего: 39

@темы: фэнтези, зеленое, дизайн, бабочки, Спящий Эльф

17:48 

Dark Wood
Ранимый эстет
Темный дизайн с двумя эпиграфами: анимированым и статичным с прозрачным фоном


Вопрос: Нравится?
1. Да 
31  (73.81%)
2. Нет 
6  (14.29%)
3. С чайком потянет 
5  (11.9%)
Всего: 42

@темы: коричневое, желто-оранжевое, дизайн, Спящий Эльф, черно-белое

20:53 

Огненые демоны

Dark Wood
Ранимый эстет
Да, что-то я сегодня феячу и феячу. Люблю сложносборные аватарки
Рыжие демоны.
А все Огненный Бес виноват, ник у него вдохновляющий
150 х 150




120 х 120

Вопрос: Нравится?
1. Да 
26  (76.47%)
2. Нет 
5  (14.71%)
3. С чайком потянет 
3  (8.82%)
Всего: 34

@темы: аватары, Спящий Эльф, аниме/арты, фэнтези, красное, коричневое, желто-оранжевое

18:54 

Нужно верить в единорогов. Они же в нас верят

Dark Wood
Ранимый эстет
Очень светлый дизайн


Вопрос: Нравится?
1. Да 
25  (67.57%)
2. Нет 
7  (18.92%)
3. С чайком потянет 
5  (13.51%)
Всего: 37

@темы: дизайн, голубое-сине-фиолетовое, аниме/арты, Спящий Эльф

16:40 

Вселенная всегда на стороне мечтателей

Dark Wood
Ранимый эстет
И снова я, и снова аватарки
Тихая нежность

150 х 150



+3

120 х 120

Вопрос: Нравится?
1. Да 
25  (69.44%)
2. Нет 
5  (13.89%)
3. С чайком потянет 
6  (16.67%)
Всего: 36

@темы: женственное, Спящий Эльф, голубое-сине-фиолетовое, аватары

14:41 

Лисы и девушки

Dark Wood
Ранимый эстет
А я продолжаю "радовать" сообщников аватарами.
Рыжие девушки и не менее рыжие лисы.
150 х 150


+3

120 х 120

Вопрос: Нравится?
1. Да 
19  (67.86%)
2. Нет 
8  (28.57%)
3. С чайком потянет 
1  (3.57%)
Всего: 28

@темы: коричневое, зеленое, голубое-сине-фиолетовое, аватары, Зима, Спящий Эльф

01:38 

Огненный Бес
Скромник с чертиками в глазах
Под кадом три эпиграфа с разными картинками.



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

Настройки

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

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

20:22 

Ayumi Hamasaki JEWEL

Dark Wood
Ранимый эстет
Три совершенно абстрактных анимированых эпиграфа.
Не смог устоять перед сверкающим великолепием клипа JEWEL


+2

Вопрос: Нравится?
1. Да 
30  (76.92%)
2. Нет 
5  (12.82%)
3. С чайком потянет 
4  (10.26%)
Всего: 39

@темы: эпики, голубое-сине-фиолетовое, абстрактные, Япония, Спящий Эльф

19:20 

Dark Wood
Ранимый эстет
Моя первая слабенькая попытка сделать что-то эльфийское.
Ни разу еще с эльфами не сталкивался. Но и начинать никогда не поздно.



Вопрос: Нравится?
1. Да 
17  (60.71%)
2. Нет 
4  (14.29%)
3. С чайком потянет 
7  (25%)
Всего: 28

@темы: коричневое, дизайн, Спящий Эльф, песочно-бежевое, фэнтези

20:44 

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

Вопрос: Блокнотик?
1. Интересует, скачаю 
23  (67.65%)
2. Не интересует тема 
11  (32.35%)
Всего: 34

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

20:01 

Ишите женщину...

Dark Wood
Ранимый эстет
Не могу устоять перед соблазном сделать аватарки в новом для дайри размере 150 х 150.
Не знаю, придутся ли они кому-то по душе, но...не справляюсь я с этим вдохновением(с)
150 х150 свыше 50кб



150 х 150 до 50 кб

Вопрос: Нравится?
1. Да 
13  (56.52%)
2. Нет 
9  (39.13%)
3. С чайком потянет 
1  (4.35%)
Всего: 23

@темы: песочно-бежевое, нежное, женственное, аватары, Спящий Эльф

13:19 

Обьявление.

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


Взято здесь.

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

21:26 

Бэкграунд или фон дневника.

Изумрудный Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Я лично пользуюсь в основном двумя вариантами фона: большая картинка растянутая по экрану без искажения пропорций, либо повторяющееся бесшовное изображение, которое паркуется в левый верхний угол. Часто даже в платниках использую фоны стандартного размера/веса/способа загрузки.
Но раз уж меня попросили поделиться вариантами оформления фонов я нашел не скажу что все, но большую часть)
Информация взята с сайта WebReference.ru. Там удобный интерфейс и много полезного.
Фон на дайриках прописывается через body .Селектор пишется прям вот так, без решеток и точек.

У боди может быть несколько свойств:

background-color заливка цветом, но ее можно выставить и в стандартных настройках для фона дневника. А вот использование для скажем постов интересно. Задается так:
селектор {background-color: #000000!important;} после решетки код цвета.

background-image заливка фоновым изображением
body {background-image: url(<адрес>)}

background-position позиционирование изображения.
Например body { background-position: left top;} помещает в левый верхний угол. Дальше разные значения и их эквиваленты.
top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
Наглядно:


ЧИТАТЬ ДАЛЬШЕ

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

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

23:23 

Обьявление.

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

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

19:14 

Аватарки

Dark Wood
Ранимый эстет
Здравствуйте наши дорогие сообщники.
В связи с дайровскими нововведениями возник вопрос относительно платного сервиса "Аватары". Дабы оптимизировать и направить работы в этом плане в нужное русло, и во благо, хотелось бы узнать, а многие ли подключили этот сервис? И если подключили, то какой именно: 120х150 вес до 50 кб, или 150х150 вес до 100 кб?
По сему запускаем голосование, на результаты которого и будем ориентироваться в своей работе.

Вопрос: Какой из вариантов сервиса "Аватары" Вы себе подключили?
1. 120х150 до 50 кб 
14  (20.59%)
2. 150х150 до 100 кб 
10  (14.71%)
3. Не подключил(ла) 
44  (64.71%)
Всего: 68

@темы: Спящий Эльф, Административное

17:35 

Еще о дополнительных блоках. Анимация.

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

В любом графическом редакторе пере сохраняем ее как jpg.

Грузим оба изображения в БИ. Располагаем в правом нижнем (или левом) углу под меню.
Это статичное изображение. Оно у нас по умолчанию.
#add_block1 {width: 248px !important; height: 237px !important; background: url('/userdir/3/4/5/3/3453262/85444931.jpg') 0px 0px no-repeat; position: fixed !important; bottom:0px; right: 0px;z-index: 1;}
Это анимированное. Оно подгружается когда над ним мышка.
#add_block1:hover {width: 248px !important; height: 237px !important; background: url('/userdir/3/4/5/3/3453262/85444932.gif') 0px 0px no-repeat; position: fixed !important; bottom:0px; right: 0px;z-index: 1;}
Котейка обосновалась под меню.

Можно задать картинкам отступ сверху равный высоте меню, чтобы при маленьком разрешении экрана котя его не перекрывала. Но в этом случае учитывайте и пункты видимые гостям.

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

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

01:25 

Дополнительные блоки. Прозрачность.

Изумрудный Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Для примера возьмем кота из моего оформления.
Я знаю что он жуткий, но мне нравится)
Грузим в БИ, прописываем общие свойства.
#add_block1 {width: 236px !important; height: 222px !important; background: url('/userdir/2/2/2/0/2220055/82354467.png') 0px 0px no-repeat; position: absolute !important; top: 200px; left:50%; margin-left: -250px; z-index: 2;}

БЛОК1 {ширина; высота; фоновое изображение; позиционирование;}

Для изменения степени прозрачности элемента применяется стилевое свойство opacity со значением от 0 до 1, где 0 соответствует полной прозрачности, а 1, наоборот, непрозрачности объекта. То есть 0.1, 0.2, ... 1.0
Я хочу добиться эффекта когда кот не виден, только если его случайно задеть мышкой.
#add_block1 {opacity : 0.1 !important;}
На всякий случай говорю браузеру, что это значение важно.
#add_block1:hover {opacity : 1.0 !important;}
Вот что получается:

Но мне хочется плавности, поэтому я задаю время за которое кот сменит прозрачность с 0.1 на 1.0. В секундах.
#add_block1 { transition: all 2s;-moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s;}
И время за которое он снова станет полупрозрачным.
#add_block1:hover { transition: all 2s;-moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s;}
Свойство задаю само по себе и для различных браузеров.
Вот что получается в итоге:

Вопрос: Полезно?
1. Да 
24  (96%)
2. Нет 
1  (4%)
Всего: 25

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

главная