CSS3

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

Текста для проверки можете взять отсюда.


Для того чтобы поля и границы элемента не увеличивали его ширину:

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

Значение position: relative. Добавление свойств top, right, bottom, и left изменяет позицию элемента, сдвигая его в ту или иную сторону относительно его начального расположения. Другой контент не будет перестраиваться, чтобы заполнить любое свободное пространство, оставленное этим элементом:

 position: relative;
 bottom: 20px; //сдвинет элемент наверх на 20 пикселей

Значение position: fixed. Фиксированное позиционирование элемента относительно окна браузера таково, что он всегда занимает одно и тоже место даже при прокрутке страницы, словно он приклеен к экрану. Также как и для relative, дополнительные свойства top, right, bottom, и left для данного позиционирования будут работать. 

/* Данный код прикрепит любой элемент справа снизу и сделает его поверх всех элементов */
position: fixed;
bottom: 0;
right: 0;
z-index: 999;

Значение position: absolute. absolute наиболее сложное значение позиционирования. absolute ведет себя как fixed за исключением того, что позиционирование отсчитывается относительно ближайшего расположенного родителя а не относительно окна браузера. Если элемент абсолютно позиционирован и не имеет родителя,то он использует тело документа и продолжает двигатся вместе со всей страницей при скроллинге. Помните , что "позиционированный" элемент - это элемент с любым значением свойства position кроме значения static. 

/* В блоке с именем класса one: */
position: relative;
/* В блоке с именем класса two: */
position: absolute;
top: 50px;
/* two должен находится в one. Результатом будет позиционированием блока two на
50 пикселей вниз от блока one. Пространство блок two занимать не будет. */

clearfix. Когда у картинки в блоке стоит например float: right; то если картинка больше содержимого блока происходит неприятная вещь, картинка выходит за границы блока. Чтобы это исправить нужно родительскому блоку назначить css свойства.

 overflow: auto;
 zoom: 1; /* zoom нужен для IE6 */

Media queries. "Отзывчивый дизайн" является стратегией, делающей сайт адаптированным к размеру браузера любого устройства, на котором он показывается... эта стратегия позволяет выглядеть сайту здорово несмотря ни на что. Media queries являются наиболее мощным инструментом для этого. 

@media screen and (min-width:600px) {
/* классы */
}

Простой подход для сброса float. Когда идут несколько блоков с установленным значением float, то всегда требуется указать clear:[left|right|both] для того чтобы последующий блок переместился на следующую строку.
Чтобы избежать этого и сэкономить код надо использовать вместо float > display: inline-block;, последующий блок без inline-block будет располагаться под предыдущим.


Разметка сайта с помощью inline-block.

Сайт можно разметить с помощью inline-block. Для этого надо соблюдать 3 правила:

  1. inline-block элементы зависят от свойства vertical-align для которого, вы вероятно хотите установить top.
  2. Вам нужно установить ширину для каждой колонки.
  3. Будет пустое место между колонками если между ними будут пробелы.

Простой пример:

CSS:

#menu {
 display: inline-block;
 vertical-align: top;
 width: 30%;
}

#content {
 display: inline-block;
 vertical-align: top;
 width: 70%;
}

Без указания vertical-align блок меню будет находится снизу, это обычно не то что требуется.


Мульти-колонки

Существует новый набор CSS свойств, которые позволят вам легко создать мульти-колонки.

.col {
 column-count: 3;
 column-gap: 10px; /* зазор между колонками */
 -moz-column-count: 3; /* column-count и так работает на мозилле */
 -moz-column-gap: 10px;
 -webkit-column-count: 3;
 -webkit-column-gap: 10px;
} /* всё же из-за новизны рекомендуется использовать все три */

Разметка с помощью flex

Новый метод flexbox разметки готов пересмотреть то, как мы делаем разметку в CSS. К сожалению, спецификация недавно изменилась, так что данный метод реализуется по-разному в разных браузерах. Тем не менее, вот вам примеры простой разметки:

  1. Разметка сайта
  2. Блок центрированный по середине

!important

!important требуется для того чтобы свойство начало иметь самый высокий приоритет, и тогда это объявление сработает для элемента независимо от наличия других правил CSS для этого же элемента.

/* В этом примере цвет будет красным */
body p {
 color: red;
}

p {
 color: blue;
}

/* А в этом примере цвет будет синим */
body p {
 color: red;
}

p {
 color: blue !important;
}

opacity и прозрачные блоки

