articles on

Useful Articles for Wordpress Development

Useful Articles for Wordpress Development

Lately I've been up to my neck in a Wordpress personal project, developing a nice website environment to be proud about and I've ran into many issues along the way, from simple things like adding classes to the body tag to more complex ones like security issues and things like that. I thought it would be nice to share with you some of best articles I've found during this time. These are some of the most useful articles I've used and saved for future reference. Some of these are quite basic, other are super complex, but I find amazing how some developers are super awesome for sharing their knowledge with the community. I hope you find use for this, because these have definitely helped me at some point. Also, if you have your own Wordpress developing bookmarks, please, share it with us! The issues you have encountered and solved might be someone else's current problem. Cheers. ;) Developing WordPress Locally With MAMP "Local development refers to the process of building a website or Web application from the comfort of a virtual server, and not needing to be connected to the Internet in order to run PHP and MySQL or even to test a contact form. One of the most annoying parts of development, at least for me, is the constant cycle of edit, save, upload and refresh, which, depending on bandwidth and traffic, can turn a menial task into a nightmare. With application platforms such as WordPress, which require a server back end to work, you would normally be constrained to develop on a live server, with the headaches that go along with that. MAMP and its Windows counterpart, WAMP, are tools that allow you to locally develop applications that require a server on the back end." -Read the article at Smashing Magazine. How to Build A WordPress Theme From Scratch Part One "So you have WordPress installed and now you are ready to install a theme to give your blog/site the look you want.For most people, this involves using a theme that was purchased or using a free theme that they found on the Internet. But these don’t have to be the only two options you have to choose from. A developer with some skill in CSS and HTML can easily create their own WordPress themes to give their site the ability to provide a unique experience for their visitors. This tutorial will walk you through the steps of creating your own theme." -Read the article at Developer Drive. Wordpress Body Class 101: Tips and Tricks for Theme Designers "Through out our experience of using WordPress, we have found that often theme designers overthink a certain functionality. They are looking for crazy WordPress filters and hooks to accomplish a task when all they need is some simple CSS. WordPress by default generates a lot of CSS classes. One of these CSS classes area ia the body class styles. In this article, we will explain the WordPress body class 101 along with sharing some useful tips and tricks for beginning theme designers." -Read the article at WPBeginner. 10 Most Common WordPress Errors (With Solutions) "If you are a WordPress user who likes to get your hands dirty with the codes, or one who just loves installing plug-ins and changing themes, you’ll understand that encountering an error is an inevitable occurrence. WordPress users (like us) know how frustrating it is to stumble into an unexpected error and not be able to find a solution for it. Most WordPress problems are solvable; If you hit an error, don’t fret because chances are, some other WordPress user had the same problem and had already gotten it solved." -Read the article at Hongkiat. 55+ Most Wanted WordPress Tips, Tricks, and Hacks "There are times when you come across a feature in a blog, and you just start thinking to yourself: How can I get this in my WordPress blog/site as well. Everybody have experienced this feeling. Sometimes you know you want it, and don’t know where to look for, or even what to look for. In this article we will be sharing some of the most wanted WordPress Tips, Tricks, and Hacks that you will definitely find useful. These tutorials are classified under various skills level. For some tutorials, you will need to know basic HTML and some WordPress Knowledge." -Read the article at WPBeginner. Widgetizing Themes Widgetizing is a pseudo word that describes the process of implementing Widgets and Widget Areas into your Theme. -Read the article at Wordpress Codex. 10 Useful WordPress Loop Hacks "The loop is a very important aspect of WordPress blogs. In fact, the loop is what allows you to get posts from your WordPress database and print them on the screen. A set of useful and user-friendly functions, the loop is incredibly powerful. With it, you can get a single post, a list of posts ordered by date, title or category, a list of posts written by a specific author and much more. In this article, we’ll show you 10 useful things you can do with the WordPress loop to make your blog even more powerful than it is right now." -Read the article at Smashing Magazine. Adding Disqus comment count links to your home page "Most websites implementing Disqus will want a way to display the comment count for each page with comments, on their home page. We offer an easy to use JavaScript code snippet which displays the number of comments for pages with Disqus embedded." -Read the article at Disqus.

