صناديق تحذيريه وتنبيه بتقنية css3 حصريا

صناديق تحذيريه وتنبيه بتقنية css3 حصريا

mohamed-alaa

الجمعة، 30 مايو 2014

اقرأ ايضا

السلام عليكم ورحمة الله وبركاته

عندما إنتهيت من تكويد هذه الإضافة أحببت أن أشارك معكم هي إضافة فريدة من نوعها وهي صناديق تحذيريه وتنبيهيه أتمنا أن تنال إعجابكم .

مثال مباشر

يمكنك تغيير هذا النص بما تريده !!

يمكنك تغيير هذا النص بما تريده !!

يمكنك تغيير هذا النص بما تريده !!

طريقة إضافتها إلى مدونتكم :

1- الذهاب إلى قالب .

2- ثم إبحت عن /head .

3- وأضف الكود التالي  فوقه. 

 الكود :

<style>/*Blok*/ .note,.alert,.instruction {position:relative;width:220px; display:block;font-style:normal;color:#555;padding:15px 18px 15px 48px;background-color:#f8e38d;border-radius:13px;border-bottom:2px solid rgba(0,0,0,.1)} .note p,.alert p,.instruction p {margin:0px} .note {background-color:#FCD683} .alert {background-color:#db6161} .alert a,.alert code {color:#FFC0A7} .instruction {background-color:#58C99D} .instruction a,.instruction code {color:#C4FCE5} .note:before,.alert:before,.instruction:before {font-family:'FontAwesome';display:block;position:absolute;top:15px;left:16px;color:rgba(0,0,0,);font-size:22px;line-height:1} .note:before {content:"\f040"} .alert:before {content:"\f071"} .instruction:before {content:"\f05a"} </style><link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

4- ثم أضف الكود التالي في أي مكان تريد .

<div class="note"> يمكنك تغيير هذا النص بما تريده !! </div> <div class="instruction"> يمكنك تغيير هذا النص بما تريده !! </div> <div class="alert"> يمكنك تغيير هذا النص بما تريده !! </div>

أريد طلب واحد هو ترك التعليق