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

14:41 

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

SoraNoir
Ранимый эстет
А я продолжаю "радовать" сообщников аватарами.
Рыжие девушки и не менее рыжие лисы.
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

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


+2

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

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

19:20 

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



Вопрос: Нравится?
1. Да 
18  (62.07%)
2. Нет 
4  (13.79%)
3. С чайком потянет 
7  (24.14%)
Всего: 29

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

20:44 

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

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

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

20:01 

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

SoraNoir
Ранимый эстет
Не могу устоять перед соблазном сделать аватарки в новом для дайри размере 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 

Аватарки

SoraNoir
Ранимый эстет
Здравствуйте наши дорогие сообщники.
В связи с дайровскими нововведениями возник вопрос относительно платного сервиса "Аватары". Дабы оптимизировать и направить работы в этом плане в нужное русло, и во благо, хотелось бы узнать, а многие ли подключили этот сервис? И если подключили, то какой именно: 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, Кареглазый Демон, урок

19:03 

Еще о дополнительных блоках

Изумрудный Демон
Угрюм - и - Пиздат
Первый пост по этой теме тут. Все уроки по тегу. Задать вопрос можно здесь.

Все ниже перечисленный свойства применимы и к стандартным селекторам дайровских оформлений.

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

Псевдокласс :hover
Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

Псевдокласс :active
Псевдокласс :active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.

transition
Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay. Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдоэлемента :hover или :active, а также динамически через Javasсript.

Что это дает нам? Огромный простор для творчества. И плавные переходы между состояниями блоков.

1. Можно изменять прозрачность элемента.
2. Задавать ему смещение.
3. Заменять статичную картинку анимированной.
4. Менять одно изображение на другое.
5. Делать черно-белые элементы цветными (при поддержке браузера).
6. Изменять размер изображения.
7. Комбинировать эффекты.

Детально и с примерами распишу в следующем посте.

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

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

05:05 

Заказ Бездушный Рыцарь Айе

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



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

16:05 

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

Уходящий год был нелегким и едва не стал последним для сообщества и дайриков вообще. Однако события последних месяцев показывают, что все зависит только от нас самих.
Я хочу поблагодарить тех кто делится красотой и творчеством и делает наш любимый сайт уютнее. Спасибо что вдохновляете.
И конечно спасибо нашим ПЧ. За доверие, похвалу, теплые мотивирующие отзывы. Вас уже больше четырехсот. Это и стимул и ответственность.
Новый год принесет нам новые сервисы и новые возможности. И, я надеюсь, пополнение в рядах наших мастеров.
Творческих успехов и новых свершений всем нам в наступающем году.

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

00:25 

Зимнее настроение

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


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

Настройки

Вопрос: Нравится дизайн?
1. Да 
34  (97.14%)
2. Нет 
1  (2.86%)
Всего: 35

@темы: Зима, серое, дизайн, Огненный Бес

19:47 

Может, творчество мое вызовет сомнения. (с)

SoraNoir
Ранимый эстет

Вопрос: Нравится?
1. Да 
16  (59.26%)
2. Нет 
7  (25.93%)
3. С чайком потянет 
4  (14.81%)
Всего: 27

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

23:56 

Зимний вечер

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



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

Настройки

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

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

23:31 

Asteinny
Это свойственно человеку. После острого тянет на кисленькое. После смерти — на смех.©

Вопрос: Нравится?
1. Да 
40  (90.91%)
2. Нет 
4  (9.09%)
Всего: 44

@темы: серое, дизайн, Зима, Asteinny

20:52 

Пряничный олень

SoraNoir
Ранимый эстет
Скромный праздничный эпиграф

Вопрос: Нравится?
1. Да 
53  (86.89%)
2. Нет 
2  (3.28%)
3. С чайком потянет 
6  (9.84%)
Всего: 61

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

главная