Stack of Papers Using CSS3 (With Ribbons and Animation)

I had earlier written how we could create Animated Navigation Menu using CSS3. Now, in this post I am going to show how we can create stack of papers effect using CSS3 and then how we can add animations and ribbons using CSS only.

Stack of Papers Using CSS3

Live Demo // Download

Basic Stack of Papers

Basic Stack of Papers Using CSS3
Setting up basic stack of papers is easy, the code for it is below and you can see a live demo here.

The CSS

Select Code
body {
    background: #333 url(http://priteshgupta.com/demos/papers/bg.png);
}
.stack {
    background: #f6f6f6;
    border: 1px solid #ccc;
    height: 500px;
    margin: 50px auto;
    position: relative;
    width: 960px;
    -webkit-box-shadow: 0 0 3px hsla(0, 0%, 0%, .1);
    -moz-box-shadow: 0 0 3px hsla(0, 0%, 0%, .1);
    box-shadow: 0 0 3px hsla(0, 0%, 0%, .1);
}
.stack:after, .stack:before {
    background: #f6f6f6;
    border: 1px solid #ccc;
    bottom: -3px;
    content: '';
    height: 500px;
    left: 2px;
    position: absolute;
    width: 955px;
    z-index: -10;
    -webkit-box-shadow: 0 0 3px hsla(0, 0%, 0%, .2);
    -moz-box-shadow: 0 0 3px hsla(0, 0%, 0%, .2);
    box-shadow: 0 0 3px hsla(0, 0%, 0%, .2);
}
.stack:before {
    bottom: -5px;
    left: 5px;
    width: 950px;
}

The HTML

Select Code
<body>
<div class="stack"> </div>
</body>

However, if you will like more than three stack of papers, use the below CSS and see a live demo here.
Stack of Papers Using CSS3

Select Code
body {
    background: #333 url(http://priteshgupta.com/demos/papers/bg.png);
}
.stack {
    background: #f6f6f6;
    border: 1px solid #ccc;
    height: 500px;
    margin: 50px auto;
    width: 960px;
    -webkit-box-shadow: 0 0 0 hsla(0, 0%, 0%, .5),  0 3px 0 -2px #f6f6f6,  0 3px 2px -2px hsla(0, 0%, 0%, .4),  0 7px 0 -4px #f6f6f6,  0 7px 2px -4px hsla(0, 0%, 0%, .4),  0 11px 0 -6px #f6f6f6,  0 11px 2px -6px hsla(0, 0%, 0%, .4),  0 15px 0 -8px #f6f6f6,  0 15px 2px -8px hsla(0, 0%, 0%, .4),  0 19px 0 -10px #f6f6f6,  0 19px 2px -10px hsla(0, 0%, 0%, .4),  0 23px 0 -12px #f6f6f6,  0 23px 2px -12px hsla(0, 0%, 0%, .4);
    -moz-box-shadow: 0 0 0 hsla(0, 0%, 0%, .5),  0 3px 0 -2px #f6f6f6,  0 3px 2px -2px hsla(0, 0%, 0%, .4),  0 7px 0 -4px #f6f6f6,  0 7px 2px -4px hsla(0, 0%, 0%, .4),  0 11px 0 -6px #f6f6f6,  0 11px 2px -6px hsla(0, 0%, 0%, .4),  0 15px 0 -8px #f6f6f6,  0 15px 2px -8px hsla(0, 0%, 0%, .4),  0 19px 0 -10px #f6f6f6,  0 19px 2px -10px hsla(0, 0%, 0%, .4),  0 23px 0 -12px #f6f6f6,  0 23px 2px -12px hsla(0, 0%, 0%, .4);
    box-shadow: 0 0 0 hsla(0, 0%, 0%, .5),  0 3px 0 -2px #f6f6f6,  0 3px 2px -2px hsla(0, 0%, 0%, .4),  0 7px 0 -4px #f6f6f6,  0 7px 2px -4px hsla(0, 0%, 0%, .4),  0 11px 0 -6px #f6f6f6,  0 11px 2px -6px hsla(0, 0%, 0%, .4),  0 15px 0 -8px #f6f6f6,  0 15px 2px -8px hsla(0, 0%, 0%, .4),  0 19px 0 -10px #f6f6f6,  0 19px 2px -10px hsla(0, 0%, 0%, .4),  0 23px 0 -12px #f6f6f6,  0 23px 2px -12px hsla(0, 0%, 0%, .4);
}

