WordCamp is a conference that focuses on everything WordPress. It is an informal, community-organized event that are put together by WordPress users. Everyone from casual users to core developers participate, share ideas, and get to know each other. WordCamps are open to WordPress.com and WordPress.org users alike.

WordCamp include sessions on how to use WordPress more effectively, beginning plugin and theme development, advanced techniques, security and more. It doesn’t matter if you are a blogging beginner, professional WordPress developer or consultants there will be something for everyone.

Visit the WordCamp Edinburgh UK 2012 for more information

Ah, the image gallery; a common part of modern web design, the gallery has been through numerous guises in the life of the web. Originally whole pieces of software were available to automate the generation of web galleries, and even the likes of Photoshop included a function to automatically create a thumbnail, large version and the HTML to link the two together. On the modern web, however, a click-and-wait-for-it-to-load approach no longer meets user expectations and, with the advent of CSS3, increasingly users expect to see a bit of visual flair beyond the standard lightbox effect that has become so popular. In times gone by, the only way to render a 3D effect inside a browser was using the Flash plug-in, but those days are gone as WebKit-powered browsers such as Safari and Chrome now support native 3D animation and transformation using CSS3 alone.
In this tutorial we’re going to do exactly that – we’ll take a two-dimensional image gallery and provide a twist when the user clicks on a thumbnail – quite literally. As the click occurs, the whole window contents will rotate out of view to reveal the larger version of the image. All the animation and 3D manipulation will be handled with CSS, although we will use a little jQuery
to help us set everything up correctly.

DOWNLOAD FULL CODE

 Source some images

We’re creating an image gallery in this tutorial, so the first thing we’ll need is some images to work with! These can be of anything you like, but if you want to follow along with the images that we used, check the CD for a link to the references we downloaded from the brilliant free photo resource www.sxc.hu.

Crop and treat images

We’ll need two versions of each image – a small one at 600px wide and 338px tall, and a big one at 1,920 x 1,200px. Both sizes are 16:9 so crop them to this dimension, and at the same time we apply a slight colour treatment to make them feel part of the same set. Use the image editor of your choice and a Curves adjustment to reduce the blue tones. Save each into the images>small and images>big folders, respectively.

Add some texture

Locate a nice textured image on the web and crop a section. Use the Clone Stamp tool or the Spot Healing Brush to reduce contrast and noticeable features, then apply Filter>Other>Offset (if using Photoshop) or the equivalent to move the edges of the image to the centre. Repeat the cloning to get a perfect tiled image, then save as a JPEG in the styles folder.

Create your HTML

Our HTML is pretty simple, comprising a couple of unordered lists containing images and links to select images, and a few nested <div> tags. We’ll need all those <divs> to handle the 3D rotation later on. In the meantime, add the code below, or open up our start document from the cover disc.

Add a stylesheet

Unstyled the page looks pretty ugly, but once we’ve added some basic CSS this will all change. Let’s find somewhere to store our styles by creating a reference to an external stylesheet. Add the code shown below and create a new blank document, saving it as ‘screen.css’ in the styles folder.

Basic styles

Let’s get some simple styles in place to establish the main build. The background is going to be set to a dark colour, while the container will use the texture we created in step 3. We’ll also work in some style to the thumbnails list. Add this code to your stylesheet:

001 body {
002 margin: 0;
003 padding: 0;
004 background: #333;
005 }
006 #container {
007 position: relative;
008 width: 100%;
009 height: 600px;
010 padding-top:50px;
011 text-align: center;
012 background: transparent url(backgroundtexture.jpg) repeat top left;
013 }
014 #container ul.thumbnails {
015 position: relative;
016 margin: 0;
017 margin: auto;
018 padding: 0;
019 width: 600px;
020 height: 338px;
021 overflow: hidden;
022 -webkit-box-shadow: 0px 5px 10px #333;
023 box-shadow:0px 5px 10px #333;
024 border: 6px solid white;
025 }
026 #container ul.thumbnails li {
027 position: relative;
028 float: left;
029 margin: 0;
030 padding: 0;
031 list-style: none;
032 cursor: pointer;
033 }

