Css уроки, 4 часть: блочная модель, рамки, границы, отступы

CSS отступы (padding)

Отступ (padding) используется для того, чтобы освободить место между содержимым элемента и его рамкой border.

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

Для значения свойства padding используются:

• числа, за которыми следуют их единицы измерения (px, pt, em и т.д.);
• проценты (%) — размер отступа рассчитывается как процент от размера элемента;
• ключевое слово auto.

Определение индивидуальных отступов

Каждый из четырех отступов может быть задан отдельно:

Таким образом, верхний отступ станет 30 пикселей, правый — 25, нижний — 20, и левый — 15 пикселей.

Использование сокращенной записи

Как и margin, padding может быть установлен сокращенным способом:

• padding: 25px 30px 20px 15px; Когда padding использует четыре значения, они означают соответственно верхний, правый, нижний и левый отступы.
• padding: 30px 20px 15px; Три значения соответствуют верхнему, (левый и правый — равные, вторая величина) и нижнему отступу.
• padding: 30px 20px; Padding с двумя значениями используется, когда верхний отступ равен нижнему (первая величина), а левый — равен правому отступу (второе значение).
• padding: 25px; Если все отступы равны, они могут задаваться только одним значением padding.

Несколько примеров

Отступ в ячейках таблицы. Таким образом, рамка текстового поля не разбивается:

Смещение заголовка, чтобы избежать наложения на фоновое изображение:

Читайте далее: CSS уроки, 5 часть: фон, позиция

Post Views:
2 013

Примеры с различными границами рамок CSS border

2.1. Пример. Разные стили оформления границы рамки border-style

Вот как это выглядит на странице:

border-style: dotted
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

Вот как это выглядит на странице:

При наведении курсора мыши на блок цвет рамки изменится

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P), где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

Основы

Наиболее часто используемая запись для свойства примерно следующая:

border: 1px solid #000;

