Любые идеи о том, как использовать CSS для эмуляции грязного штампа? - PullRequest
Новая
       31

Любые идеи о том, как использовать CSS для эмуляции грязного штампа?

5 голосов
/ 02 июня 2011

Мне интересны способы визуализации диапазона, который будет выглядеть примерно так:

some random images of stamps

Вот приемы, которые я планирую использовать:

  • @font-face
  • -{moz/webkit/o}-transform:rotate

Это для личного проекта, так что при условии, что самая современная поддержка CSS подойдет. Может быть, бордюрные изображения могут помочь? Я бы хотел избежать слияния изображений повсюду - если это действительно сводится к тому, что я просто пропущу границу вместе и положу шрифт для внешнего вида.

Мне просто любопытно, как бы здесь подошли гуру CSS.

UPDATE

Для этого теперь есть свойство CSS, mask-image. Подробнее здесь .

Ответы [ 5 ]

2 голосов
/ 02 июня 2011

Вы можете использовать шрифт для шрифта, но вам все равно понадобится изображение для границ. Я бы посоветовал избавить себя от кросс-браузерной отладки и по возможности использовать прозрачный .png.

1 голос
/ 08 октября 2014

это выглядит многообещающе сейчас: http://codepen.io/c3f3l0/pen/Fwzoc

использовать шрифты Goole 

<link href='http://fonts.googleapis.com/css?family=Black+Ops+One|Luckiest+Guy|Sonsie+One|Shojumaru&effect=3d|3d-float|anaglyph|brick-sign|canvas-print|
        crackle|decaying|destruction|distressed|distressed-wood|emboss|fire|fire-animation|fragile|grass|ice|mitosis|neon|outline|putting-green|
        scuffed-steel|shadow-multiple|splintered|static|stonewash|vintage|wallpaper' 
        rel='stylesheet' type='text/css'>
1 голос
/ 02 июня 2011

Специального решения CSS для стиля гранж не существует.Для этого вам придется полагаться на гарнитуру или изображение (например, какой-то «шероховатый» шаблон с пятнами, который соответствует цвету фона поверх шрифта).Применимым является использование цвета RGBA с непрозрачностью 80 или 90%, чтобы немного фонового рисунка, который вы могли бы использовать, просачивались, как в случае с настоящей печатью чернил.

Мне нравится делать как можно больше с CSS, но для этого конкретного вида я бы придерживался изображения.Изображения все еще служат цели.; О)

0 голосов
/ 25 января 2016

Вы можете использовать CSS, чтобы применить эффект гранж к тексту.Что касается поддержки, то все, что я могу сказать, это то, что я тестировал ее в последних версиях Chrome, Firefox, IE, Opera, Safari, а также в различных мобильных браузерах и различных ОС, и она работает во всех тех, на которых я тестировал..

CSS 

h1 {
    position:relative;
    color:#fff;
    font-family: Georgia;
    font-size: 50px;
}

h1 span{
    position:absolute;
    display:block;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:url('your image url goes here');
}

HTML 

<h1>YOUR TITLE GOES HERE<span>&nbsp;</span></h1>

Вот скрипка

Я получилэто от http://www.jankoatwarpspeed.com/add-grunge-effect-to-text-using-simple-css/

0 голосов
/ 02 июня 2011

Вы можете добиться эффекта проблемного шрифта, импортировав (http://www.font -face.com /) шрифт, подобный http://www.fontspace.com/category/stamp.

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

CSS можно использовать для создания двойной рамки с двойным контуром CSS + контур. Вы должны сделать цвет внешней границы белым, а цвет внутренней и контурной - одинаковым. Контур должен быть толще границы.

...