designart

Previously I wrote a tutorial on a way to create a mobile navigation for responsive style, currently I've discovered a replacement technique to provide a responsive menu while not having to use Javascript. It uses clean and linguistics HTML5 markup. The menu is aligned left, center or right. in contrast to the previous tutorial wherever it's clicked to toggle, this menu toggles on hover that is a lot of user friendly. It additionally has associate indicator to indicate the active/current menu item. It works on all mobile and desktop browsers together with web Explorer!

HTML <ul> <li><a href="">Dashboard</a></li> <li><a href="">Friends</a></li> <li> <a href="">Message <span>9</span> </a> </li> <li><a href="">Games</a></li> <li><a href="">Settings</a></li> </ul> CSS .animating{ animation: animate 1s cubic-bezier(0,1,1,0); } @keyframes animate{ from { transform: scale(1); } to { transform: scale(1.7); } } jQuery var counterValue = parseInt($('.bubble').html()); // Get the current bubble value function removeAnimation(){ setTimeout(function() { $('.bubble').removeClass('animating') }, 1000); } $('#decrease').on('click',function(){ counterValue--; // decrement $('.bubble').html(counterValue).addClass('animating'); // anima

HTML <div id="ballWrapper">      <div id="ball"></div>      <div id="ballShadow"></div> </div> CSS #ballWrapper { width: 140px; height: 300px; position: fixed; left: 50%; top: 50%; margin: -150px 0 0 -70px; } #ball { width: 140px; height: 140px; border-radius: 70px; background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000; } #ball::after { content: ""; width: 80px; height: 40px; position: absolute; left: 30px; top: 10px; background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); border-radius: 40px / 20px; } #ballShadow { width: 60px; height: 75px; position: absolute; z-index: 0

Cool Animated Fire Effects with CSS3 and jQuery JQuery <script type="text/javascript"> var step = 1; function nextShadow(){ $('#onfire span').each(function(){ y = parseFloat($(this).attr("y_pos")); y += step + Math.random()*3; $(this).attr("y_pos", y); shaking = Math.random(); shadow1 = "0px 0px "+(y%5)+"px white"; shadow2 = shaking*24/y*Math.cos(y/5)*15+"px -"+(shaking*4/y+(y%17))+"px "+(shaking+(y%17))+"px red"; shadow3 = shaking*24/y*Math.cos(y/7)*15+"px -"+(shaking*4/y+(y%31))+"px "+(shaking+(y%31))+"px #993"; shadow4 = shaking*24/y*Math.cos(y/13)*15+"px -"+(shaking*4/y+(y%41))+"px "+(shaking+(y%41))+"px yellow"; $(this).css("text-shadow", shadow2+", "+shadow1+", "+shadow4+", "+shadow3); }); } $(function(){ $('#onfire span')