Индивидуальное оформление записи через теги + css

[Chapt]

Большинство людей оформляя запись не подозревают, что с ней можно сделать. Обычно они вставляют картинку или картинки, делают разноцветный текст и разный его размер, в общем всё, что можно кнопочками в визуальном редакторе.
НО! Те кто хотя бы немного знаком с Html-тегами и правилами CSS могут делать изумительные вещи с постами и комментариями! Вот так! При этом подключать платный сервис CSS не надо!!!!
Скромным примером использования связки тегов и css является этот пост.

Преимуществом индивидуального оформления записи является то, что при просмотре в избранном человек будет видеть запись так, как оформили её вы, а не так, как у него дизайн настроен. Соответственно именно ваша запись будет всегда заметна, но злоупотреблять этим не стоит

ЧИТАЕМ КАК ЭТО СДЕЛАТЬ

В коде выглядит всё так:

<div style="z-indеx: 1000; background-image: repeating-linear-gradient(45deg,rgba(255,0,255,0.2),rgba(255,125,255,0.1) 200px, rgba(255,0,255,0.2) 400px); text-shadow: 2px 2px 2px #000000; color: #FFF; border-radius: 20px; padding: 10px; box-shadow: 10px 10px 10px rgba(0,0,0,0.25); border: solid 1px rgba(255,0,255,0.2)"><div style="z-indеx: 1000; background: rgba(0,0,0,0.5); text-shadow: 2px 2px 2px #000000; color: #FFF; border-radius: 10px; padding: 10px; box-shadow: 5px 5px 5px rgba(125,125,125,0.5); border: solid 1px rgba(0,155,155,0.2)"> 
текст записи или комментария
</div></div> 

результат:

текст записи или комментария

Как это работает:

Здесь всего 2 одинаковых html-тега <div> с прописанными параметрами стиля выглядит в теге это так: <div style=" тут через точку с запятой пишутся параметры стиля "> . В зависимости от того, какие параметры стиля будут указаны и будет зависеть оформление.

2 тега <div> нужны вот для чего: первый создаёт фон, в данном случае "гламурный" розовый, а второй более тёмный, ровный фон, чтобы было удобно читать текст. Я использовал в параметрах стиля не сплошную заливку а градиент:
background-image: repeating-linear-gradient(45deg,rgba(255,0,255,0.2),rgba(255,125,255,0.1) 200px, rgba(255,0,255,0.2) 400px);
Это само по себе сложное свойство с кучей параметров, можно настраивать очень сложные градиенты, углубляться в градиент не буду, если нужно будет можно сделать по этому отдельное разъяснение. Те же, кому нужно могут найти в интернете все хитрости этого дела. Цвет указывается тут в rgb+a (прозрачность) соответственно цвет может варьироваться от 0,0,0,0 (чёрный прозрачный) до 255,255,255,1 белый не прозрачный.

Далее текст имеет тень:
text-shadow: 2px 2px 2px #000000; Тоже останавливаться на этом не буду, кому нужно в интернете можно найти.

Цвет текста белый:
color: #FFF;

Закруглённые края:
border-radius: 20px;

Внутренний отступ:padding: 10px;

В принципе эти параметры можно взять из любого манула по CSS, в том числе и том, который есть здесь в справке на Diary.

Очень разочаровало, что нельзя поставить изображения в качестве фона записи или отдельных её элементов, т.к. при сохранении все url фильтруются. Интересно, если подключить платный сервис CSS то параметр фона в блоке записи будет тоже фильтроваться.

@темы: Оформление дневника, CSS, Теги оформления записи, Записи

Comments

[=Linna=]

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

[маленькаяпринцесса]

Очень разочаровало, что нельзя поставить изображения в качестве фона записи или отдельных её элементов,

простите, но я думаю что мелкого белого шрифта с тенью на темно-сером фоне вполне хватит для осознания ПЧами какой оригинал у них в ленте сидит )

[лисо-Жаба]

интересно, но жуть О_О без глаз осталась. Глазавыкалупывалка.
спасибо за подсказки)

[Дейдара Роджерс]

Очень разочаровало, что нельзя поставить изображения в качестве фона записи или отдельных её элементов, т.к. при сохранении все url фильтруются.

Очень даже можно. Изображения должны быть в БИ, вот и весь секрет.

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

У вас, наверное, включена опция "всегда читать в своих настройках" (или как-то так, я не пользовался, так что точного названия не знаю).

По сабжу - спасибо за код градиента, надо бы поковырять на досуге)

[Disco Very]

Очень разочаровало, что нельзя поставить изображения в качестве фона записи или отдельных её элементов

да что вы говорите. закачайте нужное изображение к себе в БИ, и будет вам щастье.

за остальные идеи - спасибо. будем посмотреть.

[смольник]

Очень разочаровало, что нельзя поставить изображения в качестве фона записи или отдельных её элементов

diary-support.diary.ru/p187156491.htm?from=0#63...

Как я рад, что в моей ленте мало кто знает как делать такие вот записи.

[la petite hirondelle]

*услышал про БИ, запищал от счастья и убежал делать рамку для записей*

[darrus]

А что нужно вписать, чтобы текст был определённой ширины, вне зависимости от размеров окна?

[Lomendeon]

Забавно, у меня в избранном совсем другой цвет всей записи - тёмно-фиолетовый...
Интересная тема, надо будет попробовать как-нибудь)

[la petite hirondelle]

darrus, это:

<div style="width: 200px;"></div>

Или это:

<div width="200px"></div>

[Chapt]

