Blogger Ever

Old and new school technique to CSS sliding door

Sliding door, an effect can be achieved using two different methods, an old school and new one. Have a look on both of them.

Once searching a solution for sliding door (headings or links having top corners rounder while bottom ones pointed), realized me that people are still using old school techniques which are time taking and simply old ones, where I'm preferring some change. Lets have look on both possibilities.
While discussing CSS property background property I think a year ago, I mentioned about sliding door. Which was the old technique:

Old School Method [Revising]

This method uses two images, one for left and one for right. These images have top side rounded which makes this effect in action.
This is how sliding door looks like

Pros & Cons

  • Height should be fixed.
  • Use of images sucks.
  • Use of images increases size.
  • Its a history now
Do not like history therefore no demo.

New School Method

Using border-radius property you can create this pretty cool effect quiet easily. I found this tool on the web that generates the code for your selected radius, use this you can your sliding door pretty easily.

However, you find some sort of browser opposition here because it is not supported in Opera Mini and IE8, so if you can neglect this drawback you can have it.

Pros & Cons

  • Independent of height problem.
  • Yet the easiest way to achieve effect.
  • No support for IE8 (or below) and Opera Mini (till date).


See the Pen sliding door Demo by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.