Hello World!

This Info-Bar has its visible tab on the far-left.

All that we do to get this, is switch a couple of CSS directives.

Pure CSS Info-Bar (Left Hand Tab Demo)

This page demonstrates the Pure CSS Info-Bar, except with its visible tab on the left. I also removed the box-shadows, as this variant looks more like paper filing to me!

First, move the generated "content" over to the left: .site-notice-bar::before { left: 0; }

If you have a border around your Info-bar (and tab) you will need to shift the generated tab left by the width of your border, to avoid an uneven edge, as I have done in this example.

We also need to move the rounded corners slightly, so there is no bottom-left rounded corner on the Info-Bar, which would spoil the straight line down the left edge into the visible tab. So we reset the corners (border-radius: 0;) and then give the Info-Bar only a rounded bottom-right (border-bottom-right-radius: .5rem;), while the generated tab gets both left and right..

Note how I also moved the margin-top up by .2rem, to avoid having the border show on the page (not that you would see it with this scheme, but it is there!). While I was at it, I moved the Info-Bar text left, to line up better with the tab and overall effect.

Here is the left-hand side variant (notes added)..

Quite paper-like, methinks..
back to the main page

Make Big Fun Now!

;o) Cor

Welcome to corz.org!

I'm always messing around with the back-end.. See a bug? Wait a minute and try again. Still see a bug? Mail Me!