Свойство opacity позволяет задать прозрачность элемента. Значение должно быть числом из диапазона: от 0.0 до 1.0. 1.0 отключает прозрачность, а 0 делает элемент полностью прозрачным. Можно писать числа без нуля впереди: opacity: .5.

Но когда необходимо сделать прозрачным блок не включая внутренние элементы возникает проблема - все внутренние элементы становятся прозрачными и установка для них opacity: 1 не работает!

Решением данной проблемы служит вложение пустого блока, внутрь блока сзади которого надо установить прозрачность, и позиционирование его от левого верхнего края родительского.

Здесь я показываю наглядный пример: ссылка

Вы можете использовать класс transparency для любого блока, поскольку ширина высота указана в процентах и прозрачный блок автоматически растягивается на всю ширину родительского.

Это можно реализовать и на JQuery, но эта памятка только о css, а JQuery это другая огромная тема, к тому же лучше использовать для этого чистый css чтобы сайт летал даже на самых слабых устройствах.

И дополнительно:

filter: alpha(opacity=50); /* Это для Internet Explorer до версии 9.0. Использует значения от 0 до 100. */
-moz-opacity: .5; /* Это для Firefox до версии 3.5 */

Полупрозрачный блок с помощью rgba

Этот способ является более простым по сравнению с прошлым. rgaba() поддерживает третье значение и это непрозрачность.

Вот пример: ссылка

В прошлом способе мы не могли закрасить полностью блок main, а теперь можем. Поэтому рекомендуется использовать данный способ.


Цвет выделения текста

Для изменения цвета выделения текста используется псевдоэлемент ::selection. В firefox надо использовать ::-moz-selection.

Пример:

p::selection {
 color: red;
 background-color: blue;
}

После этого выделение всех абзацев будет приобретать красный вид текста и синий задний фон.

Можно использовать rgba и избавится от фона выделения:

p::selection {
 color: blue;
 background-color: rgba(0, 0, 0, .0); /* прозрачный фон выделения */
}

p::selection {
 color: rgba(0, 0, 0, .0);
 background-color: rgba(0, 0, 0, .0); /* всё выделенное теперь просто будет исчезать */
}

Для того чтобы цвета выделения применялись на всех элементах поставьте *: *::selection, *::-moz-selection.


Изменение межбуквенного промежутка

Кернинг – это изменение межбуквенного промежутка: для каждой пары букв подбирается свой интервал. Символы могут отодвигаться, придвигаться, не двигаться.

Используется свойство font-kerning. Может принимать 5 значений:

  1. auto - на усмотрение браузера: кернинг используется для среднего и большого размеров шрифта, не используется только для маленького размера шрифта
  2. normal - кернинг используется
  3. none - кернинг не используется
  4. initial - auto
  5. inherit - наследует значение родителя
  6. unset - наследует значение родителя

Это работает не со всеми шрифтами.


Интерполяция изображения при масштабировании его размеров.

image-rendering - данное свойство позволит ускорить свой сайт.

Оно сообщает браузеру, каким алгоритмом интерполировать изображение при масштабировании его размеров или изменении масштаба в параметрах браузера. Значение по умолчанию - auto.

  1. auto - Браузер применяет встроенный в него алгоритм интерполяции, обычно используется бикубический метод.
  2. crisp-edges - Цель алгоритма — быстрое отображение картинки, для чего применяется метод интерполяции по ближайшим точкам. Он не создаёт сглаживания вокруг линий и его можно рекомендовать в тех случаях, когда требуется сохранить первоначальный набор цветов и резкость краёв.
  3. pixelated - При увеличении размера картинки сохраняет контраст и контуры изображения, не допуская размытия цветов и контуров. При уменьшении размеров аналогичен auto.

Internet Explorer поддерживает нестандартное свойство -ms-interpolation-mode у которого другие значения.

Safari до версии 10 поддерживает свойство -webkit-image-rendering.

В firefox надо использовать -moz-crisp-edges.


Границы для вёрстки сайта

Когда делаешь сайт с нуля, то нужно видеть внешние границы. В этом поможет свойство outline у которого стиль создания аналогичен border. border-radius работать не будет.

outline: 1px solid blue;

Границы не будут задевать другие элементы и менять размер блока.


Свои кавычки

Для этого применяется свойство quotes. Добавление кавычек происходит автоматически для содержимого контейнера , а также для текста, к которому применяется стилевое свойство content со значением open-quote (открывающая кавычка) или close-quote (закрывающая кавычка).

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

/* Все популярные варианты */
q {
 quotes: '«' '»';
}
q {
 quotes: '“' '”'; /* Применяется в англоязычных текстах */
}
q {
 quotes: '„' '“'; /* Применяется в русском языке. */
}
q {
 quotes: '‘' '’'; /* Одинарные кавыки */
}

