Наклон — Tailwind CSS
Основы использования
Наклон элемента
Используйте утилиты skew-x-{amount} и skew-y-{amount}, чтобы наклонить элемент.
<img> <img> <img> <img>
Использование отрицательных значений
Чтобы использовать отрицательное значение перекоса, поставьте перед именем класса дефис, чтобы преобразовать его в отрицательное значение.
<img>
Удаление преобразований
To remove all of the transforms on an element at once, use the transform-none utility:
<div> <!-- ... --> </div>
This can be useful when you want to remove transforms conditionally, such as on hover or at a particular breakpoint.
Аппаратное ускорение
If your transition performs better when rendered by the GPU instead of the CPU, you can force hardware acceleration by adding the transform-gpu utility:
<div> <!-- ... --> </div>
.. -->
</div>
Use transform-cpu to force things back to the CPU if you need to undo this conditionally.
Применяя условно
Наведение, фокус и другие состояния
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:skew-y-12 to only apply the skew-y-12 utility on hover.
<div> <!-- ... --> </div>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
Контрольные точки и медиа-запросы
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:skew-y-12 to apply the skew-y-12 utility at only medium screen sizes and above.
<div> <!-- ... --> </div>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
Использование пользовательских значений
Настройка вашей темы
По умолчанию Tailwind включает в себя несколько утилит общего назначения skew. Вы можете настроить эти значения, отредактировав theme.skew или theme.extend.skew в вашем файле tailwind.config.js.
tailwind.config.js
module.exports = {
theme: {
extend: {
skew: {
'17': '17deg',
}
}
}
}
Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.
Произвольные значения
If you need to use a one-off skew value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<div> <!-- .
.. -->
</div>
Learn more about arbitrary value support in the arbitrary values documentation.
НОУ ИНТУИТ | Лекция | Создание стилей для Web-проекта
< Лекция 3 || Лекция 4: 1234 || Лекция 5 >
Аннотация: В уроке рассказывается что такое каскадные таблицы стилей (CSS). Даются основные понятия о стилях.
Ключевые слова: цвет фона, цвет текста, интервал, файл, css, ‘font-style’, ‘font-weight’, ‘text-decoration’, underline, ‘padding-top’, ‘background-color’, ‘background-position’, меню, пункт, корневой каталог, закрывающий тег, тег, слово, главная страница, внешний отступ, значение, очередь, ссылка, указатель, словосочетание, синтаксис, атрибут, градиентная заливка, курсор, поле, размер шрифта, пробел
Что такое CSS
Cascading Style Sheets (каскадные таблицы стилей), сокращенно CSS, — наиболее распространенный инструмент для придания Web-страницам аккуратного и стильного вида.
Принцип использования CSS прост: сначала какой-либо стиль, например стиль одной из ячеек таблицы, описывается в отдельном файле, имеющем расширение .css ; в этом стиле устанавливаются отступы слева, справа, сверху и снизу, цвет фона, размер, начертание и цвет текста, межстрочный интервал и т. п. Затем css -файл ставится в соответствие html -документу, и к рассматриваемой ячейке таблицы применяется только что созданный стиль. Такая схема удобна еще и тем, что описанный единожды стиль сразу распространяется на все html -файлы, будь их 5, 10 или 100.
Поэтому, если вдруг возникнет необходимость использовать синий цвет текста вместо черного на всех 100 Web-страницах проекта, достаточно будет просто изменить одну строку в css -файле.
В CSS принято несколько видов единиц, среди которых наиболее употребляемы следующие:
- пиксели, px ; их целесообразно использовать для задания величин отступов внутри ячеек или толщины каких-либо границ;
- проценты, % ; их используют для задания размера остального текста, например заголовков, пунктов меню, подрисуночных подписей и пр., а также для установки междустрочных интервалов.
intuit.ru/2010/edi»>относительные единицы, em ; с их помощью удобно задавать размер основного текста Web-страницы;Цвета в CSS, как и во всех Web-документах, задаются в формате шестнадцатеричного кода, перед которым стоит символ #, например:
#ee1515 — красный,
#a3d007 — кислотно-зеленый,
#ffffff — белый,
#000000 — черный.
Удобнее всего подбирать цвета в редакторе Adobe Photoshop, а затем переносить соответствующий шестнадцатеричный код в css -файл.
В таблице 3.1 приведены основные характеристики, которые могут понадобиться при создании стилей для Web-проекта.
Рис. 3.1. Характеристики margin и padding| Характеристика | Примеры использования |
|---|---|
| I. Оформление текста | |
| Гарнитура шрифта, font-family | font-family: Georgia, Times New RomanГарнитуры указываются через запятую; если на компьютере посетителя Web-страницы не установлена первая (предпочтительная) гарнитура, то браузер использует вместо нее вторую, а не какую-либо произвольную |
| Размер шрифта, font-size | font-size: 0. |
| Наклон шрифта, font-style | font-style: italic (курсив) font-style: normal (прямое начертание) |
| Начертание шрифта, font-weight | font-weight: bold (полужирное начертание) font-weight: normal (нормальное начертание) |
| Подчеркивание текста, text-decoration | text-decoration: underline (подчеркнуто) text-decoration: none (без подчеркивания) |
| Цвет текста, color | color: #276dc5 |
| Междустрочный интервал, line-height | line-height: 150% |
II. Отступы и границы | |
| Отступ изнутри ( рис. 3.1), padding | padding: 30px (отступ со всех сторон по 30 пикселей) padding-top: 5px (отступ сверху 5 пикселей) Отступы можно устанавливать одинаковыми для всех сторон или для каждой стороны по отдельности: top — верхняя, bottom — нижняя, left — левая, right — правая |
| Отступ снаружи ( рис. 3.1), margin | margin: 20px margin-left: 10px |
| Граница, border | border: solid 1px #ac9d7fПервый параметр — характер линии: solid — сплошная, dotted — пунктир; второй параметр — толщина линии; третий параметр — ее цвет border-right: solid 4px #000000Можно устанавливать границы с каждой из сторон по отдельности |
III. Заливка фона | |
| Цвет фона, background-color | background-color: #969696 |
| Фоновый рисунок, background-image | background-image: url(graphics/drops.jpg)В скобках после префикса url указывается место расположения рисунка в системе папок Web-проекта |
| Позиция фонового рисунка, background-position | background-position: top left |
| Повторяемость фонового рисунка, background-repeat | background-repeat: repeat-xВозможные варианты: repeat-x — повторение по горизонтали, repeat-y — повторение по вертикали, repeat — повторение в обоих направлениях, no-repeat — без повторения |
Дальше >>
< Лекция 3 || Лекция 4: 1234 || Лекция 5 >
Шрифт— уменьшить наклон EM с помощью CSS?
спросил
Изменено 10 лет, 8 месяцев назад
Просмотрено 544 раза
Я использую , чтобы выделить часть @font-face в стиле
У меня проблема в том, что это тоже курсивом. Я использую шрифт Impact, который, насколько мне известно, не имеет курсивной версии. В Photoshop текст только частично наклонен с помощью параметра «Наклонный текст» на панели устава. Тем не менее, с на сайте это очень криво. Есть ли способ настроить это с помощью CSS? Или у кого-нибудь есть действительно курсивная версия Impact, которую я могу использовать?
- css
- font-face
Если использование Impact по какой-либо причине абсолютно обязательно , вы можете имитировать курсив с помощью CSS3. http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transform_skew
Однако это не поддерживается во многих старых браузерах (и некоторых более новых), поэтому я бы колебался. Учитывая, что вы хотите изменить то, как на самом деле хочет Impact, вам, вероятно, просто нужен другой шрифт, но для этого по-прежнему требуется, чтобы CSS3 загружался должным образом, если только вы не собираетесь генерировать некоторые изображения на стороне сервера для своих заголовков, что я крайне не рекомендую.
http://www.w3schools.com/css3/css3_fonts.asp
Моя рекомендация? Просто используйте перекос CSS3 для тега . В худшем случае браузер не поддерживает его, и он выделен слишком курсивом. Это не имеет большого значения. В лучшем случае ваш сайт выглядит великолепно! Если исходный курсив для вас слишком велик, я бы удалил его в теге и все равно просто сделал свое решение. Таким образом, если CSS3 не поддерживается, вы все равно получите красивый заголовок Impact.
Шрифт Impact не имеет курсивной версии. То, что вы получите, попросив некоторое программное обеспечение выделить его курсивом, — это просто прямая версия или какое-то механическое (алгоритмическое) наклонное искажение. Алгоритм зависит от программного обеспечения, но не производит курсив. Так что просто не делай этого.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Слантастик
В каждом браузере, который я тестировал, вы должны увидеть что-то похожее на белую область неправильной формы, содержащую какой-то текст.
Этот текст, собственно говоря. Не каждый браузер справляется с этим хорошо, но некоторые, по крайней мере, приближаются к этому; во время моего тестирования отличников было Netscape 6.2 и Opera 5.12 , но, конечно, другие могут справиться с тестом также или даже лучше. Если вы хотите увидеть что-то более кросс-браузерное, основанное на изображениях вместо обычных текстовых элементов, вас может заинтересовать что-то более кривое. Тем временем, мы будем солдаты здесь.
Итак, если вы находитесь здесь с хорошим браузером, поддерживающим CSS2, вы должны увидеть белую область с правым краем неправильной формы и текст, идущий вдоль наклонного края. А вы думали, что веб-дизайн состоит из прямоугольников.
Плывет вдоль…
Ключевым моментом здесь является количество пустых элементов div , которые были перемещены вправо. Они «накладываются» друг на друга, используя float и clear в сочетании, как вы можете видеть в этом отрывке из CSS:
поплавок: правый; ясно: верно;
Другими словами, «сместите каждый элемент DIV вправо, но поместите его под любыми другими элементами, которые перемещаются вправо».
Чтобы получить эффект наклона, я удостоверяюсь, что div не имеют содержимого (даже пробелов), поэтому их ширина и высота по умолчанию равны нулю. Затем я манипулирую шириной и цветом границы, чтобы создать угол, и, наконец, ширину манипулирую прямо. Вот пример трех (не плавающих) div подряд, которые используют аналогичный эффект:
Давай, смотри источник. Три элемента div , некоторые границы и отсутствие содержимого. Вот и все. Хитрость заключается в том, чтобы установить для некоторых границ нулевую ширину, а для некоторых — ширину, но того же цвета, что и фон области «текста» здесь посередине (белый), а одну границу сделать очень толстой и того же цвета. в качестве фона тела (средний синий).
Каждый DIV имеет ширину, измеренную в ems, а ширина границ измеряется в ems или их долях, поэтому элементы масштабируются плавно. Изменяя соотношение ширины границ, я изменяю получаемый угол. Например, длинный наклонный наклон представляет собой угол 3:1, поскольку верхняя граница имеет высоту 3 см, а ширина левой границы — 1 см.
Угол наклона 45 градусов соответствует наклону 1:1. Практически любой угол можно создать, просто изменив пропорции по вкусу.
Что касается разделения между «косыми» div s и текст, на который влияет установка левого поля на наклонах. Больше поля означает более широкое разделение. О, а нижние «обрезанные» углы, те, что прямо под разделом «Благодарности»? Еще один ДИВ.
Раз уж вы зашли так далеко, хотите стать пирамидальным?
Проблемы
В IE5.5/Win область действительно неравномерна, потому что «наклонная» область справа разбита толстыми белыми линиями. Хотя это интересный эффект, он также указывает на довольно неправильный код с плавающей запятой. В IE5/Mac текст не занимает всю доступную область, а ограничивается шириной самого узкого доступного места. Кроме того, если вы перемещаете элемент влево, но задаете ему нулевую ширину, IE5/Mac сбросит его до 100% ширины без видимой причины, но нарисует текст поверх него. И Netscape 6.2 иногда (но не всегда) позволяет тексту перекрывать плавающие элементы, что определенно является ошибкой.