10 (еще) хитростей CSS, которые вы, вероятно, не заметили
Существует множество фрагментов CSS, которые веб-разработчики могут использовать для достижения определенных результатов, а также есть хитрости CSS, которые можно использовать для таких вещей, как выравнивание контента по вертикали. Поскольку CSS постоянно развивается, мы снова и снова сталкиваемся с крутыми трюками CSS, которые интересно узнать..
В сегодняшнем посте я представляю вам Еще 10 CSS-атрибутов и трюков, которые вы можете не знать.
1. Пишите по вертикали
Там атрибут CSS называется режим письма который принимает одно из этих трех значений; горизонтально-Т.Б., вертикально-гх а также вертикально-Л.Р..
горизонтально-Т.Б. по умолчанию, и это вызывает типичный горизонтальный поток текста слева направо в элементе.
вертикально- * однако значения предназначены для вертикального потока блоков, в результате чего браузеры записывают текст сверху вниз. В вертикально-гх, новые строки добавляются слева от предыдущих и наоборот для вертикально-Л.Р..
Это полезно для отображение языков, таких как китайский и японский которые обычно пишутся сверху вниз, а также для случаев, когда вы хотите отобразить текст вертикально, чтобы сохранить горизонтальное пространство, как в заголовках таблицы.
Замечания: Если вы хотите контролировать направления отдельных букв, вы можете использовать ориентацию текста, поворачивая их вертикально или вбок, по желанию.
-режим записи webkit: vertical-rl; -ms-режим письма: tb-rl; режим письма: вертикальный-рл;
2. Повторно используйте значение цвета
Ключевое слово currentColor несет в себе значение цвет атрибут и может использоваться в других атрибутах, которые принимают значения цвета, такие как фон.
div фон: линейный градиент (90 градусов, currentColor 50%, черный 50%);… цвет: # FFD700; / * currentColor is # FFD700 * /
3. Смешать фоны
Элемент может иметь более одного фона (цвет фона и несколько фоновых изображений). фон-смесь-режим смешивает их все вместе в соответствии с заданным режимом смешивания. Всего на данный момент доступно 16 режимов наложения.
background-blend-mode: разница;
4. Смешать элементы
Режим mix-blend-blend смешивает содержимое и фон перекрывающихся элементов. Похоже, что Chrome не поддерживает все режимы, хотя Firefox поддерживает.
режим смешивания: цвет;
Я взял два элемента, IMG показывая изображение розы и пролет с графическим фоном, сложил их и применил несколько смешанных режимов смешивания.
5. Игнорировать события указателя
Вы можете сделать элемент не обращающим внимания на любое событие указателя, используя один атрибут с именем указатель событий. Давая указатель событий значение никто в элементе это препятствует тому, чтобы он был целью для указателей на события. IE11 + поддержка включена.
В следующей демонстрации есть флажок под двумя изображениями, сложенными друг над другом. Оба изображения несут события указателя: нет, что позволяет нам установить флажок, скрытый под ними. На основе отмеченного состояния флажка отображается желаемое изображение, а другое скрытое.
6. Украсить сплит коробки
Как правило, когда блок разделяется (например, когда встроенный элемент свидетельствует о разрыве строки), края разделенных частей лишены каких-либо стилей блока и выглядят разрезанными. Чтобы избежать этого, вы можете использовать коробка-украшения-брейк: клон.
Теперь, чтобы следовать этому примеру и раннему напоминанию «Рождество на горизонте», вот список оленей Санты, напечатанных в одном пролет! Ho! Ho! эй!
Заметка: Хотя современный IE поддерживает коробка-украшение-брейк, на краю границы разделенной части рендеринг не является плавным, а фон выглядит нарезанным. Но это делает коробчатого тень хорошо, именно поэтому я использовал тени от рамок как для границы, так и для фона. В IE также отсутствует горизонтальное заполнение краев, которое вы можете заполнить пробелами..
7. Свернуть элементы таблицы
видимость: коллапс является атрибутом, созданным только для элементов таблицы, таких как строки и столбцы. Если используется на чем-то еще, он будет вести себя как видимость: скрытая. Хром хоть и трактует это как скрытый даже для элементов таблицы.
Когда вы назначаете видимость: коллапс в элементе таблицы он скрыт, а его пространство заполнено близлежащим содержимым, например, как он будет себя вести при использовании нет дисплей: нет вместо.
Но в отличие от нет дисплей: нет который изменяет макет таблицы после удаления пробела, макет остается неизменным в видимость: коллапс. Вы можете увидеть, как это работает более подробно здесь.
8. Создайте столбцы
Вы можете создать макет столбца для вашего содержимого, используя столбцы приписывать. Позволяет указать, сколько столбцов (колонка подсчета) и как ширина каждого столбца (ширина колонки) должны быть представлены в элементе.
Если содержимое отличается от текста, например, изображения, вам следует учитывать его ширину в соответствии с шириной столбца. В следующем примере я использовал только колонка подсчета указать, сколько столбцов я хочу.
-webkit-column-count: 2; -moz-column-count: 2; количество столбцов: 2;
9. Сделайте элементы изменяемого размера
Элемент может быть изменен в размере (по вертикали, по горизонтали или оба) с помощью атрибута CSS3 изменить размер . Изменение размера в TextArea можно отключить с помощью того же.
изменить размер: вертикальный; изменить размер: горизонтальный; изменить размер: оба; изменить размер: нет;
10. Создание шаблонов
Для одного элемента может быть несколько градиентов CSS3 (как линейных, так и радиальных), и они могут накладываться друг на друга для создания шаблонов. Это позволяет нам создавать красивые фоны для элементов без использования внешних изображений. Чтобы заставить это работать, может потребоваться немного практики, хотя.
