О как!

[Чханрёль]

15.07.2013 в 11:51

Пишет  Chapt:

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

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

@темы: Срочно в номер, Серокопия

Comments

[Леди*Ночь]

Чханрёль, ага, я тоже в это сразу вцепилась надо будет надосуге поиграться)))

[Чханрёль]

Леди*Ночь, вот именно)) все потыкать, все изучить ^^

[Ю Ынбёль]

нууу..это если только совсем все скучно буит))))))

[Asako@Asu]

первое желание - понестись и сделать запись с применением полученных знаний)))
но потом становится лееень)))

[Чханрёль]

Ю Ынбёль, ну каждому свое)))
Asako@Asu, аналогично Х)) да и времени копаться сейчас нет - отчеты квартальные вторую неделю фигачу(((

[Ю Ынбёль]

Чханрёль,

ну каждому свое

а что каждому свое?)) сама Асако ответила что тоже лень))) а еще выпендриваешься?)

[Чханрёль]

Ю Ынбёль, молчи, диванный человек! Ты даже при наличии времени не почешешься Х))) а я б, если б дома сидела, поковырялась в этом)

[Asako@Asu]

Ю Ынбёль, это мы ленимся, а Чханя (надеюсь простит мне мою фамильярность) человек любознательный...попробует пару раз!
Чханрёль,

а я б, если б дома сидела, поковырялась в этом)

забей на квартальные отчеты, строчи записи в прикольном оформлении)))

[Чханрёль]

Asako@Asu, Чханя (вот ведь, уже второй человек сокращает Х))))) человек любознательный - это да))) освоила бесшовники, гифки и клипмейкерство Х)))

[Леди*Ночь]

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

освоила бесшовники
Чханрёль, а вот об этом я тебя расспрошу поподробнее, когда у тебя будет время, если ты не против.))

[Asako@Asu]

Чханрёль, а какое сокращение хочешь? тут вариантов на первый взгляд не очень много...может Ханя?

освоила бесшовники, гифки и клипмейкерство Х)))

а аватарки умеешь делать?

[Чханрёль]

Леди*Ночь, спрашивай, конечно, без проблем отвечу) свой фон я сама делала ^^
Asako@Asu, да не, меня вполне устраивает Чханя Х)))

а аватарки умеешь делать?

отож Х))) свои сама себе делаю)) могу и гифные сделать, и с надписями)))

[Леди*Ночь]

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

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

[Чханрёль]

Леди*Ночь, я либо в гимпе, либо в фотошопе делаю)) проще подредактировать в ФШ, а потом в Гимп зафигачить) но можно и просто в ФШ, только долго это) Можно фон сделать в гимпе, а потом в ФШ на него наложить основную картинку по центру и размыть немного.

[Леди*Ночь]

Можно фон сделать в гимпе, а потом в ФШ на него наложить основную картинку по центру и размыть немного.
О! вот так можно будет попробовать, спасибо))

[Чханрёль]

Леди*Ночь, да не за что) я так коллажи в основном делаю)

[Леди*Ночь]

Чханрёль, красиво)))
а я редко мучаю ФШ, поэтому много чего не знаю и не умею. так только, кое-что базовое

[Чханрёль]

Леди*Ночь, не, я ковыряю из любопытства ^^

[Asako@Asu]

Чханрёль,

отож Х))) свои сама себе делаю)) могу и гифные сделать, и с надписями)))

как-нибудь при наличии у тебя свободного времени попрошу несколько штучек из своих рисунков?)

[Леди*Ночь]

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

[Чханрёль]

Asako@Asu, ваще нивапрос))) скидывай в умыл, а я как смогу - кину тебе готовое))
Леди*Ночь, мою лень достаточно часто побеждает возмущение типа: "Как так - этот чел может, а я нет??? Что за фигня?! Я ваще все лучше могу сделать!!!" Ну и я как-то поучаствовала в фандомной битве, так что пришлось научиться всему Х)))

[Леди*Ночь]

мою лень достаточно часто побеждает возмущение типа

Чханрёль, весомый аргумент, не поспоришь

[Чханрёль]

Леди*Ночь, ага, для меня, пожалуй, единственный действительно весомый Х))