Getting the captions

Each image in our thumbnail set has an accompanying caption which we want to position over the top of the image as a partially transparent bar. Using RGBA to specify the background colour of an element allows us to set the alpha (or transparency) to suit our needs. Add the code below to your stylesheet to see this in action, and experiment with values between 0 and 1 for the alpha to see what effect it has.

001 #container ul.thumbnails li span {
002 position: absolute;
003 background: rgba(0,0,0,0.5);
004 width: 520px;
005 height: 20px;
006 color: #fff;
007 padding: 40px;
008 bottom: 0;
009 left: 0;
010 }

Style the links

If you load the page now you’ll see the thumbnails are displaying correctly, with just the first shown. We need to set up the styles for the links to allow the user to switch between different thumbnails. We’ll use the CSS3 border-radius attribute to create circular buttons for each thumbnail. Add the code below to your stylesheet to implement this:

001 #container ul.thumblinks {
002 position: relative;
003 margin: 0;
004 padding: 0;
005 margin-top: 20px;
006 }
007 #container ul.thumblinks li {
008 list-style: none;
009 padding: 0;
010 margin: 0;
011 display: inline-block;
012 width: 20px;
013 height: 20px;
014 overflow: hidden;
015 margin-right:5px;
016 -webkit-border-radius:10px;
017 border-radius:10px;
018 border-right:1px solid #fff;
019 border-bottom:1px solid #fff;
020 border-top: 1px solid #aaa;
021 border-left:1px solid #aaa;
022 background: rgba(0,0,0,0.01);
023 text-align: center;
024 }
025 #container ul.thumblinks li a {
026 display:block;
027 overflow:hidden;
028 width:16px;
029 height:16px;
030 text-indent:-10000px;
031 text-decoration: none;
032 -webkit-border-radius:8px;
033 border-radius:8px;
034 margin-top: 2px;
035 margin-left: 2px;
036 }
037 #container ul.thumblinks li a:hover, #container ul.thumblinks li a.selected {
038 background: rgba(0,0,0,0.8);
039 }

Add a new font

We can add a custom font using only CSS by taking advantage of Google Web Fonts, which require no JavaScript. Let’s do that to improve the appearance of our page. Head to www.google.com/webfonts and choose a typeface to suit (we opted for Coda). Add thecode provided to your HTMLand the font-family example to your body CSS rules.

001
002 body {
003 margin: 0;
004 padding: 0;
005 background: #333;
006 font-family: 'Coda', sans-serif;
007 text-transform: uppercase;
008 }

Script to switch

Currently when we click on a circular button, the thumbnail changes, however the big version of the image does not. To remedy this, we have to apply some jQuery code along with a little JavaScript to avoid the annoying skip that happens whenever we click on a link. Finally, we can update the highlighted button at the same time – just add the code below inside the script tags at the top of your page.

Making sense of it

The code we just added grabs the href from the link and uses it to find the right list tags in the unordered thumbnails list. Once it has the right one, it grabs the big image reference and sets the big image src attribute to match. It then moves the correct list tag to the front of the stack in the thumbnails list and updates the ‘selected’ class on the links list to the selected link. Phew!

Transform into 3D

Everything is set for us to make the move to 3D inside our page, so let’s get started with the CSS code we need to achieve this. We’re creating two faces of a box – the front face is the ‘container’ div and the bottom face is ‘bottom’. The box itself is called rotate, while the 3D stage is called stage, appropriately enough. Add the code below to get going:

001 #stage {
002 -webkit-perspective: 2500;
003 position: relative;
004 }
005 #rotate {
006 -webkit-transform-origin: 0 0;
007-webkit-transform-style: preserve-3d;
008 -webkit-transition: 1s linear all;
009 -webkit-transform: rotateX(0deg) translateZ(0px);
010 }
011 #bottom {
012 position: relative; 013 width: 100%; 014 height: 600px;
015 margin: auto;
016 overflow: hidden;
017 text-align: center;
018 }

What’s going on?