Эта запись придаст элементу рамку толщиной в 1px, сплошную, и залитую черным цветом (#000).

Также эту строку можно записать и в более расширенном варианте, когда мы укажем каждое значение свойства border отдельно:

div {
border-width: 1px;
border-style: solid;
border-color: #000;
}

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

Например, если мы возьмем значение border-width, то его можно «разложить» на несколько записей: border-top-width, border-left-width, border-bottom-width, border-right-width.

Или же, немного расширить его короткую запись (border-width: 1px;):

border-width: 1px 1px 1px 1px;

То есть мы получаем полный контроль над каждой стороной элемента!

P.S. Значение в стилях читаются по часовой стрелке: верх, право, низ, лево.

Закругление рамки-границы (border-radius)

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

Также, как и предыдущие свойства, свойство border-radius можно записать в сокращенном варианте, например:

border-radius: 7px;

а можно и более подробно:

border-radius: 7px 7px 7px 7px;

или еще более подробно:

border-top-left-radius: 7px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;

В качестве примера возможностей свойства, нарисуем лимон только при помощи CSS:

.limon {
width: 225px;
height: 215px;
border: 3px solid #ff0;
border-radius: 10px 155px 30px 145px;
}

Свойство изображения (стиль) для рамки

Существует несколько общих правил для придания границе стиля. Это: (пунктир), (штриховка), (сплошная линия), (двойная линия), (линия с выемкой), (линия с коньком), (внутренний скос), и (внешний скос).

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

div {
  border-image-source: url('kartinka.png');
}

Или же градиент:

div {
  border-image-source: linear-gradient(20deg, #2582e1 20%, #ff9933 80%);
}

В браузере получится нечто подобное:

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

div {
/* значения для: top right bottom left */
border-image-slice: 10 8 15 7; 
}

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

Короткая запись всех рассмотренных выше свойств изображения в качестве рамки выглядит примерно так:

div {
/* border-image-source, border-image-slice, /border-image-width/, border-image-outset, border-image-repeat */
  border-image: linear-gradient(20deg, #2582e1 20%, #ff9933 80%) 5 / 25px / 0 round;
}

Сохраняйте жёсткую структуру ваших стилейСкопировать ссылку

Это приводит нас к структуре. Старайтесь избегать плоской DOM-структуры для вашей иллюстрации. Сохранение вещей атомарными позволяет проще двигать части вашей иллюстрации. А ещё так гораздо проще показывать или прятать части иллюстрации или даже потом анимировать их. Рассмотрим демо CSS Snorlax. Руки, ноги, голова и прочие части являются отдельными элементами. Это сделало анимирование руки гораздо проще, чем если бы я пытался держать всё вместе, так как я смог просто применить анимацию к классу .

Вот ускоренная запись того, как я делал это демо:

Попытался собрать таймлапс создания CSS Snorlax, которого мы делали вчера ночью. Забавно пересматривать! @jh3yy

Настройка CSS-анимации с помощью ключевых кадров

Начнем с создания CSS-анимации, которая определяется ключевыми кадрами .

@keyframes wipe-enter {
  0% {
    transform: scale(0, .025);
  }
  50% {
    transform: scale(1, .025);
  }
}

Анимацию можно назвать как угодно, пусть будет . Здесь HTML-элемент будет увеличиваться в ширину, а затем в высоту.

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

CSS-класс пусть будет заключён в медиа-запрос . Это обеспечит запуск анимации только в том случае, если пользователь не ограничил её и не включил параметр «уменьшить движение» в своей операционной системе.

В этом примере будет анимирован HTML-элемент квадратной формы:

See this code CSS-animation width+height demo on x.xhtml.ru.

Для CSS-анимации можно использовать сокращённое написание свойства , например:

Как создать баннер для сайта

1. Онлайн-сервисы

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

Представлю два бесплатных, понравившихся мне сервиса.

Banner FANS

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

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

Для текстового объявления доступен богатый набор шрифтов, но кириллицу поддерживают только из семейства Stock.

Удобный сервис, позволяющий быстро создать простой и без излишеств баннер для своего сайта.

Гифовина

Gifovina.ru — этот сервис тоже предельно прост в работе, и, в отличие от предыдущего, может создавать анимационные: баннер, аватарку или слайд-шоу со сменой картинок. Просто добавьте картинки в очередь нажав на кнопку «Добавить кадр«.

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

2. Специальный софт

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

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

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

Ulead Gif Animator

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

Работа со слоями (как в фотошопе), многочисленные инструменты и эффекты вполне позволяют это осуществить.

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

Easy GIF Animator Pro

Этот софт проще, чем предыдущий.

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

Вот мой баннер, созданный в Easy GIF Animator Pro менее чем за минуту:

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

3. Заказать дизайнерской студии или фрилансеру

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

Результирующий продукт определяется полетом фантазии дизайнера и суммой, которую готов заплатить заказчик.

Хорошего исполнителя заказа вы быстро найдете на биржах фриланса, например таких как frilans.ru.

4. Вручную в графическом редакторе

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

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

Фотошоп

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

Microsoft Power Point

Программа, входящая в установочный пакет Microsoft Office. Высока вероятность того, что она у вас уже установлена вместе с Microsoft Office Word.

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

Paint.net

Бесплатный и довольно популярный графический редактор. Отличная замена платным программам для выполнения работ с графическими изображениями.

https://youtube.com/watch?v=lM3nwmlZy68

6. Управление направлением

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

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

Это говорит браузеру: «Для всех элементов с атрибутом , которые либо не имеют атрибута , либо имеют со значением, которое начинается с “наверх”: применить эти стили к своему псевдониму .»

Мы используем шаблон, так что они могут быть распространены на другие flow без необходимости повторять CSS. Этот шаблон использует сопоставитель (начинается с). Это позволяет стилям также применяться к up-right и up-left (вправо-вверх и влево-верх), вы можете захотеть использовать такие направления. Мы не будем описывать их здесь, но вы можете увидеть, как они используются в моей оригинальной демонстрации всплывающей подсказки в CodePen.

Ниже перечислены блоки CSS для всех четырех направлений, рассматриваемых в этом уроке.

7. Анимируем всё

Анимация просто потрясающая штука. Анимация может:

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

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

@keyframes

Нам понадобятся два вида анимации . Подсказки вверх/вниз будут использовать keyframe , а подсказки влево/вправо будут использовать keyframe

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

Мы просто хотим управлять тем, куда они направляются.

Теперь нам нужно применить эти keyframe к подсказкам, когда пользователь наводит курсор мыши на элементы с атрибутами . Поскольку мы используем различные направления для управления отображением всплывающих подсказок, нам необходимо определить эти возможности в стилях.

Используйте :hover, чтобы передать управление анимации

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

Обратите внимание на ключевое слово в объявлении анимации. Это говорит анимации не сбрасываться после одного выполнения, а двигаться вперед и оставаться до конца

Тень от изображения.

Чтобы создать эффект тени, используется свойство box-shadow.

Первое значение —  это сдвиг тени по оси X.

Второе значение – это сдвиг тени по оси Y.

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

Четвёртое значение – растяжение тени. По умолчанию тень того же размера, что и элемент.

Пятое значение – цвет тени. Цвет тени можно задать как в  RGB-формате так и в RGBA-формате. По умолчанию цвет чёрный.

img {width: 300px;height: 150px;border: 1px solid #000;border-radius: 10px;box-shadow:5px 5px 10px #2B1015;
}

Обтекание изображения текстом.

Для наглядности в index.html добавьте текст.

<!DOCTYPE html><html>     <head>          <meta charset=»utf-8″>          <link rel= «stylesheet» type= «text/css» href= «style.css» />          <title>Изображения</title>     </head>     <body>          <img src=»images/img1.jpg»>          <p>Это текст, который обтекает изображение справа.</p>          <p>Для наглядности напишем несколько абзацев</p>          <p>Абзац первый</p>          <p>Абзац второй</p>          <p>Абзац третий</p>          <p>А этот абзац обтекает изображение уже снизу.</p>     </body> </html>

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

А для того, чтобы текст не прилипал к изображению, используем свойство margin-right.

img {width: 300px;height: 150px;border: 1px solid #000;border-radius: 10px;box-shadow:5px 5px 10px #2B1015;float: left;margin-right: 20px;
}

3. Dink

Я не знаю, какое отношение имеет к этому «dink, но я всегда называл это так. Эта маленькая, треугольная, заострённая часть, придающая подсказкам вид, как у пузыря с диалогом, указывающая туда, откуда оно  появилось. Заметьте, что мы используем прозрачный цвет () для границы; мы добавим цвет позже, также как и зависимость подсказки от направления .

Это не опечатка, что значение свойства имеет пустую строку — . Нам там ничего не нужно, но нам нужно это свойство для работы псевдо-элемента.

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

CSS Быстрый совет: Рисование и использование CSS треугольников Joren Van Hee/Йорен Ван Хи

Работа с неудобными фигурамиСкопировать ссылку

Есть довольно неплохая статья на CSS-Tricks про создание фигур с помощью CSS. Но как насчёт более «неуклюжих» фигур, таких как длинная кривая или даже обводка? В таких случаях нужно мыслить нестандартно. Такие свойства, как , и  — отличные помощники.

Посмотрим на демо CSS Jigglypuff. Нажмите на чекбокс.

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

Как мы можем сделать обводку? Это уже немного сложнее. Но мне нравится следующий приём: используйте прозрачный элемент с толстой рамкой. Затем примените и обрежьте лишнее, если нужно.

Если вы нажмёте на чекбокс, покажется элемент, который мы используем для обводки этого угла. Другой приём может заключаться в том, чтобы наложить поверх круг, совпадающий по цвету с фоном. Это нормально, пока нам не понадобится изменить цвет фона. Хорошо, если у вас есть переменная или что-то вроде для этого цвета. Но такой подход слегка сложнее поддерживать.

border — оформление границ элемента

CSS-свойство предназначено для управления оформлением границ элемента. Границы располагаются перед фоном элемента.

– это универсальное свойство для стилизации границ (рамки) вокруг элемента. Оно позволяет установить сразу три характеристики: толщину границ (), стиль линий () и цвет ().

Например:

состоит из трёх других свойств (в скобках приведены значения каждого из них, которые они имеют по умолчанию):

• (medium);
• (none);
• (currentcolor).

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

При установке меньшего количества значений:

Как Google Web Designer упрощает рабочие задачи

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

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

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

— Можно проводить А/В тесты, анализировать поведение и реакцию нашей аудитории, обновлять баннеры так часто, насколько это требуется, чтобы увеличить показатели эффективности рекламы.

— Теперь, благодаря GWD, совсем не обязательно владеть JavaScript, CSS и HTML для того, чтобы создать баннер HTML5.

— Интерфейс интуитивно понятен. Например, если вы уже знакомы с интерфейсами Adobe Photoshop и Illustrator, то разобраться в интерфейсе GWD вам будет еще проще.

— Приложение бесплатное и постоянно обновляется. Дополнительную информацию об использовании GWD и его функциях можно найти в . Она доступна и на русском языке.

Функции сдвига

С помощью -функций можно переместить элемент по горизонтали или по вертикали вдоль осей X и Y:

Можно использовать любые единицы измерения расстояния. Проценты будут отсчитываться от размеров самого элемента, таким образом, блок с высотой 100px функция при использовании будет сдвинут на 80px.

Для сдвига в третьем направлении существует :

Возьмем три элемента – , и – и спозиционируем их абсолютно в одной точке. К применим , а к – . Результат довольно скучный:

Повернем весь родительский контейнер по z-оси, чтобы понять, что происходит:

Функция позволяет сдвинуть элемент по всем трем осям одновременно:

Как сделать баннер на сайте.

Итак, теперь расскажу и покажу как сделать баннер на сайте с помощью данного скрипта.

Давайте сначала разберемся как сделать баннер и куда его поставить.

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

Что такое баннер!? Это графическое изображение рекламного характера, предназначен для привлечения клиентов, а также для информирования и позитивного имиджа. Виды баннеров — статический (jpeg, png), анимационный (gif) и флеш — баннер. Я знаю только эти, ну и для сайта в основном, только такие создают.

Статический баннер в формате jpeg или png сделать можно с помощью любого текстового редактора, я использую программу PicPic или  Adobe Photoshop CS5.1. Если вы решили создать свой баннер с нуля, то конечно делать нужно в программе Photoshop. Могу порекомендовать видеокурс по созданию баннеров, мне очень понравился. Возможно изучу до конца курс и пойду работать на фриланс )))

