Круглый градиент. CSS: Радиальный градиент для фона. Радиальный градиент CSS3
Тег Title – это заголовок html-документа. Title почти всегда используется в результатах поисковых систем. На данный момент, он очень важен для классического SEO и для привлечения внимания в социальных сетях.
Основное предназначения тега Title, это точное и краткое описание содержания контента страницы.
Данный элемент имеет очень важное значение как для пользователей (когда они принимают решение перейти ли на данную страницу из результатов поисковой выдачи), так и для поисковых систем (один из важных факторов определение релевантости страницы определенным поисковым запросам).
Оптимальная структура тега title
Главная ключевая фраза – второстепенная ключевая фраза | Название бренда
Оптимальная длина для поисковых систем
Google обычно отображает первые 50-60 символов или столько символов, сколько поместится в 512 пикселей. Если все ваши заголовки будут 55 символов, то вы можете ожидать, что около 95% страниц будут полностью отображаться.
Но, поисковые системы могут выбрать для отображение и другой текст: title в результатах может быть изменен
- для вашего бренда
- пользовательского запроса
- или из любых других соображений (например, переспам ключевыми словами)
Почему так важен тег title?
Title уже давно считается одним из важнейших факторов среди внутренних факторов ранжирования (важнейший: контент страницы) и он появляется в 3-х местах:
1. Браузер. Отображается в верхней части вашего браузера + в закладках.
2. На страницах результата поиска. При использовании ключевых слов в title, поисковые системы будут выделять их в результатах поиска, если пользователь выполнил запрос с этими ключевыми словами. Это дает пользователю больше доводов нажать именно на вашу ссылку.
3. На внешних сайтах . Многие внешние сайты, особенно социальных сети, будут использовать title, как анкор ссылки на вашу страницу.
Например, так это выглядит в Facebook:
А теперь разберемся в том, как же лучше оптимизировать и прописать title на вашем сайте.
Как правильно оптимизировать title
- Всегда помните про длину
Как было уже указано выше, то поисковые системы будут укорачивать ваш заголовок, если вы превысите граничный порог. Но, с другой стороны, данная длина не очень жесткое правило.
Так как длинные заголовки могут значительно лучше работать для получения трафика из социальных сетей. А также, даже если некоторые ключевые слова были не отображены поисковой системой, то это совсем не означает, что они не берут никакого участия в ранжировании. Поэтому, желательно, делать тайтл максимально естественным и кликабельным, при этом можно пожертвовать длиной.
- Размещайте основные ключевые слова в начале
По данным экспериментов и нашему опыту, чем ближе ключевая фраза к началу title, тем больше она имеет вес в ранжировании. Кроме этого, возрастает вероятность, что пользователь нажмет именно на нашу ссылку в результатах поиска.
- Усиление Брендом
Если ваш бренд достаточно известен на вашем целевом рынке, то в таких случаях, его необходимо размещать в видимой области title, чтобы пользователи обратили на него внимание в результатах поиска. В других случаях, бренд лучше добавлять в конец тега title.
- Читаемость и эмоциональное воздействие
Создание привлекательного заголовка может помочь значительно увеличить количество кликов из поисковой выдачи. Когда вы создаете заголовки, то очень важно думать про все взаимодействия с пользователем, помимо его поисковой оптимизации и использовании ключевых слов.
Инструменты, которые могут помочь с оптимизацией title
Для того чтобы не ждать, как будет выглядеть ваша страница в поисковой выдаче, а сразу получить максимальный эффект, мы рекомендуем воспользоваться следующими сервисами симуляции поисковой выдачи:
В итоге можно посмотреть как выглядит title в результатах поиска:
В заключение
Тег title одинаково важен как для , так и для конечных пользователей. Использование хорошо построенных и уникальных тайтлов для всех страниц вашего сайта поможет выше ранжироваться в поисковых системах.
Рис. 1. Радиальный и линейный градиент
Радиальный градиент создаётся с помощью свойства background или background-image .
Синтаксис
Background-image: radial-gradient([ circle || <радиус> ] [ at <позиция> ]? , | [ ellipse || [<радиус> | <проценты> ]{2}] [ at <позиция> ]? , | [ [ circle | ellipse ] || <размер> ] [ at <позиция> ]? , | at <позиция> , <цвет> [ , <цвет> ]*)
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
Группирует значения. | [ crop || cross ] | |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | Повторять один или больше раз через запятую. | <время># |
Значения
circle Радиальный градиент круглой формы. ellipse Создаёт градиент эллиптической формы. Эта форма установлена по умолчанию. <радиус> Радиус градиента в доступных для CSS единицах. Одно значение указывает радиус круга, два значения - радиус эллипса по оси x и его же радиус по оси y. Если радиус явно не указан, градиент будет заполнять собой весь фон элемента. <позиция>
Задаёт начальную точку откуда исходит градиент. Позиция точки пишется аналогично значениям свойства background-position с помощью ключевых слов или доступных единиц измерения вроде пикселей или процентов; ниже приведены возможные сочетания.
- top left = left top = 0% 0% (в левом верхнем углу);
- top = top center = center top = 50% 0% (по центру вверху);
- right top = top right = 100% 0% (в правом верхнем углу);
- left = left center = center left = 0% 50% (по левому краю и по центру);
- center = center center = 50% 50% (по центру) - это значение по умолчанию;
- right = right center = center right = 100% 50% (по правому краю и по центру);
- bottom left = left bottom = 0% 100% (в левом нижнем углу);
- bottom = bottom center = center bottom = 50% 100% (по центру внизу);
- bottom right = right bottom = 100% 100% (в правом нижнем углу).
Значение | Код | Описание | Вид |
---|---|---|---|
closest-side | background: radial-gradient(circle closest-side at 30px 20px, #fff, #000); background: radial-gradient(closest-side at 30px 20px, #fff, #000); | Градиент совпадает с ближайшей к нему стороной блока (для круга) или одновременно совпадает с ближайшими горизонтальными и вертикальными сторонами (для эллипса). | |
background: radial-gradient(circle closest-corner at 30px 20px , #fff, #000); background: radial-gradient(closest-corner at 30px 20px , #fff, #000); | Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока. | ||
background: radial-gradient(circle farthest-side at 30px 20px , #fff, #000); background: radial-gradient(farthest-side at 30px 20px , #fff, #000); | Похож по своему действию на closest-side , но градиент распространяется до дальней стороны блока. | ||
farthest-corner | background: radial-gradient(circle farthest-corner at 30px 20px , #fff, #000); background: radial-gradient(farthest-corner at 30px 20px , #fff, #000); | Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока, |
Пример
Результат данного примера показан ниже.
Примечание
Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают -webkit-radial-gradient() .
Opera до версии 12.10 поддерживает -o-radial-gradient() .
Firefox до версии 16 поддерживает -moz-radial-gradient() .
Все свойства с префиксами не используют ключевое слово at при задании положения отправной точки градиента.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- - свойство полностью поддерживается браузером со всеми допустимыми значениями;
- - свойство браузером не воспринимается и игнорируется;
- - при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×CSS3 видели и пробовали все, кого он мог заинтересовать. И закругленные уголки и падающие тени мы уже можем генерировать без лишнего труда.
Но это только поверхностный уровень. Мне пришлось разобраться с новыми возможностями браузеров более подробно, чтобы ответить на возникшие вопросы типа: насколько кроссбраузерны градиенты со множеством цветовых переходов, где и как можно применять сразу несколько теней к блоку, для каких конкретно браузеров применяются префиксы свойств и т.п.
Кроме того, меня интересовала поддержка CSS3 на мобильных платформах, неизученные возможности CSS3, а также генераторы, которые создают кроссбраузерный код. Я попробовал восполнить некоторые пробелы и собрать полезную информацию для тех, кто еще только готовится к погружению.
Браузеры, поддерживающие свойства перечислены в виде CSS комментариев. Генераторы и инструменты чаще всего могут выполнять сразу несколько функций, поэтому в таких случаях я указывал их только там, где они, по-моему, справляются лучше всего.
Linear-gradient
На самом деле существует сразу несколько видов CSS3 градиентов. Это самый простой градиент.div {
background-color: #444444;
background-image: -webkit-gradient (linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4-5, Chrome 1-10, iOS 3.2-4.3, Android 2.1-3.0 */
background-image: -webkit-linear-gradient (top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
background-image: -moz-linear-gradient (top, #444444, #999999); /* Firefox 3.6+ */
background-image: -ms-linear-gradient (top, #444444, #999999); /* IE 10+ */
background-image: -o-linear-gradient (top, #444444, #999999); /* Opera 11.10+ */
background-image: linear-gradient (to bottom, #444444, #999999);
}
Кроме указания начального и конечного цветов, градиенты позволяют изменять угол наклона, позицию начала и завершения цветового перехода, количество цветов и направление градиента.
У Safari до версии 5 и у Chrome до версии 10 был свой собственный синтаксис, да и IE 10 с Opera добавляют свои префиксы, увеличивая количество кода.Все возможности градиентов поддерживаются теми браузерами, которые могут отображать CSS3 градиенты, даже если некоторые генераторы предлагают нам только переход между двумя цветами.
Repeating-linear-gradient
Позволяет повторять градиент, дает возможность создавать фоновые паттерны.Div {
background-color: #444444;
background-image: -webkit-repeating-linear-gradient
(top, #444444 18%, #999999 25%); /* Chrome
10+, Safari
5.1+, iOS
5+, Android
4+ */
background-image: -moz-repeating-linear-gradient
(top, #444444 18%, #999999 25%); /* Firefox
3.6+ */
background-image: -ms-repeating-linear-gradient
(top, #444444 18%, #999999 25%); /* IE
10+ */
background-image: -o-repeating-linear-gradient
(top, #444444 18%, #999999 25%); /* Opera
11.10+ */
background-image: repeating-linear-gradient
(top, #444444 18%, #999999 25%);
}
Radial-gradient
Круговой градиент. Так же можно иметь несколько цветовых переходов, можно определять точку начала градиента (не обязательно из центра круга).Div {
background: #444444;
background: -webkit-gradient
(radial, center center, 0px, center center, 100%, color-stop(0%,#444444), color-stop(100%,#999999)); /* Chrome
1-10, Safari
4+, iOS
3.2-4.3, Android
2.1-3.0 */
background: -webkit-radial-gradient
(center, ellipse cover, #444444 0%,#999999 100%); /* Chrome
10+, Safari
5.1+, iOS
5+, Android
4+ */
background: -moz-radial-gradient
(center, ellipse cover, #444444 0%, #999999 100%); /* Firefox
3.6+ */
background: -o-radial-gradient
(center, ellipse cover, #444444 0%,#999999 100%); /* Opera
11.6+ */
background: -ms-radial-gradient
(center, ellipse cover, #444444 0%,#999999 100%); /* IE
10+ */
background: radial-gradient
(center, ellipse cover, #444444 0%,#999999 100%);
}
Opera не поддерживала круговой градиент до версии 11.6. В остальном ситуация такая же, как с линейным градиентом.
Инструменты:
- gradients.glrzad.com выдает кроссбраузерный код, можно создавать множество цветовых переходов
- www.colorzilla.com/gradient-editor самый навороченный генератор. Можно создавать линейные и круговые градиенты, есть возможность выбора формата записи цветов, множество готовых градиентов.
- lea.verou.me/css3patterns галерея CSS3 паттернов. Можно посмотреть код каждого паттерна.
Множественные фоны
Это возможность назначать сразу несколько фоновых изображений одному элементу.div {
background: url(fallback.png) no-repeat 0 0;
background: url(foreground.png) no-repeat 0 0, url(middle-ground.png) no-repeat 0 0, url(background.png) no-repeat 0 0 ; /* Firefox 3.6+, Safari 1.3+, Chrome 2+, IE 9+, Opera 10.5+, iOS 3.2+, Android 2.1+ */
}
Не стоит забывать о браузерах, не поддерживающих множественные фоны.Порядок фонов такой: от верхнего к нижнему, то есть самый нижний фон нужно прописывать в конце. Вместо фоновых картинок можно прописывать и CSS3 градиенты.
Border-radius
Закругленные уголки у блока. Все просто, если нужен одинаковый радиус закругления.Div {
-webkit-border-radius
: 12px; /* Safari
3-4, iOS
1-3.2, Android
≤1.6 */
-moz-border-radius
: 12px; /* Firefox
1-3.6 */
border-radius
: 12px; /* Opera
10.5+, IE
9+, Safari
5, Chrome
, Firefox
4+, iOS
4+, Android
2.1+ */
}
Все производители уже отказались от вендорных префиксов в последних версиях браузеров.
Но если у разных углов должен быть разный радиус, то нужно перечислить радиусы для каждого угла.
В Firefox есть особенность, связанная с тем, что перечисление углов происходит с помощью синтаксиса, отличного от стандарта. Но решением может стать использование сокращенного синтаксиса, который у браузеров одинаков.
div {
-moz-border-radius : 15px 30px 45px 60px;
-webkit-border-radius : 15px 30px 45px 60px;
border-radius : 15px 30px 45px 60px;
}
Интересной возможностью является передача пар значений радиусов для каждого угла. Так можно добиться более сложных форм, чем просто закругления:
Div {
border-top-left-radius
: 5px 30px;
border-top-right-radius
: 30px 60px;
border-bottom-left-radius
: 80px 40px;
border-bottom-right-radius
: 40px 100px;
}
Если все одинковы:
Div {
border-radius
: 8px / 13px;
}
Инструменты:
Upd Для желающих автоматизировать процесс создания префиксов написана .
Значение -moz-radial-gradient
Обозначает радиальный (круговой) градиент. Применяется к , .
Синтаксис
-moz-radial-gradient
([
Используемые значения
|
Замечания
Градиент - это комбинация двух и более заданных цветов, плавно переходящих друг в друга. В CSS градиенты используют вместо каких-либо изображений, как индикатор загрузки, для улучшения восприятия web-страницы при масштабировании и т.д. Mozilla Firefox поддерживает два вида градиентов: линейный и радиальный.
Mozilla Firefox корректно поддерживает градиенты только как значения для свойства , а заодно и . Вы можете задать значение для градиента вместо URL изображения.
Радиальный или круговой градиент, задаваемый с помощью -moz-radial-gradient , также распространяется вдоль оси. Его можно представить как последовательность кругов, расположенных вдоль оси, для каждого из которых задана точка отсчета (центр) и длина радиуса. Радиальный градиент выглядит следующим образом:
Background-image: -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);
-moz-radial-gradient не поддерживает повторяющиеся градиенты. По умолчанию градиент растягивается, чтобы заполнить весь элемент, для которого он применяется. Посмотрите статью , чтобы узнать как сделать повторяющийся круговой градиент.
Примеры
В примерах показано как описываются радиальные градиенты с помощью -moz-radial-gradient
Background: -moz-radial-gradient(45px 45px 45deg, circle cover, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
Результат выполнения примера:
Background: -moz-radial-gradient(45px 45px, ellipse farthest-corner, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%); no-repeat;
Результат выполнения примера:
Background: -moz-radial-gradient(45px 45px, cover, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%);