 كود بنرات دائرية بتقنية css - زوم على البنر | |  |
| كود بنرات دائرية بتقنية css - زوم على البنر | |
|
|
كاتب الموضوع | رسالة |
---|
زائر زائر

 | موضوع: كود بنرات دائرية بتقنية css - زوم على البنر الخميس يناير 21, 2016 9:21 am | |
| كود بنرات دائرية بتقنية css - زوم على البنر صورة للبنر  https://i.servimg.com/u/f68/16/46/77/76/1437-010.gif - الكود:
-
<style> .gridcontainer { width: 720px; margin: 30px auto; }
.grid_3 { display: inline; float: left; margin-left: 10px; margin-right: 10px; width: 220px; }
.fmcircle_out { width: 200px; height: 200px; background: rgba(221,221,221,0.3) text-align: center; display: block; margin-left: 10px; opacity: 0.5; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; -o-border-radius: 100px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }
.fmcircle_out:hover { opacity: 1; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .fmcircle_out:hover .fmcircle_in img { margin: 30px 25px 25px 25px; width: 120px; height: 120px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }
.fmcircle_in { width: 170px; height: 170px; margin: 15px; display: inline-block; overflow: hidden; border-radius: 85px; -moz-border-radius: 85px; -webkit-border-radius: 85px; -o-border-radius: 85px; }
.fmcircle_in img { border: none; margin: 53px; width: 64px; height: 64px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }
.fmcircle_in span { margin: 0; padding: 0; border: 0; vertical-align: baseline; width: 160px; background: #fff; color: #666666; padding: 5px; margin: 70px 0 0 0; height: 20px; text-align: center; font-weight: bold; letter-spacing: 0.08em; text-transform: uppercase; float: left; position: absolute; opacity: 0; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }
.fmcircle_out:hover .fmcircle_in span { opacity: 1; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; }
/*** Patterns ***/
.fmcircle_blue { background: url(http://i68.servimg.com/u/f68/16/46/77/76/138.png); }
.fmcircle_red { background: url(http://i68.servimg.com/u/f68/16/46/77/76/239.png); }
.fmcircle_green { background: url(http://i68.servimg.com/u/f68/16/46/77/76/331.png); }
</style> <div class="gridcontainer clearfix"> <div class="grid_3"> <div class="fmcircle_out"> <a href="#"> </a> <div class="fmcircle_border"> <div class="fmcircle_in fmcircle_blue"> <span>بنر رقم 1</span><img src="http://i68.servimg.com/u/f68/16/46/77/76/uo_ouo63.png" /> </div> </div><a href="#"> </a> </div> </div> <div class="grid_3"> <div class="fmcircle_out"> <a href="#"> </a> <div class="fmcircle_border"> <div class="fmcircle_in fmcircle_green"> <span>بنر 2</span><img src="http://i68.servimg.com/u/f68/16/46/77/76/uo_ouo63.png" /> </div> </div><a href="#"> </a> </div> </div> <div class="grid_3"> <div class="fmcircle_out"> <a href="#"> </a> <div class="fmcircle_border"> <div class="fmcircle_in fmcircle_red"> <span>بنر 3</span><img src="http://i68.servimg.com/u/f68/16/46/77/76/uo_ouo63.png" /> </div> </div><a href="#"> </a> </div> </div> </div> |
|
 | |
الجنوب العربي
عضو خبير

  عدد المساهمات : 953 نقاط النشاط : 1277 السٌّمعَة : 126 بلد العضو :  العمر : 27
 | موضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر الخميس يناير 21, 2016 9:32 am | |
| ماشاالله والله انك مبدعه اعجبنا اسلوب الزوم كتييييرر سلمت اناملك ادارة تم التقييييم |
|
 | |
THE ROCK
عضو خبير

 عدد المساهمات : 668 نقاط النشاط : 988 السٌّمعَة : 24 بلد العضو : 
 | موضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر الخميس يناير 21, 2016 4:28 pm | |
| كود وتطوير رائعه يعطيك العافيه وتسلم الأيادي المتألقه على روعة ماخطت لنا من ابجديات واكواد ماسيه بإنتظار روائعك القادمه بشوووق |
|
 | |
زائر زائر

 | موضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر الخميس يناير 21, 2016 5:30 pm | |
| |
|
 | |
Abshahad
سوبر الإبداع

  عدد المساهمات : 23607 نقاط النشاط : 27156 السٌّمعَة : 90 بلد العضو :  العمر : 41
 | موضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر الأحد فبراير 07, 2016 7:34 am | |
| يعطيك العآفيه يا الغلا طرح بقمة الذوووق والرووعهـ تسلم يدك ع الطرح المميز لاعدمنـآك ,... بانتظارجديدك بكل شوق ودي وشذى وردي |
|
 | |
ѕαα∂ ∂єѕιgη
سوبر الإبداع

  عدد المساهمات : 43577 نقاط النشاط : 48233 السٌّمعَة : 302 بلد العضو :  العمر : 23
 | |
 | |
Mr. Loay
سوبر الإبداع

  عدد المساهمات : 6242 نقاط النشاط : 7090 السٌّمعَة : 65 بلد العضو :  العمر : 18
 | موضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر الأحد فبراير 07, 2016 7:12 pm | |
| كوددد جميلشكككرآ ~  سبحان الله وبحمده .. سبحان الله العظيم ... اللهم صلِّ وسلم على محمد.. وعلى آله وصحبه أجمعين |
|
 | |
زائر زائر

 | موضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر الثلاثاء مايو 17, 2016 9:12 pm | |
| السلام عليكم ورحمة الله وبركاته ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة إنـجاز أكثر رائــــــع لكن أرجو منكَ عدم التوقف عند هذا الحد مـنتظرين ابداعتــــــك دمتـ ودام تألقـك
تحياتــي |
|
 | |
زائر زائر

 | موضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر السبت أغسطس 27, 2016 7:04 pm | |
| |
|
 | |
زائر زائر

 | موضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر السبت أغسطس 27, 2016 11:25 pm | |
| |
|
 | |
زائر زائر

 | موضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر الخميس سبتمبر 15, 2016 12:28 am | |
| |
|
 | |
JoryAbdallah
سوبر الإبداع

  عدد المساهمات : 126400 نقاط النشاط : 142121 السٌّمعَة : 3010 بلد العضو :  العمر : 36
 | موضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر الأحد يناير 29, 2017 12:47 am | |
| |
|
 | |
El Desha El Hlawany1
رئاسة فريق التصميم

  عدد المساهمات : 828 نقاط النشاط : 970 السٌّمعَة : 55 بلد العضو :  العمر : 25
 | موضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر الإثنين يناير 30, 2017 12:27 pm | |
| شكرا اخي الغالي على الطرح الرائع ,,,,,واصل تالقك .... مع جزيل الشكر ..." تحية مع الشكر |
|
 | |
منصورة
سوبر الإبداع

  عدد المساهمات : 13973 نقاط النشاط : 16967 السٌّمعَة : 52 بلد العضو :  العمر : 59
 | موضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر الإثنين يناير 30, 2017 3:39 pm | |
| كود مميز شكرا  كل القلوب إلى الحبيب تميل ومعي بهذا شاهد ودليل اما الدليل إذا ذكرت محمداً صارت دموع العارفين تسيل هذا رسول الله نبراس الهدى هذا لكل العالمين نبيا |
|
 | |
OuSsaMa BeDdAi
سوبر الإبداع

  عدد المساهمات : 23786 نقاط النشاط : 24696 السٌّمعَة : 134 بلد العضو :  العمر : 21
 | موضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر الجمعة فبراير 17, 2017 2:50 pm | |
| يعطيك العافية  If the plan doesn’t work, change the plan, but never the goal |
|
 | |
| كود بنرات دائرية بتقنية css - زوم على البنر | |
|