Анимация

animation-name

Устанавливает одну или несколько анимаций, которые применяются к элементу. Представляет собой имя, связанное с правилом @keyframes, оно в свою очередь задаёт последовательность движения.

Синтаксис: animation-name: none | <идентификатор> [, none | <идентификатор>]*

  1. none - Отключает анимацию
  2. <идентификатор> - Текстовая строка, которая связана с анимацией. Идентификатор должен начинаться с латинской буквы или подчёркивания (_), также может содержать цифры от 0 до 9 и дефис (-). Запрещено использовать зарезервированные ключевые слова none, unset, inherit, initial.

Пример:

img {
 width: 300px;
 animation-name: anim;
 animation-duration: 3s;
}
@keyframes anim {
 from { width: 0px; }
 to { width: 300px; } /* Увеличит все картинки до 300 пикселей */
}

Chrome, Safari и Android поддерживают свойство -webkit-animation-name.

Opera до версии 12.10 поддерживает свойство -o-animation-name.

Firefox до версии 16 поддерживает свойство -moz-animation-name.


animation-duration

Задаёт время в секундах или миллисекундах, сколько должен длиться один цикл анимации. По умолчанию значение равно 0s, это означает, что никакой анимации нет.
Можно указать несколько значений, перечисляя их через запятую. Отрицательные значения и значения без указания единиц времени (s или ms) недопустимы и будут игнорироваться.

Синтаксис: animation-duration: <время> [,<время>]*


Chrome, Safari и Android поддерживают свойство -webkit-animation-duration.

Opera до версии 12.10 поддерживает свойство -o-animation-duration.

Firefox до версии 16 поддерживает свойство -moz-animation-duration.

Эта справка расчитана на профи поэтому примера такой легкотни нет.


animation-timing-function

Устанавливает, согласно какой функции времени должна происходить анимация каждого цикла между ключевыми кадрами. Она представляет собой математическую функцию, показывающую, как быстро по времени меняется значение свойства. Начальная точка имеет координаты 0.0, 0.0, конечная — 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону (рис. 1).

Синтаксис: animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps | cubic-bezier

  1. ease - Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется. Аналогично cubic-bezier(0.25,0.1,0.25,1).
  2. ease-in - Анимация медленно начинается, к концу ускоряется. Аналогично cubic-bezier(0.42,0,1,1).
  3. ease-out - Анимация начинается быстро, к концу замедляется. Аналогично cubic-bezier(0,0,0.58,1).
  4. ease-in-out - Анимация начинается и заканчивается медленно. Аналогично cubic-bezier(0.42,0,0.58,1).
  5. linear - Одинаковая скорость от начала и до конца.
  6. step-start - Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.
  7. step-end - Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
  8. steps - Ступенчатая функция, имеющая заданное число шагов.
    animation-timing-function: steps(<число>, start | end)
    Здесь: <число> — целое число больше нуля; start — задаёт полунепрерывную снизу функцию; end — задаёт полунепрерывную сверху функцию.
  9. cubic-bezier - Задаёт функцию движения в виде кривой Безье.

Chrome, Safari и Android поддерживают свойство -webkit-animation-timing-function.

Opera до версии 12.10 поддерживает свойство -o-animation-timing-function.

Firefox до версии 16 поддерживает свойство -moz-animation-timing-function.


animation-delay

Свойство animation-delay устанавливает время ожидания перед запуском цикла анимации. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации. Допустимо указывать несколько значений, перечисляя их через запятую.

Синтаксис: animation-delay: <время> [,<время>]*

Chrome, Safari и Android поддерживают свойство -webkit-animation-delay.

Opera до версии 12.10 поддерживает свойство -o-animation-delay.

Firefox до версии 16 поддерживает свойство -moz-animation-delay.


animation-delay

Свойство определяет, сколько раз проигрывать цикл анимации до её остановки.

Синтаксис: animation-iteration-count: infinite | <число>

  1. infinite - Анимация повторяется бесконечно.
  2. <число> - Сколько раз должна повторяться анимация. Отрицательные значения не допустимы. Можно использовать числа меньше единицы, для примера 0.5 будет означать половину цикла анимации.

Chrome, Safari и Android поддерживают свойство -webkit-animation-iteration-count.

Opera до версии 12.10 поддерживает свойство -o-animation-iteration-count.

Firefox до версии 16 поддерживает свойство -moz-animation-iteration-count.


Посмотрите как это круто:

