CSS3 में थोड़ा सा हर्ष उल्लास

इसलिए मैंने थोड़ी सी शुक्रवार की खुशी लाने का फैसला किया, CSS3 की शक्ति का प्रदर्शन किया और उन लोगों को खुश किया, जिनके पास इंटरनेट एक्सप्लोरर है। यहां देखें



लेकिन अगर यह दिलचस्प है - मैंने इसे कैसे किया, तो ...



तो HTML का एक टुकड़ा:

<div class="breast"> <div class="left"> <ul class="boob"> <li class="nipple"></li> </ul> </div> <div class="right"> <ul class="boob"> <li class="nipple"></li> </ul> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

प्रारंभिक शैली:

 .breast { width: 222px; margin: 200px auto 0; } .breast .left { float: left; } .breast .right { float: right; } .breast .boob { border: 1px solid black; border-top: none; width: 100px; height: 56px; padding: 0; margin: 0; } .breast .boob .nipple { margin: 0 auto; padding: 18px 0 0; font-size: 40px; line-height: 20px; width: 20px; height: 20px; list-style-position: inside; color: #ff9999; content: '\A0'; /*  Opera,      LI */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

हमें यह मिलता है (और इस IE8 पर रोकें):





खैर, हम जारी रखेंगे। यह CSS3 का जादू है:

 .breast .boob { -moz-border-radius: 0 0 60px 60px; -webkit-border-bottom-right-radius: 60px; /* Safari -   -webkit-border-radius: 0 0 60px 60px */ -webkit-border-bottom-left-radius: 60px; /*     */ border-radius: 0 0 60px 60px; -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); } .breast .right .boob { -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); -o-transform: rotate(-15deg); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

परिणाम:





और jQuery UI के माध्यम से थोड़ा सा गतिशीलता:

 $(function() { $('.breast .left, .breast .right').effect('bounce'); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

अच्छी तरह से और इतने पर। परिणाम यहाँ है । एक अच्छा शुक्रवार और सप्ताहांत है!