Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I want to create a cool looking yet simple exclamation mark with just CSS. Anyone have any cool ideas?

share|improve this question
    
you're willing to apply a class to that particular exclamation point? –  jackJoe May 8 '11 at 9:43
    
I'm voting to close because this is off-topic relating to CSS and entirely opinion based as well. –  Ryan Jan 6 at 20:08

4 Answers 4

You could find a font that has a very unique "!" and use the Font Squirrel @font-face generator and choose expert settings with custom subsettings and only include the ! character for the font.

Add the font to your stack as the first font and it will only render for the !

For this example I chose Heartbreaker Regular as the font and created an @font-face kit.

enter image description here

The specimen which is falling back to Helvetica for everything except the !.

enter image description here

share|improve this answer
    
Not quite sure this is what the OP asked for. –  Johannes May 8 '11 at 8:59
3  
@font-face is CSS and is there a way to style single characters without adding extra markup to the HTML? –  Chris_O May 8 '11 at 9:17
    
I'm sure there's way to markup certain characters, but that would involve scripts. It's easier to use HTML markup and just assign a CSS class. –  Johannes May 8 '11 at 22:44
1  
As chris states, this can be done with CSS. –  DA01 May 9 '11 at 5:04

You can create a simple exclamation mark using pure CSS + HTML markup:

HTML:

<p>This is a simple paragraph  <span class="exc_mark"><span></span></span></p>

CSS:

.exc_mark {
position: relative;
top: -5px;
left: 3px;
width: 10px;
font-size: 8px;
border: 3px solid #888;
background-color: #888;
border-radius: 3px;
}

.exc_mark span {
position: absolute;
top: 15px;
left: -3px;
border: 3px solid #888;
border-radius: 3px;
height: 1px;
width: 1px;
background-color: #888;
}

The span's CSS will do the work.

It's not the best looking exclamation mark, but you can play with CSS3's border-radius property, border-width and gradients as backgrounds to get a much better look. Creativity is the limit.

share|improve this answer

I like the font-squirrel suggestion - very neat! This will also work using Cufon, which some people may be more familiar with.

If you are using a jQuery or other toolkit on the page you can search and replace the exclamation marks with something else, e.g. wrap a class around them. Then you can do a Cufon.now on that class.

From there on you can put in some animations, title tags, whacky any-thing - however - bear in mind that exclamation marks are generally best used sparingly! Except in the offices of the Exclamation Mark Liberation Front! (I made that last bit up! But you get the idea !?!?!!?)

share|improve this answer
    
Didn't think about how seldom Exclamation Marks are actually used. The poor lonely character needs to be liberated... –  Chris_O May 9 '11 at 22:15

Google fonts is your answer. The only thing you need to do (besides loading google fonts in your HTML file) is to give it a style.

Besides that, it is way faster then sifr, @font-face, cufon etc. plus with the font-viewer you can see different fonts really quick.

To give it a little edge you can always a a shadow in CSS.

http://www.google.com/webfonts

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.