CODEWITHSUNDEEP
htmlcss
Questioner
Questioner

Reputation: 7463

How to achieve a CSS footer "curtain" effect?

I would like to be able to create a simple curtain effect using CSS, and I have found a tutorial on the web that explains how to do it.

However, I can't get it to actually do anything. I've tried to recreate the effect described in the tutorial on JSFiddle, without any success. I basically just copied over the code from one of the provided example pages, but it seems to be missing something.

Can someone show me what is missing in the JSFiddle I've created?

Apparently I also have to include the JSFiddle code here, so here it is:

HTML

<!DOCTYPE HTML>

<body>
    
    <div id="test">
        <p>test</p>
    </div>
    
    <div class="curtain">TEST TEST TEST</div>
    
</body>

CSS:

body {
    padding-bottom: 600px;
}
body:after {
    content: "";
    height: 1800px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: yellow;
    background-size: auto 280px;
    z-index: 1;
}
.curtain {
    height: 1200px;
    position: relative;
    z-index: 2;
}

Upvotes: 1

Views: 2711

Answers (2)

webkit
webkit

Reputation: 3369

Here is a simplified example of what you're looking for:

DEMO

HTML

<div class="title">SCROLL DOWN DUDE</div>
<div class="curtain"></div>

CSS

body {
    padding:0;
    margin:0;
    padding-bottom: 100px;
}
.title { 
    line-height:50px;
    color:#212121;
    text-align:center;
    position:fixed;
    top:0;
    left:0;
    line-height:150px;
    width:100%;
    z-index:3;
}
body:after {
    content: "COME FROM UNDER";
    height: 100px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    z-index: 1;
    color: #fff;
    text-align:center;
    line-height:100px;
}
.curtain {
    height: 1200px;
    position: relative;
    z-index: 2;
    background:yellow;
}

basically the bottom padding and :after get the same height.

Upvotes: 2

Indranil Mondal
Indranil Mondal

Reputation: 2857

