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

صفحة 1 من اصل 2 1, 2  الصفحة التالية

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

كود بنرات دائرية بتقنية 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 - زوم على البنر

مُساهمة من طرف الجنوب العربي في الخميس يناير 21, 2016 8:32 am


ماشاالله 

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

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

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

تم التقييييم




avatar
الجنوب العربي
عضو فعال
عضو فعال

الجنس : ذكر

الجدي

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

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

السٌّمعَة : 126

بلد العضو :

العمر : 22


http://www.s-arabia.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف THE ROCK في الخميس يناير 21, 2016 3:28 pm


كود وتطوير رائعه
يعطيك العافيه وتسلم الأيادي المتألقه
على روعة ماخطت لنا من ابجديات واكواد ماسيه
بإنتظار روائعك القادمه بشوووق




التوقيع



avatar
THE ROCK
عضو فعال
عضو فعال

الجنس : ذكر

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

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

السٌّمعَة : 24

بلد العضو :


الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف زائر في الخميس يناير 21, 2016 4:30 pm


منورين .. ♥


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف almaldin في الأحد فبراير 07, 2016 6:34 am


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





avatar
almaldin
الادارة العليا

الادارة العليا

الجنس : ذكر

الاسد

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

نقاط النشاط : 24233

السٌّمعَة : 88

بلد العضو :

العمر : 36





https://www.ibda3araby.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف ѕαα∂ ∂єѕιgη في الأحد فبراير 07, 2016 5:50 pm

avatar
ѕαα∂ ∂єѕιgη
بصمة خالدة

بصمة خالدة

الجنس : ذكر

الدلو

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

نقاط النشاط : 41640

السٌّمعَة : 280

بلد العضو :

العمر : 18


http://WwW.t-AlTwEr.CoM

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف Mr.LoLo في الأحد فبراير 07, 2016 6:12 pm


كوددد جميل
شكككرآ   ~




التوقيع


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

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



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

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

الجنس : ذكر

الجدي

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

نقاط النشاط : 6604

السٌّمعَة : 55

بلد العضو :

العمر : 100




http://bank.ahlamontada.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف زائر في الثلاثاء مايو 17, 2016 8:12 pm


السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك

تحياتــي


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف 1M ThE BesT في السبت أغسطس 27, 2016 6:04 pm

avatar
1M ThE BesT
مؤسس الابداع العربي

مؤسس الابداع العربي

الجنس : ذكر

الدلو

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

نقاط النشاط : 27973

السٌّمعَة : 309

بلد العضو :

العمر : 24




http://jalil.assassino

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف زائر في السبت أغسطس 27, 2016 10:25 pm


منور الموضوع


زائر
زائر


الرجوع الى أعلى الصفحة اذهب الى الأسفل

صفحة 1 من اصل 2 1, 2  الصفحة التالية

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

سجل دخولك لتستطيع الرد بالموضوع

لابد تكون لديك عضوية لتستطيع الرد سجل الان

سجل معنا الان

انضم الينا بمنتدي الابداع العربي فعملية التسجيل سهله جدا ؟


تسجيل عضوية جديدة

سجل دخولك

لديك عضوية هنا ؟ سجل دخولك من هنا .


سجل دخولك

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى