Was wäre eine coole und doch einfache Möglichkeit, ein "!" nur mit CSS?

Ich möchte ein cool aussehendes, aber einfaches Ausrufezeichen nur mit CSS erstellen. Hat jemand coole Ideen?

Sind Sie bereit, diesem bestimmten Ausrufezeichen eine Klasse zuzuweisen?
Ich stimme für das Schließen, da dies kein Thema in Bezug auf CSS ist und auch vollständig auf Meinungen basiert.

Antworten (4)

Sie könnten eine Schriftart finden, die ein sehr einzigartiges "!" und verwenden Sie den Font Squirrel @font-face-Generator und wählen Sie Experteneinstellungen mit benutzerdefinierten Untereinstellungen und fügen Sie nur das ! Zeichen für die Schriftart.

Fügen Sie die Schriftart als erste Schriftart zu Ihrem Stapel hinzu und sie wird nur für die !

Für dieses Beispiel habe ich Heartbreaker Regular als Schriftart gewählt und ein @font-face-Kit erstellt.

Geben Sie hier die Bildbeschreibung ein

Das Exemplar, das für alles außer dem ! auf Helvetica zurückfällt.

Geben Sie hier die Bildbeschreibung ein

Ich bin mir nicht ganz sicher, ob das das ist, wonach der OP gefragt hat.
@font-face ist CSS und gibt es eine Möglichkeit, einzelne Zeichen zu formatieren, ohne dem HTML zusätzliches Markup hinzuzufügen?
Ich bin mir sicher, dass es eine Möglichkeit gibt, bestimmte Zeichen zu markieren, aber das würde Skripte beinhalten. Es ist einfacher, HTML-Markup zu verwenden und einfach eine CSS-Klasse zuzuweisen.
Wie Chris sagt, kann dies mit CSS erfolgen.

Sie können ein einfaches Ausrufezeichen mit reinem CSS + HTML-Markup erstellen:

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

Das CSS der Spanne erledigt die Arbeit.

Es ist nicht das am besten aussehende Ausrufezeichen, aber Sie können mit der Eigenschaft border-radius, border-width und Farbverläufen von CSS3 als Hintergrund spielen, um ein viel besseres Aussehen zu erhalten. Kreativität ist die Grenze.

Ich mag den Font-Eichhörnchen-Vorschlag – sehr ordentlich! Dies funktioniert auch mit Cufon, mit dem einige Leute vielleicht besser vertraut sind.

Wenn Sie ein jQuery oder ein anderes Toolkit auf der Seite verwenden, können Sie die Ausrufezeichen suchen und durch etwas anderes ersetzen, z. B. eine Klasse darum wickeln. Dann können Sie für diese Klasse ein Cufon.now durchführen.

Von da an können Sie einige Animationen, Titel-Tags und verrückte Dinge einfügen – aber denken Sie daran, dass Ausrufezeichen im Allgemeinen am besten sparsam verwendet werden! Außer in den Büros der Exclamation Mark Liberation Front! (Das letzte habe ich mir ausgedacht! Aber du verstehst schon !?!?!!?)

Hatte nicht darüber nachgedacht, wie selten Ausrufezeichen tatsächlich verwendet werden. Der arme einsame Charakter muss befreit werden...

Google Fonts ist Ihre Antwort. Das einzige, was Sie tun müssen (neben dem Laden von Google-Schriftarten in Ihre HTML-Datei), ist, ihr einen Stil zu geben.

Außerdem ist es viel schneller als sifr, @font-face, cufon usw. und mit dem Font-Viewer können Sie verschiedene Schriftarten sehr schnell sehen.

Um ihm einen kleinen Vorteil zu verleihen, können Sie in CSS immer einen Schatten erstellen.

http://www.google.com/webfonts

Was wäre eine coole und doch einfache Möglichkeit, ein "!" nur mit CSS?
AntwortenHierDatenschutz-Bestimmungen1y, 0v