You are missing some css. Try the following

 body
    {
margin: 0;
padding: 0;
    }
 body { color: #000; }
 img { border: none; }
  p
    {
font-size: 1em;
margin: 0 0 1em 0;
line-height: 20px;
    }
 h1 {
margin: 0 0 1em;
font-size: 26px;
    }

 /* Branding */
  #cssninja
    {
position: absolute;
top: 0;
left: 0;
background-color: #18191d;
width: 100%;
height: 40px;
z-index: 3;
    }
#cssninja p
{
    color: #ffffff;
    text-align: center;
    margin: 10px 0 0 0;
}
#cssninja a
{
    color: #ffffff;
    text-decoration: none;
    background: url(../assets/ico_ninja.gif) 0 0 no-repeat;
    padding: 4px 0 9px 28px;
}
#cssninja a:hover
{
    text-decoration: underline;
}

    body {
    padding-bottom: 600px;
   }
  body:after {
  content: "";
   height: 1800px;
position: fixed;
   left: 0;
   right: 0;
   bottom: 0;

    background-color: #000;
background-position: 40% 100%, 50% 100%, 63% 100%;
background-repeat: no-repeat;
    background-size: auto 180px,auto 280px,auto 180px;
    z-index: 1;
   }

 .curtain {
height: 1200px;
position: relative;
z-index: 2;
    } 

    /* 
Curtain effect using CSS gradients 
http://meyerweb.com/eric/thoughts/2012/06/22/cicadients/
    */
   .curtain {
background-image:
    -webkit-linear-gradient(
        90deg,
        rgba(255,128,128,0.25),
        rgba(255,128,128,0) 75%
    ),
    -webkit-linear-gradient(
        -1deg,
        transparent,
        transparent 30%,
        #510A0E 35%,
        #510A0E 40%,
        #61100F 43%,
        #B93F3A 50%,
        #4B0408 55%,
        #6A0F18 60%,
        #651015 65%,
        #510A0E 70%,
        #510A0E 75%,
        rgba(255,128,128,0) 80%,
        transparent
    ),
    -webkit-linear-gradient(
        2deg,
        #510A0E,
        #510A0E 20%,
        #61100F 25%,
        #B93F3A 40%,
        #4B0408 50%,
        #6A0F18 70%,
        #651015 80%,
        #510A0E 90%,
        #510A0E
    );
background-image:
    -moz-linear-gradient(
        90deg,
        rgba(255,128,128,0.25),
        rgba(255,128,128,0) 75%
    ),
    -moz-linear-gradient(
        -1deg,
        transparent,
        transparent 30%,
        #510A0E 35%,
        #510A0E 40%,
        #61100F 43%,
        #B93F3A 50%,
        #4B0408 55%,
        #6A0F18 60%,
        #651015 65%,
        #510A0E 70%,
        #510A0E 75%,
        rgba(255,128,128,0) 80%,
        transparent
    ),
    -moz-linear-gradient(
        2deg,
        #510A0E,
        #510A0E 20%,
        #61100F 25%,
        #B93F3A 40%,
        #4B0408 50%,
        #6A0F18 70%,
        #651015 80%,
        #510A0E 90%,
        #510A0E
    )       
    ;
background-image:
    -ms-linear-gradient(
        90deg,
        rgba(255,128,128,0.25),
        rgba(255,128,128,0) 75%
    ),
    -ms-linear-gradient(
        -1deg,
        transparent,
        transparent 30%,
        #510A0E 35%,
        #510A0E 40%,
        #61100F 43%,
        #B93F3A 50%,
        #4B0408 55%,
        #6A0F18 60%,
        #651015 65%,
        #510A0E 70%,
        #510A0E 75%,
        rgba(255,128,128,0) 80%,
        transparent
    ),
    -ms-linear-gradient(
        2deg,
        #510A0E,
        #510A0E 20%,
        #61100F 25%,
        #B93F3A 40%,
        #4B0408 50%,
        #6A0F18 70%,
        #651015 80%,
        #510A0E 90%,
        #510A0E
    );
background-image:
    -o-linear-gradient(
        90deg,
        rgba(255,128,128,0.25),
        rgba(255,128,128,0) 75%
    ),
    -o-linear-gradient(
        -1deg,
        transparent,
        transparent 30%,
        #510A0E 35%,
        #510A0E 40%,
        #61100F 43%,
        #B93F3A 50%,
        #4B0408 55%,
        #6A0F18 60%,
        #651015 65%,
        #510A0E 70%,
        #510A0E 75%,
        rgba(255,128,128,0) 80%,
        transparent
    ),
    -o-linear-gradient(
        2deg,
        #510A0E,
        #510A0E 20%,
        #61100F 25%,
        #B93F3A 40%,
        #4B0408 50%,
        #6A0F18 70%,
        #651015 80%,
        #510A0E 90%,
        #510A0E
    );
background-image:
    linear-gradient(
        90deg,
        rgba(255,128,128,0.25),
        rgba(255,128,128,0) 75%
    ),
    linear-gradient(
        -1deg,
        transparent,
        transparent 30%,
        #510A0E 35%,
        #510A0E 40%,
        #61100F 43%,
        #B93F3A 50%,
        #4B0408 55%,
        #6A0F18 60%,
        #651015 65%,
        #510A0E 70%,
        #510A0E 75%,
        rgba(255,128,128,0) 80%,
        transparent
    ),
    linear-gradient(
        2deg,
        #510A0E,
        #510A0E 20%,
        #61100F 25%,
        #B93F3A 40%,
        #4B0408 50%,
        #6A0F18 70%,
        #651015 80%,
        #510A0E 90%,
        #510A0E
    );
background-size:
    auto,
    300px 100%,
    109px 100%;
background-repeat: repeat-x;
    }

Upvotes: 2

Related Questions