Придерживайтесь подходаСкопировать ссылку

Это, безусловно, самая сложная вещь. Какой подход вы используете к CSS-иллюстрации? С чего начинаете? Должны ли вы начать с внешней части и идти внутрь картинки? Это работает не так хорошо, как хотелось бы.

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

Я склонен соотнести свой подход с тем, как если бы вы создавали векторное изображение, в котором иллюстрация состоит из слоёв. Разделите её и нарисуйте на бумаге, если нужно. Но начните снизу и прорабатывайте свой путь наверх. Это обычно означает более крупные фигуры сначала, а более мелкие детали — позже. Вы всегда можете повозиться с контекстом наложения, когда вам нужно подвигать элементы.

Многоступенчатые анимации

Эффект задержки

Можно устанавливать задержки, при помощи: animation-delay

Также можно использовать функции времени как и в ключевых кадрах, так и для анимации в целом. Как при помощи кривой Бизье, так и при помощи ключевых слов. Задается с помощью: animation-timing-function

Количество повторений задается при помощи: animation-iteration-count

Для бесконечных повторений указываем:

Для возвращения к начальному состоянию плавно, можно воспользоваться:

Чтобы анимация застыла в конечном состоянии, можно воспользоваться:

Также animation можно записывать и короткой записью.

Анимацию можно поставить на паузу, например:

