Abvanced Features of HTML5 and CSS3

Advanced Features of HTML5 and CSS3

HTML was basically seen as a markup language a few years back. With an advancement in HTML and birth of CSS media quiries, the web has advanced definitely. HTML5 and CSS3 media questions are both enabling engineers to go the additional mile and convey a superior web and portable experience to the viewers.

This blog will take you through some alluring highlights of HTML5 and CSS3 empowering you to improve the look and feel of your web properties.

• Editing content within the elements

You can sdit content inside an element with the use of HTML attribute called contenteditable. There is a CSS property -webkit-user-modify like contenteditable which decides that user can edit the content or not. The default value is dependably perused just and perused compose estimation of - webkit-client change enables the user to edit the content. 

Here's an illustration:

                        <h2 contenteditable=true>You can edit me</h2>

h2{

-webkit-user-modify:read-write;

}

• Form attribute required

The required Attribute. The required attribute specifies that an input field must be filled out before submitting the form. The required characteristic can likewise be utilized as a selector to style the element. 

Here's an illustration:

<input type="text" name="required Field"  required="required">

input:required{

background:red;

}

• Regular expressions

Checking textbox is basic. For checking a specific textbox, we can embed regular expression directly into an element. We can check a textbox esteem against the  regular expression indicated in the pattern attribute. Here's an illustration:

• Figure tag

Figure tag incorporates figcaption tag through which we can associate captions with an image tag. Aside from images, we can likewise incorporate audio, video, graph, SVG, and canvas in the figure tag. Here's an illustration:

<figure>

<img src="http://static1.tothenew.com/blog/wp-content/uploads/2017/03/productimg.png">

               <figcaption>

                   <p>Image of birds</p>

               </figcaption>

          </figure>

• SVG element

                SVG stands for Scalable Vector Graphics

The SVG component can be utilized to draw different shapes on a web page since these are vector based.

The HTML <svg> element is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and      graphic images.

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

• Webfonts

Web fonts allow Web designers to use fonts that are not installed on the user's computer.

When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.

Your "own" fonts are defined within the CSS @font-face rule.

@font-face {
   font-family: myFirstFont;
   src: url(sansation_light.woff);
}

div {
   font-family: myFirstFont;
}

• Gradient

CSS gradients let you display smooth transitions between two or more specified colors.

CSS defines two types of gradients:

·         Linear Gradients (goes down/up/left/right/diagonally)

·         Radial Gradients (defined by their center)

Here is an illustration:

#grad {
     background-image: linear-gradient(to right, red , yellow);
}

The following example shows a linear gradient thar starts from the left, transition to yellow:

• Animation

An activity lets an element step by step change starting with one style then onto the next.

You can change the many CSS properties you need, as many times you need.

The @keyframes Rule

When you determine CSS styles inside the @keyframes control, the animation will step by step change from the present style to the new style at certain times.

To get an animation to work, you have to bind the animation to an element.

Here is an illustration:

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}


div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

•  Transition

CSS transitions allows you to change property values smoothly (from one value to another), over a given duration.

To make a Transition effect, you should determine two things:

1.     the CSS property you need to add an effect to

2.     the duration of the effect

Here is an illustration:

div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s; /* Safari */
    transition: width 2s;
}

div:hover {
    width: 300px;
}

These are probably the most developed highlights of HTML5 and CSS3 media inquiries. You will have the capacity to execute them and enhance your user experience drastically.