Как стилизовать wrapper в css

Тип ввода «checkbox»

определяет флажок.

Флажки позволяют пользователю выбрать ноль или более вариантов из ограниченного числа вариантов.

Пример

<form> <input type=»checkbox» id=»vehicle1″ name=»vehicle1″ value=»Bike»>
<label for=»vehicle1″> У меня есть велосипед</label><br> <input
type=»checkbox» id=»vehicle2″ name=»vehicle2″ value=»Car»> <label for=»vehicle2″>
У меня есть машина</label><br> <input type=»checkbox»
id=»vehicle3″ name=»vehicle3″
value=»Boat»> <label for=»vehicle3″> У меня есть лодка</label>
</form>

Именно так приведенный выше HTML код будет отображаться в браузере:

У меня есть велосипед У меня есть машина У меня есть лодка

с фиксированным размером (no resize textarea)

По умолчанию пользователь может изменять размер текстовой области <textarea> (растягивать область ввода за край).

Для того, чтобы запретить изменение размера <textarea> используйте CSS свойство resize. Значение none поставит запрет на изменение размеров текстовой области, как ширины, так и высоты.

Если необходимо, чтобы у textarea была фиксированная ширина, установите значение у CSS свойства resize в vertical, при этом высоту области можно будет изменить. Если нужно иметь возможность изменять ширину <textarea> при фиксированной высоте, используйте значения horizontal.

Отображение в браузере:

HTML код <textarea> с фиксированной шириной и высотой

Управление шириной flex-элемента

Во Flexbox есть несколько CSS свойств, определяющих то, какая ширина может быть у flex-элемента.

CSS-свойство flex-basis

Данное свойство предназначено для установления начальной ширины flex-элементу. Задавать значение ширины можно посредством различных единиц измерения, таких как px, %, em и др. По умолчанию данное свойство имеет значение (в этом случае ширина элемента будет рассчитываться автоматически на основании его содержимого).

Конечная ширина flex-элемента будет определяться в зависимости от значений CSS-свойств и , которые установлены не только для этого элемента, но и для других flex-элементов этого flex-контейнера.

CSS-свойство flex-grow

Это свойство определяет, может ли начальная ширина flex-элемента увеличиваться (расти). Увеличение ширины flex-элемента осуществляется за счёт свободного пространства линии. В качестве значения CSS-свойства указывается целое число. Именно это значение и определяет (если оно больше или равно 1) какую часть свободного пространства flex-элемент заберёт себе.

Например:

<div class="flex-container">
  <div class="flex-container_element-1">...</div>
  <div class="flex-container_element-2">...</div>
</div>
CSS:
.flex-container {
  display: flex;
  width: 600px;
}
.flex-container_element-1 {
  flex-basis: 40%;
  flex-grow: 1;
}
.flex-container_element-2 {
  flex-basis: 40%;
  flex-grow: 4;
}

В этом примере, если flex-элементы расположены на одной линии и в ней есть свободное пространство (600×(1-0,8)=120px):

к ширине элемента добавится 1/5 часть этого пространства (120×1/5=24px);
к ширине элемента добавится 4/5 части этого пространства (120×4/5=96px).

Другими словами, CSS свойство позволяет не просто указать, что ширина flex-элемента может вырасти, но и задать, насколько эта величина может вырасти по отношению к другим элементам.

По умолчанию CSS свойство flex-grow имеет значение 0. Это означает, что flex-элемент не может расти (увеличивать свою ширину).

CSS-свойство flex-shrink

Данное свойство определяет, может ли ширина flex-элемента уменьшиться. Уменьшение ширины flex-элемента будет осуществляться только в том случае, если ширины линии будет не достаточно для отображения всех flex-элементов, расположенных в ней. Необходимая ширина рассчитывается на основании начальной ширины, который имеет каждый flex-элемент в ней.

Например:

<div class="flex-container">
  <div class="flex-container_element-1">...</div>
  <div class="flex-container_element-2">...</div>
