Какое свойство css делает сайт красивее

От автора: во время работы над проектом Juju GUI, просматривая пул запросов, я обнаружил, что css свойство box-sizing написано без вендорных префиксов. И я подумал, что следует проверить, а нужны ли они перед тем, как обращаться в пул для их добавления. В поисках я был приятно удивлен, что существует гораздо больше свойств с полной поддержкой, чем я думал. Я проштудировал сайт Can I use и открыл для себя пару очень интересных вещей.

filter: sepia(1); — поддержка в браузерах 78%

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

Я был шокирован, когда узнал, что сегодня фильтры поддерживаются 78% браузеров, а точнее всеми кроме Edge, IE и Opera Mini. Т.е. можно было бы написать следующее:

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

CSS3 селекторы – поддержка в браузерах 97.73%

CSS3 селекторы ознаменовали новую эру возможностей в CSS и дали целую кучу новых методов. Самые интересные селекторы приведены ниже. [foo^=»bar»], символ ^ это регулярное выражение, которое означает, что будут выбираться атрибуты, начинающиеся на «bar». Простой пример использования:

Мы выбираем все ссылки на сторонние сайты и автоматически добавляем к ним небольшую иконку. [foo$=»bar»], похожее регулярное выражение, только в этом случае рассматривается конец строки.

В примере выбираются ссылки на PDF файлы и вставляется подпись «PDF», чтобы пользователь понимал, куда ведет эта ссылка. :nth-child() выбирает элементы по их появлению в последовательности. К примеру:

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

Не подходит:

Псевдокласс :empty может быть полезен при скрытии пустых элементов с паддингом, которые могут сдвинуть контент. Также прячется рамка пустых элементов списка. :not() – селектор отрицания. Элемент выбирается по параметрам. Если условие равно false, то стили применяются.

foo ~ bar – комбинатор. Работает по принципу foo + bar, но менее строгий. В методе с + будет выбран только первый bar после foo. А в методе с ~ будут выбраны все bar после foo.

Вы, скорее всего, были под сильным впечатлением, как и я, что эти селекторы плохо поддерживались. Возможно, вы думали, что для их использования потребуется напрячься немного больше обычного и воспользоваться полифилами или техникой прогрессивного улучшения. Однако я был удивлен, когда узнал, что CSS3 селекторы на 97%73% поддерживаются во всех браузерах, даже в IE8 и выше.

Calc() – поддержка в браузерах 80.75%

Это одна из моих любимых новых функций в CSS. С помощью calc() в CSS можно вычислять математические выражения с разными единицами измерения. К примеру, расположение фоновой иконки справа от поля ввода.

Все мы помним, вы добавляете фоновую иконку и размещаете ее right center. Непыльная работа. Вы показываете готовый дизайн, а заказчик просит вас сдвинуть иконку на 10px вправо от элемента. Иконка идет фоном, и не хочется создавать ради нее отдельный элемент. И вы ставите фон на 90% center. На разных разрешениях данный подход не работает, но тут нам поможет calc!

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

С такой хорошей поддержкой в 80.75% и отсутствием префиксов пора задуматься над добавлением данной функции в свой арсенал.

CSS анимация – поддержка в браузерах 90.29%

После смерти Flash мы искали, чем заменять Flash анимацию. К нашему счастью CSS анимация появилась довольно быстро. Мне было интересно, но я все же не решался использовать все эти новые функции без подходящего фолбэка. На данный момент CSS анимация может похвастаться поддержкой в 90.29% с префиксом «-webkit-». Можно смело повышать юзабилити ваших UI компонентов. К примеру, анимированные уведомления, привлекающие внимание пользователя.

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

Совет: не анимируйте стили позиционирования типа top и margin. Это вызывает перерисовку страницы, и в некоторых случаях заставляет браузер заново вычислять позиции видимых элементов.

@supports – поддержка в браузерах 67.85%

С помощью @supports можно проверить, поддерживается ли свойство или нет, и по этому условию стилизовать элементы. К примеру, правило можно использовать для проверки поддержки flexbox. Если поддержка отсутствует, мы возвращаемся к обтеканиям.

