Titled Frame (Box) Designs for Notices and Service Info: Copy-and-Paste CSS
Contents
This post was automatically translated by AI from the Japanese original.
In this post I’ll show you frame designs that come with a title.
Give them a try for introducing your services or posting notices!
Choose a color and a shape to make the code
Choose your favorite color and design, and you’ll get code ready to copy and paste.
If you’d rather get started than browse the samples, start here.
Turn on JavaScript to choose a color and a shape and get the code. You can also copy the sample code below.
How to use the frames on your blog
Paste the code in your blog editor’s HTML mode, and the frame will show up!
For details on how to use them, see the post below.
Frame designs with a title
Full-width title
<div style="border:1px solid #efc4c0;"> <div style="background-color:#efc4c0;color:#ffffff;padding:0.5em 1em;">Your title here</div> <div style="padding:1em;background:#ffffff">Your text here</div></div>Full-width title, with a background color
<div style="border:1px solid #efc4c0;"> <div style="background-color:#efc4c0;color:#ffffff;padding:0.5em 1em;">Your title here</div> <div style="padding:1em;background:#fbf0ef">Your text here</div></div>With a shadow
<div style="box-shadow: 4px 6px 10px rgba(0, 0, 0, .3);"> <div style="background-color:#efc4c0;color:#ffffff;padding:0.5em 1em;">Your title here</div> <div style="padding:1em;background:#ffffff">Your text here</div></div>Simple frame
<div style="border:1px solid #efc4c0; padding:0.5em"><div style="color:#efc4c0;padding:0.5em 1em;">Your title here</div><div style="padding:1em;">Your text here</div></div>Simple frame, with a background color
<div style="border:1px solid #efc4c0; padding:0.5em; background:#fbf0ef;"><div style="color:#efc4c0;padding:0.5em 1em;">Your title here</div><div style="padding:1em;">Your text here</div></div>Rounded frame
<div style="border:1px solid #efc4c0;border-radius:10px;padding:1em;"><div style="padding:0.5em;border-bottom: 3px solid #efc4c0;color:#efc4c0;">Your title here</div><div style="padding:1em 0.5em;">Your text here</div></div>Title on the line #1
<div style="position:relative;border:1px solid #efc4c0;padding:1.5em 1em;"><div style="position:absolute;top: -12px;left: 10px;padding: 5px 25px;background-color:#efc4c0;color:#fff;line-height: 1em;">Your title here</div><div style="margin: 0; padding: 0;">Your text here</div></div>Title on the line #2
<div style="position:relative;border:1px solid #efc4c0;border-radius:4px;padding:1.5em 1em;"><div style="position:absolute;top: -12px;left: 10px;padding: 5px 25px;background-color:#efc4c0;border-radius:4px;color:#fff;line-height: 1em;">Your title here</div><div style="margin: 0; padding: 0;">Your text here</div></div>Title on the line #3
<div style="position:relative;border:1px solid #efc4c0;border-radius:4px;padding:1.5em 1em;"><div style="position:absolute;top: -12px;left: 10px;padding: 5px 25px;background-color:#ffffff;border-radius:4px;color:#efc4c0;line-height: 1em;">Your title here</div><div style="margin: 0; padding: 0;">Your text here</div></div>Title on the line #4
<div style="position:relative;border:1px solid #efc4c0;padding:1.5em 1em;"><div style="position:absolute;top: -12px;left: 10px;padding: 5px 25px;background-color:#ffffff;color:#efc4c0;line-height: 1em;">Your title here</div><div style="margin: 0; padding: 0;">Your text here</div></div>Changing the colors
Colors use a color code (in Japanese): a # followed by six letters and digits, like “#FFFFFF”.
Swap the color code to change the color.
#ffffff means white.
color (text color) → #efc4c0, etc.
border (frame line) → #efc4c0, etc.
background-color (background color) → #fbf0ef, etc.
I pick colors from Coolors, a site that shows stylish color palettes.
Feel free to make them your own!
