Pure CSS3 folded corner effect

Developer
Mauritius D'Silva
Size
2,922 Kb
Views
34,408
  1. Pure CSS3 folded corner effect Previews
  2. Pure CSS3 folded corner effect HTML Codes
  3. Pure CSS3 folded corner effect CSS Codes

How do I make an pure css3 folded corner effect?

CSS3 folded corner effect with block hover animations.. What is a pure css3 folded corner effect? How do you make a pure css3 folded corner effect? This script and codes were developed by Mauritius D'Silva on 16 November 2022, Wednesday.

Pure CSS3 folded corner effect Previews
IQ Test

Pure CSS3 folded corner effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS3 folded corner effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Services Section --> <section id="services" class="services content-section"> <div class="container"> <div class="row text-center"> <div class="col-md-12"> <h2>What we do</h2> <h3 class="caption gray">Eleifend mi iaculis parturient etiam volutpat pulvinar eleifend</h3> </div><!-- /.col-md-12 --> <div class="container"> <div class="row text-center"> <div class="col-md-4"> <div class="row services-item text-center" data-wow-offset="10"> <i class="fa fa-cogs fa-3x"></i> <h4>Development</h4> <p>We build Wordpress and custom plugins and back-end solutions.</p> </div><!-- /.row --> </div><!-- /.col-md-4 --> <div class="col-md-4"> <div class="row services-item text-center" data-wow-offset="10"> <i class="fa fa-paint-brush fa-3x"></i> <h4>UI/UX</h4> <p>We love creating beautiful and functional designs for our clients</p> </div><!-- /.row --> </div><!-- /.col-md-4 --> <div class="col-md-4"> <div class="row services-item text-center" data-wow-offset="10"> <i class="fa fa-bullhorn fa-3x"></i> <h4>Social Marketing</h4> <p>Discover social marketing and take your business to new heights</p> </div><!-- /.row --> </div><!-- /.col-md-4 --> <div class="col-md-4"> <div class="row services-item text-center" data-wow-offset="20"> <i class="fa fa-database fa-3x"></i> <h4>System Design</h4> <p>Every website needs the right environment if it plans to be successful</p> </div><!-- /.row --> </div><!-- /.col-md-4 --> <div class="col-md-4"> <div class="row services-item text-center" data-wow-offset="20"> <i class="fa fa-align-left fa-3x"></i> <h4>Copywriting</h4> <p>What you say and how you say it is as important as everything else</p> </div><!-- /.row --> </div><!-- /.col-md-4 --> <div class="col-md-4"> <div class="row services-item text-center" data-wow-offset="20"> <i class="fa fa-camera fa-3x"></i> <h4>Photography</h4> <p>Specializing in product and photo journalistic style photography</p> </div><!-- /.row --> </div><!-- /.col-md-4 --> </div><!-- /.row --> </div><!-- /.container --> </div><!-- /.row --> </div><!-- /.container --> </section><!-- /.section -->
</body>
</html>

Pure CSS3 folded corner effect - Script Codes CSS Codes

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';	@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css';	@import 'https://fonts.googleapis.com/css?family=Raleway:100,600';	@import 'https://fonts.googleapis.com/css?family=Open+Sans:300';	html,	body { width: 100%; height: 100%;	}	body { font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; color: #999; background-color: #fff;	}	h1,	h2,	h3,	h4,	h5,	h6 { margin: 0 0 20px 0; text-transform: none; color: rgba(254,82,76, 1); font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; letter-spacing: 1px; line-height: 1.5;	}	.gray{	color: #a5a5a5;	}	.services{	margin:40px;	}	.services-item:before { content: ""; position: absolute; top: 0; right: 0; border-width: 0 30px 30px 0; border-style: solid; border-color: #fff #fff rgba(254,82,76, 1) rgba(254,82,76, 1); -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2); -webkit-transition: border-color .2s ease-in-out; -moz-transition: border-color .2s ease-in-out; transition: border-color .2s ease-in-out; /* Firefox 3.0 damage limitation */ display: block; width: 0;	}	.services-item{ background: #f9f9f9; padding: 30px 20px 20px; margin: 15px 0; position: relative; color: #fff; overflow: hidden; -webkit-transition: background .5s ease-in-out; -moz-transition: background .5s ease-in-out; transition: background .5s ease-in-out;	}	.services-item h4{ margin: 0 0 10px 0; padding: 0; font-size: 20px; font-weight: 600; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; transition: all .5s ease-in-out;	}	.services-item p{ padding: 0; margin: 0; color:#999; font-size: 16px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;	}	.services-item i{ color: rgba(254,82,76, 1); padding: 0; margin: 0 0 10px 0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;	}	.services-item:hover{ background:rgba(254,82,76, 1); -webkit-transition: background .2s ease-in-out; -moz-transition: background .2s ease-in-out; transition: background .2s ease-in-out;	}	.services-item:hover h4{ color:#fff; transform: translate(0,-5px); -webkit-transform: translate(0,-5px); -o-transform: translate(0,-5px); -moz-transform: translate(0,-5px); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out;	}	.services-item:hover p{ color:#fff; transform: translate(0,-10px); -webkit-transform: translate(0,-10px); -o-transform: translate(0,-10px); -moz-transform: translate(0,-10px); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;	}	.services-item:hover i{ color:#fff; transform: translate(0,-5px); -webkit-transform: translate(0,-5px); -o-transform: translate(0,-5px); -moz-transform: translate(0,-5px); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;	}	.services-item:hover:before{ border-color: #fff #fff #a5a5a5 #a5a5a5; -webkit-transition: border-color .2s ease-in-out; -moz-transition: border-color .2s ease-in-out; transition: border-color .2s ease-in-out;	}
Pure CSS3 folded corner effect - Script Codes
Pure CSS3 folded corner effect - Script Codes
Home Page Home
Developer Mauritius D'Silva
Username mauritiusdsilva
Uploaded November 16, 2022
Rating 3
Size 2,922 Kb
Views 34,408
Do you need developer help for Pure CSS3 folded corner effect?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mauritius D'Silva (mauritiusdsilva) Script Codes
Name
Numbered FAQs
CSS3 Button Hover Animation
Walk cycle CSS3 animation
Pure CSS3 Overlay Ribbon
Weather widget
Team member profile display
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!