Что было бы классным, но простым способом стилизовать "!" только с CSS?

Я хочу создать классный, но простой восклицательный знак только с помощью CSS. У кого-нибудь есть крутые идеи?

вы хотите применить класс к этому конкретному восклицательному знаку?
Я голосую за закрытие, потому что это не относится к CSS и полностью основано на мнении.

Ответы (4)

Вы можете найти шрифт с очень уникальным знаком "!" и используйте генератор Font Squirrel @font-face и выберите экспертные настройки с пользовательскими поднастройками и включите только ! символ для шрифта.

Добавьте шрифт в свой стек в качестве первого шрифта, и он будет отображаться только для !

Для этого примера я выбрал Heartbreaker Regular в качестве шрифта и создал набор @font-face.

введите описание изображения здесь

Образец, возвращающийся к Helvetica для всего, кроме !.

введите описание изображения здесь

Не совсем уверен, что это то, о чем просил ОП.
@font-face — это CSS, и есть ли способ стилизовать отдельные символы без добавления дополнительной разметки в HTML?
Я уверен, что есть способ разметить определенные символы, но для этого потребуются скрипты. Проще использовать HTML-разметку и просто назначить класс CSS.
Как утверждает Крис, это можно сделать с помощью CSS.

Вы можете создать простой восклицательный знак, используя чистую разметку CSS + 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;
}

CSS диапазона сделает всю работу.

Это не самый красивый восклицательный знак, но вы можете поиграть со свойством CSS3 border-radius, border-width и градиентами в качестве фона, чтобы получить гораздо лучший вид. Творчество – это предел.

Мне нравится предложение шрифта-белки - очень аккуратно! Это также будет работать с Cufon, с которым некоторые люди могут быть более знакомы.

Если вы используете jQuery или другой инструментарий на странице, вы можете найти и заменить восклицательные знаки чем-то другим, например, обернуть вокруг них класс. Затем вы можете провести Cufon.now в этом классе.

Оттуда вы можете добавить анимацию, теги заголовков, что угодно, но имейте в виду, что восклицательные знаки, как правило, лучше использовать экономно! Кроме офисов Фронта Освобождения Восклицательного Знака! (Я придумал последний фрагмент! Но вы поняли !?!?!!?)

Не думал о том, как редко на самом деле используются восклицательные знаки. Бедный одинокий персонаж нуждается в освобождении...

Шрифты Google - ваш ответ. Единственное, что вам нужно сделать (кроме загрузки шрифтов Google в ваш HTML-файл), — это придать ему стиль.

Кроме того, это намного быстрее, чем sifr, @font-face, cufon и т. д., плюс с помощью средства просмотра шрифтов вы можете очень быстро увидеть разные шрифты.

Чтобы придать ему небольшое преимущество, вы всегда можете создать тень в CSS.

http://www.google.com/веб-шрифты

Что было бы классным, но простым способом стилизовать "!" только с CSS?
СпросиСетьПолитика конфиденциальности1y, 0v