Image galleries with rotated thumbnails are somewhat infrequent, but it’s a simple trick to add style to your webpage. However, if not done right, achieving and maintaining this effect can sometimes prove to be a major hassle! To properly achieve this effect, your first thoughts might turn to creating rotated thumbnails in Photoshop. However, this can prove to be difficult in the long term.
Alex Ball continues on his journey of Learning LESS, as he digs into an extremely powerful component of LESS: Mixins. A Mixin in LESS is basically a common group of CSS properties grouped into one, which can then be inserted into various other LESS selectors. You can think of it like a variable, with several different properties. If you haven’t read the first post on the topic, check out Learning LESS: Variables.
Mary Lou is going to show you another really unique trick to spice your design. This tutorial is about creating an animated swatch book using CSS rotation transforms and JavaScript. The idea is to show a swatch book like structure and make the single swatches or “sheets” clickable. When clicking on a swatch, she’ll rotate the other swatches in order to reveal the selected one.
Good Web designers know what many others might not realize: that creating a truly beautiful website requires care, time and craft. And similar to how a craftsperson molds their creation by combining raw materials, skill and unwavering focus on the vision, a beautiful design is planned and executed with exceptional focus on what is to be achieved by the website. It is important, however, not to confuse a beautifully crafted website with one that simply brushes over the content with attractive visuals.
Most online text entry fields, including text boxes and search boxes, look exactly like the name implies — very “boxy”. Relatively few website owners have availed themselves of the latest coding advances to incorporate subtle touches into their form elements to create an entirely new look. With HTML5 and CSS3, powerful, yet simple coding tools will now allow for speedy and effective appearance upgrades for all types of boxes.
Karim El Husseiny is going to show how to implement a simple user authentication system in a Rails application from scratch. Along the way, he’ll examine best practices to help avoid common – and costly – mistakes. Password-protected actions are a common feature in most web applications. You’ll only allow users with a valid username and password to access these actions. This is referred to as “User Authentication,” which most Rails applications will require in some form or another.
Without context, it would be difficult for your clients to understand the flow of an app or website in the way you originally planned it. The best way to introduce context is by adding interactivity. By providing an interactive prototype (or interactive mockup), your clients can play around with it to their hearts’ content to get an idea of how the app will work and to test the interactions. The tool for creating interactive prototypes that wins hands down is Adobe Fireworks.
HTML5 introduces a range of new form elements and functions, including the range input type. With the range input element, you can create sliding controls for your site users. There are a number of options to choose from in terms of configuring your range inputs, such as defining the range values and steps. With a little JavaScript, you can capture and respond to user interaction with the range slider control.
Just like every stable release of WP, version 3.4 too brings many big and small changes to the table. With something as popular as WordPress, missing out on a feature or two is obviously natural. Plus, with the plethora of awesome features that WP 3.4 comes with you may need a guide like this to help you discover them all. In this article, Sufyan bin Uzayr takes a close look at some of the major additions of WordPress 3.4. He shall be following a step-by-step approach — he will take a look at a given feature, delve deeper into it, and then move on to the next new feature.
Read MoreConverting color photographs to black and white and sepia-tone, as well as blurring them is easy to do. The next obvious step is to animate these effects. Right now, these effects can be fully transitioned only in the most recent builds of Chrome; other browsers will show a “flick” between two filtered states, with no animation. As a rule, Dudley Storey doesn't show web development techniques until they are completely duplicable in at least two different browsers, but in this case, the effects are so neat (and expected to be fully supported in all browser versions so soon) that he is making an exception.