حصريا اضافة دائرة جميلة تحتوي على معلومات

السلام عليكم و رحمة الله تعالى و بركاته متابعي الروسافي ويب
اليوم أود أن تظهر لك كيفية إنشاء مكون قليلا مع لمسة واقعية. وتعتمد الفكرة على أثر ورقة حلوة وجدت في الفيديو من قصص مطوري برامج Google. ربما كنت قد أنشأت هذا النوع من الآثار ورقة عندما كنت طفلا. في الأساس يفتح شيء أو بالتناوب عندما سحب أو دفع بعض المقبض.
سنقوم بإنشاء دائرة مع مقبض التي ستفتح بمجرد النقر على مقبض قليلا، وخلق تأثير واقعي 3D التقليب بمساعدة CSS 3D تحول والظلال / التدرجات.

يمكنك معاينة الاضافة:

معاينة

أولا هدا كود HTML يمكنك أن تضعه في أي مكان تريده

 <div class="fc-wrapper">
 
 <div class="fc-handle fc-handle-pull"></div>
 
 <div class="fc-perspective">
  
  <!-- right part overlay; get's darker -->
  <div class="fc-overlay fc-overlay-reverse"></div>
  
  <div class="fc-handle fc-handle-out"><div></div></div>
  
  <!-- inner bottom content part -->
  <div class="fc-bottom">
   <div class="fc-bottom-bg">
    <div class="fc-content">
     <p>I can live with doubt, and uncertainty, and not knowing. I think it's much more interesting to live not knowing than to have answers which might be wrong. <span>Richard Feynman</span></p>
    </div>
   </div>
   <div class="fc-overlay fc-overlay-solid"></div>
  </div><!-- //fc-bottom -->
  
  <!-- front and back of the flipping half -->
  <div class="fc-flip">
  
   <div class="fc-front">
   
    <div class="fc-inner">
    
     <div class="fc-overlay fc-overlay-left"></div>
     <!-- left-most part of handle -->
     <div class="fc-handle fc-handle-in"><div></div></div>
     
     <div class="fc-content">
      <h3>Free revelations</h3>
      <p>by Codrops</p>
     </div>
     
    </div>
    
   </div><!-- //fc-front -->
   
   <div class="fc-back">
   
    <div class="fc-inner">
    
     <div class="fc-content">
      <div class="feynman">
       <span>1918 – 1988</span>
      </div>
     </div>
     
     <div class="fc-overlay fc-overlay-right"></div>
     
    </div>
    
   </div><!-- //fc-back -->     
   
  </div><!-- //fc-flip -->     
  
 </div><!-- //fc-perspective -->
 
</div><!-- //fc-wrapper -->
 

