author-img

Payal Pansuriya's Posts

Web Designer

post

This blog gives information and different elements of the meta tag.

A meta is a type of HTML tag.

meta is the only exit in HTML5. They are usually on the "head" of the page.

It provides search engines with information about a website page. Metadata will not be displayed on the page, but the machine is parsable.

The meta element is used to specify page description, keywords, author, and other metadata.

HTML introduced a method to let web designers take control over the viewport (the user's visible area of a web page) through the meta tag.

Note: Metadata is always passing as name/value pairs.

meta keywords

Define keywords for search engines

<meta name="keywords" content="HTML5 meta tag, meta tag important for SEO, meta description, meta keywords, meta author, meta title">

meta description

Define a description of your webpage.

Description Meta tags are coming up that contain web passage information. The description meta tag is the most important tag, your application will be ranked on your page by search engines. The description has relationships between 150 and 160 characters

<meta name="description" content="Meta tag provides search engines with information about a website page.">

Author Name

Author attribute specifies the author of the webpage.

<meta name="author" content="Payal Pansuriya">

http-equiv attribute

HTML meta refresh tag refreshes the page as you mention the time in the content.

<meta http-equiv="refresh" content="10">

August 24, 20212 minutesauthorPayal Pansuriya
post

In this blog, we will learn how to use clip-path and also cover inset(), polygon(), circle(), and ellipse() method .

What is CSS Clip-path?

Clip-path is a CSS property that creates a clipping field that sets which part of a component should be shown and which other parts are hidden. The inside of the clipped area is shown, while the outside is hidden.

CSS Property clip-path creates shapes by clipping an element. It clips some regions of an element to create new shapes. The most used method for clip-path is polygon(), circle(), and ellipse().

CSS clip-path() accepted values

These shapes can be created using basic shape functions. The basic shape functions are listed below:-

  • inset()
  • polygon()
  • circle()
  • ellipse()

inset()

The inset () function allows you to clip a component from around the coordinate system. The result is a visible rectangle. you can assign values to the margin or padding and border-radius property. but two values are limited in rounded corners. The first value is assigned to the top left corner and the bottom right corner and the second value is assigned to the top right corner and the bottom left corner.

inset

polygon()

To design or clip the rectangular parts of the viewport, we use the polygon () method. Polygon is the most commonly used method in clip-path. We can construct any shape using the polygon method.

polygon-example

Example

polygon

circle()

The below image is created by using the clip-path method circle(50% at 50% 50%). In the circle(val1 at var2 var3), val1 is the size of the radius of the circle, and val2 and val3 are the positions of the center. val2 represents the position of the center from the left of the viewport, val2 represents the position of the center from the top of the viewport.

cricle

ellipse()

Below image is created using clip-path method ellipse(25% 40% at 50% 50%). An ellipse(val1 val2 at val3 val4) val1 and val2 are the horizontal and vertical distance from the center. val3 and val4 is the position of center.

ellipse

Resources

I recommend you visit this link to play with the clip-path CSS property. You will see different types of shapes from this link. It's an imaginative place. You can customize your shape.

July 29, 20212 minutesauthorPayal Pansuriya