CSS3 Demos - Step By Step Guide
Folded Corner
What We're Aiming For
Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
Step One
Create and style the basic box and the text
Code
HTML
- <section class="folded">
<p>Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</section>
CSS
- section.folded{
- position:relative; /*lets us position the fold relative to the box*/
- width:300px; /*width of the box*/
- padding:20px 40px;
- background:#a5a381; /*colour of the box*/
- }
- .folded p{
- color:#f7f7f7;
- }
Result
Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
Step two
Create a fold
Code
CSS
- /*We're going to create a 65px fold slightly darker than the box*/
- .folded:after {
- border-right: #f1f1e3 65px solid; /*we don't want this border to be seen so we use the same colour as the page, the width of the border is the size you want the fold to be*/
- border-bottom:#8c8a6c 65px solid; /*this border forms the most obvious part of the fold, use a colour slightly darker than the box (or whatever colour you imagine the reverse of the 'paper' to be), the size should be the same as border-right*/
- content:""; /*creates a blank psuedo element which is used as the fold*/
- /*add a small drop shadow to the fold*/
- -webkit-box-shadow:-1px 1px 3px -4px rgba(0,0,0,0.2);
- -moz-box-shadow:-1px 1px 3px -4px rgba(0,0,0,0.2);
- box-shadow:-1px 1px 3px -4px rgba(0,0,0,0.2);
- }
Result
Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
Step Three
Finally position the fold - this time at the top right of the box
Code
CSS
- .folded:after {
- position:absolute; /*positions the fold relative to the box created above rather than the whole page*/
- top:0; /*places the top of the fold 0px from the top of the box*/
- right:0; /*places the right side of the fold 0px from the right side of the box*/
- }
Result
Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
Here's the CSS for folds on the other 3 corners of the box
Left Top
CSS
- .folded-lefttop:after{
- content:"";
- position:absolute;
- top:0;
- left:0;
- border-bottom:#8c8a6c 65px solid;
- border-left:#efefe1 65px solid;
- }
Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
Left Bottom
CSS
- .folded-leftbottom:after{
- content:"";
- position:absolute;
- bottom:0;
- left:0;
- border-top:#8c8a6c 65px solid;
- border-left:#efefe1 65px solid;
- }
Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
Right Bottom
CSS
- .folded-rightbottom:after{
- content:"";
- position:absolute;
- bottom:0;
- right:0;
- border-right:#efefe1 65px solid;
- border-top:#8c8a6c 65px solid;
- }
Folded corners using :before and :after pseudo elements. Folds can be on any corner, see the code below.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.