На что способны HTML и CSS?

Перевод статьи «HTML can do that?» и «CSS can do that?».

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

Стайлинг здесь непрост, я согласна! Но всегда есть обходные пути (они хорошо изложены в статье «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. Возможности безграничны!

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

1. Выпадающее меню для поиска

2. Диалоговое окно

3. Показатели прогресса