Пример, эффект набора текста и мигающего курсора в CSS

Пример анимация по кругу без вращения предмета:

Описание

CSS свойство позволяет добавить одну или более тень для блока. Тень блока не влияет на размер и расположение самого элемента (несмотря на то, что тень может быть расположена далеко за его пределами), но она может перекрываться другими элементами, расположенными в коде после текущего элемента, или перекрывать другие элементы, расположенные в коде перед текущим элементом.

Для каждой тени можно задать от 2 до 6 параметров. Если добавляется несколько теней, то список параметров для каждой тени указывается через запятую:

div {
  width: 300px;
  height: 200px;
  margin: 100px;
  background-color: silver;
  box-shadow: 0 0 10px 5px black,
              40px -30px 15px lime,
			  40px 30px 50px red,
			 -40px 30px 15px yellow,
			 -40px -30px 50px blue;
}

Попробовать »

При наложении теней друг на друга каждая последующая тень в списке будет располагаться под предшествующей.

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

Примечание: для добавления тени к тексту используйте CSS свойство text-shadow.

Значение по умолчанию:	none
Применяется:	ко всем элементам
Анимируется:	да
Наследуется:	нет
Версия:	CSS3
Синтаксис JavaScript:	object.style.boxShadow=»10px 10px 5px #888888″