Basic Animations in CSS and Javascript for Prototypes

Basic Animations in CSS and Javascript for Prototypes

Motion design is getting more important everyday when it comes to design interfaces that engage with the user both functionally and emotionally. Because of this, I started practicing with Javascript and jQuery to create basic animations for my prototypes. One of the most common animations comes into play when you want to build a list or animate items in a chain. To illustrate that today I share a simple technique I use for my prototypes. For this little tutorial we will play with some HTML, CSS and Javascript. The whole process won't take more than 30 minutes. Step 1 Start a new HTML document and add some elements, one "Section" and then a list "UL" with a few objects "LI" <!doctype html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> </head> <body> <section> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>6</li> <li>7</li> <li>8</li> </ul> </section> </body> </html> Step 2 Now lets import jQuery and jQuery Transit plugin to help us animate the list. <!doctype html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js" ></script> <style> body{ padding: 0; margin: 0; background: #000; } section{ max-width: 1024px; min-height: 960px; background: url(http://wpuploads.appadvice.com/wp-content/uploads/2013/10/24.png) center center; background-size: cover; margin: 0 auto; } ul, ul li{ margin:0; padding: 0; list-style-type: none; } ul { padding-top: 40px; } ul li{ background: #fff; margin: 0 11px 1px 11px; padding: 15px; } </style> </head> <body> <section> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>6</li> <li>7</li> <li>8</li> </ul> </section> </body> </html> Step 3 - Animating the list To animate the list is pretty simple, the first and most important thing to do is to have a little script of what you want to animate. In this first case we will animate one LI at the time fading in and sliding down from the top. <script> $(function(){ $("ul li").each(function(i){ $(this).css({y:"-30px", opacity:0}).transition({y:"0", opacity:1, delay:200 * i},600,"ease"); }) }) </script> So what we are doing in that function is to find each "LI"strong> and then for each one we will set with CSS to move them "-30px"strong> in the Y axis (top) and change the opacity to 0. After that with jQuery Transition we will move it back to the original position. To make sure each one move at different time we will set a delay to 200 and multiply that by "i" (each element have their unique "i"). Step 4 - some 3D rotations <script> $(function(){ $("ul li").css({opacity:0}).each(function(i){ $(this).css({y:"150px", rotateX: "90deg", transformOrigin: 'center top'}).transition({perspective: '400px',y:"0", opacity:1, rotateX:"0deg", delay:200 * i},300, "ease"); }) }) </script> The only thing we added here was the rotateX and transformOrigin for the CSS and perspective and rotateX for the transition. You can play with these values to change the animation as well. Conclusion Below you can see a basic example of what you can do with simple Javascript. The best thing about these animations is that they use the GPU, that means they run very smooth in mobile devices and are perfect for mobile prototypes.   See the Pen uqnjH by Fabio Sasso (@abduzeedo) on CodePen  

iOS7 Frosted Glass Effect with HTML 5 and Javascript

iOS7 Frosted Glass Effect with HTML 5 and Javascript

