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 

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

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

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

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

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 

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

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

Вопрос: Нравится?
1. Да 
52  (86.67%)
2. Нет 
2  (3.33%)
3. С чайком потянет 
6  (10%)
Всего: 60

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

19:48 

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

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

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

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

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

17:18 

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

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



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

Вопрос: Нравится?
1. Да 
38  (86.36%)
2. Нет 
2  (4.55%)
3. С чайком потянет 
4  (9.09%)
Всего: 44

@темы: SoraNoir, Зима, Новый год, аватары, аниме/арты, кошки

02:53 

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

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

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

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

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


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

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

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

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

18:27 

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

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

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

01:38 

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

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





+7

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

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

11:20 

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

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

Новогодние праздники – время нежности, доброты, и чудес.
Ни с чем несравнимое ощущение волшебства приходит с запахом мандаринов, под приятную музыку, и звон доставаемых елочных игрушек. Это время подарков и сюрпризов. Время, которое мы хотим провести с теми, кто нам дорог. Порадовать их.
И наш Демон, он же всея Санта 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 года. Но я уже вижу более детализированные оформления, анимированные аватарки, экстатопы и свою расширенную БИ, в которой хранятся дизы, устанавливаемые по ссылке автоматически.

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

22:19 

Заказ Mr.Gold

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...

меню в раскрытом виде

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

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

18:11 

Милости - вкусняшести

Kai Noir
Ранимый эстет
Простенький светлый пироженко-прянечный дизайн с анимированным эпиграфом


Вопрос: Нравится?
1. Да 
28  (71.79%)
2. Нет 
3  (7.69%)
3. С чайком потянет 
8  (20.51%)
Всего: 39

@темы: песочно-бежевое, еда, дизайн, Новый год, Зима, SoraNoir, аниме/арты

21:43 

Флудилка

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Уважаемые сообщники. Пожалуйста отписывайтесь в постах в соответствии с их темами и по сабжу конкретного оформления.
У нас имеются отдельные посты для:
вопросов originaldesign.diary.ru/p149668223.htm
желающих учиться originaldesign.diary.ru/p202013319.htm
заказов originaldesign.diary.ru/?tag=3766049
Если уж кому то нестерпимо хочется высказать нечто, что в эти рамки не укладывается можете сделать это в комментариях к этому посту.
Спасибо за внимание.
Ваш злой админ:evil:

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

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

главная