Slanty goodness
How do I make an slanty goodness?
A nice little trick with CSS. What is a slanty goodness? How do you make a slanty goodness? This script and codes were developed by Charlie Walter on 11 January 2023, Wednesday.
Slanty goodness - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slanty goodness</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header> <h1>Slanty goodness</h1>
</header>
<div class="slanty-wrapper"><code>transform: skew(0, 4deg);</code> <div class="slanty-content"><code>transform: skew(0, -4deg);</code> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos fugiat dicta cupiditate, corporis corrupti in nam dolore nobis a, ut sed quasi, deserunt perspiciatis. Qui unde sunt voluptatibus sit reprehenderit.</p> </div>
</div>
<div class="slanty-wrapper"><code>transform: skew(0, -2deg);</code> <div class="slanty-content"><code>transform: skew(0, 2deg);</code> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos fugiat dicta cupiditate, corporis corrupti in nam dolore nobis a, ut sed quasi, deserunt perspiciatis. Qui unde sunt voluptatibus sit reprehenderit.</p> </div>
</div>
<footer> <h2>Cool huh?</h2>
</footer>
</body>
</html>
Slanty goodness - Script Codes CSS Codes
body { background-color: #FF7A2E; color: white; font-family: Open sans, Helvetica Neue; font-weight: bold; margin: 0; text-align: center;
}
header { padding: 10em 1em; padding: 5em 1em;
}
.slanty-wrapper { background-color: #8C87FF; margin-bottom: -5em; -webkit-transform: skew(0, 4deg); -ms-transform: skew(0, 4deg); transform: skew(0, 4deg);
}
.slanty-wrapper .slanty-content { padding: 10em 1em; -webkit-transform: skew(0, -4deg); -ms-transform: skew(0, -4deg); transform: skew(0, -4deg);
}
.slanty-wrapper + .slanty-wrapper { background-color: #77CC64; -webkit-transform: skew(0, -2deg); -ms-transform: skew(0, -2deg); transform: skew(0, -2deg);
}
.slanty-wrapper + .slanty-wrapper .slanty-content { -webkit-transform: skew(0, 2deg); -ms-transform: skew(0, 2deg); transform: skew(0, 2deg);
}
footer { padding: 10em 1em; background-color: #1FB200; z-index: 1000; position: relative;
}
Developer | Charlie Walter |
Username | cjonasw |
Uploaded | January 11, 2023 |
Rating | 4.5 |
Size | 2,707 Kb |
Views | 8,096 |
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!
Name | Size |
CSS3 Carousel | 3,346 Kb |
Projection - Tank Three.js | 3,182 Kb |
JQuery countdown | 4,386 Kb |
Spotify Discover Panel | 1,920 Kb |
Flash CC HTML5 Canvas | 14,083 Kb |
Three.js half circle health bar | 2,617 Kb |
Ninja Flash CC Animation Canvas | 10,914 Kb |
Calender UI | 3,513 Kb |
Growing Root - Scroll control - CANVAS | 2,342 Kb |
3D PONG | 3,601 Kb |
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!
Name | Username | Size |
A Pen by lizz | Lizz | 10,068 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
CardMove | Thompsonemerson | 3,699 Kb |
Marching Squares Visualized | Sakri | 7,074 Kb |
Mondrian | Chrisarmstrong | 2,787 Kb |
Sticky Navbar | Phantomesse | 5,106 Kb |
Blog | Rottingroom | 1,430 Kb |
BlueBox Fork | Huskynation | 12,675 Kb |
Speech bubbles | Something | 1,547 Kb |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!