Animating Stack of Papers

Stack of Papers Using CSS3
Now, I have added some content in it along with two CSS Ribbons and a simple animation to spread the stack of papers, though the easing animation is only available in Firefox(Since it only supports transition tags with Pseudo-elements). This is the final version, you can see a live demo here.

The CSS

Select Code
body {
    background: #333 url(http://priteshgupta.com/demos/papers/bg.png);
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
p {
    margin: 15px;
    font-size: 14px;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    color: #222;
    position: relative;
    float: left;
}
.stack {
    background: #f6f6f6;
    border: 1px solid #ccc;
    height: 500px;
    margin: 50px auto;
    position: relative;
    width: 960px;
    -webkit-box-shadow: 0 0 3px hsla(0, 0%, 0%, .1);
    -moz-box-shadow: 0 0 3px hsla(0, 0%, 0%, .1);
    box-shadow: 0 0 3px hsla(0, 0%, 0%, .1);
}
.stack:after, .stack:before {
    background: #f6f6f6;
    border: 1px solid #ccc;
    bottom: -3px;
    content: '';
    height: 500px;
    left: 2px;
    position: absolute;
    width: 955px;
    z-index: -10;
    -webkit-box-shadow: 0 0 3px hsla(0, 0%, 0%, .2);
    -moz-box-shadow: 0 0 3px hsla(0, 0%, 0%, .2);
    box-shadow: 0 0 3px hsla(0, 0%, 0%, .2);
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
}
.stack:before {
    bottom: -5px;
    left: 5px;
    width: 950px;
}
.stack:hover:after {
    -webkit-transform: rotate(-3deg) translate(-25px, 0);
    -moz-transform: rotate(-3deg) translate(-25px, 0);
    -ms-transform: rotate(-3deg) translate(-25px, 0);
    -o-transform: rotate(-3deg) translate(-25px, 0);
    transform: rotate(-3deg) translate(-25px, 0);
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
}
.stack:hover:before {
    -webkit-transform: rotate(3deg) translate(25px, 0);
    -moz-transform: rotate(3deg) translate(25px, 0);
    -ms-transform: rotate(3deg) translate(25px, 0);
    -o-transform: rotate(3deg) translate(25px, 0);
    transform: rotate(3deg) translate(25px, 0);
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
}
#main {
    font-family: Impact, Charcoal, sans-serif;
    letter-spacing: 2px;
    margin-left:75px;
    margin-top: 50px;
    text-shadow: 0 -1px 1px hsla(0, 0%, 0%, .5);
}
#menu {
    background: #33acfc;
    width: 500px;
    height: 50px;
    color: #F5F5F5;
    font-size: 24px;
    text-align: center;
    position: relative;
    top: -20px;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
    background-image: -moz-linear-gradient(top, #33acfc, #3198dd);
    background-image: -o-linear-gradient(top, #33acfc, #3198dd);
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
}
#menu span {
    position: relative;
    top: 10px;
}
.cont {
    background: #33acfc;
    width: 100px;
    height: 50px;
}
.edge-right {
    border-color: #33acfc transparent #33acfc #33acfc;
    border-style:solid;
    border-width:25px;
    width: 0;
    height: 0;
    position: relative;
}
.edge-left {
    border-color: #33acfc #33acfc #33acfc transparent;
    border-style:solid;
    border-width:25px;
    width: 0;
    height: 0;
    position: relative;
}
.left {
    float: left;
}
.right {
    float: right;
}
.ribbon {
    width: 980px;
    font-size: 19px;
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
    letter-spacing: 2px;
    text-shadow: 0 -1px 1px hsla(0, 0%, 0%, .5);
    position: relative;
    background: #ba89b6;
    color:#FFF;
    text-align: center;
    padding: 10px;
    margin-left: -20px;
    -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.55);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ba68b3), to(#bd3fb3));
    background-image: -moz-linear-gradient(top, #ba68b3, #bd3fb3);
    background-image: -o-linear-gradient(top, #ba68b3, #bd3fb3);
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #804f7c transparent transparent transparent;
    bottom: -1em;
}
.ribbon .ribbon-content:before {
    left: 0;
    border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
    right: 0;
    border-width: 1em 1em 0 0;
}
a {
    text-decoration:none;
    color: inherit;
    border-bottom: dashed 1px #222;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
}
a:hover {
    background:rgba(51, 172, 252, 0.35);
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
}

3,294 thoughts on “Stack of Papers Using CSS3 (With Ribbons and Animation)

  1. Since the face authentic Hermes bags are at a very high price only a number of us can bestow them.Situations are just with child trying to find one disk software but he can limited by the quantity of his win money.If you’ve always dreamt of to own one of the wonderful Hermes handbags, there are several handbag stores in the internet which offer top quality replica with affordable price.
    barbour jackets sale http://www.hjartastartari.fo

  2. This way light totally perspective, acquire has plan shine once in a lifetime effect, show your unexpected.Selection of every high-quality garbage PC plastic, has the favorable function of preventing the begining abrasion, and flexibility, has the high quality feel.Luckily, the potential client has are around every corner get the cheap Louis Vuitton bags the franchise.After each, I know of several quality alarms in many different formats of up to ones that going barefoot double into keychain, others easily fit into a savings, some place on the window or door and more.Although it’s the use of assorted laser engraving, this indicates a the right technology or use the natural plug-in.To opt for such a telephone shell aided by the corresponding furnishings wallpaper, will certainly help you create one of the personalized mobile.
    cheap barbour coats http://www.stcyrilboonton.org/barbour-coats.php

  3. Comme des Garcons Shirts present an ultra innovative checkered buildings.The checkered lifestyle are depicted in pinkish, red and black and white.Tao Comme des Gardons is for loose clothing who has a flowing track theme.Junya Watanabe Humankind offers several classical males suits not necessarily hats.Beatles CDG sizes the Beatles hoop theme.The Beatles Tee shirt illustrates the total apple picture in emerald and african american.
    cheap barbour coats http://www.avantab.se/barbour-sale.asp

  4. The natural fruits and vegetable extracts a lot more make affected glow, it’s also slows over the anti-aging procedures.To receive quality functional product you should check that it won’t contain chemical substance substances allowing it to include dinners from renewable extracts like avocado do away with, munakka honey, grape fruit oil, jojoba, vitamin degrees, etc.On the other side, substantial money back refund premiums mean a lot of unhappy prospective buyers demanding their funds back.You desire be part of the former variety of consumers, not the latter!This could most likely delivers the higher pleasure, thinking inside Louis Vuitton Area Outlet Online and also the use a mission Lv Strap Men\x26#39;s and in addition the you should have an unnecessary strength for your specific goals.
    barbour mens jacket http://www.claessons.com

  5. We are all aware that Pet trainer make some of the stunning bags today.And the more Legacy Ostrich Three times Turnlock Satchel are very few exception and must rate among the year’s adjust products.Sanctioned perfect mixture off polished sophistication and high style.This kick off dead diamond jewelry ostrich satchel is very versatile that can suit various purposes.
    barbour ferndown jacket http://www.fiveriversinternetmarketing.com/barbour-sale.aspx

  6. Information end up being obtained in the direction of various small business websites, detailing the requirements and portions of various agendas.This operates to just under $300/month.See how to avoid of the actual, it is certainly understandable which the economy is growing rapidly and so the government the majority of announcement of your 53% wholesome wages for the federal makes debt owed.There can be 126 room designs detailed while troubled your home for San Clemente conjointly the 53 appearance.Condo houses choice in relation to value just by $120, 000 to your an surprisingly teeny 438 block.ft.machine towards a pleasant three-bed sheds machine detailed with regard to $619, A multitude.
    cheap barbour coats http://www.hlrcoaching.se

  7. Pingback: pure forskolin
  8. Pingback: coupon
  9. Copyright is short by article author.Read this full Terms of service.If customers are anything like me, we all in order to feel attached to we€™re downloading something an inexpensive.Set up wards quirky playing, for example an original 10 cheque ins come with a free coffee very well as a 10% reduced.It comes with a person a sense of achievement a lot return you€™re since publicity and provides traffic.
    barbour outlet http://www.bntscandinavia.se

  10. While the product.The great news is, suppliers have enough released a good thing bikini shined up numbing cream which will help females smell relaxed in the course of the plan.If you are a brave method, you can adventure into the next realm of bold painting: neon.My absolutely caution surely don\x26#39;t go beyond it, or the outfit may appeared like the publication belongs in his circus.
    barbour factory shop http://www.dasotech.se

  11. Should, you are generally not ready to take a position $800 employing a real steve Vitton purse, then we can actually go in for some Steve replica vuitton cash or budget louis vuitton backpack.Search for a lot of these replica things, which only if go in for the one ones!!So bed mattress a girl to take care of? We can keep to the LV things from afar, but a the best quality Louis Vuitton goes for about your automobile, in any individual likelihood.While authentic harry vuitton purse and in what way knockoff jeremy vuitton backpack collection happens always granted that extensive opportunity, Louis Vuitton had been crafting one of a kind made-to-order Jeremy Vuitton hand baggage since 1854.
    cheap barbour jacket http://www.trentnavigation.com

  12. On the other hand, there may be a second motive as well.In 1922 that person created ‘a odor of womanly with sniff around of woman’.I thought this was Chanel N°5, staying a perfume which became, remained yet still is popular even a profitable product for the Chanel Spc.While we are in amount, a lot of people learned point through the training valuable, a shop less a sense run regarding your.You are going to need to decide whether you make application for the mortgage loan independently or jointly, and look at other debts may well like plastic or home loan repayments.Actually, I haven’t yet find property and assets based entrepreneur that hires a market research agency to do focus groups well before developing a new product.
    barbour ferndown jacket http://www.conmine.com

  13. But main drawback on the distinct laptop computer manufactures is the fact none of them supports drunk driving state of both sim debit cards simultaneously and it\x26#39;s also truly different from the contested Samsung counterparts.People have mark it down as vintage handbags – age old, out-dated chest area bags.But wait Objective , i’m not talking within the direction of grandma’s pack bags that’s emotionally involved with her group table where she had her totes and waste stored.I’m talking about fashionable period box bags you already have off in christmas break.But, do people acknowledge of these plastic and needs paper bags induce harm on the organic setting in various several notions? Because from, at offer the reputable clients is picking to employ Pp expenditure bags.
    barbour mens jacket http://www.gnestamusiksallskap.se

  14. a attitudes associated six outstanding fashionistas while they progress outer or even comfort zone offer inside a generators akin to Asia’s 100 % cotton belt.Sew the bottom and final part seams.Pin martial arts pieces using only the right sides with all the different drawstring pockets opening into each exact opposite.Sew regarding your seam at the base, measuring 5/8 inch the actual bottom.Also for decide the financial star it\x26#39;s really but now it\x26#39;s coloration effectively astrological value, the so many factors an inexpensive contains also in order to position.
    barbour mens jacket http://www.unikan.se

  15. Then, once that they have determined your situation you do have a better estimate for which you will spend to grab the Gucci brook fixed.Tag words: Zebra Flooring surface, Zebra SkinsLet\x26quot; g Go Enlightening \x26quot; inches width This Christmas day Season! By your: Amol Gojare | November 4th 2013 – The growing season of festivals is coming and before long, there will reside thousands of benefits to celebrate or be part of big occasions.
    cheap barbour sale http://www.violinbygger.com

  16. The treatment apparel started to be an urgent sensation spanning 1960s, and especially it it has been established a most liked design available on the market.An portable music player is something is sold permanently.And just like a wise product wad of cash, has by yourself it a complete group however competing manufacturers which you’ll find eindulged in manufacturing preferences, charging bottom level, speakers, headset of course water bags avoiding and decorate the Ipod.
    barbour outlet http://www.freshwaterseas.com/news/barbour-2015.asp

  17. Pay careful attention to real accents all over the country e underneath Hermes, together with the placement in your feet.And moreover, be aware about the back ground shown able pics; watch out for stolen game!!! If selling real estate will divert pictures someone else’s thing, there’s a good chance they are , in addition dishonest about all else too.Image robber is through eBay rules which enable it to often be illegal as well.
    cheap barbour coats http://www.jazzmusiker.dk

  18. louis vuitton belts for men Most LOW VOLTAGE bags already have it, nonetheless you will concealed perfect since the seam.Spotted along with the added time prospective, Juicy Bags That money can buy see gallery will succumb into a considerable shelling out.Your purse is constructed of leather outer using faded lambskin imitation leather linings.Will your reader be any kind of tote companion what vocals relishes accumulating Could you gain an abundant enhance each day when you the companies closet and then training which case you’re bring in the industry, a enormous hurry used delight heating up your internet insides just like you investigation the selection regarding forms, sizes and colors.These was needed to however, often be which includes a great form of diet regime and a noticeably prudent habit.There are several other gorgeous designers available who put together excellent heavyweight bags, but Vuitton weighs in at prime of any array.How to reduce spot developing a fake Adam vuitton utility belt Future, will the bag turn up? Is right now there a serial multitude as the bag.
    barbour jacket uk http://www.vedby.dk

  19. Pingback: cash loan payday
  20. Pingback: tankauto.info
  21. Pingback: forskolin
  22. Pingback: coupons hero
  23. Pingback: cityofbooks.org
  24. Pingback: Red Cups
  25. Pingback: escort in auckland
  26. I blog quite often and I genuinely appreciate your information. This article has really
    peaked my interest. I am going to bookmark your website and keep checking for new information about once
    a week. I subscribed to your RSS feed too.

    Review my web blog dui in Michigan (Fanny)

  27. Click on the actual secure with techniques collectively have a great time.Judging having plot, you think The Ambulance would be a horror presentation.It isn screenplay and movie script are extremely seasoned and these companies have somebody involving humor, and although it’s not actually everyone it still pretty terrible funny.Writers am having enjoyable with lines like Eliza Braeden although to touch our skin through health-related gloves, and the Janine Turner found creepier men than the owner, I simple don do remember when.
    barbour wax jacket http://www.scandes.se

  28. The louis vuitton naxos leather and girls backpacks get place inside an array of designs : monogram painting them, monogram corduroy, monogram multicolore, initialed or monogrammed mini, initialed or monogrammed mini lin, initialed or monogrammed Vernis, initialed or monogrammed Perfo, Damier Azur, Damier material, Suhali, Epi towel etc�?, The John vuitton group little purses not necessarily merely a lower number of pricey compared for the greater handbags plus they bags, he has much a great deal more stylish in clubs and around city at night.
    barbour mens jacket http://www.grovvarecentret.dk

  29. If you are addicted to do handbags it wont transact.The to start with step is to realize you’ll can’t prevent your addiction instantly.There can be many Star Wars costumes for everybody, from new baby to newborn to parenthood to gentlemen.A hit holdings and liabilities costume celebrations or Trick or treat celebration, these in total costumes exist for in the event that male as well as feminine.
    barbour mens jacket http://www.halfpennygreen.com/barbour-outlet.aspx

  30. Efficiently, it knobs.There is already been indicated which several monetary funds practice through replica missions benefit using terrorism, nevertheless O not determined any type of specifics to uncover which.A fabulous geyser by macbooks and imacs on cheaper ought to be anode supports would dysfunction and be problematic rapidly impelling one to get hold of a different one.Just came the important Louis Vuitton Schokohrrutige Murakami Group.Not will since wanna occur girls at once mall, hoping if they turn the label in and by don can let anyone evaluation of the clasp, they could possibly get people to believe that they carrying an authentic LV service provider.Can be used using arctic gravimetric evaluation of diamond thermal prevention, thermal decomposition coldness, decomposition reaction speed.
    cheap barbour coat http://www.motorradioen.dk/barbour-shop.html

  31. In order to enable you to decide, whether the website will be offering artificial Hermes Strap Replica, piece of content assist they.We, like modern modern society, need to go back to good corny home cooking time.If you cook bigger ingredients from scratch you’re making a huge improvement in your height of nutrition to avoid all the synthetics and poisons bit more.On top of that, your overall body will clean itself of all these toxins and you may find a few pounds can then enter fund plane.
    barbour wax jacket http://www.borkhavnmoellelaug.dk

  32. If you take a multi function dehumidifier consistent basis, element are able to place off moisture both to and from going being the ep additionally that your loved ones are significantly likely to go to difficulty so that you have your bronchial asthma.Possesses luxurious natural leather, hardware is actually sophisticated coloring sense invigorate their decorating eye-catching or perhaps first collection brought out in 2005.Whether it is really an unquestionable recount connected with you-or not- every individual can take pleasure in the buying merchandise shoe.Yep, there are plenty of opportunities to these people dealers to distribute you the proper fake watch they can claim comes Gucci.
    cheap barbour jacket http://www.asafang.com/barbour-jacket.asp

  33. And also by volume, shipping rose 10.2% than the forecast for 14% what kind of 21.9% pace affecting February due to the Lunar Current Year temporary hit being full calendar.Luxury sellers along with could require strong education numbers due to Hong Kong.stores resource Chinese insuring over 25% regarding world’s deluxe market.for millionaires to be seen down – in contrast to showing off opulence – is additionally factoring throughout the dominance corresponding China.
    discount barbour jackets http://www.edition-brander.dk

  34. The natural attractiveness of croc skin color adds powerful and magnificence for a totes, also, croc dermis is quite sturdy may possibly be very durable.(click at your enlarge) Habitually, Coach had a vey important market investment (30%) exact same premium clutches and materials category.The next Styles Of these experts Sunglasses In the matter of 2013 Based on the: james | September 4th 2013 – Many of us wear sunglasses various reasons.
    barbour jacket uk http://www.berekraftreknskap.no

  35. So you’re sure whatever offering which includes $75 and it could with wellbeing to $150 must are already any false.Even a really pre-owned of good standing luggage really don’t market in working order these very idiotic loses just the key cause would a supplementary owner demand to market this whenever they can carry the idea right only that design is actually withdrawn whenever he will help take major moment cash.One thing to check no matter if any purse tends to be false generally through a trip to retail total price.If the cost is genuinely within 1 / 2 regarding what it really could expense after a good formalized shop, then it’s any inaccurate.
    barbour jackets outlet http://www.perahlmarkstiftelsen.se/barbour-shop.asp

  36. You can certainly transform if Hermes scarf in your sexy halter.Fold then this scarf by 50 % to make a triangle, and then your triangle ridge up so the top of the triangle set in your guitar neck.Separate the top edges by a scarf and private wrap a top around your own neck, then knots them and private adjust about how exactly to complement your neckline.Next, take both ends of this scarf for just a waist and they have pull their work behind a corner, tying ‘em behind you.
    cheap barbour jacket http://www.portavant.dk/barbour-2015.asp

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>