How To Create Stylish Colourfull Note with CSS3 | HTML

How To Create Stylish Note With Css3

This Note You can use as BlockQuote or as a Note which you like most better. This note makes your website pretty and increase interest of visitors for your website.

In first step simply log in to your Blogger account
Click Template from left corner and then click on Edit HTML
Now Press from your keyboard Ctrl+F and a box will be appeared.
Now simply type ]]></b:skin> in box and press enter
After find out that code in your template paste given code just above ]]></b:skin>
Now click on Save Template.

CSS3 Coding

.note {
    position:relative;
    width:auto;
    padding:1em 1.5em;
    margin:2em auto;
    color:#fff;
    font-size: 20pt;
    font-family: comic sans ms;
    font-weight: normal;
    border-radius: 10px;
    background:#97C02F;
    overflow:hidden;
}

.note:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 38px 38px 0;
    border-style:solid;
    border-color:#fff #fff #658E15 #658E15;
    background:#658E15;
    display:block; width:0;
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

.note.red {
background:#C93213;
}
.note.red:before {
border-color:#fff #fff #97010A #97010A;
background:#97010A;
}

.note.blue {
background:#5674f2;
}
.note.blue:before {
border-color:#fff #fff transparent transparent;
background:transparent;
}

.note.black {
background:#4d4747;
}
.note.black:before {
border-color:#fff #fff #000000 #000000;
background:#4d4747
}

.note p {
margin:0;
}
.note p + p {
margin:1.5em 0 0;
}

HTML Coding

For Green Note

<div class="note">
<p>Your Text Here</p>
</div>

For Red Note

<div class="note red">
<p>Your Text Here</p>
</div>

For Blue Note

<div class="note blue">
<p>Your Text Here</p>
</div>

For Black Note

<div class="note black">
<p>Your Text Here</p>
</div>

Live Demo Here

The quick brown fox jumps over the lazy dog is a best phrase for increase your typing which contain all alphabets and make much strong your type writing with use this phrase.

The quick brown fox jumps over the lazy dog is a best phrase for increase your typing which contain all alphabets and make much strong your type writing with use this phrase.

The quick brown fox jumps over the lazy dog is a best phrase for increase your typing which contain all alphabets and make much strong your type writing with use this phrase.

The quick brown fox jumps over the lazy dog is a best phrase for increase your typing which contain all alphabets and make much strong your type writing with use this phrase.