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.