It’s worth pausing to break down the code we just added. Firstly, the stage enables us to specify the perspective for our 3D scene. The rotate box code sets the point of rotation with the transform-origin attribute and also some basic properties for the animation we’ll see in action in the next few steps. We’ll add a rotation to #bottom shortly to make it the base of the box.

Rotate your #bottom

We want the image in the #bottomto fill our browser window, so we can’t specify the rotation directly in our stylesheet as we don’t know how big the user’s browser window is. Instead we’ll use some JavaScript code to work this out and set the CSS programmatically. Add the code below to the existing jQuery $(document).ready() function.

001 winheight=parseInt ($(window).height());
002 winwidth=parseInt($ (window).width());
003 if((winwidth/16*9) 004 $("#bottom img"). css({height:winheight });
005 } else {
006 $("#bottom img"). css({width:winwidth});
007 }

001 $("#container").css({height:winheight});
002 $("#bottom").css({webkitTransform: "rotateX(-90deg)
translateZ(- "+(winheight/2)+"px) translateY("+(winheight/2) +"px)",height:winheight})

001 $(".thumbnails").click(function(){
002 $("#rotate").css({webkitTransform:"s cale3d(1, 1, 1) rotateX(90deg) translateY(- "+(winheight)+"px)"});
003 });

001 $("#bottom img").click(function(){
002 $("#rotate").css({webkitTransform:"scale 3d(1, 1, 1) rotateX(0deg) translateZ(0px)"});
003 });

Imagine Publishing has taken its entire portfolio of magazines, bookazines and ebooks and converted them to digital. What does this mean? It means that you can now get the most entertaining, authoritative and best value for money magazines on the market for your favourite digital platform. If you have an iPad, iPhone, PC, Mac, smartphone or tablet head over to greatdigitialmags.com to uncover a heavenly selection of digital goodies.

CSS3 Effects

Master CSS3 effects
- Read the rule book for delivering modern page styles.

CoffeeScript
- Wake up and smell Javascript’s fresh new aroma.

Adobe CS6 First Look
- Take a peek at the brand new web editing updates in the latest Creative Suite.

ProFile- Airlock
- Big brand specialist talks about its mobile-first design approach and how a dishwasher secured its domain name.

Also inside…
- Create kinetic animations with CSS3
- Build an HTML5 game with EaselJS: part 1
- Customise WordPress categories with taxonomies
- Create a contemporary one-page site with Photoshop
- Create an eCommerce carousel with jQuery and XML
- App database support with PhoneGap: part 2
- Create Twitter widgets with Web Workers
- Master angular designs using CSS3 rotation
- Design Diary: Meet the team behind the impressive Toyota Camry website
- Comment: Mobile development studio EdgeCase MD Paul Wilson talks about startup success

Free with this issue…
- WordPress Wave portfolio theme from the Molitor.
- 24 Weather icons from Snap2objects.
- Photorealistic T-shirt templates from Thread’s Not Dead.
- Psychedelic ‘Action Is’ font.
- iMusic WordPress theme from New WP Themes.
- OVER 70 MINUTES OF VIDEO:
HTML5, CSS3 & jQuery videos from KillerSites
Flash visitor counters plus examples from Cartoon Smart

Get the latest issue directly from our Imagine eShop

Web Designer, the premier magazine for aspiring online creatives has teamed up with Zinio, the leading digital publisher to offer more options for getting your favourite magazine delivered in the format you want. Imagine Publishing’s new partnership with Zinio means that Web Designer is now available for PC, Mac, iPad, iPhone, Android, Blackberry and Web OS. This means wherever you are you can get the latest cutting-edge practical projects, features, interviews and inspirational design showcases at your fingertips.

Zinio provides the apps needed to get the best on-screen reading experience, while Web Designer provides the unmissable content.

Where to get your Zinio digital edition of Web Designer

Buy on Zinio

Buy on iTunes

PRINT EDITION

Buy online

Get a subscription

GeekQuiz fueled by Mozilla

10^th May 2012

Join Mozilla for its first ever Geek Quiz where food, drinks and last but not least, the best geeky prizes you can find in town will be provided.

Mozilla MDN Hack Day in London

12^th May 2012

Join Mozilla’s Developer Engagement team for a day of full-stack Web hackery and good times with HTML5 and friends, Apps & Games, Firefox Addons and Open Web documentation. The Mozilla developer team will be on hand to talk about:

• HTML5 Game development
• HTML5 Apps & Mozilla Marketplace
• Firefox Addons & Developer Tools
• How to contribute to Open Web Developer Documentation
• Identity & Personas

The developer team attending will include: Rob Hawkes (@robhawkes), Christian Heilmann (@codepo8), Desigan Chinniah (@cyberdees), Amie Tyrell, Priya Patel and many more folks from Mozilla London.

Monday Mobile Madness fueled by Mozilla

14^th May 2012

Join Mozilla for a casual night of drinks, music and banter together with the mobile communities of InMobi, Swedish Beers, BlueVia, Ribot, Londroid, Droidcon, Over The Air and more.

GeekBowling fueled by Mozilla

16^th May 2012

Join Mozilla for an evening full of fun competition, and delicious food and drinks. Geeky dancing is optional.

Bring your strike skills on and see you at London Palace Superbowl in Elephant & Castle.

2012 marks the second year of the Lovie Awards and with competition expected to be fierce, those with a techie tour de force or electronic endeavour to celebrate should get their early bids in now.

Last year, special awards went to electro-pop pioneer Bjork (lifetime achievement), game-changing app Tweetdeck (Breakout of the Year), and special recognition was awarded to the highest scoring entry from each language: English- ‘Who Killed Deon’ (AMV), French-‘Nespresso – Pixie’ (Soleil Noir), Spanish- ‘Ohla Hotel’ (eMascaro), Italian- Nuok, German-SoundCloud.

The people behind the LOVIE AWARDS want to celebrate digital and online excellence in all its forms. Categories are divided into four key areas: Websites, Mobile Apps, Online Film & Video and Interactive Advertising and Media. Woven into these are permutations which cover all bases, from gaming to creative work to technical excellence.

There will be 11 new categories added to the mix this year, ranging from more technically minded awards like Best Home/Welcome Page to creative accolades like Best Copywriting and the Experimental and Innovation awards for mobile platforms. Social Media will play a larger part in this year’s awards, with categories added including Social Media Campaign, Social Games and Social Media for Good Campaign.

The judging panel will include musician and artist Imogen Heap, Google creative director Tom Uglow, co-founder of Deezer Jonathan Benassaya, co-founder of TechHub Mike Butcher, co-founder of The Next Web Patrick De Laive, executive creative director of Crispin Porter and Bogusky Europe Gustav Martner, design director and founder of OpenIDEO and IDEO Tom Hulme, founder and CEO of SoundCloud Alexander Ljung, WIRED editor at large Ben Hammersley, founder and CEO of Moo Richard Moross, and BBC exec. producer Will Saunders.

Entry deadlines for The Lovie Awards

Friday, May 25, 2012: Early Entry Deadline – (reduced entry fee)

Friday, July 20, 2012: Final Entry Deadline

Tuesday, October 16, 2012: Winners Announced

Entries can be submitted online through The Lovie Award platform:  http://www.lovieawards.eu/

Follow @WebDesignermag

With the adoption of HTML5, the web is becoming 3D enabled as standard. The dawn of universal fully interactive 3D graphics, virtual environments and games without plug-ins isn’t that far away from a mainstream reality. But as a web designer comfortable with 2D tools, that third dimension might seem a little daunting. This is a simple tutorial to introduce you to the notion of working in three dimensions – and what subject matter could be more fitting than the open-source HTML5 logo itself?

Here we use Google SketchUp to create a simple but effective web-ready 3D asset. SketchUp excels at creating such models because it encourages you to model from a 2D image as a starting point. This eases you from a 2D mindset into 3D without the hassle of learning a whole new way of thinking. So the first step, if you don’t already have it, is to download SketchUp!

Opening up Pandora’s box with third-party plug-ins

SketchUp initially came with just two or three tools, and the reason it gained such rapid popularity was largely because of that simplicity. To stay true to that unique selling point, SketchUp still ships bare bones compared to other software, but importantly you can use plug-ins to provide pretty much whatever extras you need.

Plug-ins come in ZIP files and are usually found on forums or third-party sites – for example, Sketchucation.com. Once you have the ZIP, extract it to your plug-ins folder. When you restart SketchUp there should be an extra toolbar or menu items in the Ctrl/right-click (context-sensitive) menu or Tools menu. Some tools need to be enabled in Window>Preferences>Extensions.

01 Setting up  SketchUp

After you have installed Google SketchUp, fire it up and select Choose Template from the welcome screen. Now select the Product Design & Woodworking – Millimeters template, as shown above, and click Start using SketchUp. To fetch the image you’ll be working from, navigate to w3.org and download the open-source HTML5 logo, saving it into a convenient folder to grab in the next step.

02 Import an image

You now need to import the 2D logo image into SketchUp as a reference to work from. Go to File>Import and select the folder where you just saved the HTML5 image. Select All Supported Image Types from the drop-down menu and make sure that the Use as Image radio button is checked before opening it.

03 Placing and sizing the image

Your image appears in the 3D viewport. Move your cursor to the Origin and left-click to fix the bottom-left of the image in that location. Move the cursor to the right and watch the image stretch in size. The width of the image is shown in the bottom-right of your window; type in 500 and hit Enter.

04 Using preset views

Go to View>Toolbars>Views. Now drag the Views toolbar to dock it where you want – either at the top or to one side of the window. Click on the Top view button, then click the Zoom Extents option. You now have the whole image filling the screen, viewing it head on.

05 Draw a rectangle

Select the Rectangle tool and click first on the top-left of the HTML5 shield; you should see the tooltip On Face in Image. Now move the cursor to the bottom-right until you see the tooltip On Edge in Image. Move to the right until you have the shield fully enclosed and then click to create the rectangle.

06 Extrude into 3D

Hold the middle mouse button and move the mouse to orbit the view so that you’re looking at the rectangle end-on. Use Pan or Zoom Extents to frame the view. Select Push/Pull and click on the shape. Move the mouse upwards to extrude the rectangle into a box – around 30 millimetres should do it.

07 Draw cut lines

Select the Pencil tool and move the cursor over the top edge of the box. When you get near the middle, the tooltip should show Midpoint. Click there, and then click at the centre of the left side edge as indicated above. Click on the first point again and draw a line to the centre of the right-hand edge.

08 Create the bevel

Select the Push/Pull tool and click on the top-left section of the face that you just created. Push the face all the way to the back of the box and click; the Push/Pull-ed face should disappear. Repeat this process for the right-hand side. Once done, the top face of the shield should be bevelled, as it is in the image above.

09 Construct the 3D text

Go back to the Top view and use the Pencil tool to trace the edge of the ‘H’. Make sure that the tooltip always shows On Face in Image or On Edge in Image. Use Push/Pull to extrude the letter. Repeat this for the other characters, but instead of extruding, just double-click on the face with the Push/Pull tool.

10 Creating components

Press the Spacebar to deselect all tools, then triple-click on the shield. Ctrl/right-click and select Make Component. Type in ‘HTML5_shield’ into the Name field, ensure the ‘Replace selection with component’ box is ticked and hit Create. Now repeat with the text, but this time hold Shift to allow you to select multiple letters at once; name this component ‘HTML5_text’.

11 High five!

Orbit the view until you can see under the shield. Trace the outline of the shape starting at the corners, then go to Window>Outliner and select the HTML5_shield component. Ctrl/right-click and select Hide before going to the Top view. Trace over the white ‘5’ as you have done before and Push/Pull it a long way up.

12 Cookie cutter

Ctrl/right-click the image and select Delete. Now rotate the view and Push/Pull the bottom face of the ‘5’ up a tiny bit. Now draw a single line to finish off the shield shape as shown. Unhide the HTML5_shield component using the Outliner. Lastly Push/Pull the upper face of the ‘5’ so that it is just clear of the shield.

13 Intersect two volumes

Triple-click the ‘5’, Ctrl/right-click and select Intersect Faces>With Model. Now Push/Pull the shield shape up and clear of the ‘5’. Orbit the view and Push/Pull the bottom face of the shield shape down. Double-click the HTML5_shield component to edit it. Triple-click and go to Intersect Faces>With Model.

14 Erase excess geometry

Ctrl/right-click the HTML5_shield component and select Explode; this makes the HTML5_shield geometry stick to the shield shape and the ‘5’ that you created. Select the Eraser tool and rub away the bottom-left and bottom-right parts of the shield that you don’t need. Make sure all lines and faces are removed.

15 The intersected form

Erase the upper and lower parts of the shield that you don’t need; this leaves just the intersected form of the HTML5_shield component and the shield shape extrusion – or, in other words, the finished shield. Now select the underside of the shape and hit the Delete key (or Backspace if using a Mac).

16 Clear internal geometry

Orbit to the underside of the shield and you will see that part of the ‘5’ is still left within the interior of the shield. This excess geometry will make your file size larger than it needs to be so should be removed. Use the Eraser on this until you only have the indentation of the number in the shield.

17 Download some SketchUp extensions

Use the Pencil tool to draw a line along one edge of the underside of the shield; this will reinstate the back face. Download the latest versions of RoundCorner (RoundCorner 2.3a at the time of writing) and Libfredo (Libfredo6 4.3b) and extract them into your Google SketchUp plug-ins folder.

18 Select sharp edges

Save your file and restart SketchUp; now you will see an additional toolbar. Hit the Sharp Corners button, click in the menu bar under Offset and a dialog box opens. Enter 12mm in the Offset box and 3 in the Number of segments box, then press OK. Now select the six outer edges of the shield’s upper face.

19 In the round

Move the cursor into a blank area of the screen and you will see a green tick – left-click this to confirm and the corners are now rounded off. Click on the top face of the ‘5’. Reduce the Offset to 2mm, hit OK and click to confirm. Repeat this step with each of the letters.

20 A splash of colour

Select the Paint Bucket tool and open the Colors folder in the Materials palette. Sticking with the original scheme, find an orange colour and apply it to the shield. Select white to paint the ‘5’ and a grey/black colour for the ‘HTML’. Go to Edit>Select All then use the Move tool to shift the tip of the shield to the Origin point.

21 Take it further

Go to File>Export>3D Model, select COLLADA file, then Export. You can now use SceneJS  with the COLLADA importer to serve the model in WebGL-enabled browsers. For more on creating 3D models for web/games, see this book: Google SketchUp for Game Design.

Follow @WebDesignermag

From conflicts to homecomings, from the runway to the raceway, from natural disasters to the triumph of the human spirit, Getty Images photographers capture the moments that define the world in which we live. In celebration of their achievements, Getty Images has created this video showcasing a sample of the award-winning imagery honoured in 2011.

Getty Images offer the industry’s best and broadest collections of imagery and footage – including award-winning news, sport and entertainment content, plus rare and contemporary archival imagery.

From multi-million-dollar advertisers to leading newspapers, feature film and television producers to bloggers of all kinds – for premium digital content, the world’s most influential media look to Getty Images.

You can also save 10% on all images and footage until 30^th June 2012. Watch the video and click on the button to reveal your 10% voucher code.

99designs is looking to bring a new and fresh perspective to their homepage at http://99designs.com. Designers who wish to participate in the 99designs Homepage Redesign Contest can register for free and submissions will be judged by the 99designs staff and a panel of industry experts including Joe Gebbia, co-founder and CPO of Airbnb; Arem Duplessis, Design Director for The New York Times Magazines and  Mark Harbottle, a serial entrepreneur who co-founded 99designs, Flippa and SitePoint.

99designs will choose up to three winning homepage designs, and will award a $1,000 cash prize to each winning designer. Following the contest, 99designs will test the homepage designs using its internal testing methodologies, and will incorporate winning elements into the next version of its homepage.

Entries are being accepted until Wednesday 14th May 2012.