BBcode - Текст с тенью (shadow)

Ббкоды для красивого оформления и работы с текстом
Аватара пользователя

Автор темы
Fox
Администратор
Сообщения: 248
Зарегистрирован: 16 июн 2013, 11:10
Репутация: 4
Пол: Мужской
Поблагодарили: 7 раз
Контактная информация:

BBcode - Текст с тенью (shadow)

#1 Сообщение Fox » 20 июн 2013, 22:50

Использование BBCode

Код: Выделить всё

[shadow]{TEXT}[/shadow]


Замена HTML

Код: Выделить всё

<span id="text">{TEXT}</span>

      <style type="text/css">

    #text{
       font-size: 3em; /* optional. just to increase the font size. */
       display: block;
       line-height: 1em;
       color: #666; /* shadow color */
       background-color: transparent;
       white-space: nowrap; /* wrapping breaks the effect */
    }

    #text:before,
    #text:after{
       content: "{TEXT}"; /* generated text */
       display: block;
    }

    #text:before{
       margin-bottom: -1.05em;
       margin-left: 0.1ex;
       color: #ccc; /* shadow color */
       background-color: transparent;
    }

    #text:after{
       margin-top: -1.05em;
       margin-left: -0.1ex;
       color: #fff; /* text color */
       background-color: transparent;
    </style>


Подсказка

Код: Выделить всё

Текст с тенью: [shadow]Ваш текст тут [/shadow]


Настройки
Показывать на странице ответа - на усмотрение админа


Пример работы:

Код: Выделить всё

[shadow]Модификации, BBcode, Стили - phpbb3.[/shadow]

Модификации, BBcode, Стили - phpbb3.

Аватара пользователя

Автор темы
Fox
Администратор
Сообщения: 248
Зарегистрирован: 16 июн 2013, 11:10
Репутация: 4
Пол: Мужской
Поблагодарили: 7 раз
Контактная информация:

Re: BBcode - Текст с тенью (shadow)

#2 Сообщение Fox » 20 июн 2013, 22:56

Если вы намерены использовать этот ббкод несколько раз на странице, то сделайте лучше так:

Замена html

Код: Выделить всё

    <span class="shadow_text">{TEXT}</span>
<style type="text/css">
            .shadow_text:before,
            .shadow_text:after {
               content: "{TEXT}"; /* generated text */
               }
</style>

В тему стиля добавить:

Код: Выделить всё

.shadow_text {
               font-size: 3em; /* optional. just to increase the font size. */
               display: block;
               line-height: 1em;
               color: #666; /* shadow color */
               background-color: transparent;
               white-space: nowrap; /* wrapping breaks the effect */
            }

            .shadow_text:before {
display: block;
               margin-bottom: -1.05em;
               margin-left: 0.1ex;
               color: #ccc; /* shadow color */
               background-color: transparent;
            }

            .shadow_text:after {
display: block;
               margin-top: -1.05em;
               margin-left: -0.1ex;
               color: #fff; /* text color */
               background-color: transparent;
    }

Автор: Alice

  • Поделитесь ссылкой

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «BBcode оформление текста»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость

cron