1 April – Friday fun with CSS3 and jQuery

1 April – Friday fun with CSS3 and jQuery

2 35
1 April – Friday fun with CSS3 and jQuery

1 April – Friday fun with CSS3 and jQuery

Today I`ll show you something interesting. This sample will demonstrate possibilities of CSS3. And, lets don`t forget that today is Friday, 1 April. So lets bring a little of fun to our faces.

Here are samples and downloadable package:

Live Demo
download in package

Ok, download the example files and lets start coding !


Step 1. HTML

As usual, we start with the HTML. This is source code of our sample:

index.html

<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>

<div class="example">

    <div class="female">
        <div class="head"></div>
        <div class="chest">
            <div class="left"><div class="cl"></div></div>
            <div class="right"><div class="cl"></div></div>
        </div>
        <div class="bosom">
            <div class="left"><div class="boob"><p class="nipple">*</p></div></div>
            <div class="right"><div class="boob"><p class="nipple">*</p></div></div>
        </div>
        <div class="waist"><div class="left"></div><div class="button">0</div><div class="right"></div></div>
        <div class="thigh"><div class="left"></div><div class="right"></div></div>
    </div>

    <div class="actions">
        <div>Size:
        <select name="bosom_size" class="bosom_size">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        </select>
        </div>

        <div>Touch:
        <input type="button" id="touch-left" value="Left" />
        <input type="button" id="touch-both" value="Both" />
        <input type="button" id="touch-right" value="Right" />
        </div>
    </div>

    <div style="clear:both"></div>
</div>

As you can see – here are easy html code for our female. No any images, pure CSS3 (we will use border-rediuses). At right side – little control actions bar.

Step 2. CSS

Here are used CSS file for our demo:

css/main.css

