Записи пользователя: Кареглазый Демон (список заголовков)
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 

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

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

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

02:53 

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

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

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

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

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


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

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

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

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

21:35 

lock Доступ к записи ограничен

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

23:34 

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

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

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

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

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

22:19 

Заказ Mr.Gold

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

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

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

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

21:43 

Флудилка

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

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

19:42 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
У нас на работе есть поговорка: "Открыл фотошоп - 50р., закрыл фотошоп - 50р." Это я к тому что дешевле работа дизайнера стоить не может)
Итак. Собрал я оформление. Зимнее, легкое. С учетом большинства пожеланий из этого поста.

Помимо того что заметно на видео диз адаптируется под любую ширину экрана и подходит для смартфонов, ужимает изображения в дневнике до 700 пикселей в основной ленте и до 600 пикселей в избранном и комментариях, а любое видео до 560 на 315.


Если вас заинтересовало это оформление перечислите 100 епонов на счет сообщества и напишите умыл. Умыл лучше писать на ник Кареглазый Демон. Либо отпишитесь в комментариях к этой записи.

Вам достанутся все настройки, коды, картинки этого оформления, а также бонусом кнопочка "Установить автоматически". Чтобы оно у вас было, но, если вам не хочется ставить его вручную, вы могли начать пользоваться им сразу же.

*** СКАЧАН 3 РАЗА ***

запись создана: 12.12.2017 в 01:36

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

13:11 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Я тут прикинул масштабы мануала по возможностям применения CSS для дайров с примерами и понял что лучше уж в формате видео. Прошелся по своим работам, потыкал, записал. Здесь конечно не все, я старался не выкладывать те что в свободном доступе и на виду. Если вам хватит терпения досмотреть до конца вы возможно откроете для себя что то новое)
Обращаю ваше внимание на то что я специально уменьшил область записи и свернул браузер. В живую эти оформления смотрятся лучше в основной массе, особенно на широких мониторах. Градиенты не рябят, менюшки друг на друга не наезжают.
И к сожалению в большинстве этих дизайнов часть красоты не видна, а именно в тех где эпиграф перекрывает верх. В таких работах он прописывался картинкой со ссылками и гармонично вписывался в оформление. К сожалению восстановить их у меня нет возможности. И раньше я часто использовал прием уведомлений картинками. Они тоже отображаются не везде, но я запишу с ними отдельное видео.
В некоторых старых работах видны огрехи. Простите их мне пожалуйста. Я был молод и неопытен. Зато много экспериментировал) И поверьте на слово, сейчас я могу и делаю лучше.

Вопрос: Интересно?
1. Да 
33  (97.06%)
2. Нет 
1  (2.94%)
Всего: 34

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

13:48 

CSS за умеренную плату

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Ну что ж. Давайте попробуем. Про идею каталога с дизайнами за оплату за скачивание думаю все слышали. Мне интересно попробовать это в формате сообщества.
От вас потребуется самое сложное. В комментариях к этой записи договориться между собой какой диз вам нужен. Скидывайте примеры работ, пользуйтесь формами заказа, показывайте какие платные фишки вам наиболее привлекательны.
Я выберу наиболее часто повторяющиеся пожелания, соберу их вместе и сделаю оформление. (может и не одно) А может вообще не соберу, если не будет активности) Тогда сообщество продолжит работать в привычном формате. Скрин выложу в сообществе, а настройки буду выдавать в умыл по запросу.
Саму минимальную стоимость как тему болезненную вывожу на голосование.

Пока так, возможно со временем что то изменится если тема приживется)
запись создана: 03.12.2017 в 21:28

Вопрос: Возможность получить настройки CSS должна стоить
1. 50р. 
23  (35.94%)
2. 100р. 
15  (23.44%)
3. 150р. 
13  (20.31%)
4. 200р. 
13  (20.31%)
Всего: 64

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

17:16 