</div>
CSS:
.flex-container {
  display: flex;
  width: 500px;
}
.flex-container_element-1 {
  flex-basis: 300px;
  flex-shrink: 1;
}
.flex-container_element-2 {
  flex-basis: 300px;
  flex-shrink: 3;
}

Ширина flex-контейнера 500px. Для отображения flex-элементов необходимо 600px. В итоге не хватает 100px. В этом примере уменьшаться могут 2 flex-элемента ( и ). Ширина первого flex-элемента в данном случае составит 300 – 1/4*100= 275px. Ширина второго flex-элемента в данном случае составит 300 – 3/4*100= 225px.

Значение по умолчанию:

flex-shrink: 1;

Если вам необходимо запретить уменьшение ширины flex-элементу, то в качестве значения свойства необходимо указать число 0.

CSS-свойство flex

Для удобной установки , и можно использовать CSS свойство .

Значение по умолчанию:

flex: 0 1 auto;
/*
  0 - flex-grow (1 значение)
  1 - flex-shrink (2 значение)
  auto - flex-basis (3 значение)
*/

3D трансформация средствами CSS

Ничто так не радует глаз, как впечатляющая 3D демонстрация средствами CSS. И хотя применение подобной трансформации вне демонстрации или сайтов-портфолио очень спорно, 3D CSS предлагает мощную функциональность дизайнерам и разработчикам, которая поможет завоевать сердца пользователей, если она грамотно реализована.

Взгляните на код следующего примера:

CSS

.container{

	/* Насколько выраженными должны быть 3D эффекты */
	perspective: 800px;
	-webkit-perspective: 800px;

	background: radial-gradient(#e0e0e0, #aaa);
	width:480px;
	height:480px;
	margin:0 auto;
	border-radius:6px;
	position:relative;
}

.iphone-front,
.iphone-back{

	/* Включаем 3D трансформацию */
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;

	/* Мы используем два отдельных элемента div для передней и задней панелей телефона. Следующий код скрывает элемент div, когда тот переворачивается, чтобы отобразить обратную сторону: */

	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	width:200px;
	height:333px;

	position:absolute;
	top:50%;
	left:50%;
	margin:-166px 0 0 -100px;

	background:url(https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/iphone.png) no-repeat left center;

	/* Анимация переходов */
	transition:0.8s;
}

.iphone-back{

	/* Задняя панель по умолчанию перевёрнута на 180 градусов */
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);

	background-position:right center;
}

.container:hover .iphone-front{
	/* Когда мышь находится над контейнером, переворачиваем переднюю панель и прячем её, ... */
	transform:rotateY(180deg);
	-webkit-transform:rotateY(180deg);
}

.container:hover .iphone-back{
	/* ... в то же время, делая видимой заднюю панель */
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
}

Этот код сделан на основе нашей формы входа в стиле Apple. Если вы хотите узнать о 3D трансформациях в CSS подробнее, посмотрите эту детальную инструкцию. Если вам не нужна поддержка старых версий IE, остальные браузеры поддерживают её достаточно широко.

Генерация контента и счётчики

Генерация контента – мощный инструмент в руках разработчиков – стала доступной, благодаря псевдо-элементам ::before и ::after. Эта функция позволяет вам использовать меньше кода HTML для достижения тех же результатов.

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

CSS3 также даёт псевдо-элементам доступ к счётчикам, которые могут увеличиваться с помощью правила CSS. Они также могут получить доступ к атрибутам родительских элементов, содержащих их. Смотрите код примера ниже.

HTML

<div class="container">
	<span data-title="У меня прекрасный заголовок!">Это элемент</span>
	<span data-title="Эти заголовки показываются только с использованием CSS, никакого JavaScript!">Это элемент</span>
	<span data-title="Привет!">Это элемент</span>
	<span data-title="Генерация контента – это здорово!">Это элемент</span>
</div>

CSS

.container{

	/* Установка счётчика cnt на 0 */
	counter-reset: cnt;

	position:relative;
	text-align:center;
	padding:20px 0;
	width:420px;
	height: 160px;
	margin: 0 auto;
}

