: What would be a cool yet simple way to style an "!" with just CSS? I want to create a cool looking yet simple exclamation mark with just CSS. Anyone have any cool ideas?

@Kimberly620

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.

Vote Up Vote Down

@Goswami567

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.
www.google.com/webfonts

Vote Up Vote Down

@Shakeerah625

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 !?!?!!?)

Vote Up Vote Down

@Marchetta832

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.



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

Vote Up Vote Down