Boxes and Headings

Developer
Michael MartinSmucker
Size
2,894 Kb
Views
22,264
  1. Boxes and Headings Previews
  2. Boxes and Headings HTML Codes
  3. Boxes and Headings CSS Codes

How do I make an boxes and headings?

Various styles for displaying a small box with a heading. Makes use of generated content, gradients, shadows, transforms, and more.. What is a boxes and headings? How do you make a boxes and headings? This script and codes were developed by Michael MartinSmucker on 28 September 2022, Wednesday.

Boxes and Headings Previews
IQ Test

Boxes and Headings - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Boxes and Headings</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #ddd; font: 14px sans-serif;
}
div { background: #fff; box-shadow: 0 0 3px rgba(0,0,0,0.25); float: left; height: 220px; margin: 50px 0 0 45px; position: relative; text-align: center; width: 210px;
}
div h2 { background: #08b; background-image: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2)); border: 0 solid rgba(0,0,0,0.2); color: #fff; font-size: 18px; font-weight: bold; position: relative; text-shadow: -1px -1px 1px rgba(0,0,0,0.2);
}
div.folded:before, div.folded:after { bottom: 26px; box-shadow: 0 28px 8px rgba(0,0,0,0.5); content: ""; height: 28px; position: absolute; width: 48%; z-index: -1;
}
div.folded:before { left: 2%; transform: rotate(-3deg);
}
div.folded:after { right: 2%; transform: rotate(3deg);
}
div.folded h2 { border-width: 1px 1px 2px; box-shadow: 0 2px 6px rgba(0,0,0,0.5); margin: 0; padding: 4px 40px; position: absolute; right: -14px; top: 12px;
}
div.folded h2:after { border-width: 7px; border-style: solid; border-color: #134 transparent transparent #134; bottom: -15px; content: ""; position: absolute; right: -1px;
}
div.banner { z-index: -1;
}
div.banner h2 { border-radius: 0 0 5px 5px; border-width: 0 1px 1px 1px; border-color: rgba(0,0,0,0.1); box-shadow: 0 0 4px rgba(0,0,0,0.3); display: inline-block; margin: -1px auto 0; padding: 4px 28px;
}
div.banner h2:before, div.banner h2:after { bottom: 4px; box-shadow: 0 6px 5px rgba(0,0,0,0.4); content: ""; height: 10px; position: absolute; width: 47%; z-index: -1;
}
div.banner h2::before { left: 3%; transform: rotate(-3.5deg);
}
div.banner h2::after { right: 3%; transform: rotate(3.5deg);
}
div.corner { overflow: hidden;
}
div.corner h2 { background-image: linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3)); border-width: 1px 0; border-color: rgba(0,0,0,0.3); box-shadow: 0 2px 6px rgba(0,0,0,0.5); padding: 4px 34px 4px 80px; position: absolute; right: -12px; top: -18px; transform: rotate(20deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="folded"><h2>News</h2></div>
<div class="banner"><h2>News</h2></div>
<div class="corner"><h2>News</h2></div>
</body>
</html>

Boxes and Headings - Script Codes CSS Codes

body { background: #ddd; font: 14px sans-serif;
}
div { background: #fff; box-shadow: 0 0 3px rgba(0,0,0,0.25); float: left; height: 220px; margin: 50px 0 0 45px; position: relative; text-align: center; width: 210px;
}
div h2 { background: #08b; background-image: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.2)); border: 0 solid rgba(0,0,0,0.2); color: #fff; font-size: 18px; font-weight: bold; position: relative; text-shadow: -1px -1px 1px rgba(0,0,0,0.2);
}
div.folded:before, div.folded:after { bottom: 26px; box-shadow: 0 28px 8px rgba(0,0,0,0.5); content: ""; height: 28px; position: absolute; width: 48%; z-index: -1;
}
div.folded:before { left: 2%; transform: rotate(-3deg);
}
div.folded:after { right: 2%; transform: rotate(3deg);
}
div.folded h2 { border-width: 1px 1px 2px; box-shadow: 0 2px 6px rgba(0,0,0,0.5); margin: 0; padding: 4px 40px; position: absolute; right: -14px; top: 12px;
}
div.folded h2:after { border-width: 7px; border-style: solid; border-color: #134 transparent transparent #134; bottom: -15px; content: ""; position: absolute; right: -1px;
}
div.banner { z-index: -1;
}
div.banner h2 { border-radius: 0 0 5px 5px; border-width: 0 1px 1px 1px; border-color: rgba(0,0,0,0.1); box-shadow: 0 0 4px rgba(0,0,0,0.3); display: inline-block; margin: -1px auto 0; padding: 4px 28px;
}
div.banner h2:before, div.banner h2:after { bottom: 4px; box-shadow: 0 6px 5px rgba(0,0,0,0.4); content: ""; height: 10px; position: absolute; width: 47%; z-index: -1;
}
div.banner h2::before { left: 3%; transform: rotate(-3.5deg);
}
div.banner h2::after { right: 3%; transform: rotate(3.5deg);
}
div.corner { overflow: hidden;
}
div.corner h2 { background-image: linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.3)); border-width: 1px 0; border-color: rgba(0,0,0,0.3); box-shadow: 0 2px 6px rgba(0,0,0,0.5); padding: 4px 34px 4px 80px; position: absolute; right: -12px; top: -18px; transform: rotate(20deg);
}
Boxes and Headings - Script Codes
Boxes and Headings - Script Codes
Home Page Home
Developer Michael MartinSmucker
Username mlms13
Uploaded September 28, 2022
Rating 4
Size 2,894 Kb
Views 22,264
Do you need developer help for Boxes and Headings?

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!

Michael MartinSmucker (mlms13) Script Codes
Name
4-up Grid Block
Toolbar Mockup
CSS3 ribbons with Unicode icons
A Pen by Michael MartinSmucker
Table with rounded corners
Chrome half-pixel bug
CSS Floppy Disk Icon
Drinking Habits Mockup
SVG Donut Loading Spinner
Magic Color Picker
Create amazing sales emails 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!