CSS код для владельцев iPhone4 (высокое разрешение)
Время идёт и у нас появляются всё более мощные мобильные устройства. Это хорошая практика, и мы должны оставить лучшее впечатление владельцам новых устройств.
Т.к. у iPhone4 достаточно высокое разрешение экрана, если вы не предоставите лучший (и больший) вариант своего логотипа, к примеру, то пользователи получат его размытый вариант. Эту проблему можно решить всего несколькими строками:
|
1 |
@media handheld,only screen and(max-width767px){ .logo{ /* малые разрешения и малые размеры */ backgroundurl(logo.jpg)no-repeat; } } @media only screen and(-webkit-min-device-pixel-ratio2){ .logo{ backgroundurl(logo2x.jpg)no-repeat; background-size212px303px; } } |
Код
Wrapper {
display: flex;
width: 100%;
border: 1px solid rgba(0, 0, 0, 0.16);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23);
background-color: #fff;
margin: 1rem auto;
height: auto;
}
.wrapper:hover {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.link {
display: block;
width: 200px;
height: auto;
overflow: hidden;
position: relative;
border-right: 2px solid #ddd;
}
.blur {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
.pic {
width: calc(100% — 20px);
max-width: 100%;
height: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.pic:hover {
transition: all 0.2s ease-out;
transform: scale(1.1);
text-decoration: none;
border: none;
}
.content {
display: flex;
flex-direction: column;
width: 100%;
max-width: 100%;
padding: 20px;
overflow-x: hidden;
}
.text {
margin: 0;
}
Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste
eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt.
2018-12-04T00:00Z
На вкладке.content в CSS измените ее на position:absolute . В противном случае отображаемая страница не будет прокручиваться.
2018-12-11T00:00Z
Пожалуйста, проверьте приведенный ниже код:
BackgroundImageCVR{
position:relative;
padding:15px;
}
.background-image{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background:url(«http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg»);
background-size:cover;
z-index:1;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}
.content{
position:relative;
z-index:2;
color:#fff;
}
2018-12-18T00:00Z
Как указано в других ответах, это может быть достигнуто с помощью:
- Копия размытого изображения в качестве фона.
- Псевдоэлемент, который может быть отфильтрован, затем расположен за содержимым.
Минимальная/максимальная ширина элемента (с поддержкой IE)
Многим из вас приходится устанавливать фиксированные размеры элементов, только потому что IE не поддерживает свойства , , и , не так ли? Но больше вам не нужно этого делать. IE не относится к тем браузерам, которые придерживаются общих стандартов, и иногда мы можем использовать это в свою пользу: мы можем использовать код, который смотрелся бы ужасно в стандартном CSS.
В данном случае вы можете воспользоваться некоторыми выражениями IE (в основном, JavaScript кодом), чтобы проверить текущую ширину и подстроить ширину элемента под неё:
|
1 |
#content { widthexpression(document.body.clientWidth<762?»760px»document.body.clientWidth>1242?»1240px»»auto»); min-width760px; max-width1240px; } |
Элемент
Как и у градиентов, масок, паттернов и прочих графических эффектов, для фильтров в SVG выделен специальный элемент – <filter>.
Сам по себе он не отображается на странице, поэтому его можно даже не упаковывать в тег . Фильтр работает только на конкретном объекте при наличии явной ссылки на него.
Минимальный синтаксис определения и применения фильтра выглядит так:
Этот кусок кода не будет работать, так как тут нет ни одного реального фильтра. Чтобы что-то увидеть, нужно добавить один или несколько примитивов внутрь тега . Другими словами, здесь мы только создали контейнер для будущих фильтров.
CSS горизонтальная/портретная ориентация изображений для мобильных телефонов
Это хорошая отправная точка для определения ориентации мобильного телефона.
|
1 |
/* Смартфоны (портретная и горизонтальная ориентация изображений) ———— */ @media only screen and(min-device-width320px) and(max-device-width480px){ /* Стили */ } /* Смартфоны (горизонтальная) ———— */ @media only screen and(min-width321px){ /* Стили */ } /* Smartphones (портретная) ———— */ @media only screen and(max-width320px){ /* Стили */ } /* iPad (портретная и горизонтальная) ———— */ @media only screen and(min-device-width768px) and(max-device-width1024px){ /* Стили */ } /* iPad (горизонтальная) ———— */ @media only screen and(min-device-width768px) and(max-device-width1024px) and(orientationlandscape){ /* Стили */ } /* iPads (портретная) ———— */ @media only screen and(min-device-width768px) and(max-device-width1024px) and(orientationportrait){ /* Стили */ } /* Настольные компьютеры и лэптопы ———— */ @media only screen and(min-width1224px){ /* Стили */ } /* Большие экраны ———— */ @media only screen and(min-width1824px){ /* Стили */ } /* iPhone 4 ———— */ @media only screen and(-webkit-min-device-pixel-ratio1.5), only screen and(min-device-pixel-ratio1.5){ /* Стили */ } |
backdrop-filter
Я был настроен скептически, но я начал играться в WebKit nightlies в феврале, и изменил свое мнение — это очень круто. Каждый согласится со мной, что подтверждается моим Vine (сервис, похожий на Сoub — прим. переводчика) постом, который собрал более 20 тысяч просмотров за 48 часов.
В июне, Apple анонсировала на WWDC, что эти свойства будут доступны в Safari 9. Это хорошая новость. Самое время проверить, (автор использует бету iOS 9 и Safari 9).
С этим свойством вы можете получить эфекты, которых добиться было тяжело. Самое банальное — размытие как в iOS:
Header {
background-color: rgba(255,255,255,.6);
backdrop-filter: blur(5px)
}
Каждый элемент за header`ом размыт на 5px. Это так просто.
Есть другой способ…
Существует другой, более распространенный способ создания тени. Вместо того, чтобы создавать черную тень и применять к ней цвет, чтобы сделать ее светлее, вы можете применить к ней прозрачность, сделав ее полупрозрачной и, следовательно, светлее.
В предыдущем демо мы узнали, как применить цвет к тени, используя feFlood, технику окраски, которую вы, вероятно, посчитаете нужной и станете часто пользоваться. Вот почему я подумала, что ее необходимо рассмотреть. Это также полезно узнать, потому что это путь, которым вы захотите создать тень, которая, по какой-то причине, будет пестрой, например, вместо черной или серой.
Для изменения прозрачности слоя можно использовать либо примитив feColorMatrix, либо feComponentTransfer. О примитиве feComponentTransfer я расскажу более подробно в следующих статьях, поэтому сейчас воспользуемся feColorMatrix, чтобы уменьшить непрозрачность нашей тени.
Короче говоря, этот фильтр применяет матричное преобразование к каналам R(Красный), G(зеленый), B(синий) и A(Альфа) каждого пикселя на входной графике для получения результата с новым набором цветов и Альфа-значений. Другими словами, для управления цветами объекта используется матричная операция. Основа матрицы цвета выглядит так:
Еще раз рекомендую проверить статью Уны, чтобы узнать больше о ее синтаксисе.
Поскольку мы хотим только уменьшить непрозрачность нашей тени, мы будем использовать тождественную матрицу, которая не изменяет каналы RGB, но мы уменьшим значение альфа-канала в этой матрице:
А это наше живое демо:
Поддержка браузерами
большинства SVG фильтров впечатляет. Однако способ применения эффекта может отличаться у некоторых браузеров в зависимости от поддержки ими отдельных примитивов фильтра, используемых в эффекте SVG-фильтрации, а также от возможных ошибок браузера. Поддержка браузером также может отличаться, когда фильтр SVG применяется к элементам SVG или к элементам HTML.
Я бы рекомендовала вам рассматривать эффекты фильтрации как расширение: вы почти всегда можете применить эффект в качестве улучшения поверх совершенно полезного опыта работы без фильтра. Многие знают, что я поддерживаю прогрессивный подход создания UI, когда это возможно. Таким образом, мы не будем слишком беспокоиться о поддержке браузерами в этой серии статей.
Наконец, несмотря на то, что поддержка фильтров SVG в целом хороша, имейте в виду, что некоторые эффекты, которые мы рассмотрим позже, можно считать экспериментальными. Я буду указывать любые основные проблемы или ошибки, если и когда они будут.
Итак, как определить и создать эффект фильтрации в SVG?
Минимальная/максимальная ширина элемента (с поддержкой IE)
Многим из вас приходится устанавливать фиксированные размеры элементов, только потому что IE не поддерживает свойства min-width, max-width, min-height и max-height, не так ли? Но больше вам не нужно этого делать. IE не относится к тем браузерам, которые придерживаются общих стандартов, и иногда мы можем использовать это в свою пользу: мы можем использовать код, который смотрелся бы ужасно в стандартном CSS.
В данном случае вы можете воспользоваться некоторыми выражениями IE (в основном, JavaScript кодом), чтобы проверить текущую ширину body и подстроить ширину элемента под неё:
Линейный градиент
Градиент в макетах всегда наводит красоту и подчеркивает квалификацию дизайнера, который разрабатывал макет. Честно говоря, в своей верстке я уже давненько отошел от фоновых картинок для создания градиента, да и нецелесообразны они, если высота элемента к которому нужно применить градиент резиновая, как ни крути никакая картинка тут не поможет. Именно для таких случаев рекомендую Вам использовать следующие правила для задания градиента:
.box_gradient {
/* Для вообще устаревших браузеров задаем цвет фона без градиента */
background-color: #ffffff;
/* Градиент для Mozilla */
background-image: -moz-linear-gradient(top, #ffffff, #454545);
/* Градиент для Chrome, Safari */
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#454545));
background-image: -webkit-linear-gradient(top, #ffffff, #454545);
/* Градиент для Opera */
background-image: -o-linear-gradient(top, #ffffff, #454545);
/* Градиент для самых современных браузеров */
background-image: linear-gradient(to bottom, #ffffff, #454545);
/* Градиент для Internet Explorer 7-9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ff454545', GradientType=0);
}
В принципе с градиентом ничего сложного и все красиво. Что касается браузеров Internet Explorer, то надеюсь, Вы заметили параметр — это направление градиента, если значение — то градиент идет сверху вниз, а если значение 1 — то слева направо, вот и вся тайна.
Соединяя примеры вместе
Вы можете скачать пример для выпадающей тени и пример для внутренней тени, чтобы иметь больше представления, как эта техника работает. Ниже я привёл полный код для базового метода. Первый листинг кода содержит HTML-код для примера, с базовым блоком и блоком для IE, соединенные вместе:
является родительским по отношению к блоку с контентом. является контентовым блоком, на который мы применим свойство (это также поможет избежать проблем с z-index в IE7). является невидимым блоком с размытием, который используется для создания тени в IE.
Следующий листинг показывает первый блок CSS-кода, который применяется для каждого браузера:
Здесь мы ставим для браузеров, которые его поддерживают, и затес скрываем тень для IE от альтернативных браузеров. Следующий CSS-код используется только для IE — мы применяем его через conditional comments:
Здесь используется для позиционирования контента и его выпадающей тени. Контентом является с классом . Он должен иметь z-index выше, чем тень — с классом . Последний затем позиционируется при помощи абсолютного позиционирования, и тень создается при помощи задания фильтра blur и фонового цвета.
Особенности расчёта значений параметров , , and для блока тени в IE:
- значение расчитывается как смещение по оси Х минус степень размытия;
- значение расчитывается как смещение по оси Y минус степень размытия;
- значение расчитывается как степень размытия минус смещение по оси Х;
- значение расчитывается как степень размытия минус смещение по оси Y.
Таком образом в коде, мы используем следующие расчёты, чтобы эмулировать смещение тени в :
- Значение расчитывается как смещение по оси Х минус степень размытия; 10 – 5 = 5
- Значение расчитывается как смещение по оси Y минус степень размытия; 10 – 5 = 5
- Значение расчитывается как степень размытия минус смещение по оси Х; 5 – 10 = –5
- Значение расчитывается как степень размытия минус смещение по оси Y. 5 – 10 = –5
После того, как всё сказано и сделано, конечный результат представлен на рисунке 4:
Рисунок 4: Финальный пример, показывающий выпадающую тень в современных браузерах и в текущих версиях IE
Создадим изображение SVG, с которым будем работать дальше
Создайте произвольный рисунок в Adobe Illustrator. Вот, например, птица киви на овале.
Обратите внимание, что изображение кадрируется чётко по краям изображения. Холст в SVG играет не меньшую роль, чем в PNG или JPG
Adobe Illustrator умеет сохранять в SVG.
При сохранении появится ещё одно диалоговое окно с настройками. Честно говоря, я не очень в них разбираюсь. Существует целая инструкция по Профилям SVG. Меня вполне устраивает SVG 1.1.
Здесь стоит отметить, что у вас есть возможность нажать OK и сохранить файл или же нажать кнопку “SVG Code…”, которая откроет окно TextEdit (по крайней мере на Mac) с SVG-кодом.
Оба варианта могут пригодиться.
Быстрый обзор структуры SVG, группировки и связывания (переиспользования) элементов в SVG.
Существует 4 основных элемента, которые используются для определения, задания структуры и связей в SVG коде. Эти элементы делают переиспользование кода проще, сохраняя его чистым и читаемым.
Вот эти элементы: , , и .
Элемент (короткое от «group») используется для логической группировки набора связанных графических элементов. С точки зрения графических редакторов, таких как Adobe Illustrator, элемент имеет ту же функциональность, как и Group Objects. Можно также представлять группу как слой в графическом редакторе.
Группировка элементов полезна, когда мы хотим применить общий стиль, и особенно, если хотим анимировать группу элементов, сохраняя при этом их относительное расположение.
Элемент применяется для определения элементов, которые будут использоваться позднее. Определение элементов через полезно, когда вы хотите создать своего рода «шаблон», который будет использоваться несколько раз в документе. Элементы, определенные внутри не отображаются, пока не будут «вызваны» где-то в документе.
Элемент сочетает в себе преимущества и и , т.к. может использоваться в качестве группировки элементов, определяющих шаблон, на который можно ссылаться из любого места документа. В отличие от , как правило, не используются для определения шаблонов, а в основном используется, чтобы определить символы (например иконки), на которые имеются ссылки по всему документу.
Элемент имеет важное преимущество: он принимает атрибут , который позволяет масштабироваться внутри любого вьюпорта, в котором происходит отрисовка. Элемент используется для ссылки на другие элементы, определенные где-то в документе
Он позволяет повторно использовать существующие элементы, давая вам возможность, аналогичную копированию-вставке в графическом редакторе. Он может применяться для переиспользования как отдельного элемента, так и группы, заданной через , или
Элемент используется для ссылки на другие элементы, определенные где-то в документе. Он позволяет повторно использовать существующие элементы, давая вам возможность, аналогичную копированию-вставке в графическом редакторе. Он может применяться для переиспользования как отдельного элемента, так и группы, заданной через , или .
Для использования элемента передаем ссылку на него внутри атрибута, а также устанавливаем и . Вы можете применять стили к , и эти стили каскадно применятся к содержимому элемента.
Но откуда берется содержимое ? Где происходит клонирование? И как CSS работает с этим содержимым?
Прежде чем отвечать на эти вопросы, стоит упомянуть несколько статей для лучшего понимания этих элементов и атрибута , который использует :
- Структурирование, группировка и привязка в SVG — элементы <g>, <use>, <defs> и <symbol>
- Понимание координатной системы SVG (часть 1): viewport, viewBox и PreserveAspectRatio
Фон или маркеры списка без файлов изображений
Жаль, что IE не позволяет вам использовать кодирование base64 вместо реальных файлов. Это, по большей части, для мобильных телефонов, т.к. позволяет сократить количество http запросов, и, соответственно, сохранить драгоценное время.
В данном случае это использовано для пользовательского list-style без изображения. Мы только сгенерировали base64 с помощью Patternfy в вставили в CSS следующим образом:
|
1 |
ul{ list-style-imageurl(dataimagepng;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAJCAYAAAAVb42gAAAAFklEQVQImWNgIAro56z9T4Ygbg5BAABTdwtkrDt7swAAAABJRU5ErkJggg==); } |
Растянуть фон изображение на всю ширину CSS
Здесь нужно подчеркнуть, что не просто оттенок, где выставили в стилистике CSS, а здесь именно изображение, которое может иди узором или тематическим рисунком. Здесь безусловно важный аспект, это уметь масштабировать рисунок под заданный размер блока или контейнера.
Плюс в том, что все можно не сложно осуществить при помощи свойство background-size, которое будет изначально задавать размер фона. Здесь указываем только одно значение, которое идет в соответствие ширине графического файла. А вот высота будет уже автоматически подгоняться. Но это не все, так как можно выставить сразу два значения, что изначально будет определять ширину и высоту. В нашем методе растягиваем фон на всю ширину, и по этому нужно указать свойство ширины 100%.
Приступаем к установке:
CSS
Код
body { background: url(https://zornet.ru/ABVUN/sarunolas/Gamilsatun/zornet_ru/PX-bVQlPQC2Aj8wJZVXYKg.jpg) no-repeat; background-size:100%; }
Так будет смотреться в браузере:
Важно:
Здесь нужно понимать, если вы ставите небольшую картинку, то вы получаете растянутое изображение с низким качеством. Здесь уже сами прикидываете по максимальному размеру, где будет визуально смотреться в окне.
Но здесь лучше ставить аналогичный или близко по размеру самого большого монитора, что получится идеальное соотношение к объему, так как у всех разное разрешение, где за основу берем самое большое, что есть по мониторам.
Также рекомендую ознакомится с похожей темой, под названием: поставить background на всю ширину, где аналогично все выстраивается через стилистику CSS вашего сайта.
Использование Data URI для SVG
SVG-файл можно уменьшить еще сильнее, если конвертировать его в Data URI. На Mobilefish.com для этого есть онлайн-конвертер. Просто скопируйте содержимое SVG-файла и заполните форму, результат конвертирования можно будет скопировать с текстового поля. Не забудьте удалить переносы строки в полученном коде. Выглядеть он будет как полнейшая тарабарщина:
Его можно использовать в любом из приёмов, которые мы рассмотрели (кроме вставки непосредственно в документ, поскольку это попросту нелогично). Просто скопируйте всю полученную тарабарщину вместо в следующих примерах.
Добавление на страницу с использованием тега
Добавление на страницу с использованием тега
Кстати, если добавить в SVG до кодирования в base64, он будет работать при добавлении на страницу с использованием тега ! А для по-настоящему суровых разработчиков компания Filament group предлагает инструмент grunticon, который автоматизирует этот процесс.
Консольные штучки для перекодирования SVG в base64:
Как размыть фон на css
В статье «Как сделать эффект лайтбокса » мы познакомились со способом отвлечения внимания от фрагментов веб-приложения посредством их затемнения с помощью полупрозрачной черной подложки
Но если страница содержит большое количество деталей, то затемнять ее приходится очень сильно, для того чтобы обеспечить достаточный контраст с отображающимся поверх текстом или привлечь внимание к световому коробу или другому элементу
Более элегантный способ, заключается в том, что мы размываем все остальное, за исключением подсвеченного элемента, в дополнение к затемнению или вместо него. Кроме того, это создает более реалистичный эффект глубины, имитируя то, как наше зрение воспринимает объекты, находящиеся физически ближе к нам, когда мы на них фокусируемся. Однако реализовать этот эффект куда сложнее.
До появления спецификации Filter Effects это было вообще невозможно, и даже с использованием фильтра blur() задача остается непростой
К чему привязывать размывающий фильтр? Или мы должны применить его ко всему, за исключением определенного элемента? Если мы применим его к элементу , то будет размыто все содержимое страницы, включая элемент, к которому мы хотим привлечь внимание
Ситуация очень похожа на ту, которую мы рассматривали в статье «Эффект матированного стекла», однако прибегнуть к тому же решению здесь мы не можем, так как позади нашего диалоговогоокна может находиться все что угодно, а не только фоновое изображение. Что же делать?
Решение
К сожалению, для данного эффекта нам потребуется дополнительный элемент HTML: мы должны будем обернуть все содержимое нашей страницы, за исключением элементов, которые не должны размываться, в элемент-обертку, а затем применить размытие к нему.
Для этого идеально подойдет элемент <main>, так как он имеет двойное предназначение: отмечает собой основное содержимое страницы (диалоговые окна к основному содержимому обычно не относятся) и дает нам крючок, на который мы сможем навесить нужные стили. Разметка будет выглядеть приблизительно так: HTML <main>Bacon Ipsum dolor sit amet…</main> <dialog> O HAI, I’m a dialog. Click on me to dismiss. </dialog> <!— любые другие диалоговые окна —>
На рисунке вы видите, как это выглядит без подложки. Таким образом, нам необходимо применять класс к элементу <main> каждый раз, когда диалоговое окно отображается на экране, одновременно применяя размывающую фильтрацию, вот так:
main.de-emphasized < filter: blur(5px); >
Как подтверждает рисунок ниже, это уже огромный шаг вперед. Однако сейчас размытие применяется немедленно, что выглядит не слишком естественно и ухудшает впечатление пользователя от взаимодействия со страницей. Поскольку фильтры CSS поддерживают анимацию, мы можем заставить размытие страницы проявляться плавно и постепенно: main < transition: .6s filter; > main.de-emphasized < filter: blur(5px); >
Часто бывает полезно комбинировать два эффекта снижения значимости (затемнение и размытие). Один из способов сделать это — использовать фильтры brightness() и/или contrast() :
main.de-emphasized < filter: blur(3px) contrast(.8) brightness(.8); >
Результат вы видите на рисунке. Затемнение посредством фильтров CSS означает, что если они не поддерживаются, то никакое резервное решение не применяется. Возможно, затемнение лучше воплощать с помощью какого-нибудь другого метода, который также может служить резервным решением (например, используя свойство box-shadow , как мы делали в предыдущем секрете). Это также избавит нас от «эффекта сияния», который можно наблюдать по краям на рисунке.
Обратите внимание, что на рисунке ниже, где мы использовали для затемнения тень, этой проблемы не возникает
ПОПРОБУЙТЕ САМИ!
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Переопределение атрибутов представления через CSS
Атрибуты представления переопределяются другими объявленными стилями. Мы можем этим воспользоваться, чтобы внешние стили переопределяли свойства наследуемых значений элемента .
Используя ключевое слово inherit в CSS, можно сделать это довольно просто. Посмотрите на следующий пример, в котором имеется иконка мороженого, сделанная с помощью одной линии. Автор иконки Erin Agnolu из проекта Noun. Пусть мы хотим изменить цвет единственной линии для разных экземпляров.
Содержание иконки () определяется внутри элемента . Это означает, что они не будут отображаться на холсте.
Затем мы рендерим несколько экземпляров иконки с помощью .
И устанавливаем ширину и высоту через CSS. Я использую такие же размеры как у , но они не обязательно должны быть такими же. Однако, чтобы избежать избытка пустого места внутри SVG, убедитесь, что пропорции сохранены.
В итоге получается следующее:
Обратите внимание на черные границы, т.о. можно видеть границы каждого SVG и удостовериться, что в первом случае (где мы лишь определили иконку) ничего не рандерится
Итак, SVG документ все равно будет отображаться на странице, даже если в нем нечего показывать. Чтобы этого избежать, скрываем первый SVG (). Если этот элемент не скрывать, по умолчанию он будет показываться на странице с размерами 300x150px, так что в итоге вы получите белую область на странице.
Теперь попробуем изменить цвет заливки для разных экземпляров:
Цвет все еще не изменился, т.к. он наследуется от элемента path (). Поэтому для наследуем цвет заливки:
И вуаля! Теперь цвет, указанный для каждого , применяется для . Посмотрите демо, поиграйтесь с цветами, создайте больше экземпляров:
Эта техника полезна, когда нужно применить внутри наследуемые от главного элемента стили. Но в большинстве случаев требуется не совсем то. Поэтому перейдем к другим примерам.
Добавляем SVG на страницу с помощью тега
Если по какой-либо причине вариант со вставкой SVG непосредственно в документ вам не нравится (он все же имеет парочку недостатков, например, кэширование практически невозможно), можно подключить SVG-файл используя и сохранить возможность управлять его частями посредством CSS.
На тот случай, если это не поддерживается, реализуем деградацию, используя класс, который добавляет Modernizr:
При таком подходе не возникают проблемы с кэшированием, и он поддерживается браузерами лучше, чем другие. Но если использовать внешний файл со стилями или встроенный в документ, CSS-навороты работать не будут, нужно добавить элемент в сам SVG-файл.
Внешние файлы со стилями для SVG, вставленного с помощью
Есть способ добавить в SVG-файл внешний файл со стилями, если это необходимо работы для проекта, кэширования или еще чего-то. Я экспериментально выяснил, что он работает только для SVG-файлов, встроенных в документ с помощью тега . Вот что нужно добавить в SVG-файл перед открывающим тегом :
Если попробовать добавить этот код в HTML, вы получите ошибку, и браузер даже не подумает его подгружать. Если подключить SVG-файл, в котором предложенный код заменяет или background-image , система ругаться не будет, но и работать такой код не будет (SVG, однако, отобразится).
Сброс настройки приближения
Chrome, как и любой браузер, позволяет изменять масштаб, то есть использовать функцию масштабирования. По понятным причинам приближение страницы к 125% или 150% приведет к размытому изображению. Часто пользователи случайно приближают страницу и забывают об этом. Поэтому, прежде чем перейти к более техническим настройкам, проверьте, не включено ли приближение.
Самый простой способ сделать это, удерживая клавишу CTRL, прокрутите колесиком мыши вверх и вниз. Это приводит к увеличению или уменьшению масштаба. Когда на экране отобразится значение приближения, убедитесь, что установлено на 100%. Если больше, то это приведет к размытию.
Закруглённые углы
Плохая сторона свойств CSS3 заключается в том, что каждый браузер осуществляет синтаксис по-своему. Так с закруглёнными углами дело обстоит довольно странно, когда все стандартные браузеры используют разные выражения, чтобы добиться одного и того же:
|
1 |
.rounded{ -moz-border-radius10px;/* gecko */ -webkit-border-radius10px;/* webkit */ border-radius10px;/* CSS3 standard */ -khtml-border-radius10px;/* old konkeror */ -webkit-border-bottom-right-radius10px; -webkit-border-bottom-left-radius10px; -webkit-border-top-right-radius10px; -webkit-border-top-left-radius10px; -khtml-border-radius-bottomright10px; -khtml-border-radius-bottomleft10px; -khtml-border-radius-topright10px; -khtml-border-radius-topleft10px; -moz-border-radius-bottomright10px; -moz-border-radius-bottomleft10px; -moz-border-radius-topright10px; -moz-border-radius-topleft10px; border-bottom-right-radius10px; border-bottom-left-radius10px; border-top-right-radius10px; border-top-left-radius10px; } |
Заключение
Хотя на сегодняшний день использование требует добавления полифилла на JavaScript, использование стандартной разметки HTML5 и достижение той свободы действий, что позволяет переключаться между изображениями с помощью родных элементов, даёт нам огромные возможности. А для подключения полифилла нужно всего лишь 1) скачать его, 2) добавить скрипт на страницу, 3) и всё. Это несомненно стоит того, если вы управляете оформлением страницы или обеспечиваете резервную поддержку для нескольких SVG-изображений в контенте.
Скорее всего, станет стандартным способом управления SVG и обеспечения запасных вариантов для в будущем, но зачем начинать пользоваться им сегодня? И метод, использующий , и новый элемент требуют немного JavaScript’а — пока, но последний гораздо аккуратней и со временем не потеряет актуальности. Да, тоже не потеряет актуальности, но используя вы в определенный момент сможете выбросить полифилл и оставить код без изменений, тогда как в случае с вам придется либо и дальше использовать JavaScript, либо провести рефакторинг своей разметки, чтобы перейти к использованию без JavaScript.
Неважно, решите ли вы использовать для SVG сегодня или нет, с ним определенно стоит познакомиться поближе и использовать его для отдачи отзывчивых изображений в других форматах. Поэтому перед вами полный список статей, которые помогут вам влиться:
Заключение
В этой серии я постараюсь отойти от очень технических определений операций с фильтрами и придерживаться упрощенных и понятных определений. Зачастую вам не нужно вдаваться в мелкие детали того, что происходит под капотом. Поэтому вхождение в эти мелочи только добавит сложности статьям, пожалуй сделает их менее понятными и принесет мало пользы. Понимание того, что делает фильтр и как его использовать, на мой взгляд, более чем достаточно, чтобы использовать преимущества, которые он может предложить. Если вы хотите получить более подробную информацию, я рекомендую для начала проконсультироваться со спецификацией. Тем не менее, она может оказаться мало полезной, поэтому вы, в конечном итоге проведете свое собственное исследование на стороне. Я приведу список отличных ресурсов для дальнейшего изучения в заключительной статье этой серии.
Теперь, когда мы рассмотрели основы SVG-фильтров и способы их создания и применения, мы рассмотрим дополнительные примеры эффектов использования дополнительных примитивов фильтров в следующих статьях. Оставайтесь с нами.
