Эффекты CSS при оформлении сообщения.

как оформить участок сообщения с помощью CSS
Здравствуйте, мои дорогие друзья, читатели и гости блога. Опять продолжаю свои игры с CSS. Давайте посмотрим, как с помощью них, мы можем при желании оформить определённый участок сообщения. Самое интересное, что вы сами, внеся небольшие изменения, сможете всё сделать на свой вкус. Заверяю,  что нам не придётся заходить во вкладку шаблон.
В качестве основы возьмём фигуру трапеция. Вот как это может выглядеть.

У Танюши дел не мало-
У Танюши много дел:
 Утром брату помогала,
— Он с утра конфеты ел.


В этом случае  используем вот такой код

<style>.trapeze {
  width: 70%;
  margin: 0 auto;
  border: 2px solid blue ;
  -webkit-transform: perspective(100px) rotateX(30deg);
  transform: perspective(100px) rotateX(30deg);
}
</style>


На своё усмотрение можете поменять ширину и цвет рамки- значение  border: 2px solid blue
А сейчас, кое- что более кардинально поменяем и дополним. В результате получим совершенно другой эффект.

Вот такое решение.


Что болтунья Лида, мол,
Это Вовка выдумал.
 А болтать-то мне когда?
Мне болтать-то некогда!
 Драмкружок, кружок по фото,
Хоркружок - мне петь охота,
За кружок по рисованью
Тоже все голосовали.

Это код его


<style>.trapeze1 {
  width: 50%;
  margin: 0 auto;
  border: 2px solid blue;
  -webkit-transform: perspective(800px) rotateY(45deg);
  transform: perspective(800px) rotateY(45deg);background: silver ; box-shadow: 5px 5px 3px 1px burlywood;
}
</style>


Получилось, что если внимательно посмотрите на оба кода поменяли значения deg. Оно поворачивает элемент соответственно вокруг оси. Во втором случае добавили немного тени к блоку. Здесь можно поменять в строке background: silver ; основной цвет.
box-shadow: 5px 5px 3px 1px- размеры и цвет тени.
В этой шпаргалке мы уже делали тень для блоков.
Можно добавить  вот такой элемент- border-radius: 5px 5px 5px 5px; и углы  блока будут слегка закруглёнными.

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

Для первого варианта

<div class="trapeze">здесь текст который хотим видеть</div>

И соответственно для второго

<div class="trapeze1">здесь текст который хотим видеть</div>

Не думаю, что имеет смысл этим пользоваться часто. Ну, а если кому-то и захочется таким вариантом пользоваться постоянно, то, конечно, лучше установить выбранный код в шаблон блога перед строкой ]]></b:skin>. Только в этом случае нужно убрать теги <style> и </style> в коде.

Вот всё, чем я сегодня хотела с вами поделиться. А вообще про эти коды есть замечательный учебник http://htmlbook.ru. 


Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :

0 коммент.:

Отправить комментарий

Пользовательский поиск