@supports можно сочетать с ключевым словом not. Один из подводных камней в том, что с помощью данного правила в большинстве случаев мы проверяем старые браузеры на поддержку новейших свойств. А старые браузеры сами по себе не поддерживают такой тип запроса.

На момент написания статьи правило поддерживается на 67.85%. Значение далеко от идеального, но оно явно перекрывает последние версии основных браузеров, что уже хорошо. Данное правило не поддерживается только в IE и Opera Mini. Данное правило также полезно, так как мы теперь можем отказаться от Modernizr.

Flexbox – поддержка в браузерах 95.4%

Об этой функции я ничего не слышал. Да шучу! О данном инструменте говорят в сотнях блогов и на различных конференциях. Отличный инструмент для позиционирования элементов, как горизонтально, так и вертикально. С его помощью можно легко центрировать элементы или задавать элементы одной высоты. Также можно менять порядок, в котором элементы отображаются на странице. Вас когда-нибудь просили поменять порядок изображений и текста секции для маленьких экранов? Меня просили, и flexbox легко с этим справляется.

И все же я опасался использовать данный инструмент для чего-то важного, так как и с другими случаями я не верил в такую высокую поддержку. Flexbox может гордо похвастаться своей поддержкой в 95.4%. Он поддерживается во всех последних браузерах, даже в Opera Mini. Отсутствует поддержка только в IE9 и ниже, но это можно пережить.

3D трансформации – поддержка в браузерах 89.87%

С помощью данной функции можно позиционировать элементы в третьем измерении. Также есть свойство перспективы, с помощью которого можно задать z-index 3D элемента.

Все мы видели удивительной красоты примеры использования 3D на чистом CSS, но уровень поддержки в браузерах меня сильно удивил. С поддержкой в 89.87% для префикса webkit данное свойство уже сегодня можно использовать. Я бы даже предложил не добавлять фолбэк, так как в большинстве случаев функционал 3D элемента будет работать. Быстрый пример – карточка, которая будет крутиться и переворачиваться, если навести на нее мышь.

Заключение

Я прочитал много блогов и прослушал еще больше подкастов по front-end разработке, но так и не понял, что нужно было читать документацию свойств на сайте Can I use. Серьезно, снимаю шляпу перед создателями сайта.

Если вы не уверены в поддержке того или иного свойства, Can I use это святой грааль. Рекомендую всем front-end разработчикам прочитать на сайте информацию по всем свойствам, их поддержке и известных проблемах. Места лучше для улучшения навыка в CSS не найти.

Надеюсь, вы видите все те удивительные вещи, которые можно разрабатывать с помощью свойств из этого поста. 2016 год – год, когда можно начать использовать новые свойства и создавать богатый, захватывающий опыт работы с пользователем. Веб-приложение или же обычный сайт, никогда не ждите разрешения работать с новыми свойствами. Просто необходимо понимать уровень поддержки и использовать соответствующий фолбэк. А теперь вперед, пользуйтесь новыми свойствами!

Автор: Anthony Dillon

Источник: https://12devsofxmas.co.uk/

Редакция: Команда webformyself.

В этой статье мы познакомимся с CSS и сделаем симпатичную форму входа на HTML.

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

<html>
<head>
<meta charset=»UTF-8″>
</head>
<body>
<form>

<h1>Вход</h1>

<div>
<input>
<label>Email</label>
</div>
<div>
<input>
<label>Пароль</label>
</div>

<button>Войти</button>

</form>
<body>
</html>

Да уж, согласитесь убогенько. Что бы сделать все красивей мы воспользуемся CSS(Cascading Style Sheets — каскадные таблицы стилей) — язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML.

Первым делом.

Первым делом мы подключаем внешний файл стилей c помощью тега <link> , атрибут href=»style.css» указывает на путь к файлу.

<head>
<link rel=»stylesheet» href=»style.css» type=»text/css»>
</head>

Теперь давайте создадим файл style.css и напишем первый стиль в нем . Разместим нашу форму по середине экрана в центре.

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

Тут мы используем Flexbox систему компоновки элементов на веб-странице — display: flex; Выравниваем по осям justify-content: center; align-items: center; Ну и body {} говорит нам что этот стиль применяется ко всему телу тега <body>.

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

