21:19 

Introspecta
15.07.2013 в 11:51
Пишет Chapt:

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

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



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


результат:

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


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

Здесь всего 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 то параметр фона в блоке записи будет тоже фильтроваться.





URL записи

URL
   

Introspecta

главная