Записи с темой: кареглазый демон (список заголовков)
23:23 

Обьявление.

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

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

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, заказ, дизайн

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

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

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

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

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

03:16 

Заказ Mr.Gold

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

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


еще скрины


НАСТРОЙКИ

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

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

10:24 

Изумрудный Демон
Ко мне на "ВЫ", шепотом и с придыханием...
В порядке исключения репост

01.11.2017 в 01:38
Пишет Katherine Shep.:

АТТЕНШН! КАТАЛОГ ПОЛЬЗОВАТЕЛЕЙ ДАЙРИ!
Посмотрев на все эти пляски и побегав на волосах в сборах драгоценных контактов в Избранном, я пришла к выводу, что хорошо бы иметь каталог, в который можно будет внести свой ник и адрес дневника и хотя бы парочку контактов с других ресурсов, чтоб нам всем взаимно не потеряться.

Более, того, каталог нужен ещё и потому, что на других ресурсах мы можем быть под другими никами, и найти нас там будет невозможно. А когда Дайри рухнет, что-то делать будет уже поздно.

Посему я создала систему, которая может решить эту проблему (ладно, Гугл там где-то рядом постоял). Скорее всего, со временем я разделю каталог на несколько частей, чтобы избежать подвисания таблицы/ваших компьютеров и телефонов от объёма данных. И да поможет моему компьютеру... что-нибудь :lol:

СУТЬ:


1. Оставляем свои ник/адрес дневника и контакты здесь:



2. Если нам нужно кого-то найти, идём сюда и ищем по нику/адресу дневника, как в самом обычном Экселе:


Нет, я не ФСБ и мне эти ваши данные даром не нужны. Скорее всего, я ещё пожалею, что в это ввязалась. Но в любом случае, хотелось бы хоть что-то спасти, потому что в то, что Дайри выплывет в этот раз, я, к сожалению, не верю.

ПРОСЬБА МАКСИМАЛЬНОГО РЕПОСТА!


P.S: Поле для электронной почты не оставляю сознательно - хоть это и, по моему мнению, самый долговечный способ связи, не буду давать возможность спам-ботам использовать ваши электронные адреса.

P.P.S: Наполнение каталога будет расти в геометрической прогрессии, и если вдруг опрос не будет давать вам возможности отвечать - значит, я временно его закрыла для разделения массива данных.

URL записи

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

21:56 

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

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

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

главная