Записи с темой: css (список заголовков)
16:29 

Darakna_theme#4

Darakna
Кто живёт прошлым, тот обретет боль.
Не слишком навороченный центрированный дизайн. Увеличение размера БИ не обязательно.

Комментарии:
Аватарки:



Вопрос: Нравится дизайн?
1. Да 
19  (90.48%)
2. Очень 
2  (9.52%)
Всего: 21

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

18:45 

Darakna_theme#3

Darakna
Кто живёт прошлым, тот обретет боль.
Центрированный дизайн в стиле Локи



Вопрос: Нравится дизайн?
1. Да 
31  (60.78%)
2. Нет 
1  (1.96%)
3. Очень 
19  (37.25%)
Всего: 51

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

19:46 

Цветочный теплый дизайн

Kai S.H. Moro
Ранимый эстет
Мой первый дизайн для платного аккаунта в свободное пользование. Довольно простой, но для меня, как новичка в этом, весьма значимое событие.
И я ничего не смог бы сделать без помощи и поддержки Кареглазого Демона. Именно благодаря ему и случилось это знакомство с кодами дайровских css - дизайнов.
Этот человек мне подробно разжевал про каждый селектор, терпеливо сносил мои "не хочу менять", и "хочу оставить так", а после также терпеливо просматривал код после моего "ну куда вот это уползло-то! Я же не туда его ставил". Таких профессионалов еще поискать, и даже среди найденных Кареглазый Демон будет особенным. Спасибо за неоценимую помощь, и новые возможности Кареглазый Демон.
Дизайн с множеством фоновых картинок, поэтому взявшие его, внимательно смотрите название встраиваемых в код картинок. Также хочу отметить, что название дневника прописано в фотошопе, и если кто-то отважится его взять, то напишите мне, я сделаю эту картинку для вас с названием вашего дневника.
Ширина ленты подстраивается под ширину экрана.



Вопрос: Нравится?
1. Да 
23  (88.46%)
2. Нет 
1  (3.85%)
3. Себе поставлю 
2  (7.69%)
Всего: 26

@темы: цветы, песочно-бежевое, первый диз, нежное, дизайн, Весна, SoraNoir, CSS

14:53 

Заказ Kai Noir

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

Заказ Mr.Gold

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

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

21:53 

Заказ для Izmen@

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


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

17:48 

Заказ для Лехтенстаарн

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


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

23:14 

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



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

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

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

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

23:34 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Эпиграф очень своеобразная часть дизайна, живущая своей жизнью, поэтому в его оформлении есть свои нюансы.
Допустим все картинки уменьшены под ширину ленты. Картинка использованная в эпиграфе подчинится общему правилу. А если она допустим должна быть больше и в ней присутствуют ссылки то все поедет.
Чтобы этого не случилось ширину картинкам эпиграфа лучше прописывать отдельно, соответственно под размер конкретной картинки.
#epigraph .paragraph img {max-width: 750px;max-height: auto;}
На эпиграф также распространяются правила обводки, полу прозрачности, тени и прочих изысков из общей ленты. Убираются они отдельной строкой.
#epigraph .paragraph img { border: none!important; opacity : 1.0 !important; box-shadow:none!important;}
Кстати подобные манипуляции лучше проводить и со смайликами. (Здесь прозрачность уменьшена)
#shsmile, #atTagBox, .smile { border: none!important; opacity : 0.4 !important; box-shadow:none!important;}
Может показаться что с эпиграфом одни проблемы, но это не так. Первая закрепленная запись дает уникальную возможность прописывать ссылки, которые в структуре дайров не предусмотрены, визуализировать их картинками и закреплять в любом месте. Единственный минус в том, что все это отображается только на главной странице дневника (как и сам эпиграф). Однако это благодатная почва для смелых экспериментов.
Реализуется при помощи двух несложных строчек кода, одна из которых прописывается в настройках, там где "Эпиграф, фото, список ПЧ", а вторая добавляется в CSS код оформления.
Допустим вам хочется растащить по углам оформления кнопки соцсетей. Если использовать для этих целей картинку с полупрозрачной подложкой и прописывать ссылки координатами она перекроет меню и ленту записей, к тому же не подстроится под экран. Как быть?
1. Вставляем в эпиграф новый id

Присмотритесь к подчеркнутому

2. Теперь новому id прописываем свойства так, как если бы он был стандартным пунктом дайровского меню:

Например:
Эпиграф, фото, список ПЧ:

Настройки CSS:

В результате получаем:

Можно пойти дальше и совместить эти знания с еще одной идеей. Она не моя, подробно описана здесь, как и множество других, за что авторице процветания, счастья и всяческих благ.
Опишу создание подобия твиттера в дневнике, для чего процитирую пост из вышеупомянутого дневника:
читать дальше
Думаю суть понятна. В моем случае пост с твиттер статусами выглядит так:


Симпатично, но хочется эффектный бэкграунд. И тут встает вопрос как его прописывать? Если через дополнительные блоки картинка останется висеть на всех остальных страницах, что не есть хорошо. И выйти из положения мне как раз помогли дополнительный id и манипуляции с эпиграфом:
Эпиграф, фото, список ПЧ:

Настройки CSS:

Результат:

Картинка исчезает вместе с постом твиттера со всех страниц кроме главной.
Помимо всего прочего все эти манипуляции с дополнительными ссылками никак не влияют на текстовое содержимое эпиграфа, то есть он у вас останется где ему и положено, в начале ленты записей.
запись создана: 04.11.2016 в 21:19

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

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

21:55 

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

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

seya-rhiannon-atarem.dreamwidth.org/

Насколько мне удалось его скопировать можете оценить на видео и в дневнике заказчицы.

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

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

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

@темы: CSS, Кареглазый Демон, возможности 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, урок

22:19 

Заказ Mr.Gold

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

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

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

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

19:42 

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

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


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

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

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

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

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

17:16 

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

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

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

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


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


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

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

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

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

01:16 

Новогодний CSS в общее пользование

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

Вопрос: Нравится дизайн?
1. Да 
49  (84.48%)
2. Нет 
2  (3.45%)
3. Надел 
7  (12.07%)
Всего: 58
Всего проголосовало: 55

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

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

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

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

главная