Original Designs бесплатники, 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. Да 
35  (97.22%)
2. Нет 
1  (2.78%)
Всего: 36

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

19:47 

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

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

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

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

23:56 

Зимний вечер

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



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

Настройки

Вопрос: Нравится дизайн?
1. Да 
42  (97.67%)
2. Нет 
1  (2.33%)
Всего: 43

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

23:31 

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

Вопрос: Нравится?
1. Да 
42  (91.3%)
2. Нет 
4  (8.7%)
Всего: 46

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

20:52 

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

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

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

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

19:48 

Да - да, это снова я

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

Простой и теплый дизайн.
И да, я знаю, что уже использовал эту рамку в другом эпиграфе. Но она мне нравится ^^
И как сказал В.С. Высоцкий :
- Сам у себя ворую имею право.
Смотреть

Вопрос: Нравится?
1. Да 
40  (88.89%)
2. Нет 
0  (0%)
3. С чайком потянет 
5  (11.11%)
Всего: 45

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

17:18 

Чуть-чуть добра

SoraNoir
Ранимый эстет
Добрые и милые, легкие аватарки к праздникам



+16
С наступающими праздниками!

Вопрос: Нравится?
1. Да 
39  (86.67%)
2. Нет 
2  (4.44%)
3. С чайком потянет 
4  (8.89%)
Всего: 45

@темы: кошки, аниме/арты, аватары, Новый год, Зима, Спящий Эльф

02:53 

Как поставить в дневнике елку?

Просто Демон
Не причиняй добра - не получишь зла.
Помимо стандартных селекторов на дайриках можно прописывать свойства для дополнительных блоков. Отображаться такой блок будет на всех страницах дневника. Всего их может быть не более десяти в одном оформлении.
Задаются они селекторами
#add_block1
#add_block2
...
#add_block10

Зачем это нужно?
Допустим чтобы поставить елку в угол)
Берем елку на прозрачном фоне, грузим в свою БИ. Дальше прописываем свойства как любому другому селектору. (в примере елка нашего сообщества)

дополнительный блок1 {ширина; высота; бэкграунд: (адрес картинки из вашей БИ строго между кавычек) не повторять; позиция фиксированная; отступ снизу; отступ слева; положение на странице как слоя;}
Отступ снизу отрицательный, чтобы елка выглядывала из за края экрана, а не висела в воздухе, z индекс отрицательный чтобы не перекрывала информацию при узкой ленте записей. Соответственно если вы зададите position: absolute !important; блок промотается вместе с лентой. А позиционирование можно задавать от любого края, в процентах и пикселях.

Это один из вариантов использования дополнительных блоков. Еще с их помощью можно декорировать верх оформления, имитируя шапку сайта, пуская полосы, украшения или подложки между враппером и фоном дневника. Или над враппером, в зависимости от задумки. Такой прием хорош чтобы диз не выглядел голым и пустым на широком мониторе, но при этом не утяжелялся при просмотре со смартфона.
Возьму для примера фонарики из этого оформления:


Здесь задается ширина в 100%, а для картинки прописывается повторение по оси х, то есть по горизонтали. В результате фонарики заполняют весь экран, хотя сама картинка выглядит вот так:

Если эта тема интересна оставляйте комментарии. Я расскажу как еще можно использовать дополнительные блоки.

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

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

18:27 

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

Вопрос: Нравится?
1. Да 
31  (65.96%)
2. Нет 
8  (17.02%)
3. С чайком потянет 
8  (17.02%)
Всего: 47

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

01:38 

Новогодние открытки

Огненный Бес
Скромник с чертиками в глазах
Порадуйте себя и своих ПЧ новогодними открытками)
С наступающим новым годом и рождеством!





+7

Вопрос: Взял?
1. Да 
21  (100%)
Всего: 21

@темы: Огненный Бес, Новый год

11:20 

Это не реклама Кока-колы

SoraNoir
Ранимый эстет
Праздник к нам приходит (с)

Новогодние праздники – время нежности, доброты, и чудес.
Ни с чем несравнимое ощущение волшебства приходит с запахом мандаринов, под приятную музыку, и звон доставаемых елочных игрушек. Это время подарков и сюрпризов. Время, которое мы хотим провести с теми, кто нам дорог. Порадовать их.
И наш Демон, он же всея Санта O. D. пнул меня, аки эльфа, сотворить маленькое чудо, именуемое вылупляшками.
Эти маленькие шарики мы оставляем для Вас на нашей O.D.- шной елке. Каждый из них – сюрприз. Маленькая приятность, которая откроется каждому из Вас в канун Рождества, если Вы украсите таким шариком свою елку. Добро начинается с малого.
Чудо начинается с Вас.

С наступающими праздниками!

















запись создана: 18.12.2017 в 14:41

Вопрос: Унес?
1. Да! 
70  (100%)
Всего: 70

@темы: Новый год, Волшебство

23:34 

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

16.12.2017 в 22:58
Пишет Diary Spirit:

Цены на дополнительные сервисы в 2018 году
читать дальше
URL записи

Собственно, что это дает сообществу дизайнов спросите вы? Огромный простор для творчества. Конечно в деталях нужно будет еще разобраться, а изменения вступят в силу только в начале 2018 года. Но я уже вижу более детализированные оформления, анимированные аватарки, экстатопы и свою расширенную БИ, в которой хранятся дизы, устанавливаемые по ссылке автоматически.

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

главная