.form {
width: 300px; # Ширина 300 пикселей
padding: 32px; # Внутренний отступ 10 пикселей
border-radius: 10px; # Закруглённую рамку или скруглить углы элемента.
box-shadow: 0 4px 16px #ccc; # Тень элемента. 0 — смещение Х, 4 — смешение Y, 16 — степень размытия, #ccc — цвет.
font-family: sans-serif; # Шрифт.
letter-spacing: 1px; # Расстояние между буквами
}

Ну и конечно не забудем добавить этот стиль в HTML файл:

<form class=»form»>

Делай два.

Едем дальше. Создадим стиль для кнопочки(Войти) поменяем цвет , шрифт и поправим заголовок(Вход)

.form_title {
text-align: center; # Текст по центру
margin: 0 0 32px 0; # margin:10px 5px 15px 20px; — верхний отступ 10px — правый отступ 5px — нижний отступ 15px — левый отступ 20px.
font-weight: normal;# Насыщенность шрифта, убираем жирность.
}

Кнопочка :

.form_button {
padding: 10px 20px;
border: none; # Без границы блока.
border-radius: 5px; # Радиус закругления
font-family: sans-serif;
letter-spacing: 1px;
font-size: 16xp;
color :#fff ; # Цвет текста
background-color: #0071f0; # Цвет фона
outline: none; # Внешней границы элемента
cursor: pointer; # Тип курсора при наведение
transition: 0.3s; # transition позволяет делать плавные переходы между двумя значениями какого-либо CSS свойства
}

Добавляем стили в HTML :

<h1 class=»form_title»>Вход</h1>
<button class=»form_button»>Войти</button>

Поля ввода, подсказки.

Дальше на очереди поля в вода. Если вы обратили внимание каждое поле находиться в своем блоке <div> . Задаем стиль для блоков :

.form_grup {
position: relative; # Положение элемента устанавливается относительно его исходного места.
margin-bottom: 32px;# Внешний отступ снизу элемента

Теперь стиль поля ввода :

.form_input {
width: 100%;
padding: 0 0 10px 0;
border: none; # Без рамки.
border-bottom: 1px solid #e0e0e0; # Нижняя рамка 1 пиксель, цвет #e0e0e0
background-color: transparent; # Фон будет прозрачным.
outline: none;
transition: 0.3s;
}

Стиль подсказок :

.form_label {
position: absolute; # Абсолютное позиционирование.
top: 0; # Смещение позиционированного элемента относительно верхнего края
z-index: -1; #
color: #9e9e9e; # Цвет текска.
transition: 0.3s;
}

CSS свойство z-index определяет порядок расположения позиционированных элементов по оси Z. Это позволяет контролировать наложение перекрывающихся элементов.

<div class=»form_grup»>
<label class=»form_label»>Email</label>
<input class=»form_input»>
</div>
<div class=»form_grup»>
<label class=»form_label»>Пароль</label>
<input class=»form_input»>
</div>

Уже намного лучше выглядит ?

Немного анимации, завершаем.

Начнем с кнопки , если она в фокусе или на нее нажимают меняем цвет бэкграунд:

.form_button:focus,
.form_button:hover{
background-color: rgba(0, 113, 240, 0.7); RGBA Цвет фона и значение прозрачности.
}

Когда поле ввода в фокусе , поменяем цвет нижней границы:

.form_input:focus {
border-bottom: 1px solid #1a73a8;
}

Так же поменяем свойства подсказок, сдвинем их в верх и уменьшим шрифт :

.form_input:focus ~ .form_label {
top: -18px;
font-size:12px;
color: #e0e0e0;
}

Уже совсем хорошо , но есть один косяк. Когда уходит фокус, подсказка возвращается на место.

Мы исправим это с помощью псевдоэлемент placeholder для стилизации дефолтного текста в элементе input или textarea. Большинство современных браузеров поддерживают это. Первым делом добавим его в HTML :

<input class=»form_input» placeholder=» «>

Теперь под правами CSS стиль :

.form_input:focus ~ .form_label,
.form_input:not(:placeholder-shown) ~ .form_label {
top: -18px;
font-size:12px;
color: #e0e0e0;
}

Надеюсь вам эта статья пригодилась и понравилась . Успехов.