ثانيا كود css تقوم بوضعه فوق </b:skin> :

 .fc-wrapper {
 width: 300px;
 height: 300px;
 position: relative;
 margin: 30px auto 0;
 background: #846aa7 url(ضع الصورة التي تريدها) repeat center center;
 border-radius: 50%;
 box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.fc-handle {
 position: absolute;
 top: 50%;
 right: 0px;
 width: 80px;
 height: 30px;
 margin-top: -15px;
 background: #775b9d;
 box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.fc-handle-out {
 right: -65px;
 width: 65px;
}
.fc-handle-in {
 right: 80px;
}
.fc-handle div {
 position: absolute;
 height: 0px;
 width: 80px;
 top: 30px;
 content: '';
 opacity: 0.3;
}

.fc-handle-in div {
 background: 
  linear-gradient(
   75deg, 
   rgba(0,0,0,0) 0%,
   rgba(0,0,0,0) 73%,
   rgba(0,0,0,0.65) 100%
  );
}

.fc-handle-out div {
 background: 
  linear-gradient(
   170deg, 
   rgba(0,0,0,0.65) 0%,
   rgba(0,0,0,0) 27%,
   rgba(0,0,0,0) 100%
  );
}
.fc-handle-out::after {
 position: absolute;
 right: 0px;
 width: 4px;
 height: 31px;
 content: '';
 background: 
  linear-gradient(
   to right, 
   rgba(0,0,0,0) 0%,
   rgba(0,0,0,0.15) 100%
  );
}
.fc-handle-pull {
 right: auto;
 left: 100%;
 margin-left: 5px;
 width: 30px;
 box-shadow: 
  1px 0 1px rgba(0,0,0,0.1), 
  inset 3px 0 2px rgba(0,0,0,0.2);
 cursor: pointer;
}
.fc-handle-pull::after {
 content: '';
 position: absolute;
 top: 0px;
 right: 0px;
 width: 30px;
 height: 100%;
 background: 
  linear-gradient(
   to right, 
   rgba(0,0,0,0) 0%,
   rgba(0,0,0,0) 69%,
   rgba(0,0,0,0.08) 100%
  );
}
.fc-bottom {
 width: 220px;
 height: 100%;
 overflow: hidden;
 position: absolute;
 opacity: 0;
}
.fc-bottom-bg {
 background: #846aa7 url(ضع الصورة التي تريدها) repeat center center;
 border-radius: 50%;
 width: 300px;
 height: 100%;
}
.fc-overlay {
 top: 0px;
 left: 0px;
 width: 300px;
 height: 100%;
 position: absolute;
 border-radius: 50%; 
}
.fc-overlay-solid {
 background: rgba(0,0,0,0.6);
}
.fc-overlay-reverse {
 background: rgba(0,0,0,0);
}
.fc-overlay-left {
 background: linear-gradient(to right, transparent 27%, rgba(0,0,0,0.30) 80%);
 opacity: 0.5; 
}

.fc-overlay-right {
 background: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.30) 100%);
 opacity: 0.5;
}
.fc-perspective {
 width: 220px;
 height: 300px;
 position: relative;
 perspective: 1000px;
}
.fc-flip {
 width: 100%;
 height: 100%;
 position: absolute;
 transform-origin: 220px 0px;
}
.fc-flip > div {
 display: block;
 height: 100%;
 width: 100%;
 margin: 0;
 overflow: hidden;
 position: absolute;
}
.fc-flip .fc-back {
 transform: rotate3d(0,1,0,-180deg);
}
.fc-flip .fc-inner {
 border-radius: 50%;
 width: 300px;
 height: 100%;
 position: absolute;
 background: #846aa7 url(ضع الصورة التي تريدها) repeat top right;
} 

.fc-flip .fc-back .fc-inner {
 margin-left: -80px;
 background-color: #553c77;
 box-shadow: inset 2px 0 3px rgba(0,0,0,0.1);
}
.fc-content {
 width: 220px;
 padding: 20px;
 text-align: right;
 position: relative;
 height: 100%;
}

.fc-back .fc-content {
 margin-left: 80px;
}

.fc-bottom-bg .fc-content {
 padding-top: 40px;
}

.fc-content p {
 font-size: 12px;
 line-height: 22px;
 font-family: "Montserrat", sans-serif;
 text-shadow: 0 -1px 1px rgba(255,255,255,0.1);
 color: #3b2954;
 padding: 0 0 0 31px;
}

.fc-flip .fc-front h3,
.fc-flip .fc-front p {
 position: absolute;
 text-align: right;
 width: 180px;
 text-shadow: 0 -1px 1px rgba(255,255,255,0.1);
 color: #3b2954;
}

.fc-flip .fc-front h3,
.feynman span {
 font-family: "Montserrat", sans-serif;
 text-transform: uppercase;
 font-size: 17px;
 letter-spacing: 1px;
 font-weight: normal;
}

.fc-flip .fc-front h3 {
 top: 30px;
 left: 15px;
}

