Professional CSS Text Box with Bottom Shadow for Blogger

css text box for blogger
I’ve already shared two different styles of CSS boxes for highlighting your HTML or JavaScript codes. In this article, let me share a different style CSS text box that includes a beautiful title style with dark Gray color background. Able to use this box to highligh text messages, code snippets (CSS, HTML & JavaScript) etc. As my previous text box widget, this one includes no hover and active text effects, but contains a beautiful shadow effect right below the box.

Ive added a sample text box below for a demonstration. I used to add some simple text inside this text box. So, I recommend you to have a look at the demo text box widget provided below. Thus it may help you to comprehend what were gonna do right here and right now.



LABSTRIKE - Technology Blog


Que: What does LabStrike stand for?

Ans: LabStrike focuses the top Tech Info on the topics like Facebook, Google, YouTube, Web 2.0, Android, iOS, Gadgets, SEO tips, Blogger widgets and More...!!!

Que: What’s Lorem Ipsum anyway?

Ans: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.


Please note: Its written in pure CSS and have needs of no images. You can also add anything else including HTML, CSS and JavaScript to show up in this box. Also this widget includes an h1 main heading tag for the main title, so you dont have to add the title tag manually. The Gray background appears along with the main title.


 Add this CSS Text Box Widget to Blogger?
Due to Bloggers tweak in Blogger template HTML editor, become more innovative for web developers. So if youre a novice Blogger, follow each steps provided below very carefully and in advance, backup your template before you dive into the template HTML editor.

Also confirm to steer clear untrue click on invalid clicks on Format template, Revert changes and Revert widget templates to default buttons, if youre using high customized Blogger template.

  • Go to Blogger Dashboard » Template
  • Backup your Blogger Template before you customize
  • Click on Edit HTML
  • Expand Blogger template skin | See how it's - screenshot
  • Press Ctrl + F and search the code shown below

]]></b:skin>

Now copy & paste the below code right above/before ]]></b:skin> [use Ctrl+F to find the code].

/* Professional Text Box Widget by LabStrike----------------------------------------------- */
body {
    font-family: 'lucida grande', helvetica, arial, sans-serif;
    font-size: 76%;
}
/* basic styling first  */

.lifted_content_box {
    display: block;
    width: 500px;
    margin: 0 auto;
    position: relative;
}
.lifted_content_box h1 {
    font-size: 14px;
    font-weight: bold;
    line-height: 2em;
    margin: 0;
 /* for the triangular shape/cut */
    height: 0;
    border-bottom: 25px solid #505050;
 /* kinda acts as the height */
    border-right: 15px solid transparent;
 /* adjust to change the angle */
    display: inline-block;
    color: #fff;
    text-shadow: 1px 1px 0 #585858;
    padding: 0 10px;
    vertical-align: bottom;
 /* fixes the mysterious gaps bug */;
}
.lifted_content_box div {
    padding: 10px;
    background: #fff;
    border-top: 5px solid #505050;
 /* was just experimenting. gives a nice look and feel: D */
    ;
    -webkit-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.20);
    -moz-box-shadow: inset 0px 0px 10px rgba(0,0,0,0.20);
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.20);
}
.lifted_content_box p {
    margin: 0 0 10px;
    color: #555;
    line-height: 1.5em;
}
/* lifted shadows  */

.lifted_content_box::before,
.lifted_content_box::after {
    content: '';
    position: absolute;
    width: 50%;
 /* maybe we could set a max-width for larger content boxes ? */
    height: 20px;
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
    -webkit-transform: rotate(-5deg) skew(-10deg);
    -moz-transform: rotate(-5deg) skew(-10deg);
    -o-transform: rotate(-5deg) skew(-10deg);
    -ms-transform: rotate(-5deg) skew(-10deg);
    transform: rotate(-5deg) skew(-10deg);
    left: 10px;
    bottom: 13px;
    z-index: -1;
}
.lifted_content_box::after {
    left: auto;
    right: 10px;
    -webkit-transform: rotate(5deg) skew(10deg);
    -moz-transform: rotate(5deg) skew(10deg);
    -o-transform: rotate(5deg) skew(10deg);
    -ms-transform: rotate(5deg) skew(10deg);
    transform: rotate(5deg) skew(10deg);
}

Important: You can easily fiddle with the above CSS code snippet to revolutionize the boxs width, font-size & weight, line-height, color, padding, text alignment and more, but only if you know a little bit of CSS. Nonetheless, if you cant, never be indecisive to mention your precious needs via comment.

Preview your Blogger template and unless any error happened click on Save template and youre successfully added the skin of the text box. You can use the following HTML code snippet to add this box to your blog or blog post [Swap your blog post from Compose to EDIT HTML to add this box].

<article class="lifted_content_box">
<h1>LABSTRIKE - Technology Blog</h1>
<div>
<p>Paragraph Heading</p>
<p>Main Body Text</p>
</div>
</article>

 Please note the following things
  - Replace LABSTRIKE - Technology Blog (Main Title) with your own text title.
  - Replace Paragraph Heading (Sub-Title) with the text you wanna appear.
  - Replace Main Body Text with your own text, notes, or JavaScript Code.

If youre using this text box to display CSS, HTML, or JavaScript code snippets, do encode your code snippets before using. To encode or phrase your Code snippets, vist htmlentities.net.

   Other CSS Code and Text Box Series Widgets

  1. Pure CSS Code Box for HTML/JavaScript Coding
  2. Pure CSS Box with Hover and Active Text Effects
Hope you enjoyed this post. Now its you time to hire us with your feedback and suggestions. Also please share and subscribe to LabStrike. Anyway, have you got any trouble while adding this widget to your blog? If yes, drop a comment below and Im glad to be helping you. Thanks...!!!