منتدى الابداع العربي

للإبداع لمسات ! ... ولمسـات الإبــداع إختصاصـنا !
 
الرئيسيةالرئيسية  المنشوراتالمنشورات  البوابةالبوابة  التسجيلالتسجيل  دخولدخول  


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

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

اذهب الى الأسفل 
انتقل الى الصفحة : الصفحة السابقة  1, 2
كاتب الموضوعرسالة
زائر
زائر
avatar


كود بنرات دائرية بتقنية css - زوم على البنر - صفحة 2 Empty
مُساهمةموضوع: كود بنرات دائرية بتقنية css - زوم على البنر   كود بنرات دائرية بتقنية css - زوم على البنر - صفحة 2 Emptyالخميس يناير 21, 2016 9:21 am

تذكير بمساهمة فاتح الموضوع :

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

صورة للبنر

كود بنرات دائرية بتقنية css - زوم على البنر - صفحة 2 1437-010
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>
الرجوع الى أعلى الصفحة اذهب الى الأسفل

كاتب الموضوعرسالة
منصورة
سوبر الإبداع 



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

كود بنرات دائرية بتقنية css - زوم على البنر - صفحة 2 Empty
مُساهمةموضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر   كود بنرات دائرية بتقنية css - زوم على البنر - صفحة 2 Emptyالإثنين يناير 30, 2017 3:39 pm

كود مميز شكرا
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://www.manssora.com/
OuSsaMa BeDdAi
سوبر الإبداع 



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

كود بنرات دائرية بتقنية css - زوم على البنر - صفحة 2 Empty
مُساهمةموضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر   كود بنرات دائرية بتقنية css - زوم على البنر - صفحة 2 Emptyالجمعة فبراير 17, 2017 2:50 pm

يعطيك العافية
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.pubarab.com/
Picasso-Des
سوبر الإبداع 

Picasso-Des

ذكر
الجدي
عدد المساهمات : 10775
نقاط النشاط : 11119
السٌّمعَة : 136
بلد العضو : كود بنرات دائرية بتقنية css - زوم على البنر - صفحة 2 Ioao10
العمر : 37

كود بنرات دائرية بتقنية css - زوم على البنر - صفحة 2 Empty
مُساهمةموضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر   كود بنرات دائرية بتقنية css - زوم على البنر - صفحة 2 Emptyالسبت يونيو 16, 2018 11:28 pm

يعطيكم العافية على الطرح كود بنرات دائرية بتقنية css - زوم على البنر - صفحة 2 837876428
كل الاحترام كود بنرات دائرية بتقنية css - زوم على البنر - صفحة 2 433646733
الرجوع الى أعلى الصفحة اذهب الى الأسفل
http://medialive.pro
مصطفى ستيتان
عضو محترف 

مصطفى ستيتان

ذكر
عدد المساهمات : 1130
نقاط النشاط : 1203
السٌّمعَة : 11
بلد العضو : كود بنرات دائرية بتقنية css - زوم على البنر - صفحة 2 Ioao10

كود بنرات دائرية بتقنية css - زوم على البنر - صفحة 2 Empty
مُساهمةموضوع: رد: كود بنرات دائرية بتقنية css - زوم على البنر   كود بنرات دائرية بتقنية css - زوم على البنر - صفحة 2 Emptyالإثنين يوليو 23, 2018 9:28 am

   جزاكم الله خيراً  
 وردة حمراء وردة حمراء وردة حمراء وردة حمراء 


سبحان الله والحمدلله ولا إله إلا الله 
 
كود بنرات دائرية بتقنية css - زوم على البنر - صفحة 2 Do
الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://www.elmanal.com
 
كود بنرات دائرية بتقنية css - زوم على البنر
الرجوع الى أعلى الصفحة 
صفحة 2 من اصل 2انتقل الى الصفحة : الصفحة السابقة  1, 2

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتدى الابداع العربي ::  تقنيات احلى منتدى ::  تقنيات أحلى منتدى :: التقنيات المتقدمة-
انتقل الى:  
جميع الحقوق محفوظة لمنتدى الإبداع العربي 2020