Григорий Любовских (apraxis) wrote,
Григорий Любовских
apraxis

Category:

css в сообщениях для лиру и дайра

22:20 17.08.2013
css в сообщениях для лиру и дайра

 <div align="right"><b>15.07.2013</b> в 11:51</div>Пишет [J]Chapt[/J]:

 
Большинство людей оформляя запись не подозревают, что с ней можно сделать. Обычно они вставляют картинку или картинки, делают разноцветный текст и разный его размер, в общем всё, что можно кнопочками в визуальном редакторе.
НО! Те кто хотя бы немного знаком с 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 то параметр фона в блоке записи будет тоже фильтроваться.



</div></span><small><a href="http://diary-tips.diary.ru/p189949252.htm&quot; target=_blank>URL записи</a></small>


read more at Apraxis

Tags: памятки
Subscribe

  • Post a new comment

    Error

    default userpic

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments