1 April – fools day. 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
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
[sociallocker]
download in package
[/sociallocker]
Conclusion
Happy weekends. Good luck!
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
Actually guys are much more intrested in the boobs you made instead of the knowledge you are giving there :D