Web Designer [UK], Issue 232

Language: English

Pages: 100

ISBN: 2:00273758

Format: PDF / Kindle (mobi) / ePub


Web Designer is the flagship publication for international web creatives, offering expert project-based tutorials across modern disciplines such as HTML, CSS, jQuery, Flash, Photoshop, WordPress blogging and mobile apps. Accessible to hobbyists and professionals of all skill levels, the content is constantly informed by agency profiles, breaking stories and cutting-edge trends. Each issue features a download packed with invaluable design resources and project files for the tutorials in the magazine. Give your latest website the perfect start with the ultimate design mag for the web professional.

In this issue...

CSS 3D

CSS AND 3D
- Add new depths to design with transforms, animation and the best, complementary JS

20 Fresh frameworks
- A contemporary collection of frameworks to future-proof your site

Develop with Python
- Unlock the secrets of the development framework for making apps

How The Hobbit site was built
- North Kingdom unravel the mystery

Also inside...
- Create interactive WebGL scenes
- Build a custom CSS grid
- Design responsive emails with ZURB's Ink
- Code a fade-in, fade-out menu
- Add pop-up menus on hover
- Make a reactive app with Meteor
- Build an app with Firefox WebIDE

Interview
A new breed
PeoplePerHour founder Xenios Thrasyvoulou reveals a new type of freelancer - the hyperspecialist

Contemporary Japanese Restaurant Design

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

To make sure this is achieved on older browsers, we’ll use the clearfix hack to make sure everything inside the row stays inside the row. 001 002 003 004 005 006 007 /*-- our cleafix hack -- */ . row:before, . row:after { content:""; display: table ; clear:both; } 12 Position columns There are many ways to position columns using CSS. But the most common way is to use floats. So by targeting all classes with a substring on col, we can target tutorials ___________________________________________________________________ 53 Set up your own grid system using CSS WorldMags.

This is achieved by an elegant combination of transparent PNGs and a simple CSS transition as explained here. Start a new HTML page and add some initial style classes: 001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 011 012 013

014

02 Menu item elements Further classes will be added once page elements are added.

This is critically important when you’re transforming a group of child items! 001 #cube { 002 … 003 transform-style: preserve-3d; /*Keeps all the faces together. */ 004 } SET PERSPECTIVE Now we can set up perspective. If we move an object relative to its parent, we have to adjust the perspective to compensate and set ‘margin 0 auto’ on all faces. vanishing point */ perspective-origin: 50% 100%; /* Auto-offset perspective for child cube */ 005 } 006 #cube div { 007 … 008 margin: 0 auto; Magic word that fixes perspective!

This is because although the server is publishing the menu we’re not subscribing to it client-side. Create yet another file called ‘main. js’ in client/templates. This subscribes to not just the published menu, but a collection that we haven’t created yet called ‘orders’. As soon as you save this, the menu will reappear. 001 002 003 Meteor. subscribe('menu'); Meteor. subscribe('orders'); 20 Kitchen template var self = this; Orders. remove(this. orderId, function (error) { if (error) { alert(error. reason); } else { alert(self.

Helpers({ 002 formattedPrice: function () { 003 return this. price. toFixed(2); WorldMags. net WorldMags. net Create a reactive web app using Meteor 004 } 005 }); 15 Template events Events to templates are added in a novel way (although unchanged since 0. 8). Each listener is the event followed by a CSS selector. This makes them highly readable and ensures that they’re all kept in the same place. The event is passed through and we can reference the current item as ‘this’. 001 Template. menuItem. events({ 002 'click button': function (e) { 003 /* next step */ 004 } 005 }); 16 Add an order Our button is going to change behaviour depending on if it has a class called choose or not.

Download sample

Download

Rated 4.76 of 5 – based on 27 votes