With iOS7 Apple introduced a completely new design for the 6 year old OS. Among all the changes, one that really caught everyone's attention was the blurred background effect. Basically some parts of the UI get a nice frosted glass effect. There are a couple of ways to achieve this effect using HTML and CSS. The easiest way is to use CSS filters, however the performance on phones is far from usable. With that in mind I decided to experiment with Canvas and the result was quite good. So in this post I want to share a little bit about the idea behind this prototype. Basic workflow What we want to accomplish here is a simple way to blur the content once it goes underneath a part of the UI. For this prototype we will use an action bar, or header. To do that in HTML we will have to use a little bit of Javascript. Basically what we want to do is: Render the HTML Duplicate the content area and convert it to canvas. Move the Canvas to the Header part Sync the scroll of the content with the canvas in the header Basic code   See the Pen eJlfj by Fabio Sasso (@abduzeedo) on CodePen Javascript To convert the content area from HTML to Canvas I used a library called html2canvas (http://html2canvas.hertzen.com/). It's pretty simple to use if you follow the steps in the documentation: html2canvas(element, { onrendered: function(canvas) { // canvas is the final rendered <canvas> element } }); After the Canvas is rendered I then move it to the Header. I also added an ID so I can play with it in CSS and apply the blur effect in the future. html2canvas($("body"), { onrendered: function(canvas) { $(".blurheader").append(canvas); $("canvas").attr("id","canvas"); } }); Blur Effect To apply the blur, I used another library for that, it's called Stackblur and it applies Gaussian Blur to a canvas element. html2canvas($("body"), { onrendered: function(canvas) { $(".blurheader").append(canvas); $("canvas").attr("id","canvas"); stackBlurCanvasRGB('canvas', 0, 0, $("canvas").width(), $("canvas").height(), 20); } }); Conclusion The end result works pretty well for a simple iOS7 prototype. I am still working on fixing the issues with the scrolling, iOS doesn't have "on scroll event" which complicates things a little bit. Below you can see a demo of the prototype. You can fork it on GitHub (https://github.com/abduzeedo/ios7-blur-html5) and make it better :)    

Introduction to Mobile Prototyping with HTML, CSS and JavaScript

Introduction to Mobile Prototyping with HTML, CSS and JavaScript

If you are a designer in this day and age you are probably designing for handheld devices like smartphones and tablets. We live in a polarizing world where on one side we have native apps and on the other the web, with responsive sites and web apps. Designing in this environment requires understanding of the context you will be designing for, therefore, testing on devices. There are several ways to create prototypes, from paper to motion in After Effects. For me, basic HTML, CSS3 and JavaScript do the best job because they allow me to test on the phone with an incredible level of accuracy. In this post I will start sharing some tips on how to create basic HTML/CSS3/JS prototypes. The idea is to enable you to test your designs on phones, tablets or web. I will also assume that you know a little bit of HTML and CSS, but of course you can learn that online or doing the reverse engineer. So in this first post I will show you how to create a simple prototype with a few icons and basic transitions. You can then apply to your own designs. The coolest thing is that you can create a super smooth prototype with this simple technique. Introduction The first thing is to start an HTML document and make sure you have the structure done. For prototypes, the simplest way to create them is by having all screens you want to test in the same file, that way there won't be any lagging between screens. Remember, we are creating a prototype, not a web app. The way I organized my HTML is that every screen will use a "DIV" tag with an "ID" and a "CLASS='SC". That way I can use CSS to make them work the same way. For each screen I used the "HEADER" tag to create the header of the screen. Below is the full HTML file of the prototype. Prototype Back Screen 1 Back Screen 2 Back Screen 3 Back Screen 4 Back Screen 5 Back Screen 6 Back Screen 7 Step 2 For the icons, notice that I created a list using "UL" and "LI". Also notice that there are other classes like "LINK", "NONE", "slideup", "slideleft" and more. I will cover those in a few, but for now let's focus on the design of the screens and the icons. The first line you can see that I am reseting the CSS, that's an easy way to clear all properties and styles that browsers have. I am using the Eric Meyer's CSS Reset. You can find it at http://meyerweb.com/eric/tools/css/reset/ For the screens, this is the CSS: @import "reset.css"; html, body{ width: 100%; height: 100%; } body{ padding: 0; margin: 0; width: 100%; height: 100%; position: relative; } .sc{ width: 100%; height: 100%; position: absolute; display: none; z-index: 10; } .sc.selected{ display: block; z-index: 11; } Icons For the icons, we will use a basic "display:inline-block". We could have used the new and fancy flex model, however it doesn't work in Safari, so for now let's wait till iOS7. #home ul{ width: 100%; height: 100%; text-align: left; } #home ul li{ height: 72px; width: 72px; background: #fff; display: inline-block; margin: 22px 0 0 22px; border-radius: 6px;; } Screens Each screen will have a different color background. Below you can see the CSS. #home{ background: #333; } #screen1{ background: #2C3E50; } #screen2{ background: #E74C3C; } #screen3{ background: #3498DB; } #screen4{ background: #ECF0F1; } #screen5{ background: #2C3E50; } #screen6{ background: #E74C3C; } #screen7{ background: #3498DB; } jQuery Now it's time for the most important part, how to make things work. How to make the links open a different screen. To do that we will use Javascript with jQuery. We will use jQuery because it's easier for beginners to understand how Javascript work. To use jQuery we will have to make sure we are loading it in our HTML. To do that, use this code withing your "HEAD" tag. We are basically loading jQuery from its servers. Removing the 300ms lag Every time you click/tap something using a mobile phone, there will be a 300ms second if you use regular Javascript events like "onclick". To get rid of that there are some plugins online. The one we will use is based on Google Fast Button, but it's a jQuery version. You can read more about it at https://github.com/alexblack/google-fastbutton Download the ZIP file and copy the .js files to the folder of your HTML file. Then add these lines right after the previous "script" tags that you used load jQuery. Animations CSS animations are the best way to create silk smooth animations for mobile prototypes. You can create animations using the keyframe technique, however there's an amazing jQuery plugin that helps. The plugin is the jQuery Transit - CSS3 transitions and transformations by Ricard Cruz http://ricostacruz.com/. Same thing as before, let's load the plugin. Just add the code like the example below. Basic transition For the basic transition, that's hiding the current screen and showing the new one we will use CSS classes. Notice that theres a ".sc" and a ".sc.selected". For the basic ".sc" we have a "display:none", that means all screens will be hidden. Then for the one selected ".sc.selected" there's a "display:block". So basically, the idea is, the screen that's visible, it will have a class "selected". By removing the class and adding to another screen, we make a simple transition. Below you can see the code. $(document).ready(function() { $(".link").fastClick(function () { screen = "#" + $(this).attr("page-load"); if($(this).hasClass("none")){ $(".sc").removeClass("selected"); $(screen).addClass("selected"); } }) }) The code above is basically, when the user clicks on a tag with the class ".link" it will get the screen to show, that is in the "page-load" from the link. We will create a variable called "screen" to have this value, but we will add the "#" symbol, that is the one used to represent the "ID". If the link has a class "none" that is for different animations, we will basically remove the class "selected" to all ".sc" tags. Then we will add the class "selected" to the one we want to show. Slide from Right to Left To create a simple slide transition, we will pretty much follow the same idea, the only difference is that we will position the screen to load off the current viewport and then animate it in. Below you can see the code. if($(this).hasClass("slideleft")){ $(".selected").addClass("previous"); $(screen).css({x:$(window).width() + "px"}).addClass("selected"); $(".previous").transition({x:"-" + $(window).width() + "px"},300,"ease"); $(screen).transition({x:"0px"},300,"ease",function () { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } So the code below will first add a class "previous" to the current screen, that's already selected. Then it will position the screen to show off the screen using "$(screen).css({x:$(window).width() + "px"})" that means, the screen will be position in the width of the window "$(window).width()" to get the value and move it in the X axis to that point. Example, if your screen is an iPhone, it will move the new screen at 640px. Then the class "selected" will be added in order to make it visible. At this point you will have 2 screens with the class "selected". The second part is the animation using jQuery Transit. So we will basically animate the screen that was on the right to the 0 position using "$(screen).transition({x:"0px"},300,"ease",function ()". The time of the animation will be 300ms and it will use "ease" to make the speed not linear. Once the animation ends, we call a function to remove the "selected" class from the "previous" tag. Then we remove the "previous" class too. At last we remove any "style" attribute to make sure that there won't be any issue in the other animations. More Animations Below you can see different transtions type. We have SlideUp, SlideDown, SlideLeft, SlideRight, BackDown, Backup. if($(this).hasClass("slideup")){ $(".selected").addClass("previous"); $(screen).css({y:$(window).height() + "px"}).addClass("selected"); $(screen).transition({y:"0px"},300,"ease",function() { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } if($(this).hasClass("slidedown")){ $(".selected").addClass("previous"); $(screen).addClass("selected"); $(screen).css({y:"-" + $(window).height() + "px"}); $(screen).transition({y:"0px"},300,"ease",function() { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } if($(this).hasClass("slideleft")){ $(".selected").addClass("previous"); $(screen).css({x:$(window).width() + "px"}).addClass("selected"); $(".previous").transition({x:"-" + $(window).width() + "px"},300,"ease"); $(screen).transition({x:"0px"},300,"ease",function () { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } if($(this).hasClass("slideright")){ $(".selected").addClass("previous"); $(screen).css({x:"-" + $(window).width() + "px"}).addClass("selected"); $(".previous").transition({x:$(window).width() + "px"},300,"ease"); $(screen).transition({x:"0px"},300,"ease",function () { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(".sc").removeAttr("style"); }); } if($(this).hasClass("backdown")){ $(".selected").addClass("previous"); $(screen).show(); $(".previous").css("z-index","24").transition({y:$(window).height() + "px"},300,"ease",function() { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(screen).addClass("selected"); $(".sc").removeAttr("style") }); } if($(this).hasClass("backup")){ $(".selected").addClass("previous"); $(screen).show(); $(".previous").css("z-index","24").transition({y: "-" + $(window).height() + "px"},300,"ease",function() { $(".previous").removeClass("selected"); $(".previous").removeClass("previous"); $(screen).addClass("selected"); $(".sc").removeAttr("style"); }); } Using the animations With this basic code you can simply add a class "link" to any tag to make it clickable. Once it's clickable you can choose the transition by using another tag. In our case you can use: slideup - eg. slidedown - eg. slideleft - eg. slideright - eg. backdown - eg. backup - eg. Conclusion It might look confusing, but as any new thing we want to know there's a learning curve. The secret is to go little by little, with small little achievements in order to get easy and quick rewards, that way we keep ourselves motivated. Below you can see the code working on an iframe. You can also download the files and check on your phone (recommended) Download Files Demo on Phone Prototyping tools and Frameworks http://www.framerjs.com/ http://twitter.github.io/bootstrap/index.html https://github.com/donnfelker/android-bootstrap

Frame - Prototyping tool for desktop and mobile

Framer - Prototyping tool for desktop and mobile

Prototyping is a vital part in designing great products, from a simple poster to a car, it's extremely important to test designs in situations that resemble the real usage environment. My background is in Industrial Design and we used to prototype everything. Then I moved to graphic design and again I was always printing and checking to see how my designs felt. Now in the digital world, and with mobile taking over it's really important to be able to simulate the products in the handsets. There are quite a few frameworks out there but I would like to share one called Framer. Frame can help you to quickly build interactions and animations. Built for designers and integrates with Photoshop. Great alternative to Quartz Composer, Flash or Keynote. I started using it a few days ago, recommended by Noah Levin, a fellow Googler and the amazing designer behind the Google App for iOS with Google Now.? Framer is a prototyping tool for animation and interaction on desktop and mobile. Features Photoshop: Framer integrated with Photoshop to quickly export assets and set up a project. Animation: Animate any view in full 3D space with spring physics and bezier curves. Performance: Hardware accelerated for high frame rates. Based on CSS keyframes. Flexible: Works well for desktop, mobile and tablets. Plays well with the rest of the browser. Video preview Framer Photoshop from Koen Bok on Vimeo. For more information, to check out some demos visit http://www.framerjs.com/

Experimenting with Swiss Style in CSS

Experimenting with Swiss Style in CSS

Last week I started playing in CSS for my new personal site. I decided to skip the Photoshop/Fireworks/Illustrator part and go from sketches to HTML/CSS. This process helps me to improve my coding skills, especially for rapid prototyping. The first experiment I decided to create was a simple page with just text and texts rotated 45 degrees, heavily inspired in the Swiss Graphic Design Style. For this post I want to show you a little bit of the creative process behind this experiment. The whole design uses only regular fonts, if you use a MAC you will see the text in Helvetica, while other platforms might render in Arial or Roboto (android). Also feel free to give feedback or suggestions on how to improve the code. Step 1 To start, let me show you the basic HTML file. You can see the structure of the document. It might look that there's too many nested DIVs but I did that because I will use that to extend the content of the site in the future. Right now, let's focus on the rotated text. Portfolio fabio sasso founder of abduzeedo follow me on Twitter, Behance & Dribble designer at google I’m a Brazilian graphic and web designer based in San Francisco, California. Currently working for Google, I am also the founder of Abduzeedo, a personal project that has become the biggest promoter of my work. Abduzeedo is now one of the design world’s most sought after blogs for design inspiration and tutorials. Over the years I have had the amazing honor to work on projects for web and print media as well for clients such as MSNBC, Wired UK, Adobe, Digital Arts Magazine and Abril among others. In 2011 I joined Google as senior designer at the Mountain View headquarters. For over 2 years I have had the opportunity to work on incredible projects, from Doodles and icons to major products like Google Wallet, Offers, Shopping, Currents, Ventures and others. Currently I am part of the Search/Knowledge team working with amazing people. Step 2 Now let's focus on the part of the text that rotates. I used H1 and H2 for the text and put them inside a DIV with a class called "roatedtext" fabio sasso founder of abduzeedo follow me on Twitter, Behance & Dribble designer at google Step 3 First thing to do is to adjust the font sizes using CSS h1{ font-size: 150px; line-height: 75%; margin: 0; font-weight: bold; } .rotatedtext h2{ font-size: 36px; clear: both; margin: 0; padding: 0; line-height: 130%; } Step 4 To rotate the text we will use CSS transformation (transform:rotate(deg)). The first thing to do is to rotate one block 90 degrees. Use transform:rotate(-90deg);. Use negative to change the direction you rotate. .name{ -webkit-transform:rotate(-90deg); position: absolute; left: 90px; top: 30px; } Step 5 Now just rotate the container DIV with the texts. Use 45 degrees to create the perfect Swiss style text. .name{ -webkit-transform:rotate(-90deg); position: absolute; left: 90px; top: 30px; } Conclusion Here's the final CSS I had when I finished this experiment. */ DEMO

Responsive Nav - Useful Responsive navigation plugin

Responsive Nav - Useful Responsive navigation plugin

What I love the most about the open source community and living in today's ever-evolving world is the abundance of great work being shared. It's pretty hard to not find what you're looking for, particularly within the world of programming, if you are just starting out. I draw a lot of my learnings and inspiration for prototypes and fully baked products within this resourceful community. Today I want to share with you a plugin for responsive navigation called Responsive Nav Responsive navigation plugin without library dependencies and with fast touch screen support. Try it out by resizing this window. Features Responsive Nav is a tiny JavaScript plugin which weighs only 1.6 KB minified and Gzip’ed, and helps you to create a toggled navigation for small screens. It uses touch events and CSS3 transitions for the best possible performance. It also contains a “clever” workaround that makes it possible to transition from height: 0 to height: auto, which isn’t normally possible with CSS3 transitions. For more information visit http://responsive-nav.com/

Flipping Book in CSS and jQuery

Flipping Book in CSS and jQuery

The tutorial of this week is about HTML, CSS and a little bit of Javascript with jQuery. As the rule of trend now is mobile first and any designer who wants to really understand the media will have to be able to create quick prototypes of his/her work, we decide d to write a few basic prototyping tutorials. The first one will be about create a simple flipping book, like a 3 fold brochure, using HTML, CSS and JS for the events. For this tutorial you will have to have some knowledge of HTML and CSS. You can also just copy and paste and change the values to see how it works. I am still learning and improving my CSS and jQuery skills but I think it's good to share and will try to do that in this post. Feel free to leave comments with suggestions on how to improve our coding skills. Step 1 The first step is to create the design. My idea was to create a simple 3 fold brochure, so I put together a basic mock in Illustrator Step 2 Now let's create the basic HTML for the document. Basically what we have to create is 5 squares to use as each one of the folds. To do that I will create a basic container using the tag "section" and the 5 squares with the tag "article" Flipping cards Step 3 Let's start add some visuals with CSS. First thing is to create the different parts of the brochure and also the position of each one of them, not worrying too much about the vertical positions. Flipping cards */ Step 4 Now let's start flipping the cards and putting in the right position. It's important to understand how CSS transform works so we can write the css. Here's the summary of what we need to do: #cover: This card will flip from right to left, so the origin (-webkit-transform-origin) will have to be left horizontally. #backcover: This card will be flipped, so you will have to move it to the 0 position left, but flipped 180 to the right. Use -webkit-backface-visibility:hidden to hide it when its rotated. #centerflip will behave like the #cover but the origin will be right instead of left. #centerback will behave like the #backcover but flipping to the other side, also you will have to position it to the right. Here's the full CSS code article{ position: absolute; display: block; width: 600px; height: 600px; left: 600px; top: 200px; } section{ -webkit-perspective: 2000; width: 1800px; background: #f5f5f5; overflow: visible; position: relative; -webkit-transform:scale(.5); } #cover{ background: #fff url(logo.png) center no-repeat; background-size: 250px auto; z-index: 1000000000000000000; -webkit-transform: rotateY(-0deg); -webkit-transform-origin: left bottom; } #backcover{ left: 0; background: #000; color: #fff; -webkit-transform: rotateY(180deg); -webkit-backface-visibility: hidden;; -webkit-transform-origin: right bottom; z-index: 10000000000000000; } #centerflip{ background: #ff0; z-index: 10000000; -webkit-transform: rotateY(0deg); -webkit-backface-visibility: hidden;; -webkit-transform-origin: right bottom; } #centerback{ background: #fff; -webkit-transform: rotateY(-180deg); -webkit-backface-visibility: hidden;; -webkit-transform-origin: left bottom; left: 1200px !important; z-index: 10000000000000000; } #center{ background: #000; } Step 5 Now that you have the cards and the layout positioned, let's use Javascript to make the behaviors. We will use jQuery and jQuery Transit for that. jQuery Transit is an amazing plugin that allows us to make simple CSS animations with jQuery. The easiest way to write the script is understand exactly the logic/behavior we want to have User clicks on the #cover and the #cover flips 180deg. The #backcover that is flipped 180deg will flip to 0deg The #centerflip when clicked will flip 180deg. The #centerback that is flipped -180deg will flip to 0deg. Once the brochure is open we will set a variable saying that it's open so we can close the brochure by clicking on it again. Here's the code for that Conclusion This is a basic demo of CSS transformations, it will only run on Webkit browsers for this demo. You can make it work for other browsers by adding their prefixes in the code. The idea is trying to motivate you that is starting out your web design career, to prototype more, to play with code to see how things will behave. That will definitely give you a different and better understanding about design in general. View Demo

Abducted by Web Technologies

Hello everyone, my name is Carlos Taborda, I’m an engineer/developer/designer and I’ve been abducted. :) I’m a friend of Fabio, and we thought bringing a little bit of programming/server articles would be helpful to all of you designers who want to learn to install and configure your servers (& VPS) and need to get your sites, blogs and applications up and running. What Subjects will you talk about? Since I have a mixed background, I will try to bring a little bit of everything from the three subjects (Servers, Code & Design). Here’s a list of things I’ve thought about. Servers: We’ll talk about, Getting a server up and running to serve sites and applications, ie, Apache, PHP, MySQL, Zend, Ruby on Rails, Django and Security. Code: I’m a Rails developer, and use it for my work every day, so i’ll be posting some basic Howto’s on how to get your first application going, as well as useful resources I find. Design: I’m not as a gifted designer as Fabio, but I have a good sense of design in applications, so i’ll share some Howto’s on how to create good ‘web-app’ templates, with CSS, Ajax, etc. I’ll also feature good Wordpress, Drupal and Joomla templates I run into. We need ideas! I would like to get ideas from you - our readers! What topics should we add, that would be useful for you in your web-design/developing journey.