animation-direction

Синтаксис: animation-direction: normal | alternate | reverse | alternate-reverse

  1. normal - Анимация идёт с самого начала, после завершения цикла возвращается к исходному состоянию.
  2. alternate - Анимация идёт с начала до конца, затем плавно возвращается в исходное положение.
  3. reverse - Анимация идёт с конца цикла, после его завершения возвращается к исходному состоянию.
  4. alternate-reverse - Анимация идёт с конца до начала, затем плавно возвращается в исходное положение.

Chrome до версии 43, Safari до версии 9 и Android поддерживают свойство -webkit-animation-direction.

Opera до версии 12.10 поддерживает свойство -o-animation-direction.

Firefox до версии 16 поддерживает свойство -moz-animation-direction.


animation-fill-mode

Определяет, какие стили должны применяться к элементу, когда анимация не проигрывается. Например, после её завершения или при остановке. По умолчанию, в момент окончания анимации стиль элемента возвращается к исходному, свойство animation-fill-mode позволяет изменить это поведение и сделать так, чтобы стиль элемента оставался как у последнего ключевого кадра.
К примеру, если вы делаете выезжающее из-за края окна браузера сообщение, то после окончания анимации сообщение вернётся обратно за край экрана. Значение forwards свойства animation-fill-mode изменяет это поведение и оставляет стили на момент завершения движения. Таким образом, сообщение плавно выдвинется из-за края окна и останется на месте.

Синтаксис: animation-fill-mode: none | forwards | backwards | both

  1. none - К элементу не применяются какие-либо стили.
  2. forwards - К элементу по окончанию анимации применяется стиль последнего ключевого кадра. Каким будет этот кадр в последовательности анимации зависит от комбинации значений свойств animation-direction и animation-iteration-count (таблицу копировать впадлу, ищите в инете).
  3. backwards - К элементу применяется стиль первого ключевого кадра и он остаётся на протяжении периода заданного animation-delay. Первый ключевой кадр определяется на основании значения animation-direction (таблицу лень копипастить).
  4. both - К элементу применяются оба правила, как для forwards, так и для backwards.

Chrome, Safari и Android поддерживают свойство -webkit-animation-fill-mode.

Opera до версии 12.10 поддерживает свойство -o-animation-fill-mode.

Firefox до версии 16 поддерживает свойство -moz-animation-fill-mode.

Вообще всё гениальное просто - просто ставьте both и не парьтесь над идиотскими таблицами, после выполнения анимации объект остановится и останется на месте.


animation-play-state

animation-fill-mode

Свойство определяет, проигрывать анимацию или поставить её на паузу. При продолжении установленной на паузе анимации она начинается с того момента где была остановлена.

Синтаксис: animation-play-state: running | paused

  1. running - Проигрывать анимацию.
  2. paused - Поставить анимацию на паузу.

Chrome, Safari и Android поддерживают свойство -webkit-animation-play-state.

Opera до версии 12.10 поддерживает свойство -o-animation-play-state.

Firefox до версии 16 поддерживает свойство -moz-animation-play-state.


animation

Универсальное свойство, которое задаёт сразу несколько параметров анимации. Вот теперь можно творить.

Синтаксис: animation: animation-name || animation-duration || animation-timing-function || animation-delay || animation-iteration-count || animation-direction || animation-fill-mode || animation-play-state

Значения: Любые комбинации значений, разделяемых между собой пробелом, определяющих параметры анимации.

Chrome, Safari и Android поддерживают свойство -webkit-animation.

Opera до версии 12.10 поддерживает свойство -o-animation.

Firefox до версии 16 поддерживает свойство -moz-animation.

Направление текста на странице

Синтаксис: writing-mode: horizontal-tb | vertical-rl | vertical-lr

Демонстрация:

horizontal-tb vertical-rl vertical-lr

ゲイも人です

死は状況から脱出する方法ではない

йоу

брат

йоу

брат

Японские и китайские символы переворачиваться отказываются, это большой минус данного свойства.

Internet Explorer 6 поддерживает нестандартные значения lr-tb и tb-rl, Internet Explorer 7 поддерживает значения lr-tb, rl-tb, tb-rl, bt-rl.

Chrome до версии 48, Opera до версии 35, Safari и Android поддерживают свойство -webkit-writing-mode.


Как отображать пробелы между словами

Использование: writing-mode: horizontal-tb | vertical-rl | vertical-lr

  1. normal - Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически.
  2. nowrap - Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление
    переносит текст на новую строку.
  3. pre - Текст показывается с учётом всех пробелов и переносов, как они были добавлены верстальщиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки.
  4. pre-line - В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область.
  5. pre-wrap - В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку.

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line и pre-wrap. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведёт себя как pre-line.

