Features of html and css

Advanced Features of HTML5 and CSS3

HTML was simply perceived as a markup language some years back. With an advancement in HTML and birth of CSS media queries, the web has evolved drastically. HTML5 and CSS3 media queries are both allowing developers to go the extra mile and deliver a superior web as well as mobile experience to the viewers.

This blog will take you through some attractive features of HTML5 and CSS3 enabling you to enhance the look and feel of your web properties.

1. Editing content within the elements
You can edit content within an element by using an HTML attribute called contenteditable. There is a CSS property -webkit-user-modify similar to contenteditable which determines whether or not a user can edit the content. The default value is always read-only and read-write value of -webkit-user-modify allows the user to edit the content. Here’s an example:

[js]

You can edit me

h2 -webkit-user-modify:read-write;
>
[/js]

2. Form attribute required
This particular feature ensures that the form is not submitted if an input box with required attribute is empty. The required attribute can also be used as a selector to style the element. Here’s an example:

3. Regular expressions
Verifying textbox is simple. For verifying any particular textbox, we can insert regular expression directly into an element. We can check a textbox value against the regular expression specified in the pattern attribute. Here’s an example

In the above example, input box should contain only five characters (the characters can only be numerals)

4. Figure tag
Figure tag includes figcaption tag through which we can associate captions with an image element. Apart from images, we can also include audio, video, chart, SVG, and canvas in the figure tag. Here’s an example

[js]

[/js]

5. SVG element
The SVG element can be used to draw various shapes on a web page since these are vector based. They can also be scaled, up or down to any extent without losing the image quality. Here’s an example

6. Webfonts
With the help of @fontface rule, we can include any source file for fonts. At a later point, we can refer it through font-family declaration. Here’s an example

@font-face font-family: ‘opensanssemi’;
src: url(“../fonts/OpenSans-Semibold.ttf”) format(“truetype”);
>
Element font-family will be:
p font-family:opensanssemi;
>

7. Gradient
Gradient displays a combination of two or more colors. They can either be linear or radial. For the responsive layouts, it is better to use gradient image over the background image. Here’s an example:

background: -webkit-linear-gradient(to bottom,rgba(36,4,3,.8) 41%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom,rgba(36,4,3,.8) 41%,rgba(0,0,0,0) 100%);

Below is the example of a linear gradient changing color from dark to light brown

8. Animation and Transition
We can use both Transition and Animation when it is required to change an element from one state to another. The difference is that animation can be made up of multiple states, providing control over its animation. Here’s an example

@-webkit-keyframes expand-bottom-overlay 0% top: -6.5em; >
100% top: 0;
> >

This will animate element from -6.5em to 0

These are some of the most advanced features of HTML5 and CSS3 media queries. You will be able to implement them and improve your user experience drastically.

Источник

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

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

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

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

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

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

Стайлинг здесь непрост, я согласна! Но всегда есть обходные пути (они хорошо изложены в статье «How to style progress element»).

4. Сворачивающиеся и разворачивающиеся подробности

5. Показ подходящей мобильной клавиатуры на основе типа входящих данных

6. Добавление определения цвета

7. Подсветка текста

8. Создание прямой ссылки на телефонный номер

Подобно тому, как мы делаем ссылку на email при помощи mailto, мы также можем создавать ссылку на телефонный номер.

9. Показ удаления и вставки текста

10. Редактирование содержимого страницы

Хотите сделать собственный браузерный редактор? Это тоже возможно – How to make browser editor with html.

Примечание: не все браузеры поддерживают эти элементы и атрибуты. Но мы все равно можем использовать их, постепенно улучшая!

Переходим к CSS

Давайте рассмотрим список потрясающих вещей, на которые способен CSS!

Примечание: часть этих свойств поддерживается не всеми браузерами. Можно поставить дополнительную проверку поддержки, используя @supports и добавляя альтернативные стили. Для просмотра примеров используйте Chrome.

1. box-decoration-break

Это свойство CSS помогает указать, как должны отображаться фрагменты элемента при разбивке на несколько строк, столбцов или страниц.

2. attr()

С помощью attr () в CSS можно вернуть значение выбранного элемента. Этот метод может быть очень полезен в целях обеспечения доступности.

See the Pen attr() in CSS by Ananya Neogi (@ananyaneogi) on CodePen.

3. backface-visibility

Это свойство CSS устанавливает видимость для пользователя обратной стороны элемента (при повороте). Представляете UI с поворачивающимися карточками?

4. conic-gradient

Градиенты прекрасны. Вероятно, вам случалось использовать линейные градиенты для фона, но знаете ли вы, что с помощью чистого CSS и conic-gradient можно создать круговую диаграмму?

Чтобы лучше понять, как работает 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 просто потрясающий. Он позволяет вам добавить тень к исходному изображению.

6. mix-blend-mode

Это свойство CSS устанавливает, как содержимое элемента должно смешиваться с содержимым фона этого элемента или с содержимым родительского элемента.

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

7. first-letter

Одна из тех вещей, что мне нравятся в книгах и журналах, это прекрасные буквицы. Мы можем создавать их при помощи псевдоэлемента first-letter.

See the Pen CSS Drop-Cap by Ananya Neogi (@ananyaneogi) on CodePen.

8. shape-outside

Это свойство CSS дает возможность кастомизировать обтекание содержимого вокруг сложных объектов, а не простых прямоугольных блоков.

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

9. writing-mode

Это свойство CSS определяет, горизонтально или вертикально располагаются строки текста. Оно может принимать следующие значения:

• horizontal-tb – горизонтально контент размещается слева направо, а вертикально – сверху вниз;
• vertical-lr – горизонтально контент размещается слева направо, а вертикально – верху вниз;
• vertical-rl – горизонтально контент размещается справа налево, а вертикально – верху вниз.

Чтобы увидеть в действии, посмотрите этот пример.

10. Добавление градиента к тексту

Это достигается путем комбинирования свойств CSS -webkit-background-clip: text и -webkit-text-fill-color: transparent.

11. Плавная прокрутка с доводкой

С помощью свойства CSS scroll-snap-type в контейнере прокрутки устанавливаются точки привязки.

В этом примере показана вертикальная прокрутка (y) со значением mandatory. В документации MDN очень хорошо поясняется, как использовать другие значения, такие как proximity, и горизонтальную прокрутку (x).

И это лишь несколько вещей, которые можно делать с помощью CSS. Возможности безграничны!

Источник