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..
    Pure CSS Animated Drop-Down Info-Bar
    Left-Hand Tab Version

    ;o) Cor @ corz.org

.site-notice-bar::before, .site-notice-bar {
    transition: all 300ms ease-out;
    position: relative;
    display: block;
    border: solid .2rem #fbb627;
    font-weight: bold;
    font-size: 110%;

.site-notice-bar {
    width: 90%;
    padding: 1rem;
    margin: 10rem auto 3rem;
    border: solid .2rem #FFC44D;
    border-radius: .5rem;
    -khtml-opacity: 1;
    opacity: 1;

.site-notice-bar > p {
    margin: 1rem auto .5rem 1rem;
/*    max-width: 90%;*/

@media screen and (min-width: 921px) {

    .site-notice-bar::before, .site-notice-bar {
        position: absolute;
        border-top: none;
        border-radius: 0; /* reset corners */
        padding: 0;

    .site-notice-bar::before {
        content: attr(data-tab-text);
        left: -.2rem; /* this is the tab's left hand position */
        margin-top: 12rem;
        padding: .5rem 1rem;
        cursor: pointer;
        z-index: 100;
        display: block;
        border-bottom-left-radius: .5rem;
        border-bottom-right-radius: .5rem;

    .site-notice-bar {
        top: 0;
        margin-top: -12.2rem; /* .2rem added to remove visible border */
        height: 12rem;
        width: 80%;
        left: 10%;
        z-index: 101;
        -khtml-opacity: 0.66;
        opacity: 0.66;
        border-bottom-right-radius: .5rem; /* no left-hand corner */

    .site-notice-bar:hover {
        margin: 0;
        -khtml-opacity: 1;
        opacity: 1;
back to the main page

Make Big Fun Now!


Welcome to corz.org!

Since switching hosts (I hope you are alright, Ed! Wherever you are …) quite a few things seems to be wonky.

Juggling two energetic boys (of very different ages) on Coronavirus lockdown, I'm unlikely to have them all fixed any time soon. Mail me! to prioritise!