كيفية إدراج ملاحظات على شكل فقاعات لمدونات بلوجر
by homeblogger
HTML
<p class="bestavdhoot">
تنويه :
زوار ومتابعي " مدونة هوم بلوجر " الكرام أرجو من شخصكم الكريم عند نسخ المواضيع يجب ذكر المصدر وإلا ستعرض نفسك للمسألة القانونية لذا يجب عليك قراءة إتفاقية الاستخدام
مع تحيات فريق عمل المدونة
</p>CSS
p.bestavdhoot {
position:relative;
width:400px;
padding:20px 40px;
margin:10px 10px 80px 40px;
background:#f7a944;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#fac868), to(#f3961c));
background:-moz-linear-gradient(#fac868, #f3961c);
background:-o-linear-gradient(#fac868, #f3961c);
background:linear-gradient(#fac868, #f3961c);
-webkit-border-radius:180px;
-moz-border-radius:180px;
border-radius:180px;
-webkit-box-shadow: -3px 4px 8px #989898;
-moz-box-shadow: -3px 4px 8px #989898;
box-shadow: -3px 4px 8px #989898;
color:#575544;
font-size:1em;
letter-spacing:.06em;
}
p.bestavdhoot:before {
content:"";
position:absolute;
bottom:-40px;
left:20px;
background:#f3961c;
width:30px;
height:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
/*add a drop shadow*/
-webkit-box-shadow: -3px 3px 4px #989898;
-moz-box-shadow: -3px 3px 4px #989898;
box-shadow: -3px 3px 8px #989898;
}
p.bestavdhoot:after {
content:"";
position:absolute;
bottom:-55px;
left:0;
width:15px;
height:15px;
background:#f3961c;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
-webkit-box-shadow: -3px 3px 4px #989898;
-moz-box-shadow: -3px 3px 4px #989898;
box-shadow: -3px 3px 8px #989898;
}