PURE CSS3 RIBBON

Developer
Bryce Snyder
Size
2,948 Kb
Views
42,504
  1. PURE CSS3 RIBBON Previews
  2. PURE CSS3 RIBBON HTML Codes
  3. PURE CSS3 RIBBON CSS Codes
  4. PURE CSS3 RIBBON JS Codes

How do I make an pure css3 ribbon?

This is a pure css3 ribbon created some 2D transforms.. What is a pure css3 ribbon? How do you make a pure css3 ribbon? This script and codes were developed by Bryce Snyder on 28 July 2022, Thursday.

PURE CSS3 RIBBON Previews
IQ Test

PURE CSS3 RIBBON - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>PURE CSS3 RIBBON</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">
<div class="fore">
<div class="left ribbon"> <div class="text"> S<br>A<br>M<br>P<br>L<br>E </div><!--end text--> <div class="arrow-bottom"> </div><!--end arrow-bottom-->
</div><!--end left-->
<div class="mid ribbon"> <div class="text"> T<br>E<br>X<br>T </div><!--end text-->
</div><!--end mid-->
<div class="right ribbon"> <div class="arrow-top"> </div><!--end arrow-top--> <div class="text"> S<br>A<br>M<br>P<br>L<br>E </div><!--end text-->
</div><!--end right-->
</div><!--end fore-->
<div class="back"> <div class="back-left"> </div><!--end back-left--> <div class="back-right"> </div><!--end back-right-->
</div><!--end back-->
</div><!--end container--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

PURE CSS3 RIBBON - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Graduate);
body { background-color: #fff; font-family: helvetica; font-weight: bold;
}
.container { width: 250px; margin: 0 auto;
}
.fore { position: relative; z-index: 2; height: 450px; width: 250px; margin-top: 50px;
}
.fore .ribbon { height: 200px; width: 50px; background: #ED5565; float: left; margin-left: 25px;
}
.fore .ribbon .text { color: #fff; font-size: 2em; line-height: 30px; text-align: center;
}
.fore .left { margin-top: 225px;
}
.fore .left .text { margin-top: 10px;
}
.fore .left .arrow-bottom { width: 0; height: 0; border-left: 35px solid transparent; border-right: 35px solid transparent; border-top: 25px solid #ED5565; margin-left: -10px; margin-top: 10px;
}
.fore .mid { margin-top: 116px;
}
.fore .mid .text { margin-top: 40px;
}
.fore .right { margin-top: 5px;
}
.fore .right .arrow-top { width: 0; height: 0; border-left: 35px solid transparent; border-right: 35px solid transparent; border-bottom: 25px solid #ED5565; margin-top: -24px; margin-left: -10px;
}
.back { position: absolute; z-index: 0;
}
.back .back-left { margin-top: -212px; margin-left: 75px; width: 25px; height: 65px; background: #DA4453; transform: skewY(10deg); -ms-transform: skewY(10deg); /* IE 9 */ -webkit-transform: skewY(45deg); /* Safari and Chrome */
}
.back .back-right { margin-top: -174px; margin-left: 150px; width: 25px; height: 65px; background: #DA4453; transform: skewY(10deg); -ms-transform: skewY(10deg); /* IE 9 */ -webkit-transform: skewY(45deg); /* Safari and Chrome */
}

PURE CSS3 RIBBON - Script Codes JS Codes

/* NON OF THAT JS STUFF! */
PURE CSS3 RIBBON - Script Codes
PURE CSS3 RIBBON - Script Codes
Home Page Home
Developer Bryce Snyder
Username brycesnyder
Uploaded July 28, 2022
Rating 4
Size 2,948 Kb
Views 42,504
Do you need developer help for PURE CSS3 RIBBON?

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!

Bryce Snyder (brycesnyder) Script Codes
Name
Pseudo data attribute CSS manipulations to create a dynamic feed.
New Instagram Logo Attempt
Success Modal with Animation
PURE CSS3 Vector Ribbon Banner
New Google Loader
Pure CSS Radio Buttons Pseudo Checked Cards
Full Screen Application Animation
Multi Share Button in Pure CSS
Social Media Animated Buttons
Checkbox Only Dynamic Menu Layout
Create amazing SEO content 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!