.feynman {
 width: 255px;
 height: 255px;
 position: absolute;
 overflow: hidden;
 top: 50%;
 left: -55px;
 border-radius: 50%;
 box-shadow: 2px 0 3px rgba(0,0,0,0.3);
 margin-top: -127px;
 background: transparent url(ضع الصورة التي تريدها no-repeat center right;
}

.feynman span {
 text-align: center;
 width: 100px;
 height: 5px;
 line-height: 30px;
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
 bottom: 40px;
 right: 80px;
 font-size: 13px;
 position: absolute;
}

.fc-flip .fc-front h3 span{
 font-size: 40px;
}

.fc-flip .fc-front p,
.fc-bottom-bg .fc-content span {
 bottom: 50px;
 left: 15px;
 font-family: "Dancing Script", Georgia, serif;
 font-weight: 700;
 font-size: 22px;
}

.fc-bottom-bg .fc-content span {
 font-size: 18px;
 display: block;
 color: #fff;
 padding: 10px;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
 transform: rotate(-3deg);
}
.fc-flip .fc-back .fc-inner,
.fc-overlay,
.fc-handle,
.fc-handle div,
.fc-flip,
.fc-bottom{
 transition: all 0.6s ease-in-out;
}

.fc-bottom{
 transition-delay: 0.6s;
}
.fc-flip,
.fc-flip .fc-inner,
.fc-handle {
 transform-style: preserve-3d;
}

.fc-flip > div,
.fc-flip .fc-inner,
.fc-flip .fc-front h3,
.fc-handle,
.fc-handle div,
.fc-overlay,
.fc-flip .fc-front p,
.fc-flip .fc-front span {
 backface-visibility: hidden;
}
.fc-wrapper.fc-wrapper-open .fc-handle-in {
 width: 0px;
}
.fc-wrapper.fc-wrapper-open .fc-handle-in div {
 height: 180px;
}

.fc-wrapper.fc-wrapper-open .fc-handle-out div {
 height: 100px;
}
.fc-wrapper.fc-wrapper-open .fc-handle {
 background-color: #513a70;
}
.fc-wrapper.fc-wrapper-open .fc-handle-pull {
 width: 155px;
 background: #775b9d; 
}
.fc-wrapper.fc-wrapper-open  .fc-flip .fc-back .fc-inner { 
 background-color: #846aa7;
}
.fc-wrapper.fc-wrapper-open .fc-overlay {
 opacity: 1;
}
.fc-wrapper.fc-wrapper-open .fc-overlay-solid {
 background: rgba(0,0,0,0);
}
.fc-wrapper.fc-wrapper-open .fc-overlay-reverse {
 background: rgba(0,0,0,0.4);
}
.fc-wrapper.fc-wrapper-open .fc-bottom{
 opacity: 1;
 transition: none;
 
}
.fc-wrapper.fc-wrapper-open .fc-flip {
 transform: rotate3d(0,1,0,175deg);
}
 

أما هدا كود java :

 $(function() {
   
 var $wrapper= $( '#fc-wrapper' ),
  $handle = $wrapper.children( 'div.fc-handle-pull' );
 
 $handle.on( 'click', function( event ) {
 
  ( $handle.data( 'opened' ) ) ? close() : open();
 
 } );
 
 $wrapper.hammer().bind( 'dragend', function( event ) {
  switch( event.direction ) {
   case 'right' : open(); break;
   case 'left'  : close(); break;
  }
 });
 
 function open() {
  $wrapper.addClass( 'fc-wrapper-open' );
  $handle.data( 'opened', true );
 }
 
 function close() {
  $wrapper.removeClass( 'fc-wrapper-open' );
  $handle.data( 'opened', false );
 }

} ); 

و أخيرا أتنمى أن تنال اضافتي اعجابكم 

الكاتب : غير معرف

الروسافي عمر مغربي الجنسية العمر 15 سنة أحب التدوين في البداية عملت على اكتشاف الويندوز والحماية و الاختراق وغيرها من المجالات لكني أحببت التدوين ودخلت في مجال التدوين