Как сделать текст в стиле грандж используя немного CSS

13 августа 2008, Написано в CSS, HTML, Дизайн

В этом небольшом уроке будет рассказано как сделать текст в стиле грандж, используя CSS и одно изображение.

Шаг 1: Создание прозрачного PNG изображения

Для создания можно использовать Gimp или Photoshop и набор бесплатных кистей:

Экспериментируйте с разными кистями и цветом, но не забывайте, что выбранный цвет должен быть схож с цветом фона. Изображение которое мы будет использовать выглядит так:

Изображение для эффекта

Поэтому мы будем создавать эффект для текста на черном фоне.

Шаг 2: CSS

Теперь добавим нужный эффект к элементу <h1>. Для этого необходимо добавить в содержимое заголовка, после текста, элемент <span>.

<h1>Какой то заголовок в стиле грандж<span></span></h1>

Теперь CSS. Элемент <span> имеет абсолютное позиционирование, а <h1> относительное. Созданное ранее изображение, является фоном элемента <span>, что и придает желаемый стиль тексту.

h1 {
    position:relative;
    color:#aeef33;
    font-family:Georgia
}
h1 span{
    position:absolute;
    display:block;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:url('grunge.png')
}

Результат перед вами.

Какой-то заголовок в стиле грандж

Оригинал: Add grunge effect to text using simple CSS

11 комментариев к статье «Как сделать текст в стиле грандж используя немного CSS»:

  1. ИМЯ (обязательно):
    13 Авг 2008 в 15:36

    в ие смешно смотрится

    Ответить
  2. Alex:
    13 Авг 2008 в 15:41

    Спасибо, поправил. Не стал лишний раз писать, думаю все и так знают как корректно отобразить PNG в IE

    Ответить
  3. Николай Громов (nicothin):
    13 Авг 2008 в 19:19

    повторение довольно боянистого метода «градиент на заголовке» )))

    Ответить
  4. SEO writer:
    14 Авг 2008 в 11:33

    интересное решение, но нафига самому париться, если уже куча готовых текстов в стиле гранж есть.. я даже выкладывал их!

    Ответить
  5. mxck:
    14 Авг 2008 в 13:43

    А если например требуется этот текс часто менять? Этот вариант более подходит для этого…

    Ответить
  6. Levis:
    15 Авг 2008 в 20:56

    Довольно несложно, даже для новичка. Хороший пример :)

    Ответить
  7. Вадик:
    16 Авг 2008 в 19:25

    Да, для новичков в самый раз1 Я сразу разобрался!

    Ответить
  8. Интересное для веб-мастеров (22.08.2008) » Как создать сайт бесплатно? Как сделать сайт? Журнал для веб-мастеров и блогеров от школы создания с:
    22 Авг 2008 в 11:07

    [...] Как сделать текст в стиле грандж используя немного CSS В этом небольшом уроке будет рассказано как сделать текст в стиле грандж, используя CSS и одно изображение… [...]

    Ответить
  9. Юморной тренер:
    24 Авг 2008 в 09:06

    Да спасибо большое!!! Класс!!! У меня сразу все вышло, как ни старнно)

    Ответить
  10. wallp:
    1 Сен 2008 в 19:19

    Спасибо, давно искал как так сделать теперь знаю !.

    Ответить
  11. ArtShok:
    3 Окт 2008 в 23:05

    Прикольно) Напоминает градиентный текст по методике, один-в-один. Но тоже не факт, что usefull. А за пример спасибо, че-то все лень было проверить.

    Ответить

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