darrus, чтобы текст был по всей ширине и строго определённой ширины вам нужно в style указать параметр width:XXpx; где вместо XX нужная вам ширина в пикселях, так же можно указывать % от ширины.
<div align="justify" style="width:300px;"></div>

Lomendeon, это потому что я выбрал полупрозрачные цвета. Соответственно на светлом фоне розовый будет нежно-розовым, на тёмном фоне ближе к фиолетовому, в зависимости от цвета под ним. Это для того, чтобы оформление гармоничнее вписывалось в тот дизайн, куда вписывается.

[la petite hirondelle]

Chapt, товарищ Луи де Пон дю Лак, извините за нескромный вопрос, а css-оформление постов и комментариев - это у вас такая фишка? Вы вот везде-везде так пишите?..)

[Chapt]

БИ выход лишь временный т.к. "не резиновая(" Если пилить по три поста в день с картинками из неё, то она очень быстро кончается.

[la petite hirondelle]

БИ выход лишь временный т.к. "не резиновая("

Однако, с ее помощью можно склепать почти полноценный css-дизайн на бесплатном дневнике, оформляя только посты, а для менюшки пользуясь стандартными настройками.

[darrus]

Спасибо, получилось!

[a-s-k-a]

Большинство людей оформляя запись не подозревают, что с ней можно сделать.

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

[Chapt]

Зато глаза красивые, нет, только там, где мне не нравится дизайн
в этом сообществе например шрифт 12й и правильно подметили люди, что это "вырви глаз" получается.

a-s-k-a, по вопросу совместимости - если кто-то не обновляет вовремя свой браузер - это их проблемы. А на вкус и цвет под все мониторы и чтобы всем нравилось и никому глаз не кололо это надо себя в такие рамки загнать, в которых вообще не развернуться.

[Ташик]

Преимуществом индивидуального оформления записи является то, что при просмотре в избранном человек будет видеть запись так, как оформили её вы, а не так, как у него дизайн настроен.

неа))) если в настройках стоит игнорирование стилей автора, тогда в ленте вся запись будет самой обычной, как всё остальное)))

Chapt,

a-s-k-a, по вопросу совместимости - если кто-то не обновляет вовремя свой браузер - это их проблемы. А на вкус и цвет под все мониторы и чтобы всем нравилось и никому глаз не кололо это надо себя в такие рамки загнать, в которых вообще не развернуться.

Будучи CSSником никак не могу пройти мимо. Первое требование CSS вёрстки - кроссбраузерность. И даже под ие6 всё ещё иногда требуют делать. Я уже не говорю про мобильные версии, которые вообще другие (а с мобилок на дайрях дохренища народу сидит). Так что про "их проблемы" - это вы перегнули. Плюс, даааалеко не у всех хорошее зрение, что делает невозможным для них читать тот ужас, который вы клепаете. Весь прикол ленты избранного в том, чтобы видеть посты избранных в том виде, в котором удобно читающему, вы же навязываете своё оформление. Это как минимум некрасиво.

[irvitzer]

...Ну а для тех, кто не хочет видеть выкрутасы, подобные тому, что натворил топикстартер, в своей ленте избранного, на этой странице настроек есть пункт «Игнорировать оформление текста при просмотре избранного», который сбрасывает содержимое атрибутов style и настройки тега FONT во френдленте.

Впрочем, в преддверии грядущей Фандомной Битвы хочу предупредить: если в вышеуказанном пункте настройки у вас будет стоять «да», вам потребуется открывать по отдельности практически каждую запись с оформлением командных визиток и выкладок чтобы увидеть, что хочет вам показать команда — или читать эти записи не из френдленты, а со страницы основного сообщества ФБ.

[Тайя.]

Chapt, а разве градиент и круглые уголки достаточно без префиксов писать? Мне кажется, в каких-то браузерах не видно будет. Я со всеми префиксами делаю)

А зачем вам z-index? Разве он необходим в коде?

[Ezhikov]

Ужас ужас ужас.
А анимация работает?
А на кой черт z-index?

[Тайя.]

Ezhikov, вы б аккуратнее кодили, а то ваш ужас-ужас-ужас почему-то заполз на мой пост, никарашо так.

Чтобы этот коммент был не так пуст

Тайя, которая душит романтиков,
подозреваю, он туда заполз нарочно, чтобы показать, зачем нужен z-index

[Тайя.]

ninelya, да ну?

[Ezhikov]

Тайя, которая душит романтиков, ну, как бы, так и должно быть, если весь пост "повернуть" на 30 градусов

[Тайя.]

Ezhikov, так отступами надо пользоваться.

[Ezhikov]

Тайя, которая душит романтиков, скорее, не надо пользоваться тем, что портит вид. Или делает текст нечитаемым.
пример: prntscr.com/1gtf7l
Мне видится только расплывчатая хрень. Была бы у тени прозрачность хотя бы .5 - было бы куда лучше.
Отсутпы же понятие спорное. Зачем делать ОГРОМНЫЙ комментарий? Скроллить побольше да подальше? А если с телефона? А если я поддавшись на ненужный здесь z-index еще и position: fixed припаяю?

ЗЫ: position:fixed автоматом переправляется на positionS: fixed

вы б аккуратнее кодили, а то ваш ужас-ужас-ужас почему-то заполз на мой пост

а ваш заполз на мой, так что квиты )) prntscr.com/1gtffa

[Ezhikov]

ЗЫ: position:fixed автоматом переправляется на positionS: fixed

И еще, z-index: превращается в z-indеx. Разницы нет? А она есть. ))