Перевод статьи «HTML can do that?» и «CSS can do that?».
HTML это основа любой веб-страницы, поэтому будет мудро уделить ему самое пристальное внимание. Правильная семантическая разметка помогает не только с SEO, но и с обеспечением доступности. И вы поразитесь, увидев, что можно сделать с помощью одного лишь HTML.
1. Выпадающее меню для поиска
See the Pen HTML only — Dropdown with searchable text by Ananya Neogi (@ananyaneogi) on CodePen.
2. Диалоговое окно
See the Pen HTML only — Dialog by Ananya Neogi (@ananyaneogi) on CodePen.
3. Показатели прогресса
See the Pen HTML — Progress and Meter by Ananya Neogi (@ananyaneogi) on CodePen.
Стайлинг здесь непрост, я согласна! Но всегда есть обходные пути (они хорошо изложены в статье «How to style progress element»).
4. Сворачивающиеся и разворачивающиеся подробности
See the Pen HTML only — Detail & Summary by Ananya Neogi (@ananyaneogi) on CodePen.
5. Показ подходящей мобильной клавиатуры на основе типа входящих данных
See the Pen HTML — inputmode by Ananya Neogi (@ananyaneogi) on CodePen.
6. Добавление определения цвета
See the Pen HTML — color picker by Ananya Neogi (@ananyaneogi) on CodePen.
7. Подсветка текста
See the Pen HTML — Highlight text by Ananya Neogi (@ananyaneogi) on CodePen.
8. Создание прямой ссылки на телефонный номер
Подобно тому, как мы делаем ссылку на email при помощи mailto, мы также можем создавать ссылку на телефонный номер.
<a href="tel:+917272727272">+91-7272727272</a>9. Показ удаления и вставки текста
See the Pen HTML — Highlight text by Ananya Neogi (@ananyaneogi) on CodePen.
10. Редактирование содержимого страницы
See the Pen HTML — contenteditable by Ananya Neogi (@ananyaneogi) on CodePen.
Хотите сделать собственный браузерный редактор? Это тоже возможно – How to make browser editor with html.
Примечание: не все браузеры поддерживают эти элементы и атрибуты. Но мы все равно можем использовать их, постепенно улучшая!
Переходим к CSS
Давайте рассмотрим список потрясающих вещей, на которые способен CSS!
Примечание: часть этих свойств поддерживается не всеми браузерами. Можно поставить дополнительную проверку поддержки, используя @supports и добавляя альтернативные стили. Для просмотра примеров используйте Chrome.
1. box-decoration-break
Это свойство CSS помогает указать, как должны отображаться фрагменты элемента при разбивке на несколько строк, столбцов или страниц.
See the Pen CSS: box-decoration-break by Ananya Neogi (@ananyaneogi) on CodePen.
2. attr()
С помощью attr () в CSS можно вернуть значение выбранного элемента. Этот метод может быть очень полезен в целях обеспечения доступности.
See the Pen attr() in CSS by Ananya Neogi (@ananyaneogi) on CodePen.
3. backface-visibility
Это свойство CSS устанавливает видимость для пользователя обратной стороны элемента (при повороте). Представляете UI с поворачивающимися карточками?
See the Pen CSS Card Flip On Hover by Ananya Neogi (@ananyaneogi) on CodePen.
4. conic-gradient
Градиенты прекрасны. Вероятно, вам случалось использовать линейные градиенты для фона, но знаете ли вы, что с помощью чистого CSS и conic-gradient можно создать круговую диаграмму?
See the Pen Pie Chart With Pure CSS by Ananya Neogi (@ananyaneogi) on CodePen.
Чтобы лучше понять, как работает conic-gradients, загляните в документацию MDN.
5. filter
Кому нужны эффекты фильтров из photoshop, если есть CSS-фильтры! Этот функционал изменяет вид исходного изображения. Таким образом можно получить следующие эффекты: blur (размытие), brightness (яркость), contrast (контраст), grayscale (оттенки серого), hue-rotate (смещение угла цвета), opacity (непрозрачночсть), invert (инвертирование), sepia (сепия), saturate (насыщенность), drop-shadow (падающая тень).
See the Pen CSS Filters by Ananya Neogi (@ananyaneogi) on CodePen.
Фильтр drop-shadow просто потрясающий. Он позволяет вам добавить тень к исходному изображению.
See the Pen CSS Drop Shadow by Ananya Neogi (@ananyaneogi) on CodePen.
6. mix-blend-mode
Это свойство CSS устанавливает, как содержимое элемента должно смешиваться с содержимым фона этого элемента или с содержимым родительского элемента.
See the Pen CSS Blend Modes by Ananya Neogi (@ananyaneogi) on CodePen.
С помощью этого свойства, а также фильтров, можно достигнуть потрясающих эффектов в отображении картинок и текста. Узнать больше можно в документации MDN.
7. first-letter
Одна из тех вещей, что мне нравятся в книгах и журналах, это прекрасные буквицы. Мы можем создавать их при помощи псевдоэлемента first-letter.
See the Pen CSS Drop-Cap by Ananya Neogi (@ananyaneogi) on CodePen.
8. shape-outside
Это свойство CSS дает возможность кастомизировать обтекание содержимого вокруг сложных объектов, а не простых прямоугольных блоков.
See the Pen CSS Shape-Outside by Ananya Neogi (@ananyaneogi) on CodePen.
Откройте пример в отдельной вкладке и попробуйте изменить ширину окна: вы заметите, как текст обрамляет картинку.
9. writing-mode
Это свойство CSS определяет, горизонтально или вертикально располагаются строки текста. Оно может принимать следующие значения:
- horizontal-tb – горизонтально контент размещается слева направо, а вертикально – сверху вниз;
- vertical-lr – горизонтально контент размещается слева направо, а вертикально – верху вниз;
- vertical-rl – горизонтально контент размещается справа налево, а вертикально – верху вниз.
Чтобы увидеть в действии, посмотрите этот пример.
10. Добавление градиента к тексту
Это достигается путем комбинирования свойств CSS -webkit-background-clip: text и -webkit-text-fill-color: transparent.
See the Pen Gradient Text with CSS by Ananya Neogi (@ananyaneogi) on CodePen.
11. Плавная прокрутка с доводкой
С помощью свойства CSS scroll-snap-type в контейнере прокрутки устанавливаются точки привязки.
See the Pen Scroll Snap with CSS by Ananya Neogi (@ananyaneogi) on CodePen.
В этом примере показана вертикальная прокрутка (y) со значением mandatory. В документации MDN очень хорошо поясняется, как использовать другие значения, такие как proximity, и горизонтальную прокрутку (x).
И это лишь несколько вещей, которые можно делать с помощью CSS. Возможности безграничны!
