URL
19:53 

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

Kai Noir
Ранимый эстет

Вопрос: Нравится?
1. Да 
18  (75%)
2. Нет 
4  (16.67%)
3. С чайком потянет 
2  (8.33%)
Всего: 24

@темы: фэнтези, зеленое, дизайн, бабочки, SoraNoir

17:48 

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


Вопрос: Нравится?
1. Да 
25  (78.13%)
2. Нет 
4  (12.5%)
3. С чайком потянет 
3  (9.38%)
Всего: 32

@темы: черно-белое, коричневое, желто-оранжевое, дизайн, SoraNoir

20:53 

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

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




120 х 120

Вопрос: Нравится?
1. Да 
20  (71.43%)
2. Нет 
5  (17.86%)
3. С чайком потянет 
3  (10.71%)
Всего: 28

@темы: аватары, SoraNoir, фэнтези, красное, коричневое, желто-оранжевое, аниме/арты

18:54 

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

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


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

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

16:40 

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

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

150 х 150



+3

120 х 120

Вопрос: Нравится?
1. Да 
20  (66.67%)
2. Нет 
4  (13.33%)
3. С чайком потянет 
6  (20%)
Всего: 30

@темы: SoraNoir, аватары, голубое-сине-фиолетовое, женственное

14:41 

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

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


+3

120 х 120

Вопрос: Нравится?
1. Да 
16  (66.67%)
2. Нет 
7  (29.17%)
3. С чайком потянет 
1  (4.17%)
Всего: 24

@темы: коричневое, зеленое, голубое-сине-фиолетовое, аватары, Зима, SoraNoir

01:38 

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



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

Настройки

Вопрос: Нравится дизайн?
1. Да 
20  (90.91%)
2. Нет 
2  (9.09%)
Всего: 22

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

21:41 

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

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


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

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


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

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

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

20:22 

Ayumi Hamasaki JEWEL

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


+2

Вопрос: Нравится?
1. Да 
24  (75%)
2. Нет 
5  (15.63%)
3. С чайком потянет 
3  (9.38%)
Всего: 32

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

19:20 

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



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

@темы: фэнтези, песочно-бежевое, коричневое, дизайн, SoraNoir

20:44 

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

Вопрос: Блокнотик?
1. Интересует, скачаю 
20  (68.97%)
2. Не интересует тема 
9  (31.03%)
Всего: 29

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

20:01 

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

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



150 х 150 до 50 кб

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

@темы: SoraNoir, аватары, женственное, нежное, песочно-бежевое

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. Да 
22  (100%)
2. Нет 
0  (0%)
Всего: 22

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

23:23 

Обьявление.

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

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

19:14 

Аватарки

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

Вопрос: Какой из вариантов сервиса "Аватары" Вы себе подключили?
1. 120х150 до 50 кб 
12  (20%)
2. 150х150 до 100 кб 
9  (15%)
3. Не подключил(ла) 
39  (65%)
Всего: 60

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

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. Да 
24  (100%)
2. Нет 
0  (0%)
Всего: 24

@темы: как это сделано, возможности 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. Да 
23  (95.83%)
2. Нет 
1  (4.17%)
Всего: 24

@темы: как это сделано, возможности 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, мрачное

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

главная