Posts

Showing posts from January, 2018

It works in Firefox, but not in Tor Browser

In today's world, where websites play a major role in providing various technical services to users, web developers have an important role. Though the war between back-end v/s front-end is never ending, nonetheless we all can probably agree on the fact that front-end does provide the non-tech users with an interface so that it becomes easier for them to use the back-end functionalities. Thus, the great problem of making front-end easy to use while also looking good comes into play. With the advent of the web, web technologies have also advanced a great deal. One of them is definitely CSS. CSS now has enough power to create a really interactive decent looking website only using it. With attributes like filter, masking and so on, you no more even need photoshop to change your images every time; with the help of grid-layout and flex you don't need to bang your head about laying out items properly on your webpage properly. Now you must be wondering why am I telling all this and n…

CSS Masking: Mask of Batman

Recently, I have been watching videos on CSS to know more about the various interesting features in CSS such as grid layout, flex, filter and so on. After all, it is one of the Turing Complete languages. One way I like to learn more about languages is by watching conference talks. So, I was going through the different talks in CSSConf 2015 when I came across this talk by Tim Holman titled Fun.css. It is a really fun talk but one thing that really caught my eyes was the transition between slides using a star wipe. I searched to see if I could find the code for how to do it with purely CSS but didn't get much help. This is when I decided to give it a try myself. But why Star? I would make a Bat Swipe.

So this is the final prototype I made using just CSS without any Javascript.


See the Pen Bat Swipe by Saptak Sengupta (@SaptakS) on CodePen.
The main CSS property that is used in the above example is mask-image and associated CSS Masking properties. What masking does is hiding parts o…