CSS3の小さな金曜日の喜び

そこで、金曜日にちょっとした喜びをもたらし、CSS3の威力を示し、Internet Explorerを持っている人たちを元気づけることにしました。 こちらをご覧ください 。



しかし、もしそれがおもしろいなら、どうやってやったのか...



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'); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まあなど。 結果はこちらです。 素敵な金曜日と週末をお過ごしください！