diff --git a/_data/authors.yml b/_data/authors.yml index d7b4e47..f74897d 100755 --- a/_data/authors.yml +++ b/_data/authors.yml @@ -1178,3 +1178,8 @@ Rohanrao02: github: Rohanrao02 author_image: 'blog-author.jpg' email: "rohanrao.jh@gmail.com" +mrakshith21: + name: Rakshith Mohan + github: mrakshith21 + author_image: 'rakshith_m.jpg' + email: "rakshith21mohan@gmail.com" diff --git a/_posts/2022-04-09-css-polygon.md b/_posts/2022-04-09-css-polygon.md new file mode 100644 index 0000000..cbb2519 --- /dev/null +++ b/_posts/2022-04-09-css-polygon.md @@ -0,0 +1,289 @@ +--- +layout: post +title: "CSS Polygons" +date: 2022-04-09 15:21:21 +image: '/assets/img/' +description: 'An introduction to CSS Polygons' +tags: +- IEEE NITK +- CompSoc +- Web +categories: +- Diode +github_username: 'mrakshith21' +--- + + + +## Motivation + +The motivation for this blog is [In Pieces](http://www.species-in-pieces.com/#), an exhibition of CSS Polygons made by tinkering a single CSS property. + +## Introduction + +Unconventional shapes catch the eye. Imbibing shapes in your HTML pages can be a tough task using conventional CSS. But here's ```clip-path```, a simple yet powerful property to cover all shapes that you might envision. + +Here are some polygons, designed using ```clip-path```. + +
+ +
+ +## Clip path + +```clip-path``` property clips a region such that only the content within the region is visible and the content outside becomes invisible. + +I will be presenting 4 values of clip-path in this blog. + +### Circle + +![Circle](/blog/assets/img/polygon/Circle.png) + +**The contrast in the second image above and in all images further are for demo +purpose. The contrasted region will be invisible in the actual rendering.** + +``` +img{ + clip-path: circle(30px at 50% 50%); +} +``` + +The general format for the circle clip-path is +```clip-path: circle(radius at centerX centerY)``` + +- Here centerX and centerY are measured from the top left corner of the image. +- All the values radius, centerX and centerY can take units in px, rem, % and so on. + + +In essence, the above code clips a circle of radius 30px from the center of the image. + +### Inset + +Inset is used to work with the edges of reactangles. +The edges will be pulled back by an inset specified. You can think of it being +similar to a padding in an image, just that the padded region becomes invisible. + +![Inset](/blog/assets/img/polygon/Inset.png) + +``` +img{ + clip-path: inset(10px 20px 20px 20px); +} +``` + +The general format for inset is +```clip-path: inset(inset_top inset_right inset_bottom inset_left)``` + +```clip-path``` also allows you to round the corners of an inset +by using ```round ``` + + +### Ellipse + +This allows you to create oval-shaped or elliptical clippings. + +![Ellipse](/blog/assets/img/polygon/Ellipse.png) + +``` + img{ + clip-path: ellipse(40px 30px at center); + } +``` + +The general format for an ellipse is +```clip-path: ellipse(major_x_axis minor_y_axis at centerX centerY)``` + + +### Polygon + +It is the most intersesting of all values so far. With polygon you can +control multiple end-points of the clipping. + +![Circle](/blog/assets/img/polygon/Polygon.png) +``` + img{ + clip-path: polygon(50% 0%, 0% 50%, 50% 100%, 100% 50%); + background-color: #1E88E5; + } +``` + +Polygon takes as a parameter the vertices of the polygon to be clipped and their +coordinates with respect to the top left corner. +The x-coordinate is towards the right and the y-coordinate is towards the bottom. + +The general format for a polygon is +```clip-path: polygon(x1 y1, x2 y2, x3 y3, ...)``` + +
+## Use cases + +### 1. Angled section + +This is a common design used in many web pages, where the background +appears slightly slanted. It is quite easy to +implement this using ```clip-path : polygon()```. You just need to tweak the +vertex at the bottom right and you're done. + +![Angled section](/blog/assets/img/polygon/Angled.png) + +``` + div{ + background-color: + clip-path: polygon(0% 0%, 0% 100%, 100% 70%, 100% 0%); + } +``` +
+ +### 2. Hover effects + +You can create simple but pleasing effects on hover using clip-path. +Take for example, an expanding circle that reveals information to you. +Hover on the circle below to see yourself. + +
+ This text is displayed on hover +
+
+ +``` + .hover-effect{ + width : 70%; + height : 100px; + background-color : #42A5F5; + color: #42A5F5; + clip-path: circle(5% at 50% 50%); + transition: all 1s; + display: flex; + align-items: center; + justify-content: center; + margin: auto; + } + + .hover-effect:hover{ + background-color: #1565C0; + border-radius : 5px; + color : white; + clip-path: circle(100% at 50% 50%); + } +``` + +
+ +### 3. Animations on images + +Faces and emotions are not often very well expressed when they are +displayed as rectangular images. You can instead use clip-path to give +a feeling to those pictures. Add animations and the effect is even better. + +
+ Animation +
+ + +Notice how the vertices of the polygon are changing with time. If you change + the order of the vertices, the animation changes too! + +``` + + img { + animation: flippingShapes 3s infinite; + } + + @keyframes flippingShapes { + from { + clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); + } + + 50% { + clip-path: polygon(50% 10%, 90% 50%, 50% 90%, 10% 50%); + } + + to { + clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); + } + } + +``` + +
+ +## Points to remember while using clip-path + +- The borders, outlines of the region that is invisible will also be invisible. +- Hover and mouse pointer effects are not applied on the invisible region. +- While using transitions with clip-path, make sure that the effect is aesthetically pleasing. + +## References + +1. [Understanding clip-path](https://ishadeed.com/article/clip-path/) +2. [In Pieces - a CSS polygon exhibition](http://www.species-in-pieces.com/#) +3. [Clip-path maker](https://bennettfeely.com/clippy/) +4. [Animations with clip-path](https://blog.logrocket.com/guide-to-css-animations-using-clip-path/) \ No newline at end of file diff --git a/assets/img/authors/rakshith_m.jpg b/assets/img/authors/rakshith_m.jpg new file mode 100755 index 0000000..82908d2 Binary files /dev/null and b/assets/img/authors/rakshith_m.jpg differ diff --git a/assets/img/polygon/Angled.png b/assets/img/polygon/Angled.png new file mode 100644 index 0000000..9f44c9f Binary files /dev/null and b/assets/img/polygon/Angled.png differ diff --git a/assets/img/polygon/Cat.jpeg b/assets/img/polygon/Cat.jpeg new file mode 100644 index 0000000..fed3650 Binary files /dev/null and b/assets/img/polygon/Cat.jpeg differ diff --git a/assets/img/polygon/Circle.png b/assets/img/polygon/Circle.png new file mode 100644 index 0000000..3d7ea1b Binary files /dev/null and b/assets/img/polygon/Circle.png differ diff --git a/assets/img/polygon/Ellipse.png b/assets/img/polygon/Ellipse.png new file mode 100644 index 0000000..8d9d95c Binary files /dev/null and b/assets/img/polygon/Ellipse.png differ diff --git a/assets/img/polygon/Inset.png b/assets/img/polygon/Inset.png new file mode 100644 index 0000000..75848a7 Binary files /dev/null and b/assets/img/polygon/Inset.png differ diff --git a/assets/img/polygon/Polygon.png b/assets/img/polygon/Polygon.png new file mode 100644 index 0000000..51abef1 Binary files /dev/null and b/assets/img/polygon/Polygon.png differ