Добрый день, дорогие посетители!
При заполнении страниц сайта контентом часто возникает желание как-то украсить текст, выделить его, чтобы разнообразить подачу материала и сделать акцент на основных моментах статьи. Сделать это можно различными способами. Например, выделить отдельные фрагменты текста курсивом или сделать его наклонным.
Для реализации данного эффекта существует несколько способов. Я предлагаю сегодня рассмотреть, как реализовать наклонный текст CSS. Наклонный текст может быть нескольких видов. Уж так получается, что каждый вкладывает в это слово свое значение. Мы сегодня попробуем рассмотреть каждый из вариантов.
Выделение курсивом с помощью CSS
Первый, и наиболее распространенный способ сделать наклонный текст CSS заключается в использовании стиля font-style со значением italic. Данное свойство придает тексту в заданном блоке курсивное начертание. В результате получается такой вид:
Код HTML для текста:
CSS-свойства:
Наклонный текст CSS
Реализовать это можно так же, при помощи стиля font-style, но в этом случае нужно использовать значение oblique. Выглядеть это будет так:
Код HTML:
CSS-свойства:
В результате получается очень похоже на курсив, но если присмотреться, то можно увидеть некоторые отличия в начертании.
Наклон фрагмента текста CSS
Возможно, вам когда-нибудь понадобится сделать наклон фрагмента текста CSS под определенным углом по отношению к странице. Для реализации данного эффекта нужно использовать CSS-свойство transform с поворотом элемента на указанный угол rotate.
Для поворота элемента по часовой стрелке указываем положительное значение угла поворота. Для поворота против часовой стрелки – отрицательное значение.
Выглядеть это будет так:
HTML-код фрагмента:
CSS-свойства:
Произвольный наклон по горизонтали
В случае использования свойства font-style со значением oblique мы можем сделать наклонный текст CSS с определённым углом наклона вправо. Что же делать, если мы хотим изменить угол или направление наклона?
А в этом нам поможет то же свойство transform, но в этом случае нам нужно использовать значение skew, которое позволяет сделать горизонтальный наклон.
В результате наклона на 15 градусов фрагмент будет выглядеть вот так:
HTML-фрагмент кода:
CSS-свойства:
Как видите, при желании используя возможности CSS можно придать достаточно интересный вид выделяемого текста, а если немного пофантазировать, и использовать эти приемы совместно, то можно добиться еще более впечатляющих вариантов.
А на этом у меня на сегодня все. Если у вас возникнут вопросы, вы всегда можете задать их в комментариях. До встречи в следующих статьях!
С уважением Юлия Гусарь
impuls-web.ru
Курсив или наклонный шрифт?
Отображение одного и того же шрифта в курсивном начертании может различаться.
На картинке — три блока текста, набранных одним и тем же шрифтом Playfair Display. Первый имеет обычное прямое начертание, а второй и третий — курсивное. Они открыты в одном и том же браузере Google Chrome, но выглядят совершенно по-разному.
Дело в том, что некоторые шрифты имеют собственные курсивные наборы символов. Если браузер не имеет доступа к этому набору, но встречает текст, который должен быть отображен как курсивный, он попытается наклонить его своими силами.
Во втором блоке — как раз такой, обработанный браузером, вариант, а в третьем — оригинальный курсивный вариант шрифта Playfair Display, обладающий уникальным начертанием, больше похожий на рукописный. Браузер же просто наклоняет каждый символ текста на определенный угол, имитируя курсив.
Разбираясь, как сделать курсив в CSS или HTML, важно помнить, что в случае специфических шрифтов необходимо обеспечить браузеру доступ к их курсивным наборам. В ряде случаев результат работы браузерных алгоритмов наклона может быть неудовлетворительным.
HTML-курсив
Для курсивного отображения текста в HTML существует два специальных тега: i
(от слова italic) и em. Начертание текстового фрагмента, заключенного в любой из этих дескрипторов, будет одинаковым.
Разница заключается в логическом выделении. Тег em указывает на особую значимость фрагмента. Это важно для поисковых роботов и скринридеров, которые будут выделять указанный текст с помощью интонации.
Свойство font-style
В CSS курсивом управляет инструкция font-style. Она может принимать одно из трех базовых значений:
- normal — шрифт обычного начертания;
- italic — курсивное начертание;
- oblique — наклонное начертание.
На настоящий момент большинство современных браузеров обрабатывают значения oblique и italic одинаково, однако изначально предполагалось, что первое — это результат работы специальных браузеров алгоритмов, наклоняющих каждый символ вправо.
Если искомый шрифт браузером не обнаружен, то italic будет выглядеть точно так же, как и oblique.
В отличие от тега em, css-свойство font-style не придает выделенному фрагменту особой важности, оно скорее соответствует дескриптору i.
Примеры
Курсивным начертанием часто выделяются цитаты. Попробуем придать изречению Оскара Уайльда красивый вид.
.quote { font-style: italic; border-left: 5px solid purple; padding-left: 20px; }
Кроме декоративной рамки справа и отступов, для блока quote определено правило font-style со значением italic.
С его помощью устанавливается курсив в CSS.
fb.ru
Наклонный шрифт
Для начала нужно сказать, что под наклонным текстом можно подразумевать разное. Например, если задать блоку такое свойство:
font-style: oblique;
То шрифт получит наклонное начертание. Если это то, что вам нужно, то используйте такой метод. Продемонстрирую его более подробно. Например, напишем любой текст и заключим его в span.
<span class="text">Наклонный текст</span>
А это стили для него:
.text{ font-size: 30px; font-style: oblique; }
И вот как это выглядит:
Видно, что текст получил небольшой наклон влево.
Поворот текстового фрагмента в общем
Иногда нужно изменить не само начертание, а повернуть сам элемент с текстом. Для этого используем такой же текстовый фрагмент, как и в предыдущем случае, только стилевой класс другой.
.rotate{ transform: rotate(12deg); position: absolute; top: 500; left: 300; font-size: 30px; }
Этот код в стилях подразумевает, что где-то на странице есть span с классом rotate. Тут мы задаем ему определенные стили – поворачиваем текст на 12 градусов. Можно задавать и отрицательное значение – тогда поворот произойдет против часовой стрелки. С помощью абсолютного позиционирования я вынес элемент примерно на центр страницы, просто чтобы показать вам, как это выглядит.
Я рекомендую поворачивать строчные элементы (такие, как span), потому что поворот блочного намного более непредсказуем (ведь по умолчанию он имеет размер на всю ширину). Например, если у вас есть текст в блоке, то оберните этот текст дополнительно в строчный элемент, а не поворачивайте весь блок целиком.
Если же вы все-таки решили повернуть блочный элемент, то лучше задайте для него абсолютное позиционирование, чтобы он выпал из потока и его не воспринимали другие.
Наклонное начертание – другая возможность
С поворотом, я надеюсь, вам понятно. А как можно дополнительно сделать наклон тексту, без помощи font-style: oblique
? Вернее, что делать, если вам нужен больший наклон, чем дает это свойство?
Выход есть и он заключается в том, чтобы записать для текстового фрагмента еще одно из правил трансформации – skew. Давайте полностью уберем поворот и запишем по-новому:
transform: skew(-45deg);
Текст получит реально сильный наклон влево, посмотрите, что с ним произошло:
А если записать положительное значение, то наклон будет уже вправо.
В общем, с помощью такой трансформации вы получаете больше возможностей для управления текстом. Возможно, это вам пригодится, а на сегодня у меня все.
dolinacoda.ru
Базовые свойства CSS-шрифтов
- Содержание:
- 1. Семейство шрифтов: свойство font-family
- 2. Насыщенность шрифта: свойство font-weight
- 3. Ширина шрифта: свойство font-stretch
- 4. Начертание шрифта: свойство font-style
- 5. Размер шрифта: свойство font-size
- 6. Относительный размер шрифта: свойство font-size-adjust
- 7. Сокращенная запись свойств шрифта: свойство font
- 8. Управление синтезом шрифтов: свойство font-synthesis
1. Семейство шрифтов: свойство font-family
Свойство font-family используется для выбора начертания шрифта. Поскольку невозможно предсказать, установлен тот или иной шрифт на компьютере посетителя вашего сайта, рекомендуется прописывать все возможные варианты однотипных шрифтов. В таком случае браузер будет проверять их наличие, последовательно перебирая предложенные варианты.
Если в названии шрифта имеются пробелы или символы (например, #, $, %), то оно заключается в кавычки. Это делается для того, чтобы браузер мог понять, где начинается и заканчивается название шрифта.
Свойство наследуется.
| font-family | |
|---|---|
| Значения: | |
| family-name | Название (имя) семейства шрифтов, например, Times, Courier, Arial. Рекомендуется указывать вместе с базовым семейством. |
| generic-family | Базовое семейство. CSS определяет пять базовых семейств шрифтов: Шрифты с засечками — Serif (Times New Roman, Times, Garamond, Georgia) Рубленые шрифты — Sans-serif (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers) Моноширинные шрифты — Monospace (Courier, Courier New, Andele Mono) Рукописные шрифты — Cursive (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery) Аллегорические шрифты (Western, Woodblock, Klingon) |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-family: "Times New Roman", Georgia, Serif; font-family: serif; font-family: sans-serif; font-family: monospace; font-family: cursive; font-family: fantasy; font-family: system-ui; font-family: inherit; font-family: initial;2. Насыщенность шрифта: свойство font-weight
Свойство font-weight задаёт насыщенность шрифта.
Свойство наследуется.
| font-weight | |
|---|---|
| Значения: | |
| normal | Значение по умолчанию, устанавливает нормальную насыщенность шрифта. Эквивалентно значению насыщенности, равной 400. |
| bold | Делает шрифт текста полужирным. Эквивалентно значению насыщенности, равной 700. |
| bolder | Насыщенность шрифта будет больше, чем у предка. |
| lighter | Насыщенность шрифта будет меньше, чем у предка. |
| 100, 200, 300, 400, 500, 600, 700, 800, 900 | Значение 100 соответствует самому легкому варианту начертания шрифта, а 900 — самому плотному. При этом, эти числа не определяют конкретной плотности, т.е. 100, 200, 300 и 400 могут соответствовать одному и тому же варианту слабой насыщенности начертания шрифта; 500 и 600 — средней насыщенности, а 700, 800 и 900 могут выводить одинаковое очень насыщенное начертание. Распределение плотности так же зависит от количества уровней насыщенности, определенных в конкретном семействе шрифтов. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-weight: normal; font-weight: bold; font-weight: lighter; font-weight: bolder; font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900; font-weight: inherit; font-weight: initial;
3. Ширина шрифта: свойство font-stretch
Свойство font-stretch выбирает нормальное, сжатое или расширенное начертание символа из семейства шрифтов.
Свойство наследуется.
Абсолютные значения ключевых слов имеют следующий порядок, от самого узкого до самого широкого:
| font-stretch | |
|---|---|
| Значения: | |
| ultra-condensed | Указывает на наиболее сжатый шрифт. |
| extra-condensed | Указывает на второй по сжатости шрифт. |
| condensed | Указывает на сжатый шрифт. |
| semi-condensed | Указывает на немного сжатый шрифт. |
| normal | Значение по умолчанию. |
| semi-expanded | Слегка расширенный шрифт. |
| expanded | Расширенный шрифт. |
| extra-expanded | Второй по расширенности шрифт. |
| ultra-expanded | Максимально расширенный шрифт. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; font-stretch: semi-condensed; font-stretch: normal; font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded; font-stretch: inherit; font-stretch: initial;Когда не существует глифа для заданной ширины, значения normal или condensed отображаются для более узкого начертания символа, в противном случае отображается более широкое начертание. И наоборот, расширенные значения используют широкое начертание, в противном случае — узкое начертание. На рисунке ниже показано, как девять параметров свойства влияют на выбор шрифта для семейства шрифтов, содержащего различные ширины, серый цвет указывает ширину, для которой не существует начертания, поэтому подставляется другая ширина:
4. Начертание шрифта: свойство font-style
Свойство font-style позволяет выбрать стиль начертания для шрифта. При этом разница между курсивом и наклонным начертанием заключается в том, что курсив вносит небольшие изменения в структуру каждого символа, в то время как наклонное начертание представляет собой наклонную версию прямого шрифта.
Свойство наследуется.
| font-style | |
|---|---|
| Значения: | |
| normal | Значение по умолчанию, устанавливает для текста обычное начертание шрифта. |
| italic | Выделяет текст курсивом. |
| oblique | Устанавливает наклонное начертание шрифта. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-style: normal; font-style: italic; font-style: oblique; font-style: inherit; font-style: initial;
5. Размер шрифта: свойство font-size
Свойство font-size указывает желаемую высоту глифов из шрифта.
Свойство наследуется.
| font-size | |
|---|---|
| Значения: | |
| absolute-size | xx-small, x-small, small, medium, large, x-large, xx-large. В качестве стандартного размера принимается medium. В CSS1 предложенный коэффициент масштабирования между соседними индексами составлял 1.5, что для пользователя оказалось слишком большим. В CSS2 предложенный коэффициент масштабирования для экрана компьютера между смежными индексами составлял 1.2, что все еще создавало проблемы для небольших размеров. Новый коэффициент масштабирования варьируется между каждым индексом, чтобы обеспечить лучшую читаемость. |
| relative-size | smaller, larger. Относительные размеры обусловливают изменение размера шрифта элемента относительно родителя. При этом размер шрифта может выйти за рамки размеров, предполагаемых для xx-small и xx-large. |
| длина | Размер шрифта устанавливается с помощью положительных значений единиц длины, например, px, em, как целых, так и дробных. |
| % | Относительное значение, вычисляется на основании любого размера, унаследованного от родительского элемента. Обеспечивает более точную настройку вычисляемого размера шрифта. Задание размеров шрифта с помощью em эквивалентно процентному значению. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: smaller; font-size: larger; font-size: 14px; font-size: 0.8em; font-size: 80%; font-size: inherit; font-size: initial;| Значения absolute-size | |||||||
|---|---|---|---|---|---|---|---|
xx-small |
x-small |
small |
medium |
large |
x-large |
xx-large |
|
| Коэффициент масштабирования | |||||||
| 3/5 | 3/4 | 8/9 | 1 | 6/5 | 3/2 | 2/1 | 3/1 |
| HTML заголовки | |||||||
| h6 | h5 | h4 | h3 | h2 | h1 | ||
| HTML размер шрифта | |||||||
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | |
6. Относительный размер шрифта: свойство font-size-adjust
Для любого заданного размера шрифта явный размер и четкость текста варьируется в зависимости от шрифта. Для таких шрифтов, как латиница или кириллица, которые различают прописные и строчные буквы, относительная высота строчных букв по сравнению с их прописными аналогами является определяющим фактором удобочитаемости. Это обычно называют значением аспекта. Точно определенный, он равен x-height шрифта, разделенной на размер шрифта.
В ситуациях, когда для шрифта указано несколько семейств шрифтов, резервные шрифты могут не использовать то же значение аспекта, что и желаемое семейство шрифтов, и, следовательно, будут казаться менее четкими.
Свойство font-size-adjust — способ сохранить читабельность текста при использовании резервных шрифтов. Это достигается путем настройки размера шрифта таким образом, чтобы x-height была одинаковой независимо от используемого шрифта.
Свойство наследуется.
| font-size-adjust | |
|---|---|
| Значения: | |
| none | Не сохраняет x-height шрифта. |
| число | Задает значение аспекта, используемое в приведенных ниже расчетах для расчета скорректированного размера шрифта: c = (a / a ') s где: s = значение размера шрифта a = значение аспекта, указанное в свойстве font-size-adjust a ' = значение аспекта фактического шрифта c = скорректированный размер шрифта для использования Отрицательные значения недействительны. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис:
font-size-adjust: none; font-size-adjust: 0.7; font-size-adjust: inherit; font-size-adjust: initial;Как отображается текст в каждом из этих сравниваемых шрифтов, показано ниже, столбцы показывают текст, отображаемый в Verdana, Futura и Times. Одно и то же значение размера шрифта используется для ячеек в каждой строке, и для отображения различий по x-height включены красные линии. В верхней половине каждая строка отображается в том же значении размера шрифта. То же самое верно и для нижней половины, но в этой половине также устанавливается свойство font-size-adjust, чтобы фактический размер шрифта регулировался таким образом, чтобы сохранить x-height для каждой строки. Обратите внимание, что небольшой текст остается относительно разборчивым в каждой строке в нижней половине.
7. Сокращенная запись свойств шрифта: свойство font
Свойство font за исключением описанного ниже, является сокращенным свойством для установки font-style, font-variant, font-weight, font-stretch, font-size/line-height, font-family. Также могут быть включены значения для свойства font-variant, которые поддерживаются CSS 2.1 — normal или small-caps.
Все подсвойства свойства font сначала сбрасываются на свои начальные значения, включая перечисленные выше, плюс font-size-adjust, font-kerning, все подсвойства font-variant и настройки шрифтов, за исключением font-synthesis. Затем этим свойствам присваиваются те значения, которые указаны в свойстве font. Для свойства font-size-adjust невозможно установить значение, отличное от его начального значения, поэтому следует использовать вместо этого индивидуальное свойство. Если явное значение какого-либо свойства не нужно, то оно опускается.
Свойство наследуется.
Синтаксис
font: 12pt/14pt sans-serif; font: 80% sans-serif; font: x-large/110% "new century schoolbook", serif; font: bold italic large Palatino, serif; font: normal small-caps 120%/120% fantasy; font: condensed oblique 12pt "Helvetica Neue", serif;Следующие значения относятся к системным шрифтам:
caption — шрифт, используемый для элементов управления с субтитрами (например, кнопок, раскрывающихся списков и т.д.).
icon — шрифт, используемый для обозначения значков.
menu — шрифт, используемый в меню (например, раскрывающиеся меню и списки меню).
message-box — шрифт, используемый в диалоговых окнах.
small-caption — шрифт, используемый для маркировки подписи элементов управления.
status-bar — шрифт, используемый в строке состояния окна.
Системные шрифты могут быть установлены только целиком; то есть семейство шрифтов, размер, вес, стиль и т.д. задаются одновременно. Эти значения затем могут быть изменены индивидуально, если это необходимо. Ключевые слова, используемые для системных шрифтов, перечисленных выше, обрабатываются как ключевые слова только в том случае, если они находятся в начальной позиции, в других позициях эта же строка обрабатывается как часть имени семейства шрифтов. Системные шрифты могут быть указаны только с этим свойством, но не с самим font-family.
font: menu; /* используются настройки шрифта для системных меню */ font: large menu; /* используется семейство шрифтов под названием "menu" */8. Управление синтезом шрифтов: свойство font-synthesis
Свойство font-synthesis определяет, разрешено ли пользовательским агентам (браузерам) синтезировать полужирное или наклонное начертание шрифтов, когда они отсутствуют в семействе шрифтов. Если weight не указан, пользовательские агенты не должны синтезировать полужирное начертание, а если style не указан, пользовательские агенты не должны синтезировать курсив.
Свойство наследуется.
| font-synthesis | |
|---|---|
| Значения: | |
| none | Запрещает синтез начертаний. |
| weight и/или style | По умолчанию свойство принимает значение font-synthesis: weight style;. Если указано только weight, это говорит браузеру, что жирный шрифт может быть синтезирован при необходимости. Если только style — синтезируется только курсив. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-synthesis: none; font-synthesis: weight; font-synthesis: style; font-synthesis: weight style; font-synthesis: initial; font-synthesis: inherit;По материалам CSS Fonts Module Level 3
html5book.ru
color не только текст красит
Начнем, пожалуй, с простых вещей. Свойство color используется разработчиками постоянно. Те из вас, у кого не так много опыта работы с CSS, возможно, и не знали, что это свойство определяет не только цвет текста!
Обратите внимание, что в CSS свойство color:yellow используется лишь раз применительно к элементу body. Как видите, всё окрасилось в желтый цвет:
- Альтернативный текст на месте отсутствующего изображения
- Рамка у элементов списка
- Маркер ненумерованного списка
- Номер упорядоченного списка
- Элемент
hr
Интересно, что по умолчанию элемент hr не наследует значение свойства color, однако этого можно достичь, установив свойству border-color значение inherit. Как по мне, так это несколько странное поведение.
Продемонстрированное подтверждается спецификацией:
Данное свойство описывает цвет переднего плана текстового содержимого элемента. В дополнение к этому оно может косвенно использоваться другими свойствами, которые принимают значения цвета.
Я пока не придумал, что же это такое, «передний план», однако если вы что-то знаете, напишите об этом в комментариях. Насколько я понимаю, под передним планом в данном случае понимается цвет самого текста, а не фона, а также не фоновых элементов, — прим. переводчика.
Свойство visibility может иметь значение collapse
Вам наверняка доводилось использовать свойство visibility, и не раз. «Обычные» значения — visible (по умолчанию у всех элементов) и hidden, которое скрывает элемент, оставляя при этом под него место (в отличие от display:none).
Третье, редко используемое значение — collapse. Работает так же, как и hidden применительно ко всем элементам, кроме табличных рядов, колонок и их групп. В случае с элементами таблиц предполагается, что значение collapse скроет их подобно display:none таким образом, что на ранее занимаемом ими месте расположится другое содержимое таблицы.
Ожидаемое поведение
К сожалению, не все браузеры одинаково обрабатывают данное значение. По этой причине альманах CSS-Tricks вообще не рекомендует использовать данное свойство. Попробуйте демо.
Из того, что обнаружил я:
- В Хроме разницы между
collapseиhiddenне наблюдается (посмотрите этот баг репорт и комментарии) - В Файрфоксе, Опере и ИЕ 11
collapse, похоже, работает как следует: ряд таблицы удаляется, а тот, что был ниже, поднимается наверх
Теперь вы знаете чуточку больше, тем не менее из-за разного поведения браузеров использовать visibility:collapse вряд ли имеет смысл.
Новые значения свойства background
В CSS 2.1 короткая запись свойства background включала в себя пять значений следующих свойств: background-color, background-image, background-repeat, background-attachment и background-position. Начиная с CSS 3 добавилось еще три значения, так что данное свойство теперь выглядит так:
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size] [background-origin] [background-clip] Обратите внимание на слеш, который ставится там подобно короткой записи свойства font и border-radius [ссылка]. Этот слеш позволит вам включить значение background-size после background-position в тех браузерах, которые это поддерживают. Также вы можете добавить еще два значения: background-origin и background-clip.
Итоговый синтаксис:
.example { background: aquamarine url(img.png) no-repeat scroll center center / 50% content-box content-box; } Попробовать можно здесь.
Новые значения работают во всех современных браузерах, однако и про старичков забывать не стоит, предлагая адекватную замену.
Свойство clip работает только на абсолютно спозиционированных элементах
Наверняка вы в курсе свойства clip. Используется оно так:
.example { clip: rect(110px, 160px, 170px, 60px); } Данное правило «обрежет» элемент с четырех сторон на указанное количество пикселей. Единственный нюанс состоит в том, что элемент, к которому вы применяете данное свойство, должен быть спозиционирован абсолютно.
.example { position: absolute; clip: rect(110px, 160px, 170px, 60px); } А теперь посмотрите, как свойство clip перестает работать, если мы уберем абсолютное позиционирование элемента.
Помимо position:absolute вы также можете использовать position:fixed, поскольку, согласно документации, зафиксированные элементы также квалифицируются как «абсолютно спозиционированные».
Вертикальные проценты рассчитываются относительно ширины контейнера, а не его высоты
По началу это трудно понять, и я об этом писал. Возможно, вы знаете, что длины элементов, указанные в процентах, рассчитываются, исходя из длины их контейнера. Так вот, верхние и нижние внутренние отступы (padding) и те же внешние (margin) тоже рассчитываются исходя из ширины контейнера, а не его высоты.
Посмотрите демо.
Заметьте, что вложенный элемент имеет три отступа, заданных в процентах (верхний и нижний внутренние отступы и нижний внешний отступ). Слайдер изменяет только ширину контейнера. Однако её изменение влияет на просчет отступов. Зависимость именно от ширины контейнера показана в выводе величин на страницу.
Свойство border
Все мы когда-либо делали это:
.example { border: 1px solid black; } Свойство border объединяет значения свойств border-width, border-style и border-color в единую конструкцию. Но не забывайте, что каждое из свойств, значение которых содержит border, само по себе является сокращенной записью. Так, например, border-width может быть записано следующим образом:
.example { border-width: 2px 5px 1px 0; } Таким образом мы установим разную ширину рамки для всех четырех сторон элемента. То же относится и к свойствам border-style и border-color. Нечто вот такое ужасное можно получить:
HTML
<div class="box"></div> <p>Please don't ever do this.</p> Можно пойти еще дальше и задать эти значения по отдельности с помощью свойств border-left-style, border-top-width, border-bottom-color и так далее.
Фишка в том, что с помощью border вы не сможете задать разные значения для разных сторон. Таким образом, получается нечто вроде сокращенной записи внутри сокращенной записи внутри сокращенной записи.
Свойство text-decoration — теперь сокращенная запись
Я знал: что-нибудь из этого списка обязательно вскружит вам голову. А спецификация гласит, что теперь это стандарт.
a { text-decoration: overline aqua wavy; } Данное свойство теперь может содержать в себе значения трех свойств: text-decoration-line, text-decoration-color и text-decoration-style. К сожалению, Файрфокс — единственный браузер, который поддерживает новые свойства, но при этом (видимо, для обеспечения обратной совместимости) не поддерживает сокращенный синтаксис.
Ожидаемый результат
Попробуйте эту демку в Файрфоксе. В ней новые свойства используются по отдельности. С ними надо быть аккуратнее, ибо в данное время браузеры не смогут распарсить дополнительные значения у свойства text-decoration и просто пропустят его. А это нехорошо с точки зрения обратной совместимости.
Свойство border-width поддерживает ключевые значения
Это, конечно, не нечто из ряда вон выходящее, да и не ново, тем не менее помимо обычных значений ширины (напр., 5px или 1em) border-width поддерживает три ключевых значения: medium, thin и thick.
По факту, начальное значение свойтва border-width — medium. Ниже продемонстрировано значение thick:
В спецификации CSS конкретная ширина для ключевых значений не прописана, однако все браузеры используют 1px, 3px и 5px соответственно.
«Никто не использует border-image»
Не так давно я писал о свойстве border-image на SitePoint. Оно поддерживается всеми современными браузерами, за исключением IE 10 и ниже. Но кому какая разница?
border-image — весьма забавное свойство, которое позволяет обрамлять контейнер неким изображением.
Также посмотрите демо.
К сожалению, border-image — одна из новинок, пользующаяся недостаточной популярностью. Хотя, возможно, я не прав. Если у вас есть примеры использования border-image — добро пожаловать в комментарии!
Есть такое свойство empty-cells
И оно поддерживается всеми браузерами, включая IE 8:
table { empty-cells: hide; } Думаю, вы уже поняли, что используется это свойство применительно к таблицам. Оно указывает браузеру скрыть или показывать пустые ячейки. Попробуйте это демо.
В данном случае я специально выставил рамку у ячеек и добавил небольшие отступы, чтобы была видна разница между двумя состояниями, хотя в некоторых случаях изменение данного свойства может не иметь никакого визуального эффекта.
Свойство font-style поддерживает значение oblique
Наиболее используемые значения данного свойства — normal и italic. Но есть еще и oblique.
И что же это значит? Почему текст выглядит так же, как если бы он был написан курсивом?
Спецификация объясняет данное поведение следующим образом:
… выбирает шрифт, помеченный как наклонный, иначе — курсивный.
Описание курсива в спецификации — примерно о том же. Термин «наклонный» (oblique) — из типографики, обозначает, собственно, наклоненный текст, но не настоящий италик.
CSS обрабатывает наклонный текст таким образом, что значение oblique взаимозаменяемо с italic (так говорится в спецификации) до тех пор, пока используемый шрифт не имеет отдельного наклонного начертания.
Не знаю шрифтов, которые бы имели наклонное начертание, но я могу ошибаться. (Ошибается. Сам привести конкретных названий шрифтов не могу (они однозначно существуют), но в комментариях к оригинальной статье в пример приводят шрифт Helvetica, — прим. переводчика) Насколько я понял, шрифт не может иметь оба начертания: курсив и наклонное — одновременно, поскольку наклонное начертание является искусственной заменой курсива в тех шрифтах, в которых его нет. (Здесь тоже несколько сомнительно, особенно что касается замены курсива, — прим. переводчика)
Так что, если я не ошибаюсь, когда шрифт не имеет курсивного начертания, значение свойства font-style:italic на самом деле покажет нам значение свойства font-style:oblique.
Большое спасибо Ogi за комментарии относительно путаницы в терминологии, теперь это исправлено и вместо «гарнитуры» — «начертание», а вместо «италика» — «курсив», — прим. переводчика
word-wrap — то же, что и overflow-wrap
Свойство word-wrap используется не так часто, однако в некоторых случаях может оказаться полезным. Очень распространенный пример — разбиение длинной непрерывной строки текста во избежание выхода за пределы контейнера.
Поскольку данное свойство придумали в Microsoft, оно поддерживается всеми браузерами, в том числе IE с версии 5.5.
Несмотря на кросс-браузерность и надлежащую поддержку, W3C решило заменить свойство word-wrap на overflow-wrap: по всей видимости, они посчитали прежнее название неправильным. overflow-wrap имеет те же значения, что и word-wrap, а последнее сейчас рассматривается как «альтернативное».
Несмотря на то, что поддержка overflow-wrap еще мало распространена, не стоит переживать, ибо мы все так же можем использовать word-wrap: браузеры его поддерживают в том числе и в целях обратной совместимости.
Что до overflow-wrap — там уж когда все популярные браузеры обновятся, а пока я не вижу смысла что-то менять.
Много ли нового узнали вы из всего этого?
Хоть что-нибудь — уже хорошо. Наверняка крутые ребята знают большую часть, если не всё из вышеперечисленного. Но менее продвинутым разработчикам это узнать весьма полезно.
Добро пожаловать в комментарии!
habr.com
Задача
Сделать наклонную надпись (под произвольным углом).
Варианты решения
Картинка?
В древние допотопные времена такую задачу решили бы подменой текста изображением. Не скажу, что этот метод устарел, в некоторых ситуациях он успешно применяется. Но все-таки картинка — это неудобно. Текст на ней посетитель не скопирует (а вдруг кому-то очень нужно?), редактирование такой надписи дело, мягко говоря, непростое — переделывать картинку, это вам не поменять пару символов в Блокноте.
Плюсы:
- кроссбраузерность;
- управляемость — блок можно спозиционировать как тебе угодно.
Минусы:
- дополнительные картинки — лишний траффик и обращения к серверу;
- текст не выделяется;
- отсутствие гибкости.
В общем, не нравится мне такой подход. Ищем другое решение.
CSS3 transform?
Да. Так гораздо лучше. Текст остался текстом, его можно выделять и редактировать. Но есть нюанс — поддержка браузерами. Тут, конечно, стоит отметить, что сейчас дела с этим обстоят неплохо. Гораздо лучше, чем пару лет назад. Настолько лучше, что этот метод можно смело применять. Давай рассмотрим его подробнее.
Итак, за основу берем CSS3 свойство transform, которое позволяет повернуть блок на заданный угол. К слову сказать, именно блок, а не только текст. То есть в блоке могут быть картинки, таблицы, да хоть весь сайт возьми и поверни!
Собственно использовать сам transform необходимости нет, так как в прямом виде оно пока не поддерживается — применяем его вендорные аналоги:
Такой код корректно отработает в FF 3.5+, Opera 10.5+, в вебкит-браузерах и в IE9. Для полного счастья нужно добавить в этот список IE6-8.
Протезы IE
Сделать это не сложно — применяем фильтр Matrix, js и немного познаний в математике.
Не пугайся, менять в этом коде придется только deg = -4; — тут нужно подставить свое значение поворота в градусах.
Демо-пример. Проверено в:
- IE 6-8
- Firefox 3.5+
- Opera 10.5+
- Safari 4
- Chrome 5
Плюсы:
- текст остался текстом — он выделяется, редактируется и индексируется поисковиками;
- к тексту применяются любые CSS эффекты, в том числе. например, тень;
- кроссбраузерность не идеальная, но достаточная для применения в боевых условиях.
Минусы:
- иногда поворот может немного «отставать» — во время загрузки страницы на слабых машинах блок некоторое время будет ровным;
- шрифт не всегда смотрится красиво — в некоторых случаях буквы немного «покоцаные». Зависит это от браузера, шрифта и даже угла поворота. В целом можно сказать, что красивые нестандартные шрифты скорее всего будут сглаженными.
- трудность позиционирования блока.
По последнему пункту хочется рассказать подробнее.
Существует разница между отображением блока, повернутого с помощью transform и с помощью фильтра Matrix. Соответственно IE спозиционируют блок несколько иначе, чем все остальные браузеры.
Различие будет как в высоте, занимаемой блоком, так и в оси поворота. Это проще нарисовать, чем пояснить:
Бороться с такими «разногласиями» достаточно трудно, но можно. Кто не верит на слово — можно почитать эту статью про подбор transform-origin (и не только про это).
Тем не менее, самый простой и быстрый вариант, как это ни смешно, — подогнать блоки «напильником» с помощью отступов и индивидуальных стилей. Все-таки, как правило, наклонный текст — это какой-нибудь рекламный слоган или декоративное украшение, зачастую спозиционированное абсолютно, т.е. выпавшее из потока. В таком случае данное решение на CSS очень даже подходит.
Так же надпись под углом можно реализовать, используя SVG и HMTL5 canvas. Эти варианты рассмотрим позже.
xiper.net
Оформляя текст своих статей, заметок и.т.д. на веб-страницах иногда нужно какой-то фрагмент этого текста выделить от остального текста.
Замечательным способом, как это можно сделать — это выделение его полужирными шрифтом или курсивом. Такой текст сразу бросается в глаза и становиться заметным.
Сегодня разберем свойства CSS, которые позволяют решить эту проблему и выделяют выбранный фрагмент текста курсивом или полужирным.
Итак, чтобы выделить текст полужирным, нужно воспользоваться свойством:
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Чаще всего из этих значений используется значение bold. Остальные значения лишь определяют степень полужирности шрифта.
Чтобы сделать его курсивом, нужно воспользоваться свойством CSS:
font-style: normal | italic | oblique | inherit
Значение italic, как раз отвечает за курсив текста.
Давайте на конкретном практическом примере посмотрим, как работают эти свойства. Есть 3 абзаца. Один из них оставим как есть, другой выделим полужирным шрифтом, а третий курсивом.
<p>Абзац обычный</p> <p style="font-weight:bold;">Абзац полужирным шрифтом</p> <p style="font-style:italic;">Абзац курсивом</p>
Также выделить особым образом может понадобиться только определенную часть текста внутри абзаца. В этом случае можно воспользоваться элементом span.
<p>Абзац Абзац <span style="font-weight:bold;">Абзац</span> Абзац Абзац Абзац Абзац </p>
webgyry.info
Жирность шрифта определяется при помощи атрибута CSS font-weight, который может принимать следующие значения:
- lighter — светлее
- normal — обычный
- bold — жирный
- bolder — более жирный
- 100..900 — 100 соответствует самому тонкому шрифту; 900 — самому толстому
Атрибут font-style (начертание шрифта) служит для написания курсивом и может принимать следующие значения:
- italic — курсив, края текста скруглены
- normal — обычный
- oblique — курсив
Атрибут font-variant (разновидность шрифта) служит для написания малыми прописными буквами и может принимать следующие значения:
- normal — обычный
- smaoo-caps — малые прописные
Наряду с жирным, курсивом и малыми прописными существует еще несколько популярных видов начертания: подчеркивание и маркировка.
Атрибут text-decoration (украшение текста) служит для подчеркивания текста и может принимать следующие значения:
- blink — мерцающий текст (не поддерживается IE)
- line-through — перечеркнутый текст
- none — без изменений
- overline — линия над текстом
- underline — подчеркнутый текст
Атрибут text-transform (преобразование текста) служит для работы с малыми прописными буквами и может принимать следующие значения:
- capitalize — все слова начинаются с прописной буквы
- lowercase — весь текст пишется строчными буквами
- none — без изменений
- uppercase — весь текст пишется прописными буквами
Пример использования font-weight, font-style, text-decoration, text-transform: Пример №9
HTML-код страницы:
В начало страницы
В начало страницы
on-line-teaching.com