¿Cuál sería una forma genial pero simple de diseñar un "!" solo con CSS?

Quiero crear un signo de exclamación atractivo pero simple con solo CSS. ¿Alguien tiene alguna idea genial?

¿Está dispuesto a aplicar una clase a ese signo de exclamación en particular?
Voy a votar para cerrar porque esto está fuera de tema relacionado con CSS y también se basa completamente en opiniones.

Respuestas (4)

Podrías encontrar una fuente que tenga un "!" y use el generador Font Squirrel @font-face y elija configuraciones expertas con subconfiguraciones personalizadas e incluya solo el ! carácter para la fuente.

Agregue la fuente a su pila como la primera fuente y solo se procesará para !

Para este ejemplo, elegí Heartbreaker Regular como fuente y creé un kit @font-face.

ingrese la descripción de la imagen aquí

El espécimen que está recurriendo a Helvetica para todo menos el !.

ingrese la descripción de la imagen aquí

No estoy muy seguro de que esto sea lo que pidió el OP.
@font-face es CSS y ¿hay alguna manera de diseñar caracteres individuales sin agregar marcas adicionales al HTML?
Estoy seguro de que hay una forma de marcar ciertos caracteres, pero eso implicaría scripts. Es más fácil usar marcado HTML y simplemente asignar una clase CSS.
Como dice Chris, esto se puede hacer con CSS.

Puede crear un signo de exclamación simple usando CSS puro + marcado HTML:

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;
}

El CSS del tramo hará el trabajo.

No es el signo de exclamación que mejor se ve, pero puedes jugar con la propiedad border-radius, border-width y degradados de CSS3 como fondos para obtener una apariencia mucho mejor. La creatividad es el límite.

Me gusta la sugerencia de fuente-ardilla, ¡muy ordenada! Esto también funcionará con Cufon, con el que algunas personas pueden estar más familiarizadas.

Si está utilizando un jQuery u otro conjunto de herramientas en la página, puede buscar y reemplazar los signos de exclamación con otra cosa, por ejemplo, envolverlos en una clase. Entonces puedes hacer un Cufon.now en esa clase.

A partir de ahí, puede agregar algunas animaciones, etiquetas de título, cualquier cosa extravagante; sin embargo, tenga en cuenta que los signos de exclamación generalmente se usan con moderación. ¡Excepto en las oficinas del Frente de Liberación del Signo de Exclamación! (¡¡Hice eso último! Pero entiendes la idea!?!?!!?)

No pensé en cuán rara vez se usan los signos de exclamación. El pobre personaje solitario necesita ser liberado...

Las fuentes de Google son tu respuesta. Lo único que debe hacer (además de cargar las fuentes de Google en su archivo HTML) es darle un estilo.

Además de eso, es mucho más rápido que sifr, @font-face, cufon, etc. Además, con el visor de fuentes puedes ver diferentes fuentes muy rápido.

Para darle un poco de ventaja, siempre puedes hacer una sombra en CSS.

http://www.google.com/webfonts

¿Cuál sería una forma genial pero simple de diseñar un "!" solo con CSS?
RespuestasAquíPolítica de privacidad1y, 0v