¿Alguna idea sobre cómo usar CSS para emular un sello desordenado?

Question

estoy interesado en los medios de dar un lapso que se vea algo como uno de ellos:

Éstos son los trucos que va a utilizar:

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

Es para un proyecto personal por lo que supone la mayor cantidad de mod El soporte de CSS está bien. ¿Tal vez las imágenes de borde podrían ayudar? Me gustaría evitar empalmes de imágenes por todos lados; si realmente se reduce a eso, me saltearé el borde y confiaré en una fuente para el estilo.

Tengo curiosidad de cómo los gurús de CSS de aquí se acercarían a esto.

ACTUALIZACIÓN

ahora hay una propiedad CSS para esto, mask-image. Más here.

Answer 1

No hay una solución CSS específica para el aspecto grunge. Tendrá que depender de un tipo de letra para eso, o una imagen (como algún tipo de patrón de manchas 'sucio' que coincida con el color de fondo en la parte superior del tipo).

El único otro CSS que podría aplicarse es utilizar un conjunto de colores RGBA con quizás 80 o 90% de opacidad para permitir un poco de cualquier patrón de fondo que pueda filtrar como lo haría con un sello de tinta real.

Me encanta hacer todo lo que puedo con CSS, pero para ese aspecto específico, me quedaría con una imagen. Las imágenes aún tienen un propósito. ; o)

Answer 2

Puede usar una fuente para la fuente, pero igual necesitará una imagen para los bordes. Sugiero que te ahorres la molestia de la depuración cruzada del navegador y el uso de un .png transparente si es posible.

Answer 3

Puede obtener el efecto de letra angustiado importando (http://www.font-face.com/) una fuente similar a http://www.fontspace.com/category/stamp.

No estoy seguro de si puede hacer el borde con CSS simple. Puede agregar una superposición transparente angustiada sobre su sello que lo hará quedar bien, y no requerirá la fuente personalizada.

CSS se puede utilizar para crear el borde de doble sello con borde doble CSS + contorno. Necesita hacer que el borde exterior sea blanco, y que los colores internos y de contorno sean los mismos. El contorno debe ser más grueso que el borde.

Answer 4

éste parece prometedor ahora: http://codepen.io/c3f3l0/pen/Fwzoc

uso de fuentes 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'> 

Answer 5

Puede utilizar CSS para aplicar un efecto grunge en el texto. En cuanto a soporte, todo lo que puedo decir es que lo he probado en las últimas versiones de Chrome, Firefox, IE, Opera, Safari, así como varios navegadores móviles y diferentes sistemas operativos, y funciona en todos los que he probado en.

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> 

Here's a fiddle

llegué esto desde http://www.jankoatwarpspeed.com/add-grunge-effect-to-text-using-simple-css/