شاطر
استعرض الموضوع السابقاذهب الى الأسفلاستعرض الموضوع التالي

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

زائر
زائر
تمت المشاركة في الخميس يناير 21, 2016 8: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>

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

avatar
عضو فعال
الجنس : ذكر

الجدي

عدد المساهمات : 953

نقاط النشاط : 1277

السٌّمعَة : 126

بلد العضو :

العمر : 22

معاينة صفحة البيانات الشخصي للعضوhttp://www.s-arabia.com
تمت المشاركة في الخميس يناير 21, 2016 8:32 am
ماشاالله 

والله انك مبدعه 

اعجبنا اسلوب الزوم كتييييرر

سلمت اناملك ادارة

تم التقييييم
التوقــيـــــــــــــــــــــع

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

avatar
عضو فعال
الجنس : ذكر

عدد المساهمات : 668

نقاط النشاط : 988

السٌّمعَة : 24

بلد العضو :

معاينة صفحة البيانات الشخصي للعضو
تمت المشاركة في الخميس يناير 21, 2016 3:28 pm
كود وتطوير رائعه
يعطيك العافيه وتسلم الأيادي المتألقه
على روعة ماخطت لنا من ابجديات واكواد ماسيه
بإنتظار روائعك القادمه بشوووق
التوقــيـــــــــــــــــــــع



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

زائر
زائر
تمت المشاركة في الخميس يناير 21, 2016 4:30 pm
منورين .. ♥

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

avatar
بصمة خالدة
الجنس : ذكر

الاسد

عدد المساهمات : 23062

نقاط النشاط : 26540

السٌّمعَة : 90

بلد العضو :

العمر : 37

معاينة صفحة البيانات الشخصي للعضوhttps://www.ibda3araby.com/
تمت المشاركة في الأحد فبراير 07, 2016 6:34 am

يعطيك العآفيه يا الغلا
طرح بقمة الذوووق والرووعهـ
تسلم يدك ع الطرح المميز لاعدمنـآك ,...
بانتظارجديدك بكل شوق ودي وشذى وردي

التوقــيـــــــــــــــــــــع

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

avatar
بصمة خالدة
الجنس : ذكر

الدلو

عدد المساهمات : 37108

نقاط النشاط : 41656

السٌّمعَة : 282

بلد العضو :

العمر : 18

معاينة صفحة البيانات الشخصي للعضوhttp://WwW.t-AlTwEr.CoM
تمت المشاركة في الأحد فبراير 07, 2016 5:50 pm
كوددد جميل
شكككرآ ~
التوقــيـــــــــــــــــــــع

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

avatar
رئاسة فريق الدردشة

الجنس : ذكر

الجدي

عدد المساهمات : 6239

نقاط النشاط : 7085

السٌّمعَة : 65

بلد العضو :

العمر : 100



معاينة صفحة البيانات الشخصي للعضوhttp://bank.ahlamontada.com/
تمت المشاركة في الأحد فبراير 07, 2016 6:12 pm
كوددد جميل
شكككرآ   ~
التوقــيـــــــــــــــــــــع


سبحان الله وبحمده ..
          سبحان الله العظيم ...

اللهم صلِّ وسلم على محمد.. وعلى آله وصحبه أجمعين



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

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

تحياتــي

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

زائر
زائر
تمت المشاركة في السبت أغسطس 27, 2016 6:04 pm
كود جمييل شكرا لك

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

زائر
زائر
تمت المشاركة في السبت أغسطس 27, 2016 10:25 pm
منور الموضوع
استعرض الموضوع السابقالرجوع الى أعلى الصفحةاستعرض الموضوع التالي
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
Propellerads                                                                           Propellerads