أزرار css3

الاثنين، 19 مارس 2012
0 التعليقات


























مزيد من المعلومات »

تجريب تجريب

السبت، 18 فبراير 2012
1 التعليقات
السلام عليكم ورحمة الله


اليوم تم انهاء مشروع المحرر وتمت تجربته والحمد لله لاتوجد اخطاء


المحرر مفيد لكل مطور او معرب ويسهل العمل كثيرا












ليس هذا فقط بل استخداماته عديدة انا شخصيا يساعدني في بناء وتطوير الاضافات كما انه يستعرض بسرعة دون الحاجة لاعادة التحميل والحفظ في كل مرة






























الان نعطي مثال تطبيقي لتتضح لك فكرة المحرر اونلاين


اولا قم بزيارة المحرر







تفضل من هنا






الان قم بتعويض عبارة هنا كود css بهذا الكود وطبعا هو كود css








.spinning_icons a{
width:48px;
height:48px;
display:inline-block;
text-indent:-9999em;
background-position:0 0;
background-repeat:no-repeat;
z-index:2000;
overflow:hidden;
}


.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjALonL8czYzYZ71L-QcqgTqnFtYwVPQBw1pFQgZ6EO6RUlfxiShfcFFu6B1FJ4OwOZx4Z_GNEBhzxDj1yHqbYutv4CY38k1fW2DWeP-AG9smTT12cTnEaQnCMKagUbK9lDMQqRyAQxAc8/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo7ptFcz63B5lC9KE4XMKOVUtYnlU8lQjJeuQIQyK5u319kbEcik0PIpEg1lop5ylvPm7BKqAn31-4nV1TZzhIiWtOsmmksLa-V869gIzwO-ZC4mHnOYDv9TTCFgnJiS8V7Fr0Wg4XcqQ/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6mSBX5D7U-gONlrRKvhmyrqIiTjBp6-bu2clcyg9i1xYZZRzSc4kCfeAPkqe-J35QFReupH-byny9UbhEWTREiyR5Y56nO_XuaR-A50UjftcZLjdg5GfBsUQ-WyyX5RLy0EtOQ3L8R5k/s1600/digg_32.png'); }
.dribbble{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy5YWHIfEQe1458D14O7nR48WKa7FCPy0FiEODKrA6U3-GdPl1gu8-2lt9hGu5po4oyevRgm4kFHGDTG0HpExKc8FiGeqg7-7HLCh1i3yd4BFVJMLyFx4TnpXzGRqq_jw45Sm5gmhmgKk/s1600/dribbble_32.png'); }
.email{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqCoFGQEEEaC6MU6Gkci9CvRNXHDRHot2YsPP8_77C4glvZjHkUHr-GcHgeH2d5CcLdePn5X-r4yNw9KnOLB22z9gfEZoKoEqt_uDzUbbQnntJ6gO09cm8hyROaSFLeiiUB24EKadUm8s/s1600/email_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Vi1n1koaktlz1C8EA1UnfNzLQk1yA3zDHKPl_xXhxsBRCb9ILoizWIq2WLZtI7oBbS9AXFuz7cafr81sCG5AcKvkIDhcjV5d_1NAieg8gvHWwBCmMyWktErK1lqH1W7zvmeNNVfM-TA/s1600/facebook_32.png'); }
.flickr{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpO_YuArnw_5RjItByyiygc8M1esf6R7YyeF8YqEXtJWxOwdEw0EZYNuU3b33MRSTqnheU_xsjpyVxm4zXta9LzBaXahe0PWWVadWCkZIsKEkjb-xVqB7NjRy90PVAoVIp1sTdyVNrYXs/s1600/flickr_32.png'); }
.foursquare{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyOyVUUoJiRNFMoTsW0cKbJHf4tjf-Vwf4lgMshyioidFABFg5pJhCALNpw8ibckL5zZqvTvPqAt3iCVySfodg7sBHlVF1XQRzZEZe6wbb19SQEGDTK_AwIPz32psYZ0T3MY8S9I4f1NU/s1600/foursquare_32.png'); }
.linkedin{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNZ3Myk3uSxDpq627fnmMVAwsXehTph2O7FdVxgJ3pdgUPvVYxuxm30P5l37K01K4_Mjk3rTviQ3VdOnKOR2p4-YKEPM5exSGD1uijiy67doeVsbYJtbUhVYGxhd_DlO14Wvz_LeI2mcQ/s1600/linkedin_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIqpcvi8mTHybIIby7g1nR5HwpOZvdmp-A060lMhX9zLJK4KqxZaQz0CCre395nyxFDMCaF_TtA2nTrWE1Cn8qtk6-M2T4piH9Uhy_RXgDryj41zk0UsknhrpHB9zlADVeU9B7Lb0oyhg/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZBsyBLTw7ayDZIwrDM6VRi6MtOOBbCjPVa0gn6IcOYqGuEa3gQz7U2a3H6b9bMP1RXReXFqTA0ym8hZEMEk6lGLTSRYAXitqkjASakcRd-P0nVi9ulN2Fwgs6SglF80F2E7oiyhtWOM/s1600/stumbleupon_32.png'); }
.youtube{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjztwVXp2DszclNtIR7LaAQRld_24wTa-Nhk8zQ9T12akabQIjGHHhh3BLy1SegthgtTHEWJyfvOusOcEURNK55XzLOwq2FtL4ki6lUiqXfkIpkCyZpZOtdy0lSglX-CC8yPJJk-ETMA6k/s1600/youtube_32.png'); }


.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}




عوض ايضا عبارة هنا كود html بهذا الكود وهو كود html






















الان اضغط زر استعرض واستمتع






بالتعديل على الاضافة كما يحلو لك دون الحاجة للتعديل على قالبك


اظن الفكرة صارت واضحة الان تستطيع تصميم قوالب,اضافات,تعريب,تجربة اضافات قبل تركيبها على قالبك, وحتى عرض قوالب !والتعديل عليها بسهولة


اي استفسار انا في الخدمة ارجو ان يكون المحرر مفيد




شكرا لجميع متابعي المدونة على دعمهم
وترقبو المشاريع القادمة ان شاء الله
مزيد من المعلومات »
 
 

© 2010 مختبر بجاد2, Design by DzigNine
In collaboration with Breaking News, Trucks, SUV