Des idées sur la façon d'utiliser CSS pour émuler un timbre désordonné?

Je suis intéressé par les moyens de rendre une portée qui à ressembler à quelque chose comme un de ces:Des idées sur la façon d'utiliser CSS pour émuler un timbre désordonné?

some random images of stamps

Voici les trucs que je prévois sur l'utilisation:

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

C'est pour un projet personnel donc assumant le plus mod Le support de ern CSS est bon. Peut-être que les images de frontière pourraient aider? Je voudrais éviter l'épissage de l'image partout - si cela se résume à cela, je vais juste sauter la frontière tous ensemble et compter sur une police pour le look.

Je suis juste curieux de savoir comment les gourous CSS ici approcheraient cela.

MISE À JOUR

Il y a maintenant une propriété CSS pour cela, mask-image. Plus here.

Source

2011-06-02 Anonymous

Pour aller un peu trop loin ...? – BoltClock

Peut-être, je laisse ouverte la possibilité que ce sera trop. En outre, je ne prévois pas d'utiliser de telles couleurs criardes. Mais le fait est que le projet sur lequel je travaille est conçu pour émuler un flux de travail «papier» que les utilisateurs connaissent déjà et où les «timbres» ont une signification sémantique. Si je peux l'imiter, cela aidera les utilisateurs. –

+1 bonne question – andyb

Il n'y a pas de solution css spécifique pour le look grunge. Vous devrez vous appuyer sur une police de caractère pour cela, ou une image (comme une sorte de motif de saloperie "grungy" qui correspond à la couleur de l'arrière-plan au-dessus du type). Le seul autre CSS qui pourrait être applicable est d'utiliser un jeu de couleurs RGBA à 80 ou 90% d'opacité pour permettre un peu de n'importe quel motif d'arrière-plan que vous pourriez utiliser comme avec un tampon d'encre réelle. J'aime faire tout ce que je peux avec CSS, mais pour ce look spécifique, je collerais avec une image. Les images servent toujours un but. ; o)

Source

2011-06-02 05:58:37

Oh, "grunge" - c'est le mot dont je ne me souvenais pas quand je faisais des recherches! La recherche de "texte grunge CSS" est arrivée: http://www.jankoatwarpspeed.com/post/2008/08/09/Add-grunge-effect-to-text-using-simple-CSS.aspx, ce qui est utile commencer ... –

Oui, cette technique est essentiellement l'option «image sur le type». Pas une solution CSS pure mais toujours utile. –

En fait, vous pouvez appliquer un effet grunge au texte en utilisant CSS. C'est assez simple aussi: http://www.jankoatwarpspeed.com/add-grunge-effect-to-text-using-simple-css/ –

Vous pouvez utiliser une police pour la police, mais vous aurez toujours besoin d'une image pour les bordures. Je suggère de vous épargner les tracas du débogage de cross browser et en utilisant un .png transparent si possible.

Source

2011-06-02 06:02:24 Babiker

Vous pouvez obtenir l'effet de police en détresse en important (http://www.font-face.com/) une police similaire à http://www.fontspace.com/category/stamp.

Je ne suis pas sûr si vous pouvez faire la frontière avec CSS simple. Vous pouvez ajouter un overlay transparent en détresse sur votre tampon, ce qui le rendra bien et ne nécessitera pas la police personnalisée. CSS peut être utilisé pour créer la bordure de double tampon avec bordure double CSS + contour. Vous devez faire en sorte que la couleur de la bordure externe soit blanche et les couleurs interne et de contour soient les mêmes. Le contour devrait être plus épais que la bordure.

Source

2011-06-02 06:12:48 Emil

celui-ci semble prometteur maintenant: http://codepen.io/c3f3l0/pen/Fwzoc

utilisation des polices 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'>

Source

2014-10-07 20:48:13 patrick

Salut Patrick - vous avez le début d'une réponse ... si vous pouvez fournir un peu plus de détails sur ce que le PO peut faire avec les polices de google (plutôt que de simplement pointer sur le lien), alors il va compter comme un "vraie" réponse à nos fins :) –

Vous pouvez utiliser les CSS pour appliquer un effet grunge sur le texte. En ce qui concerne le support tout ce que je peux dire est que je l'ai testé dans les derniers Chrome, Firefox, IE, Opera, Safari ainsi que divers navigateurs mobiles et différents systèmes d'exploitation et cela fonctionne dans tous ceux que j'ai testés sur.

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

Je suis de ce http://www.jankoatwarpspeed.com/add-grunge-effect-to-text-using-simple-css/

Source

2016-01-25 15:35:45

Des idées sur la façon d'utiliser CSS pour émuler un timbre désordonné?

Répondre

Questions connexes