Преобразования

Перемещение

transform в данном примере — смещает прямоугольник на 100 px вниз и вправо.

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

также есть функции: translateX и translateY

Масштабирование

Также можно указывать два аргумента, для разного сжатия или растяжения по оси X и по оси Y

Также есть scaleX и scaleY

Также можно указывать отрицательные значения. В этом случае элемент переворачивается.

Вращение

Этот код поворачивает элемент на 45 градусов по часовой стрелке, отрицательное значение переворачивает против часовой стрелки.

Также можно использовать другие единицы измерения:

1.5turn = 540deg = 600grad = 9.42478rad

Селектор атрибута: Быстрое напоминание

Большинство CSS правил написаны для использования по названию класса, например , но в CSS есть несколько типов селекторов.  Для наших чудесных подсказок мы будем использовать селектор атрибута/свойства —   объявляется квадратными скобками.

Когда браузер встречает что-то вроде этого:

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

HTML элементы имеют различные встроенные атрибуты, а также мы можем придумать свои собственные. Наподобие , или . По умолчанию, HTML не знает что он означает, но с помощью CSS мы можем подсказать HTML, что с этим делать.

Почему селекторы атрибутов?

Мы будем использовать селекторы атрибутов в первую очередь для разделения задач. Использование атрибутов вместо имён классов не дает нам никаких бонусных очков в этой битве; классы и атрибуты имеют одинаковое предназначение. Однако,
используя атрибуты, мы можем держать наш контент в содержимом,
поскольку атрибуты HTML могут иметь значения, в то время как имена
классов не могут.

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

CSS границы (margin)

С помощью команды margin можно обеспечить пустое пространство вокруг элемента. Это пространство является бесцветным и прозрачным и не выходит за рамки элемента.

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

Для значения свойства margin используются:

• цифры — соответствующие единицы измерения: px, pt, em и т.д.;
• проценты (%) — за основу берется размер элемента;
• ключевое слово auto — результат зависит от того, какие другие значения границы указаны.

Индивидуальные границы

Вот пример, для установки индивидуальных границ:

В этом примере, верхняя граница — 20 пикселей, правая — 15, нижняя — 10 и левая — 5 пикселей.

Использование сокращенной записи

Вы можете использовать сокращенную запись четырех границ следующим образом:

Когда после margin указаны 4 значения, они соответствуют сначала верхней, правой, нижней и левой границе (движение по часовой стрелке). Margin может быть описан тремя значениями:

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

Когда для margin используется только два значения, то первое значение отражает верхнюю и нижнюю границу, второе — левую и правую.

Естественно, вы можете задать все границы равными — достаточно указать только одно значение:

Еще несколько примеров

Чтобы центрировать элемент в середине страницы, вы можете использовать ключевое слово auto следующим образом:

Выравнивание элемента по правому краю, достигается путем установки для границы некоторого числового значения и автоматического для левой границы:

Создаем анимированный баннер с чистого листа

Выбираем изображения

В качестве примера рассмотрим продажу фруктов. Наша задача — создать баннеры на HTML5. Клиент – поставщик фруктов из Краснодарского края. Он хочет расширить свою сеть поставки привлечением новых клиентов путем контекстной рекламы с таргетированием на ключи, близлежащие регионы и аудитории заинтересованных пользователей. 

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

Изображения можем поискать на фотостоках, таких как Shutterstock, Usplash, FreePik или Pngtree. Для баннера выбрали четыре формата: 240×400, 300×250, 300×600 и 336×280. Подготовили изображения нужных размеров в Adobe Photoshop.

Вывод

Фантастическая работа! Мы многое рассказали на этом уроке, и теперь у нас есть аккуратная коллекция всплывающих подсказок, показывающих нашу напряженную работу:

Мы лишь нацарапали поверхность того, что можно делать с помощью всплывающих подсказок CSS. Повеселитесь, поиграйте с ними, продолжайте экспериментировать и придумывайте свои собственные рецепты!

Ещё уроки по использованию CSS в Интерфейсах UI

• Быстрый совет: Удобные флажки- и радио-кнопки на CSS
• Переходим на следующий уровень с CSS фигурами
• Решение проблем с CSS Grid и Flexbox: Карточный пользовательский интерфейс
• Начинаем работать с веб-анимацией