body{babody{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:700px;font-size:80%;border:1px #000 solid;margin:10px auto;padding:1em 2em 2em;-moz-border-radius: 3px;-webkit-border-radius: 3px}

.actions{margin-top:50px;float:left}
.actions div{margin:10px}
.female{width:400px;height:450px;overflow:hidden;position:relative;float:left}
.head{left:0;border-radius:50px 50px 60px 60px;-moz-border-radius:50px 50px 60px 60px;border:1px solid #000;width:90px;height:115px;z-index:5;behavior:url(PIE.htc);margin:0 auto}
.chest{width:230px;height:80px;position:relative;z-index:2;margin:0 auto}
.chest .left,.chest .right{position:absolute;top:0;width:90px;height:40px;border:1px solid #000;border-bottom:none;background:#FFF}
.chest .left{left:0;border-radius:40px 0 0 0;-moz-border-radius:40px 0 0;-webkit-border-top-left-radius:40px;border-top-left-radius:40px;-moz-transform:rotate(-20deg);-webkit-transform:rotate(-20deg);-o-transform:rotate(-20deg);border-right:none;behavior:url(PIE.htc)}
.chest .right{right:0;border-radius:0 40px 0 0;-moz-border-radius:0 40px 0 0;-webkit-border-top-right-radius:40px;border-top-right-radius:40px;-moz-transform:rotate(20deg);-webkit-transform:rotate(20deg);-o-transform:rotate(20deg);border-left:none;behavior:url(PIE.htc)}
.chest .cl{position:absolute;top:14px;height:0;width:52px;border-top:1px solid gray}
.chest .left .cl{left:40px;-moz-transform:rotate(30deg);-webkit-transform:rotate(30deg);-o-transform:rotate(30deg)}
.chest .right .cl{right:40px;-moz-transform:rotate(-30deg);-webkit-transform:rotate(-30deg);-o-transform:rotate(-30deg)}
.bosom{width:222px;height:40px;position:relative;z-index:2;margin:0 auto}
.bosom .left{position:absolute;left:0;top:0;float:left}
.bosom .right{position:absolute;right:0;top:0;float:right}
.bosom .boob{border:1px solid #000;border-top:none;-moz-border-radius:0 0 60px 60px;-webkit-border-bottom-right-radius:60px;-webkit-border-bottom-left-radius:60px;border-radius:0 0 60px 60px;-moz-transform:rotate(25deg);-webkit-transform:rotate(25deg);-o-transform:rotate(25deg);width:80px;height:41px;background:#FFF;cursor:pointer;behavior:url(PIE.htc);margin:0;padding:0}
.bosom .right .boob{-moz-transform:rotate(-25deg);-webkit-transform:rotate(-25deg);-o-transform:rotate(-25deg)}
.bosom .boob p{font-size:30px;line-height:20px;width:20px;height:20px;list-style-position:inside;color:#F66;margin:0 auto;padding:18px 0 0}
#size-1{width:172px}
#size-1 .boob{width:60px;height:35px;font-size:15px}
#size-1 .boob p{font-size:20px;padding-top:5px;width:10px}
#size-2{width:190px}
#size-2 .boob{width:80px;height:41px}
#size-2 .boob p{font-size:25px;padding-top:10px}
#size-3{width:206px}
#size-3 .boob{width:90px;height:52px}
#size-3 .boob p{font-size:30px;padding-top:15px}
#size-5{width:250px}
#size-5 .boob{width:110px;height:70px;-moz-transform:rotate(28deg);-webkit-transform:rotate(28deg);-o-transform:rotate(28deg)}
#size-5 .boob p{padding-top:30px}
#size-5 .right .boob{-moz-transform:rotate(-28deg);-webkit-transform:rotate(-28deg);-o-transform:rotate(-28deg)}
.waist{width:180px;height:180px;position:relative;overflow:hidden;top:-30px;margin:0 auto}
.waist .left,.waist .right{position:absolute;top:-75px;height:260px;width:130px;border-color:#000;border-style:solid}
.waist .left{left:-105px;-moz-border-radius:0 130px 130px 0;-webkit-border-top-right-radius:130px;-webkit-border-bottom-right-radius:130px;border-radius:0 130px 130px 0;behavior:url(PIE.htc);border-width:1px 1px 1px 0}
.waist .right{right:-105px;-moz-border-radius:130px 0 0 130px;-webkit-border-top-left-radius:130px;-webkit-border-bottom-left-radius:130px;border-radius:130px 0 0 130px;behavior:url(PIE.htc);border-width:1px 0 1px 1px}
.waist .hide-top,.waist .hide-bottom{position:absolute;left:-1px;width:111%;height:60px;background:#FFF}
.waist .hide-top{top:-1px}
.waist .hide-bottom{bottom:-1px}
.waist .button{padding-top:130px;text-align:center;font-size:8px}
.thigh{width:220px;position:relative;top:-83px;z-index:2;overflow:hidden;margin:0 auto}
.thigh .left,.thigh .right{width:77px;height:90px;position:relative;background:#FFF;border-color:#000;border-style:solid}
.thigh .left{border-radius:70px 0 0 0;-moz-border-radius:70px 0 0;-webkit-border-top-left-radius:70px;border-top-left-radius:70px;-moz-transform:rotate(-40deg);-webkit-transform:rotate(-40deg);-o-transform:rotate(-40deg);float:left;behavior:url(PIE.htc);border-width:1px 0 0 1px}
.thigh .right{border-radius:0 70px 0 0;-moz-border-radius:0 70px 0 0;-webkit-border-top-right-radius:70px;border-top-right-radius:70px;-moz-transform:rotate(40deg);-webkit-transform:rotate(40deg);-o-transform:rotate(40deg);float:right;behavior:url(PIE.htc);border-width:1px 1px 0 0}
.thigh .hide-bottom{position:absolute;left:-1px;bottom:-1px;width:111%;height:68px;background:#FFF}

Step 3. JS

Here are single JS file:

js/main.js

function _resetAnimation(elements) {
    elements = $(elements);
    elements.stop(true);
    elements.each(function() {
        var el = $(this);
        el.stop(true);
        el.removeAttr('style');
    });
}

function reBounce(elements) {
    _resetAnimation(elements);
    $(elements).effect('bounce');
}

$(document).ready(function(){
    var left = $('.bosom .left');
    var right = $('.bosom .right');
    var both = $('.bosom .left').add('.bosom .right');

    // controls
    $('#touch-left').click(function() { reBounce(left); });
    $('#touch-right').click(function() { reBounce(right); });
    $('#touch-both').click(function() { reBounce(both); });

    $('select.bosom_size').change( function() {
        _resetAnimation(both);
        $('.bosom').attr('id', 'size-' + $(this).val());
    });

    left.click(function() { reBounce(left); });
    right.click(function() { reBounce(right); });

    reBounce(both);
});

As you can see – we using jQuery, so, don`t forget to include it too:

js/jquery.min.js and js/jquery-ui.min.js

Both files already available in download package

Step 4. A little help to IE browser

As we all know – IE7/8 don`t support CSS3. But we can use PIE to help to Internet Explorer display our friday toy. Result PIE.htc file we will put in sample root folder.


Live Demo
download in package

Conclusion

Happy weekends. Good luck!


2 COMMENTS

  1. This post is perfect example of learning along with fun. Hope I’ll manage to make much better HTML5 b**bs than yours =)
    Thanks again for that awesome tut xD

Leave a Reply