SpritePad - Create and edit css sprites slide out menu CSS3 Slide Out Menu IE7, 8, 9 & 10, Firefox 3+, Safari, Chrome and Opera 24th September 2011 copyright © stu nicholls - CSS play Information A simple horizontal menu with a mouse :hover state for each section, producing a slide out set of four images which can be used to enhance the link text. In this example I have used the same four images but these can be different for each tab. Internet Explorer and Firefox 3.x will see an instant change of images on hover, but Firefox 4+ and latest versions of Safari, Chrome and Opera will see the images slide out/in as the mouse is moved on and off the links. Firefox gives the most pleasing animation. Copyright Because of all the time and effort spent in producing this demonstrationI would ask that you respect my copyright. Terms and Conditions This demonstration can be used subject to the following terms and conditions.
Totem: A Vertical Ticker jQuery Plugin Features Totem makes vertical tickers easy to implement by: Turning a list of items into an animated ticker that auto-advancesSpecifying anchors for stop, start, next, and previous navigation links. Installation Load jquery.totemticker.js or the minified jquery.totemticker.min.js script. Demos Use cases with varying options. Default settings w/ mouseover and navigation Options The following options are available via the plugin array. next : null previous : null stop : null start : null row_height : '100px' speed : 800 interval : 4000 max_items : null mousestop : false direction : 'down' previous, next CSS ID's of next and previous buttons. start, stop CSS ID's of stop and start buttons. row_height Height of each ticker row in PX. speed Speed of transition animation in milliseconds. max_items Optional. mousestop If set to true, the ticker will stop while mouse is hovered over it direction Direction that list will scroll (down or up) Some Notes License Released under the MIT License
jQuery effects, 150+ best for web developers and designers Since the arrival of the jQuery library, the life of JavaScript programmers have gotten a lot easier because now it’s simpler to develop web 2.0 applications. With jQuery, the programmers can keep their code organized and concise, which is the major slogan of the library, “write less, do more”. You can utilize jQuery to handle events, generate animations, and even add an Ajax support into your web applications in a very easy way. Certainly you can use JavaScript to execute all the jQuery functions, but if you use it, your programming times will reduce and your effectiveness will increase, and that’s the real magic of jQuery. Transition effects As the name says, these effects are designed to generate animated switches between different elements, from smooth transitions to overlapping animations, here are some of the nicest transition effects made with jQuery: Special Presentation: jQuery SliderShock 1. A standard transition effect that always works well when implemented on your designs. 3.
Slide Down Box Menu with jQuery and CSS3 In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. View demoDownload source In this tutorial we will create a unique sliding box navigation. We will be using the jQuery Easing Plugin and some beautiful photos by tibchris. The Markup For the HTML structure we will be using an unordered list where each menu item will contain the main link item and a div element for the submenu: <ul id="sdt_menu" class="sdt_menu"><li><a href="#"><img src="images/1.jpg" alt=""/><span class="sdt_active"></span><span class="sdt_wrap"><span class="sdt_link">Portfolio</span><span class="sdt_descr">My work</span></span></a><div class="sdt_box"><a href="#">Websites</a><a href="#">Illustrations</a><a href="#">Photography</a></div></li> ... If there is no submenu, the div can simply be left out. The CSS The image will be styled as follows:
Dot Navigation Styles Today we'd like to share some subtle effects and styles for simple dot navigation with you. These styles could, for example, be used for a page scroll navigation or a thumbnail preview, in a vertical or horizontal fashion. View demo Download source Small UI elements usually don’t get too much attention when it comes to creative effects. They are often neglected because of their size. Note that some effects might not work as intended in some browsers (SVG transition, 3D transform-style). For the structure we’ll have an unordered list with links: <div class="dotstyle dotstyle-fillup"><ul><li class="current"><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Products</a></li><li><a href="#">Portfolio</a></li><li><a href="#">Blog</a></li><li><a href="#">Contact</a></li></ul></div> For some examples, we also use an additional empty list element, i.e. in order to “move” the current item in the “dot move” style. We define some common styles:
CSS3 Grid Accordian using :target Information Click any of the above 'thumbnail' images to expand them to full size. Once expanded then the large image will stay visible even if clicking elsewhere on the page. Click the 'RESET' button to return the grid to its initial position. IE9 will see an instant jump in the size of the images, but all other browsers will see these animate to their new sizes. This uses :target with the general sibling selector and there is no jump to the top of the browser window when clicking the thumbnails. 27th June 2012 - recoded and restyled to remove the need for :target and the problems with the browser 'back' button. Copyright Because of all the time and effort spent in producing this demonstrationI would ask that you respect my copyright.
50 Powerful Time-Savers For Web Designers - Smashing Magazine Being a web designer is not easy. Not only do we need to have a good understanding about visual design, typography, information architecture, psychology and a plethora of other disciplines; in our work, we need to take care of so many details, so that our job becomes more and more time-consuming, requiring dozens of tools, attention span and an effective workflow for beautiful, timely and functional results. And this is where small time-savers become handy. Be it a handy checklist, batch installer, dummy image generator or converter from Excel spreadsheet to HTML — all these things can save us a couple of minutes every day, making our work easier and more efficient. And this is why we keep collecting them for Smashing Magazine’s readers. You may want to subcribe to Smashing Magazine’s E-Mail Newsletter1 (32,600 subscribers) to keep updated about new useful tools, techniques and resources. Time-Savers For Web Designers Link Bounce11A fun and easy way to share ideas on a website.
CSS Menu Generator HTML Tools » CSS Menu Generator Our CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the affectiveness of text links with a better look than standard text links. For an example of a CSS menu, look at our navigation on the left. We currently have 3 different styles of menu available to generate, so for this first step, please choose the style you prefer by clicking on the appropriate radio button below then clicking the 'Proceed' button. Disclaimer: By using any of the free webmaster tools on this site you agree that it is you who has sole responsibility and liability for any errors that may occur to your website or web server as a result.
Animated Checkboxes and Radio Buttons with SVG Previous Demo Back to the Codrops Article How do you collaboratively administrate empowered markets via plug-and-play networks? Where do you proactively envision multimedia based expertise and cross-media growth strategies? Why do you interactively procrastinate high-payoff content without backward-compatible data? How would you dynamically target high-payoff intellectual capital for customized technologies? How can you appropriately empower dynamic leadership skills after business portals? How do you interactively productize premium technologies whereas interdependent quality vectors? Do you rapaciously seize adaptive infomediaries and user-centric intellectual capital and how? Your to do list to uniquely deploy cross-unit benefits with wireless testing procedures: If you enjoyed these effects you might also like: Animated Border Menus Creative Button Styles
Grid Accordion Grid Accordion combines the functionality of a grid gallery and an accordion slider, offering you an interesting method to display your portfolio. For Designers For Developers Modular architecture – the plugin consist of several modules and you can build your own script, containing only the features you will be usingCSS3 transitions and RequestAnimationFrame – modern animation techniques are used in order to provide smooth animationsPowerful API – Grid Accordion provides multiple public method and callback functions, and also the possibility to change the properties on runtime You can read more about the above features and see them in action here. If you have any questions or need assistance integrating the accordion, please feel free to ask; I will gladly help you. Most of the buyers give this script 5 stars but if you plan to rate it lower than 5 stars I would really appreciate if you contact me first with your suggestions/complaints; maybe I can resolve those issues Thank you! Changelog