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

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


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





avatar
Abshahad
بصمة خالدة

بصمة خالدة

الجنس : ذكر

الاسد

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

نقاط النشاط : 26533

السٌّمعَة : 89

بلد العضو :

العمر : 36


معاينة صفحة البيانات الشخصي للعضو https://www.ibda3araby.com/

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

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

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

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

بصمة خالدة

الجنس : ذكر

الدلو

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

نقاط النشاط : 41647

السٌّمعَة : 280

بلد العضو :

العمر : 18


معاينة صفحة البيانات الشخصي للعضو http://WwW.t-AlTwEr.CoM

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

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

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


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




التوقيع


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

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



avatar
Robbie Rotten
بصمة خالدة

بصمة خالدة

الجنس : ذكر

الجدي

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

نقاط النشاط : 6785

السٌّمعَة : 59

بلد العضو :

العمر : 100




معاينة صفحة البيانات الشخصي للعضو http://bank.ahlamontada.com/

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

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

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


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

تحياتــي


زائر
زائر


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

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

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


كود جمييل شكرا لك


زائر
زائر


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

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

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


منور الموضوع


زائر
زائر


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

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

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

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

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

سجل معنا الان

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


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

سجل دخولك

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


سجل دخولك

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






Feedage Grade B rated