Create Accordion Menu Using CSS3 Transition
There are many ways to create an accordion menu, most of them use a javascript library like jQuery to make the effect runs cross browsers. In this tutorial, we’ll see how to make an accordion menu using CSS3 transition. It works on most modern browsers that support CSS3. HTML Markup The HTML markup of accordion menu is simple: <div id="accordion"> <div class="item"> <a href="#">Products</a> <p>Lorem ipsum nec ex prompta tractatos. We wrap the accordion menu in a div with id="accordion". Basic CSS We’ll style our accordion menu to make it look good in most browsers: There is one note in this CSS rule: by default, we don’t want to show the content of menu items, so we make it hidden by specify the height of menu item equals to height of its title (including padding) and use CSS property overflow: hidden. The menu looks like this: To make the menu cool, I used CSS3 border-radius rules. Using CSS3 Transition To Slide Menu Content The CSS3 transition property has the following syntax:
CSS Sliding Photograph Gallery
Date : 28th August 2009 For all modern browsers This demo is too wide for your mobile screen.Please view on a tablet or PC. Information This gallery is my simplest yet. Updated 1st July 2005 The horizontal slide photo gallery added. The 'windows' photographs The window set of photographs were taken by Mike Berg Winnipeg, Manitoba, Canada using a Canon PowerShot S100. Copyright Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
Set Font Size Based On Word Count
In my little Quotes on Design project, some of the quotes are longer than others. I thought it might be kind of nifty to beef up the font-size on the shorter quotes and trim down the size for the longer quotes so they all match a bit better in terms of the size they take up on the screen. Rather than do this with a hard-coded number in each of the quotes, I did it with JavaScript. This allows for easier adjustments down the road and nicely keeps content and presentation separate. The Plan Set an object of the paragraph you are targettingSplit the paragraph into an array of words, breaking at every spaceCount the length of the arraySet the font-size based on that count. Doing it with MooTools Doing it with jQuery Examples Quotes on Design is using the jQuery version. Share On
Elegant Accordion with jQuery and CSS3
Today we will create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering. We will add some CSS3 properties to enhance the looks. Ok, let’s start with the markup. View demoDownload source Today we will create an elegant accordion for content. The Markup The HTML will consist of a list where each accordion tab is a list element. The other list elements will have the classes bg2, bg3 and bg4. The CSS The style for the list will look as follows: The list elements will each have a different background image, so we will first define the general style properties for every list element and then the single classes with the background images: Note, that the box shadow will not work in IE. Now, we want a nice looking header with a white semi-transparent background for each list item when in the normal “closed” state: The div that contains the description will have the following style: The only style missing is the one for the gradient element:
15 jQuery slideshow/gallery plugins
advertisement Revisited To choose best jQuery slideshow or gallery plugins can be difficult. We have worked out top 13 plugins to make your life easier. Below are the most aesthetic, innovative and creative jQuery plugins. 1. Nivo slider 2. Coin slider 3. jbgallery 2.0 jbgallery 2.0 4. jQuery.popeye 2.0 jQuery.popeye 2.0 5. jqFancyTransitions jqFancyTransitions 6. A Zoomable jQuery Image Gallery Called jPhotoGrid 7. AnythingSlider jQuery Plugin 8. Creating a Slick Auto-Playing Featured Content Slider 9. GalleryView 10. Easy Slider 11. advertisement Galleria 12. Imageflow 13. jFlow jFlow 14. Supersized 15. Gallerific 16. S3 Slider 17. Slider gallery 18. Creating an Image Slider 19. Create a Beautiful jQuery Slider Tutorial 20. Sliding Boxes and Captions with jQuery Tutorial 21. jQuery Cycle jQuery Cycle Take advantage of this free wordpress cheatsheet and wordpress theme perfect for your website.
Easy Slider 1.5
Click here for the new version of this plugin Version 1.5 of my Easy Slider plugin for jQuery is here. This is one of the my rare scripts that make it to their second version. All of the features here are result of your comments, so if you have more ideas, keep ‘em coming! Note: in case you haven’t already, you might want to check out article about first version of this plugin. Download easySlider1.5.zip Features This version features: auto slidecontinuous sliding"go to first" and "go to last" buttonhiding controlsoptional wrapping markup for control buttons vertical slidingmultiple sliders on one page Here are the things you can customize (with their default values) I will explain new options: controlsShow By default set to true, but if set to false it will not add any controls. controlsBefore and controlsAfter In case you want to add some additional markup to gain more control over buttons you can do so by using these parameters. controlsFade By default set to true. firstShow and lastShow auto
Grid Accordion with jQuery
Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space. Basic accordion from jQuery UI One way to look at an accordion is like a collapsed single column of a table. Another consideration in this table I was building is that there was enough columns that each individual column (should they have been equal width in the space available) wasn't very wide, maybe 150px. The Grid Accordion works with the same theory as most other accordions. You can view and download the example at the end of this article. HTML: Classic use of the definition list Accordions are perfect semantic examples of definition lists. <dl><dt>Title</dt><dd>Information about that title here</dd><dt>Another Title</dt><dd>Information about that other title here</dd></dl> This is a classic technique.
Create Beautiful jQuery slider tutorial
margin:0; padding:0; html{ height:100%; body{ color:#a4a4a4; cursor:default; font-size:11px; line-height:16px; text-align:center; background-color:#000; background-position:50% 0; background-repeat:no-repeat; font-family:Tahoma,sans-serif; a:link,a:visited{ color:#fff; text-decoration:none; a img{ border:0; div.wrap{ width:993px; margin:0 auto; text-align:left; div#top div#nav{ float:left; clear:both; height:52px; margin:22px 0 0; background:url url(images/nav-bg.png) 0 0 no-repeat; div#top div#nav ul{ width:700px; list-style-type:none; div#nav ul li{ div#nav ul li a{ display:block; line-height:52px; text-indent:-9999px; div#header{ margin:-1px 0 0; div#video-header{ height:683px; div#header div.wrap{ height:299px; background:url(images/header-bg.png) 50% 0 no-repeat; div#header div#slide-holder{ z-index:40; position:absolute; div#header div#slide-holder div#slide-runner{ top:9px; left:9px; width:973px; height:278px; overflow:hidden; div#header div#slide-holder img{ display:none; div#header div#slide-holder div#slide-controls{ left:0;