Разделители.

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Возможность прописать кодом разделители это еще один повод подключить CSS)
Отдельного селектора, отвечающего за пространство между постами и комментариями не существует. Зато можно задавать фон самого поста.
Если бэкграунд повторяющийся получится заливка. Текстурой, полупрозрачной подложкой или просто цветом по вашему желанию.
А если прописать картинку без повторения и задать ей положение по краю поста она прилепится справа, слева, сверху или внизу. Последние два случая как раз используются для имитации разделителей.
Конечно можно и в бесплатнике исхитриться. Допустим прописав нужный код с картинкой через сервис настраиваемых кнопок. Но в этом случае вам придется жать на кнопку вручную в конце каждого поста. А если страниц в вашем дневнике много пере сохранять ранние посты вы просто замучаетесь.

Сам код очень простой. Даже не нужно прописывать ширину и высоты картинки.

Обратите внимание что вставлять нужно не весь адрес изображения из БИ, а начиная с /userdir и до конца.
Расшифровка:
каждый пост {(картинка) не повторять; позиция внизу; отступ снизу; отступ сверху}
Отступы нужны чтобы ваш разделитель вышел за сам пост и не перекрывал ссылки под постом.
Когда вы прописываете код таким образом возникает небольшой глюк, а именно двоится разделитель под эпиграфом.
Убирается это вот так:


Конечный код:


Ну и чтобы вам было на чем тренироваться.
РАЗДЕЛИТЕЛИ

Авторство не мое, я только подогнал под размер. Найдено в открытых источниках.

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

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

01:59 

Заказ Алекс Ешино

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

Вопрос: Понравилось?
1. Да 
22  (75.86%)
2. Нет 
7  (24.14%)
Всего: 29

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

01:18 

Заказ Ельф мечтатель

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

Вопрос: Понравилось?
1. Да 
30  (76.92%)
2. Нет 
9  (23.08%)
Всего: 39
Всего проголосовало: 39

@темы: по группам/фильмам/сериалам/играм, заказ, дизайн, Кареглазый Демон

13:17 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Очень радует новый пост на спирите.
А то я уже обдумывал как автоматизировать ужимание эпиграфов, которые больше 700 пикселей. Таких в сообществе большинство.
Теперь же если вы установили дизайн, а он скроллится, можете выбрать большие изображения сжимать до ширины ленты здесь.
А если вам, как и мне, милее растянутый по ширине, а не узкий дневник заходите сюда и ставьте галочку разрешить растягивать дневник по ширине.

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

00:03 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Меня так впечатлила реакция на простую кнопку «наверх» в сообществе За родной диван!, что я решил запилить полноценный туториал с основными возможными положениями этой самой кнопки. Мало ли, вдруг еще кого порадую) Опять же если вы подключили CSS спасая дайри, а зачем он вам не знаете, вот вам ответ.
Даже не вдаваясь в визуальные дебри сократите меню удалив лишнее и приведите дневник в порядок, как это описано здесь и здесь. И повесьте кнопку наверх, как вариант.
Возьмем для наглядости такой макет:

Картинка может быть абсолютно любой. Стрелка, указатель наверх или что то что подойдет по смыслу. Главное чтобы фон этой кнопки был прозрачным. Загружаете в свою БИ. И дальше в кодах строго между кавычек используете url своей картинки начиная с /usedir и до конца.
width это ширина картинки
height высота. Эти параметры прописываются индивидуально.
position: fixed !important; фиксирует кнопку на странице, чтобы она не уехала с лентой
display:block!important;line-height: 500px !important; overflow:hidden !important; помогает заменить изначальную текстовую ссылку на картинку. Кому интересны детали добро пожаловать на htmlbook.ru/
z-index: 3; это что то вроде слоев фотошопа. Чем больше цифра тем выше элемент. Лучше прописывать, чтобы кнопка точно была над лентой и записями и не перекрылась допустим меню.
#bottomNav {display: block;} просто смиритесь с тем что без этой строчки кнопка не видна)

Теперь по позициям. Если вам нужна кнопка в углу задаете ей нулевые отступы

1.

2.

3.

4.