Opera до версии 9.5 не поддерживает значение pre-line. Для <textarea> значения normal и pre ведут себя как pre-wrap, а значение nowrap ведет себя как pre-line.

В Firefox для <textarea> значения normal, nowrap, и pre воспринимаются как pre-wrap.


Вид пустых ячеек в таблице

Использование: empty-cells: show | hide

  1. show - Отображает границу вокруг ячейки и фон в ней.
  2. hide - Граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком.

Можно применять к любым энеентам у которых display: table-cell

Internet Explorer до версии 7 включительно не поддерживает свойство empty-cells и отображает пустые ячейки всегда так, словно для них установлено empty-cells: hide.

Firefox версии 2 и ниже не прячет строку таблицы, если для всех ячеек задано empty-cells: hide и ячейки пусты.

Браузер Opera до версии 9.27 включительно не скрывает строку таблицы и для пустых ячеек отображает цвет фона.


Рендеринг текста

Свойство CSS-рендеринга текста предоставляет информацию движку рендеринга о том, что нужно оптимизировать для рендеринга текста.Браузер делает компромисс между скоростью, четкостью и геометрической точностью.

/* Значения ключевых слов */ text-rendering: auto; text-rendering: optimizeSpeed; text-rendering: optimizeLegibility; text-rendering: geometricPrecision; /* Глобальные значения */ text-rendering: inherit; text-rendering: initial; text-rendering: unset;

Свойство text-rendering является свойством SVG, которое не определено ни в одном стандарте CSS. Однако браузеры Gecko и WebKit позволяют применять это свойство к HTML и XML-контенту в Windows, Mac OS X и Linux.

Одним очень заметным эффектом является optimizeLegibility, который позволяет лигировать (ff, fi, fl и т. Д.) Текст размером менее 20 пикселей для некоторых шрифтов (например, Microsoft Calibri, Candara, Constantia и Corbel или семейство шрифтов DejaVu).

  1. auto - Браузер дает обоснованные предположения о том, когда следует оптимизировать скорость, разборчивость и геометрическую точность при рисовании текста. Различия в том, как это значение интерпретируется браузером, см. В таблице совместимости.
  2. optimizeSpeed - Браузер подчеркивает скорость рендеринга по удобочитаемости и геометрической точности при рисовании текста. Это отключает кернинг и лигатуры.
  3. optimizeLegibility - Браузер подчеркивает разборчивость по скорости рендеринга и геометрической точности. Это позволяет кернинг и необязательные лигатуры.
  4. geometricPrecision - Браузер подчеркивает геометрическую точность по скорости и четкости рендеринга. Некоторые аспекты шрифтов, такие как кернинг, не масштабируются линейно. Таким образом, это значение может сделать текст с использованием этих шрифтов хорошим.В SVG, когда текст масштабируется или уменьшается, браузеры вычисляют окончательный размер текста (который определяется указанным размером шрифта и применяемой шкалой) и запрашивают шрифт этого вычисленного размера из системы шрифтов платформы. Но если вы запрашиваете размер шрифта, скажем, 9 со шкалой 140%, результирующий размер шрифта 12.6 явно не существует в системе шрифтов, поэтому браузер округляет размер шрифта до 12 вместо. Это приводит к ступенчатому масштабированию текста.Но свойство geometricPrecision - если оно полностью поддерживается механизмом рендеринга - позволяет вам масштабировать текст. Для крупномасштабных факторов вы можете видеть менее красивый текстовый рендеринг, но размер - то, что вы ожидаете - ни округленный, ни вниз до ближайшего размера шрифта, поддерживаемого Windows или Linux.
    Примечание. WebKit точно применяет указанное значение, но Gecko оценивает значение так же, как optimizeLegibility.

Firefox обрабатывает geometricPrecision так же, как optimizeLegibility.

Примеры:

Это geometricPrecision. Это geometricPrecision. Это geometricPrecision. Это geometricPrecision. Это geometricPrecision. Это geometricPrecision. Это geometricPrecision. Это geometricPrecision. Это geometricPrecision. Это geometricPrecision. Это geometricPrecision. Это geometricPrecision. Это geometricPrecision. Это geometricPrecision. Это geometricPrecision. Это geometricPrecision. Это geometricPrecision. Это geometricPrecision. Это geometricPrecision.

Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed. Это optimizeSpeed.

Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility. Это optimizeLegibility.