CSS Clip Path-Awesome trick to create mind blowing web pages

-

 Hey folk, so today i'll tell the you to most awesome trick to crate super sexy front end, i'm gone tell you about a property of CSS to shape the web page or image as per our need.

Suppose i have  a page and want's to change some side of that page then does it make our page bit stylish?? yes, it will.

Or if i want to change the shape of image as per my convenience, so in this article we'll learn about clip path using polygon method. As we know that polygon is a close figure which has finite number of side so we can clip our page image or text using clipping.

Introduction: clip path in CSS give you rights to make changes in the content by clipping it in you're way, like cutting a piece of paper and made a butterfly.

So in this article i'll clip a image to give a very basic idea of how clipping work.

Clip path using CSS
Clipping a picture using CSS


So in above image i clipped the image from mid of left side.

HOW : CSS CODE

clip-path : polygon(/*values in percentage or pixel and seperated through (,) comma*/);

ACTUAL CODE:

VSCODE-CSS-CODE

In Above Code there was a image in a header section and then that header section is styled("In very boring way☺") with code of clip-path: polygon( 0 0, 100% 0, 100% 100%, 0 100%, 8% 68%);

percentage number in polygon tag are values from which you want to clip the section.

Trick to clip: Just imagine the screen of you're system as a graph starting from top left corner as 0,0 to top right corner as 100,0 and so on.
Now you can clip the content as per you're style, and create awesome stuff.
Thankyou 


 

Comments

Post a Comment

Popular posts from this blog

Simple increment program in Javascript with source code(using HTML, CSS, JAVASCRIPT)

-
 Hey folks, here is a simple javascript program to increment the value by one by clicking on a button, as a new programmer we face lots of delima like what to learn, where to learn what type of framework should i master and many more, so we should start from basic of the programming world like creating a incremental program which return +1 value when you hit the button.   So here is html code : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <link rel="stylesheet" herf="count.css"> <script src="countjs.js"></script> <body>     <div class="heading">D CODER</div>     <div class="count">          <button id="dadd" onclick="inc()">+</button>          <input type="text" id="text">      </div> </body> </html> In this HTML code i created one div for my p...
Read more

Margin in CSS-Explained

-
Image
  MARGIN Margin is a external space given to a element, and those elements are images paragraph heading etc, and this margin is given to create good user interface and make content pleasing to our eyes. So here question arises, Where to give a margin: so we can give margin to :  TOP of element. BOTTOM of element. RIGHT of element. LEFT of element. Here is box model diagram to get better overview of margin: CSS Box Model this box model contain an element, whereas height and width is shown in picture then padding is written (top,bottom,right,left) which means inner space given between a border, then border field is their which is outer outline of a element, then external space shown is margin. Syntax of giving a Margin: let, i wrote a heading in html - <h4 id="head">You are reading my blog</h4> In CSS that's how we declare margin to every side  #head{ margin-right:50px; margin-left:75px; margin-top:100px; margin-bottom:125px; } In above example individual margi...
Read more

Language knowledge for Front end developement(Complete road-map)

-
Hey folks , so as far as web development is concern website rely on two main factor which is client side and server side, and to deal with client side(content shown on screen) is known as Front end . Basic :  Before you switch to any framework or code editor make sure you clear your all the  basic, and basic for front end consist 3 languages which is : 1. HTML 2. CSS 3. JavaScript Introduction so HTML is a hyper text markup language which is use to create body of your website.or we can say that structure of website is written in this language like button, navbar, written content(heading, paragraph,etc) CSS is Cascading Style Sheet which add style to your website or in compact i would say it make your website beautiful, for example you make a button in html then CSS has power to add color, margin, padding, align content, add animation and many more Javascript can be consider as a brain of your front end, here logic is written to add better punctuality for you're website, and y...
Read more