Если же кнопка нужна вам прикрученной к краю ленты подход немного меняется. Отступы сверху и снизу прописываются также, а справа-слева в два этапа.
Сначала мы паркуем кнопку в центр благодаря left:50%;
Затем двигаем ее уже от середины. На 450 пикселей в нашем случае, то есть на половину ширины ленты.
margin-left: -450px; передвинет кнопку влево,
margin-left: 450px; соответственно вправо.

5.

6.

7.

8.

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

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

19:48 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
С легкой руки SoraNoir спешу вас обрадовать. Сообщество не собирается закрываться, несмотря ни на какие дайровские потрясения, а напротив готовится к обновлению. Лично я буду делать здесь оформления пока меня впускает форма авторизации) Также мы планируем улучшить навигацию, начать прислушиваться к аудитории и сменить дизайн.
Не секрет что многие пытаясь спасти дайрики подключили CSS сервис. Сейчас много обсуждается новшеств и в плане дизов также. Где то на спирите я лично видел предложение создать каталог CSS оформлений с возможностью скачивания за символическую плату. И чтобы дизайнеру шел процент. Мне как штучному мастеру такое не слишком выгодно. Я скорее просижу неделю, сделаю крутой диз и заработаю достаточную сумму, чем буду искусственно ограничивать функционал своих творений и ждать с моря погоды. Опять же мне никогда не удавалось создавать что либо для широких масс. Но нельзя также закрывать глаза на то что не все могут позволить себе оформления по такой цене, а облизываться на скрины чужих дизов наверняка удовольствие мазохистское). Однако есть еще один вариант. Я все также беру заказы на CSS в одни руки, но периодически запускаю голосовалку с предпочтительной темой для платника, выкладываю что либо более простое, но симпатичное и ставлю символический ценник. Кто перевел епонов получает код. А денежка идет на css сообщества и поднятие его в списке. Ну а чтобы вы не думали что все дизайнеры тут меркантильные донельзя как я, порадую вас еще и тем что скоро SoraNoir откроет тему для заказов на бесплатники и будет вас ими радовать, в чем я лично уверен)
Пожалуйста поделитесь своим мнением в комментариях и голосовании. Оно многовариантное.

Вопрос: Что вам хотелось бы видеть здесь?
1. Все и сразу;) 
28  (22.05%)
2. Хотя бы что то, я вас и так люблю) 
31  (24.41%)
3. Больше бесплатников. 
18  (14.17%)
4. Больше css 
18  (14.17%)
5. CSS, несильно сложных за умеренную плату 
21  (16.54%)
6. CSS, в одни руки по индивидуальному заказу 
11  (8.66%)
Всего: 127
Всего проголосовало: 66

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

18:06 

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


еще скрины


НАСТРОЙКИ

Вопрос: Понравилось?
1. Да 
63  (96.92%)
2. Нет 
2  (3.08%)
Всего: 65
Всего проголосовало: 65

@темы: природа, мрачное, морское, дизайн, голубое-сине-фиолетовое, Кареглазый Демон, CSS

13:36 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
01.11.2017 в 22:37
Пишет Min Young-nim:

Новая плашка
Т.к. на страницах каждого дневника появилась новая плашка, хочу помочь вам вписать её в ваши дизайны. Особенно тем, кто делал у меня заказы. Убедительная просьба, просто сдвиньте плашку в нужное место, подгоните её под общий стиль вашего дневника, но ни в коем случае не удаляйте. Дневникам эта плашка может спасти жизнь. Позже я, вероятнее всего, придумаю какое-то более красивое решение, но сейчас пусть будет такой код.
Некоторые свойства закомментированы, чтобы они заработали, нужно убрать /**/ у нужной вам строки.
Думаю, что ссылки внутри плашки перекрашивать не нужно, т.к. они призваны привлечь внимание. Не уменьшайте шрифт до совсем маленького, не делайте плашку незаметной. Ваша цель — сделать так, чтобы плашка не рвала вам страницу и не смещала какие-то важные элементы, но она должна быть на странице и должна оставаться заметной. В противном случае, может случиться так, что вам больше негде будет скрывать "назойливые" элементы дизайна, т.к. дайри просто перестанут существовать.



URL записи

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

главная