{"id":46795,"date":"2017-04-10T16:29:56","date_gmt":"2017-04-10T10:59:56","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=46795"},"modified":"2017-04-11T16:40:29","modified_gmt":"2017-04-11T11:10:29","slug":"advanced-features-of-html5-and-css3","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/advanced-features-of-html5-and-css3\/","title":{"rendered":"Advanced Features of HTML5 and CSS3"},"content":{"rendered":"

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.<\/p>\n

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.<\/p>\n

1. Editing content within the elements
\n<\/strong>You can edit content within an element by using an HTML attribute called contenteditable. There is a CSS property -webkit-user-modify similar to\u00a0<\/strong>contenteditable\u00a0which 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:<\/p>\n

[js] <h2 contenteditable=true>You can edit me<\/h2>
\nh2{
\n-webkit-user-modify:read-write;
\n}
\n[\/js]<\/p>\n

2. Form attribute required<\/strong>
\nThis particular feature ensures that the form is not\u00a0submitted if an input box with required attribute is empty. \u00a0The required attribute can also be used as a selector to style the element. Here’s an example:<\/p>\n

[js]<input type="text" name="required Field" required="required">
\ninput:required{
\nbackground:red;
\n}
\n[\/js]<\/p>\n

\"Required<\/p>\n

3. Regular expressions<\/strong>
\nVerifying 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<\/p>\n

[js]<input type="text" name="rollno" pattern="[0-9]{5}">[\/js]<\/p>\n

In the above example, input box should contain only five characters (the characters can only be numerals)<\/p>\n

\"Regex<\/p>\n

4. Figure tag
\n<\/strong>Figure tag includes figcaption\u00a0tag through which we can associate captions with an image element. Apart from images, we can also include audio, video, chart,\u00a0SVG, and canvas<\/a> in the figure tag. Here’s an example<\/p>\n

[js]<figure>
\n\t<img src="\/blog\/wp-ttn-blog\/uploads\/2017\/03\/productimg.png">
\n\t<figcaption>
\n\t<p>Image of birds<\/p>
\n\t<\/figcaption>
\n\t<\/figure>
\n[\/js]<\/p>\n

\"Figure<\/p>\n

5. SVG element<\/strong>
\nThe 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<\/p>\n

[js]<svg xmlns="http:\/\/www.w3.org\/2000\/svg" viewBox="0 0 64.47 53.44"> <path id="Shape_5_copy" data-name="Shape 5 copy" class="rewind-svg gray-icon" d="M2758.62,4719.2l28.92-23.09a1.538,1.538,0,0,1,.98-0.34,1.633,1.633,0,0,1,.71.16,1.672,1.672,0,0,1,.9,1.49v19.26l25.75-20.57a1.585,1.585,0,0,1,.99-0.34,1.56,1.56,0,0,1,.7.16,1.672,1.672,0,0,1,.9,1.49v46.16a1.672,1.672,0,0,1-.9,1.49,1.56,1.56,0,0,1-.7.16,1.585,1.585,0,0,1-.99-0.34l-25.75-20.57v19.26a1.672,1.672,0,0,1-.9,1.49,1.633,1.633,0,0,1-.71.16,1.538,1.538,0,0,1-.98-0.34l-28.92-23.09A1.673,1.673,0,0,1,2758.62,4719.2Z" transform="translate(-2756 -4693.78)"><\/path>
\n <\/svg>
\n[\/js]<\/p>\n

\"svg<\/p>\n

6.\u00a0Webfonts<\/strong>
\nWith 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<\/p>\n

@font-face {
\nfont-family: ‘opensanssemi’;
\nsrc: url(“..\/fonts\/OpenSans-Semibold.ttf”) format(“truetype”);
\n}
\nElement font-family will be:
\np{
\nfont-family:opensanssemi;
\n}<\/p>\n

7. Gradient<\/strong>
\nGradient displays a combination of two or more colors. They can either be linear or radial. For the responsive\u00a0layouts, it is better to use gradient image over the background image. Here’s an example:<\/p>\n

background: -webkit-linear-gradient(to bottom,rgba(36,4,3,.8) 41%,rgba(0,0,0,0) 100%);
\nbackground: linear-gradient(to bottom,rgba(36,4,3,.8) 41%,rgba(0,0,0,0) 100%);<\/p>\n

Below is the example of a linear gradient changing color from dark to light brown<\/p>\n

\"Gradient<\/p>\n

8. Animation and Transition<\/strong>
\nWe can use both Transition and Animation when it is required to change an element from one state to another. The difference is that animation<\/a> can be made up of multiple states, providing control over its animation. Here’s an example<\/p>\n

@-webkit-keyframes expand-bottom-overlay {
\n0% {
\ntop: -6.5em; }
\n100% {
\ntop: 0;
\n} }<\/p>\n

This will animate element from -6.5em to 0<\/p>\n

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.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1030,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":64},"categories":[3429,1],"tags":[355,4860,378],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/46795"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1030"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=46795"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/46795\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=46795"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=46795"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=46795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}