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

понедельник, 15 июля 2013

11:51

Индивидуальное оформление записи через теги + 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, Теги оформления записи, Записи