/* Вы можете применить стили к псевдо-элементам и задать их контент так, как если бы они были реальными элементами на странице */

.container::before{
	display: block;
	content:'Наведите мышь на эти элементы:';
	font-size:18px;
	font-weight:bold;
	text-align:center;
	padding:15px;
}

.container span{
	display:inline-block;
	padding:2px 6px;
	background-color:#78CCD2;
	color:#186C72;
	border-radius:4px;
	margin:3px;
	cursor:default;
}

/* Создание счётчика псевдо-элементов */

.container span::after{

	/* Каждый раз, когда выполняется это правило, значение счётчика увеличивается на 1 */
	counter-increment: cnt;

	/* Добавление значения счётчика как часть контента */
	content:" #" counter(cnt);

	display:inline-block;
	padding:4px;
}

/* Псевдо-элементы могут даже получать доступ к атрибутам своих родительских элементов */

.container span::before{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	content:attr(data-title);
	color:#666;

	opacity:0;

	/* Анимация переходов */
	-webkit-transition:opacity 0.4s;
	transition:opacity 0.4s;
}

.container span:hover::before{
	opacity:1;
}

Генерация контенте поддерживается везде, включая IE9 и выше.

Адаптивная верстка CSS

Специалисты называют такую адаптивную верстку самой правильной с технической точки зрения. К тому же, через CSS сделать это проще. Вот, например, как создать шапку или любой другой элемент. В этом случае находим хорошее изображение и задаем ему свойство растягиваться по всему экрану. По правилам HTML5 — просто упаковываем картинку в div.

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

Однако на этом верстка не заканчивается, ведь нужно задать предельную ширину для max/min разрешения. В противном случае при изменении типа экрана, изображение потеряет качество.

Добавляем в код автоматическое свойство margin для внешнего отступа на всех 4-х сторонах элемента. Задаем width в 1000px, максимальную ширину элемента max-width в 90% и минимальную ширину в 50px.

Тем самым грани контейнера вместе с изображением будут меняться только в пределах 500-1000px.

Усложняем задачу — сделаем мини-галерею. Принципы верстки остаются те же. Делаем такой же контейнер, упакованный в <div class=image_gallery>.

В CSS прописываем то же, что и в первом случае.

Таким образом, каждое изображение будет работать по правилам контейнера, и изменять свой размер в зависимости от экрана пользователя. Для улучшения качества между картинками ставится отступ в 1%.

Остается немного доработать верстку. В частности, на экранах смартфонов изображения в галерее могут отображаться слишком мелко.

Верстаем адаптивный сайт

Используя такой подход, удастся сверстать сайт целиком. По сути, web-страница состоит из 3-х основных элементов — хедера, центрального блока с сайдбарами и подвала. Условно можно задать контрольные точки breakpoints для:

скрывания шапки;
помещения сайдбара под контейнер;
оптимизации элементов верхней части страницы.

Должна получиться такая вот страничка.

Теперь нужно доработать раздел <head> — добавить обязательные файлы (библиотеку джава, ссылки на применяемые шрифты). Чтобы не прописывать префиксы Chrome, Safari и т. д, добавляем плагин PrefixFree.

Также нужно разместить в <header> необходимые элементы — лого, верхнее меню, поиск.

Блок с оглавлением статьи обертываем в <article>.

Для боковой колонки прописываем <aside> — размещаем рубрики и другие необходимые элементы. В футер можно поместить значок копирайта, социальные кнопки и контактные данные.

Отдельная работа должна проводиться по медиа-запросам. Они помогут улучшить отображение сайта на экранах с минимальным разрешением. Другими словами, это правила адаптации для каждой возможной ширины экрана. А их бывает, как известно, несколько — вот эти самые важные. Рекомендуется все их прописать через @media screen и внести правила элементов для каждого разрешения.

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

Поэтому используем короткие строки, которые лучше воспринимаются посетителями. В интернете хорошо заходят строки, размером 40-50 символов.

