السبت، 10 أغسطس 2013

اضف زر ثلاثي الأبعاد بتقنية css3 لمدونتك

3:32 ص  دون ياقلم  لا يوجد تعليقات

سنشرح اليوم طريقة اضافة زر ثلاثي الابعاد لمدونتك.انها ازرار 3D مميزة بتقنية css3 يمكن استخدامها علي مدونات بلوجر!
أكبر ميزة لهذه الأزرار هو انها مصنوعة بتقنية css3 فلا تاخذ وقت كبير في التحميل وتدعم جميع المتصفحات الحديثة.
يمكنك لان التخلي عن الصور واستبدالها بهذه الازرار للحفاظ علي سرعة وجمال مدونتك او موقعك.


button 3D css3


كيفية إضافة هذه الأزرار إلى مدونتك Blogger ؟


لنبدأ على بركة الله
 1 - قم بتسجيل الدخول إلى مدونتك بلوجر.
 2 - من لوحة التحكم الخاصة بمدونتك توجه إلى تصميم أو قالب.
3- ابحث عن : ]]></b:skin>
4-قم بإضافة هذا الكود قبله مباشرة :


.css3dbutton {background: darkred; /* background color of button */color: white;text-decoration: none;font: bold 28px Arial; /* font size and style */position: relative;top: 0; /* anchor main button's position */bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */margin-bottom: 12px;-moz-box-shadow: 0 -15px 5px darkred inset;-webkit-box-shadow: 0 -15px 5px darkred inset;box-shadow: 0 -15px 5px darkred inset;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}
.css3dbutton, .css3dbutton:after {display: inline-block;padding: 10px 15px; /* vertical and horizontal padding of button */-moz-border-radius: 8px/15px;-webkit-border-radius: 8px/15px;border-radius: 8px/15px;outline: none;}
.css3dbutton:after { /* pseudo element to construct 3D side of button */content: "";position: absolute;padding: 0;z-index: -1;bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */left: 0;width: 100%;height: 100%;background: #6e0e0c; /* background color of 3D effect */-moz-box-shadow: 1px 0 3px gray;-webkit-box-shadow: 1px 0 3px gray;box-shadow: 1px 0 3px gray;}
.css3dbutton:hover {-moz-box-shadow: 0 25px 5px rgbaundefined182, 64, 61, 0.7) inset;-webkit-box-shadow: 0 25px 5px rgbaundefined182, 64, 61, 0.7) inset;box-shadow: 0 25px 5px rgbaundefined182, 64, 61, 0.7) inset;background: #bc3835; /* background color when mouse rolls over button */}
.css3dbutton:active {top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */bottom: 0;-moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;-webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;}

5-حفظ القالب


كيفية استخدام هذه الأزرار؟

اتبع هذه الخطوات البسيطة لاستعمال الازرار أثناء كتابة تدوينة جديدة:

  • اذهب الي مشاركة جديدة 
  • اضغط علي زر html بجانب زر تاليف ثم اضف الكود التالي:
<center><a href="الرابط هنا!" class="css3dbutton">النص الخاص بك هنا!</a></center>


  •  غير ما باللون الازرق بما يتماشي معك 

منشورة في:

0 التعليقات:

إرسال تعليق