“How to Build an Accordion Image Gallery with only CSS” plus 1 more - Speckyboy Design Magazine Feed

---

How to Build an Accordion Image Gallery with only CSS Posted: 26 Apr 2012 12:15 AM PDT Fluent animated transitions for sliding web page elements such as a menu or an image gallery, have always traditionally been implemented with JavaScript. But using the CSS3 pseudo-class :target and the negation pseudo-class :not() properties, together with the CSS3 Transition Module you can achieve the same effect, but without JavaScript! This means that the very popular “accordion or toggle” effects can be easily implemented using only CSS! In the following CSS workshop we will build an accordion/toggler image gallery to show you how all it all works! This is what we will build… …and you can also have a quick look at the Demo before we start. Lets get started… The HTML structure Getting started, the basic HTML structure of the image gallery has three left menu items, consisting of an header element h2, a paragraph p and a span element. Here they are: <ul class="imageMenu"> <li id="tasmania01"> <h2><a href="#tasmania01">Tasmania 01</a></h2> <p><span>Place: Tasmania, Date: 2008, Name: Tasmania 01, ...</span></p> </li> <li id="tasmania02"> <h2><a href="#tasmania02">Tasmania 02</a></h2> <p><span>Place: Tasmania, Date: 2008, Name: Tasmania 02, ...</span></p> </li> <li id="tasmania03"> <h2><a href="#tasmania03">Tasmania 03</a></h2> <p><span>Place: Tasmania, Date: 2008, Name: Tasmania 03, ...</span></p> </li> </ul> These Elements include the description of the menu item, which will, when clicked, be visible. The HTML above does look pretty poor without any CSS. Here is how it looks at the moment: Image Gallery Toggler without CSS Now it’s time for the CSS. Designing the inactive menu items We will hide the content of the menu items by using the selector :not(: target). The linked h2 element will also need CSS, so this background-color is for all unselected (inactive) menu items. .imageMenu:not(:target) h2 a {     background: rgb(54,86,94);/* Fallback */     background: rgba(0,0,0,.3); } Image Gallery Toggler with closed (inactive) items Designing the active menu items The h2 elements will be styled with a white alpha transparent background color and for better usability we will also display the element as a block. .imageMenu h2 a {     display: block;     font-size: 18px;     font-weight: normal;     color:#FFF;     text-decoration:none;     margin:0;     padding:10px;     background:rgb(54,86,94);     background:rgba(255,255,255,.3); } The pseudo-class :target in conjunction with the pseudo-class :not() allows you to offer fantastic webdesign element effects for the likes of image galleries. With this approach, you don’t need classes like “active” or “inactive” and does offer much cleaner HTML. The pseudo-classes :not(:target) is the “inactive item” and without this pseudo-class you will have an “active item”. The inactive items are already defined, therefore we will continue with the “active items” (for example on mouse over): . imageMenu h2 a:hover, .imageMenu h2 a:active, .imageMenu h2 a:focus {     background:rgb(154,186,194);/* Fallback */     background:rgba(255,255,255,.3); } The three possible states :hover, :active and :focus are given a bright transparent background color. Here is what we have so far: Image Gallery Toggler with closed items and a focused menu item (“Tasmania 01″) Show me the images! The pseudo-classes :target and :not() will need some start properties, meaning the closed state of all menu items. Therefore we will have to define the height of the paragraph which includes the images as background-image. To get no height for the inactive state, you have to define a height of zero pixels (see line 4): .imageMenu:not(:target) p {     padding:0;     margin:0;     height:0;     overflow: hidden; } The images of the gallery are shown using the background property. I know it’s not semantic to call the images “tasmania01″, “tasmania02″ and “tasmani03″, but it makes it far easier to understand. .imageMenu #tasmania01 p, .imageMenu #tasmania02 p, .imageMenu #tasmania03 p {     background: url(.../images/tasmania01.jpg) top left no-repeat;     position:relative; } .imageMenu #tasmania02 p {     background-image: url(.../images/tasmania02.jpg); } .imageMenu #tasmania03 p {     background-image: url(.../images/tasmania03.jpg); } The photographs we used for this tutorial were taken by the photographer Martin Neuhof from Leipzig, Germany. Now it’s time to define the “active state” of the menu items of this image gallery. The inactive item has no height, the active state needs a height – a real height. Therefore you have to define a height so that you can view the galleries background images. The images are 130px in height therefore we will need the same height for the paragraph. .imageMenu p {     height:130px; } The result will be an opened menu item. Image Gallery Toggler with opend menu item (“Tasmania 01″) Preparing the toggle effect Now it’s time to toggle! The CSS3 Transition Module allows for the kind of flowing animated transition we need to create the toggle. The duration is set on 1.5 seconds. . imageMenu:not(:target) p {     -moz-transition: height 1.5s ease-in;     -webkit-transition: height 1.5s ease-in;     -o-transition: height 1.5s ease-in;     transition: height 1.5s ease-in; } Image Gallery Toggler with opend menu item (“Tasmania 01″) The open- and close-effect will work in IE9, but not the toggle-effect. All older versions of IE will ignore the pseudo-classes :target and :not() calls. Therefore, the the users of these older browser will see the gallery in the unfolded state. Image Gallery Toggler as seen by older versions of IE. If you try this CSS3 Workshop without the pseudo-classes :target and :not() the menu items will be closed! Finished! Here is the finished gallery: View the Demo You might also like… Scroll to Internal Link with jQuery → How to Build a Sliding One Page Portfolio with jQuery → Hoverizr – An in depth view of the jQuery plugin → Rubber Layouts – Combining Static and Fluid Layouts → How to Build a Fully Functional CSS3-Only Content Slider → Resize Images in a Post with jQuery, and turn it into a plugin → Getting Started with WordPress Shortcodes (+Examples) →

We have 20 Pro Licenses for EasyRotator to Give Away Posted: 25 Apr 2012 07:52 AM PDT Today, we want to introduce you to a new WordPress plugin for creating sliders, EasyRotator for WordPress. The standard version of the plugin is free, but we’re giving you a chance to win the Pro version that includes additional templates and features. We have twenty prizes to give away, each worth $20! Check out this video to learn more about EasyRotator for WordPress: You can find instructions for installing the plugin on the DWUser.com site. How To Enter You’ll probably want to first install the plugin – but you don’t have to. All you need to do is comment below, telling how you would use EasyRotator Pro on your WordPress website. Bonus Entries Want to double or triple your chances of winning? Just tweet this contest page or share it on Facebook. Twitter: Send a tweet about this contest (and include the URL to this contest page), then post one comment with the url of your tweet in the comments area below. You can get the url of your tweet by clicking on the date/time stamp of your tweet. Facebook: Post on your Facebook wall about this contest (and include the URL to this contest page), then post one comment with the URL of your wall post. To get the URL of your Facebook post, first set your post to “public,” then click on the time/date stamp. The Details The contest closes on May 2, 2012. Winners will be selected completely at random and notified by email within a few days after the competition ends. Good luck!

You are subscribed to email updates from Speckyboy Design Magazine To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610