Что касается размера шрифта, то здесь будет немного сложнее. Из-за того что контент в такой верстке применяется для всех экранов, символы могут отображаться слишком маленькими или большими, в зависимости от скрина устройства. Частично данная задача решается применением стандартных, а не пользовательских шрифтов. Правда, дизайн не будет смотреться изысканно, но и посетителям не придется ждать загрузки файла со шрифтами.

Используем свойство Display: Contents

Для начала я вас познакомлю с этим значением. Каждый элемент в CSS является блочным; и этот блок содержит контент, границы, внутренние и внешние отступы. Если вы примените display: contents, этот блок будет исключен из потока. Я могу представить это как удаление открывающего и закрывающего тэгов вокруг него.

CSS

<header class="site-header">
    <div class="wrapper site-header__wrapper">
            <!-- Header content -->
    </div>
</header>

CSS

.site-header__wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

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

CSS

.site-header__wrapper {
  display: contents;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

Таким способом элемент wrapper будет скрыт (в каком-то смысле). Теперь, когда мы применили display: flex к элементу site-header, объекты, принадлежавшие контейнеру, станут дочерними для элемента site-header.

Свойство overflow

Свойство позволяет взять под контроль переполнение элемента и подсказать браузеру, как он должен себя вести. Значение overflow по умолчанию – , что означает — «показывать контент, когда он выходит за границы блока».

Чтобы обрезать контент выходящий за пределы блока, вы можете установить . Это свойство делает именно то, о чём говорит: скрывает выходящий за пределы контент. Помните, что это может сделать часть содержимого невидимым. Используйте данное значение только в том случае, если скрытие содержимого не вызовет проблем.

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

Удалите часть содержимого из поля ниже

Обратите внимание, что полосы прокрутки остаются, даже если прокрутка не требуется

В приведённом выше примере нам нужно прокручивать содержимое только по оси , однако мы получаем полосы прокрутки по обеим осям. Вы можете использовать свойство (en-US), которое позволяет прокручивать содержимое только по оси .

Вы также можете установить прокрутку по оси x с помощью (en-US), но это не рекомендуемый способ отображения длинных слов! Если у вас есть длинное слово в маленьком поле, вы можете использовать свойства или . Кроме того, некоторые методы, описанные в разделе Изменение размеров в CSS, могут помочь вам создавать блоки, которые лучше масштабируются с различным объемом содержимого.

Как и в случае со , вы получаете полосу прокрутки независимо от того, достаточно ли содержимого для её появления.

Примечание: вы можете точно задать прокрутку по осям x и y, используя свойство , передав два значения. Первое значение будет относиться к , а второе — к . Если передать одно значение, то и получат одинаковые значения. Например, устанавливает в и в .

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

В приведённом ниже примере уменьшите количество содержимого так, чтобы оно поместилось в поле. Вы должны увидеть, что полосы прокрутки исчезнут.

Границы в виде изображений

Свойство border-image позволяет вам отображать нестандартные границы вокруг элементов. Границы содержатся в единственном изображении (спрайте), где каждый регион изображения соответствует определённой части границы. В следующем примере изображение используется в качестве границы.

CSS

p{
	text-align:center;
	padding:20px;
	width:340px;
	margin: 0 auto;

	/* Установка свойств границы и изображения для границы */
	border:30px solid transparent;
	border-image:url(https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/border.png) 30 30 round;
}

Для более подробной информации, посмотрите страницу на MDN и эту статью про трюки CSS. Границы в виде изображений поддерживаются во всех основных браузерах и IE11.

Использование процентной ширины для контейнера

Я получил ответ об использовании процентной ширины (типа max-width: 90%) для контейнера, вместо добавления padding-left и padding-right.

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

CSS

.wrapper {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* Медиа-запрос для большого экрана */
@media (min-width: 1170px) {
  .wrapper {
    max-width: 1170px;
  }
}

Применяя процентную ширину, мы совершаем дополнительный шаг. Можно легко избежать этот шаг, используя фиксированное значение ширины. Другое решение говорит, что мы можем совместить width: 90% со свойством max-width: 1170px.

CSS

.wrapper {
  width: 90%;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}

Это довольно интересный подход, но я бы предпочел самостоятельно добавить padding, вместо того чтобы полагаться на процентную ширину.

Объединение ячеек в таблице HTML

В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.

Чтобы объединить ячейки по горизонтали используйте атрибут colspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.

Чтобы объединить ячейки по вертикали используйте атрибут rowspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.

Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:

Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке . Например, если в таблице 3 колонки с ячейками , и мы объединяем первую и вторую ячейку, то всего внутри тега
, определяющего данную строку будет 2 элемента , первый из них будет содержать атрибут colspan=»2″

Без проблем тут не обойтись

Это довольно-таки маленькая проблема (даже две), но всё-таки проблема:

Так как ширина относится только к самому элементу, ширины колонок будут по 49% от ширины их родителя + 2em для правого и левого внутреннего отступа (padding). Возможно, 2em — это шире, чем 1%, и в результате, колонки станут шире и не будут соответствовать друг-дружке.
То же самое касается и ширины полей для ввода (input). width: 100% означает, что их ширина будет такой же, как у основного контента их родителей. Но дополнительно к этому значению есть еще 16 пикселей горизонтальных отступов и 4 пикселя горизонтальных границ, так что они будут на 20 пикселей шире желаемого значения.

box-sizing спешит на помощь

Вот где без box-sizing не обойтись. Он легко решит эту проблему. Просто пропишем это свойство полям ввода (input):

.text {
    box-sizing:border-box;
    width:49%;
    float:right;
    padding:1em;
    background:#fff;
}
.text:first-child {float:left;}
.text input {
    box-sizing:border-box;
    width:100%;
    padding:8px;
    border:2px solid #cce;
}

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

Я создал простенькую страничку, демонстрирующую эту технику.

Слишком длинная строка на больших экранах

Будет очень сложно читать текст абзаца на больших экранах, так как строка слишком длинная. Сайт «Элементы типографического стиля, используемые в сети» рекомендует, чтобы в строке было 45-75 символов. Чем дальше от этого диапазона, тем сложнее будет читать текст, представленный на веб-странице.

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

HTML

<section class="hero">
  <div class="hero__wrapper">
    <h2>How to make bread at home</h2>
    <p>...</p>
    <p><a href="/sign-up">Sign up</a></p>
  </div>
</section>

Я использовал класс hero__wrapper, так как этот контейнер может принадлежать только первой секции (Hero Section), поэтому его ширина может быть меньше ширины других контейнеров.

CSS

.hero__wrapper {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

Для центрирования содержимого вы можете применить любой метод, который хотите, в зависимости от варианта использования. В этом примере будет достаточно применить text-align: center, чтобы расположить контент в центре.

Поля и интервалы таблицы

По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS.
Поле ячейки (padding) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу <td> или <th>.
Интервал ячеек (border-spacing) — это расстояние между ними (<td> или <th>). Сначала присвойте значение separate свойству border-collapse элемента <table>, а затем установите расстояние между ячейками, изменив значение параметра border-spacing. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента <table>, но в спецификации HTML5 они были признаны устаревшими.

Пример использования padding и border-spacing:

Пример: Применение свойств padding и border-spacing

Результат
HTML-код
Попробуй сам »

padding — это расстояние между содержимым ячейки и ее границей (желтый цвет)
Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

border-spacing — это расстояние между ячейками (зеленый цвет)
Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

	Примечание: Если к таблице применено свойство border-collapse: collapse, то интервал ячеек (border-spacing) не сработает.

Адаптивный фон, фиксированный контент

В своей книге о секретах CSS Лия Веру предложила интересную технику, которая может быть использована для секций с адаптивным фоном (фон, занимающий всю ширину окна просмотра), внутри которых есть контейнер. Давайте рассмотрим распространенный способ, позволяющий сделать это:

HTML

<section>
  <div class="wrapper"></div>
</section>

CSS

section {
  background-color: #ccc;
}

.wrapper {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

Принцип работы margin-left: auto и margin-right: auto заключается в вычислении половины ширины окна просмотра и вычитании из неё ширины контента. То же самое можно сделать, используя padding.

CSS

section {
  padding: 1rem calc(50% - 585px);
}

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

CSS

section {
  padding: 1rem;
}

@media (min-width: 1170px) {
  section {
    padding: 1rem calc(50% - 585px);
  }
}

В качестве альтернативного решения можно использовать новую функцию CSS max(). Мы просто устанавливаем минимальный padding размером в 1rem, а вычисление 50% — 585px будет использовано в качестве другого значения.

CSS

section {
  padding: 1rem max(1rem, (50% - 585px));
}

Относительные значения

В адаптивном шаблоне использование относительных величин может существенно упростить код CSS и улучшить внешний вид дизайна.

Относительные поля

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

Относительный размер шрифта

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

Относительные отступы

Нижеприведенный рисунок демонстрирует преимущества использования относительного значения в % для отступов. Блок слева имеет несбалансированное пространство при применении абсолютных величин в px. Блок справа имеет отличный вид с пропорциональным заполнением содержанием.

Анимация и переходы средствами CSS

Анимация средствами CSS наконец-то доступна во всех основных браузерах, даже в IE (начиная с 10 версии). Есть два способа создания анимации в CSS.

Первый очень прост, он осуществляется через анимацию изменений свойств CSS с помощью декларации transition (переход). С помощью переходов вы можете создать эффекты наведения мыши или нажатия кнопки мыши, или вы можете запустить анимацию, изменив стиль элемента с помощью JavaScript. В примере ниже переход осуществляется при наведении мыши на планету, это вынудит ракету приблизиться.

Второй способ определения анимации немного сложнее – он подразумевает описание особых моментов анимации с помощью правила @keyframe. Это позволит вам создать повторяющуюся анимацию, не зависящую от действий пользователя и не запускаемую при помощи Javascript.

CSS

.container{
	width: 300px;
	height:300px;
	margin: 0 auto;
	position:relative;
	overflow:hidden;
}

.planet{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/planet.png) no-repeat center center;
}

.rocket{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(https://demo.tutorialzine.com/2013/10/css3-features-you-can-finally-use/assets/img/rocket.png) no-repeat 50px center;

	/* Chrome всё ещё требует префикса -webkit- */
	-webkit-animation:orbit 2s linear infinite;
	animation:orbit 2s linear infinite;

	transition:background-position 0.8s;
}

.container:hover .rocket{
	background-position:80px center;
}

/* Определяем правила keyframes анимации */

@-webkit-keyframes orbit {
	from {
		-webkit-transform:rotate(0deg);}
	to {
		-webkit-transform:rotate(360deg);
	}
}

@keyframes orbit {
	from {
		transform:rotate(0deg);

		/* Здесь включены свойства -webkit-transform, потому что
Chrome может начать поддерживать keyframe без префикса в будущем, но нет уверенности, что он станет поддерживать безпрефиксные свойства transform */

		-webkit-transform:rotate(0deg);}
	to {
		transform:rotate(360deg);
		-webkit-transform:rotate(360deg);
	}
}

Вы ещё много чего можете узнать про анимацию средствами CSS. Я советую начать с этой статьи в Mozilla Developer Network (MDN). Если вас интересует поддержка браузерами, смотрите эту таблицу совместимости.

Создание формы в HTML

Для того чтобы создать простую HTML форму, нужно поместить в код страницы тег <form> и разместить внутри него элементы формы.

Тег <form> является корневым элементом HTML формы. Все элементы формы должны находиться внутри тега <form>, либо быть связанными с формой при помощи атрибута form, содержащего идентификатор формы (значение атрибута id тега <form>).

Элементы формы (другое название — поля) формируются с помощью тегов группы form. Основные типы элементов описаны ниже на этой странице. Подробное описание всех типов полей форм находится на страницах тегов соответствующих элементов.