Записи с темой: 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. Да 
32  (100%)
2. Нет 
0  (0%)
Всего: 32

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

22:19 

Заказ Mr.Gold

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

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

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

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

19:42 

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

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


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

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

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

17:16 

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

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

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

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


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


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

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

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

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

01:16 

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

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

Вопрос: Нравится дизайн?
1. Да 
47  (83.93%)
2. Нет 
2  (3.57%)
3. Надел 
7  (12.5%)
Всего: 56
Всего проголосовало: 53

@темы: дизайн, Огненный Бес, Новый год, Зима, 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. Да 
27  (100%)
2. Нет 
0  (0%)
Всего: 27
Всего проголосовало: 27

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

03:16 

Заказ Mr.Gold

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

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


еще скрины


НАСТРОЙКИ

Вопрос: Понравилось?
1. Да 
59  (96.72%)
2. Нет 
2  (3.28%)
Всего: 61
Всего проголосовало: 61

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

21:52 

Для Layre

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

СМОТРЕТЬ

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

05:14 

Заказ KontRayen

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

Вопрос: Понравилось?
1. Да 
14  (77.78%)
2. Нет 
4  (22.22%)
Всего: 18
Всего проголосовало: 18

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

04:45 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
А давайте я с вами чем нибудь полезным поделюсь... для разнообразия) Все скрины кликабельны.
Мне лично этот лайфхак пригодился при оформлении постов для ФБ. Но при сборке CSS это также полезная штука.
Иногда бывает что верх и низ вашего дизайна на полупрозрачной подложке, то есть экстратоп и экстработтом в png. А середина в jpg. Фотошопный макет красив и монолитен, а при заливании в БИ оттенки разнятся. Причем бывает так что в фотошопе у вас одно, а на дайрах другое. Вне зависимости от формата сохранения. (Дайри магия не иначе:-D)
Все нижеизложенное выстрадано проверено на себе долгим и упоротым упорным трудом)
1. Не ленитесь. Сборка макета кропотливый и нудный процесс, но результат того стоит.
2. Всегда используйте направляющие для разграничения деталей оформления. И соответственно разрезайте на части только по ним.
3. Не делайте вот так:

То есть не кадрируйте ваш макет и не сохраняйте его куски в png.
4. Как надо.
Выделяем нужную нам область. И жмем Скопировать совмещенные данные
Далее создаем новый документ. Файл - Создать И в выпавшем окошке обязательно выбираем этот цветовой профиль.
Нажимаем Ctrl+V. И дальше работаем с этим изображением. Удаляем слой с белым фоном.
В отступление от темы скажу что раньше многие жаловались на тяжесть моих оформлений из за большого количества и размера изображений. Я естественно искал выход из положения. И нашел.

Изображение - Коррекция - Постеризация В открывшемся окошке сдвигаем ползунок где то до значения 150. Визуально ничего не меняется, зато картинка весит значительно меньше.
Дальше сохраняем файл особым образом.

Обязательно выбираем прозрачность и png 24 для полупрозрачных частей и jpg для непрозрачных. Внизу слева можно увидеть итоговый вес изображения.

Проделываем все по инструкции с остальными деталями и наслаждаемся плавными переходами и легкостью оформления.

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

@темы: CSS, как это сделано

22:22 

Заказ Mr.Gold

Ко мне на "вы", шепотом и с придыханием...
Оформление с фиксированным меню и фоном дневника.

Меню в открытом виде:

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

20:17 

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

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


КОД:


КАРТИНКИ:
У ССЫЛОК s015.radikal.ru/i332/1708/4f/b23e8b0fb941.png
НАВЕРХ s013.radikal.ru/i324/1708/e6/bde0ee0484e3.png
КУРСОР s018.radikal.ru/i514/1708/a9/75cf5d74fe22.png
НИЗ s010.radikal.ru/i311/1708/3b/b7bb16dd8696.png
СЕРЕДИНА s019.radikal.ru/i642/1708/53/7b82aa2dbfc0.png
ВЕРХ s019.radikal.ru/i636/1708/27/8e052c15200f.png
КРЫША s11.radikal.ru/i183/1708/cb/a3c2464e237d.png
ФОН s019.radikal.ru/i635/1708/91/cb6ecdb92b14.jpg
МЕНЮ s015.radikal.ru/i332/1708/06/73a3cad9b00e.png

НАСТРОЙКИ:
дизайн блочный
панель слева
гарнитура Georgia заголовок 13, текст 16
цвет текста заголовок, записи, ссылки #241405



Вопрос: Понравилось?
1. Да 
18  (90%)
2. Нет 
2  (10%)
Всего: 20
Всего проголосовало: 19

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

21:12 

Заказ Mr.Gold

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

CSS Минимализм

Огненный Бес
Скромник с чертиками в глазах
Несколько однотипных CSS дизайнов в разных цветовых вариантах в общее пользование
В работающем виде можно посмотреть здесь



Страница комментариев

Установить автоматически вариант 1

НАСТРОЙКИ

Другие варианты
Все скрины кликабельны
Настройки для установки в ручную по запросу







Вопрос: Нравится?
1. Вариант 1 
3  (3.3%)
2. Вариант 2 
13  (14.29%)
3. Вариант 3 
8  (8.79%)
4. Вариант 4 
10  (10.99%)
5. Вариант 5 
8  (8.79%)
6. Вариант 6 
10  (10.99%)
7. Вариант 7 
5  (5.49%)
8. Все! 
34  (37.36%)
Всего: 91
Всего проголосовало: 62

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

22:28 

Заказ для...

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

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

21:19 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Эпиграф очень своеобразная часть дизайна, живущая своей жизнью, поэтому в его оформлении есть свои нюансы.
Допустим все картинки уменьшены под ширину ленты. Картинка использованная в эпиграфе подчинится общему правилу. А если она допустим должна быть больше и в ней присутствуют ссылки то все поедет.
Чтобы этого не случилось ширину картинкам эпиграфа лучше прописывать отдельно, соответственно под размер конкретной картинки.
#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:

Результат:

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

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

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

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

главная