designart

Some fun effect and layout ideas for the first step of a checkout process in an online store. We are using the morphing buttons concept together with CSS transforms and transitions.  A while back we explored a morphing button concept where the active element gets transformed into its target, aiming to create a fluid UI experience with a semantic connection of the involved elements. Today we want to apply that same concept and some other ideas to the first step of the checkout process. The checkout process in online stores is one of the most challenging and crucial in terms of UI design. Done well it can create a pleasant and smooth purchasing experience for the user; done wrong, it can lead to an abandoned shopping cart and no sale at all. There are many carefully planned and well designed e-commerce sites out there and making the UI uncluttered is definitely a great trend welcomed by anyone who buys things online.  With the demos we’ve created today we are looking

  In this article I thought I’d give you a bit more insight into what you can do with Sass and how developers use it every day to create better and more modular CSS code. Skip ahead to the section you want: Tools of the Trade Variables Nesting Extending Rulesets Mixins Placeholder Selectors Operations Functions Tools Of The Trade   ________________________________________________________________________   Thoriq showed you how you can use Sass from the command line using the sass --watch command. If you prefer GUI tools, you can go with my personal favourite app, Codekit , a web developer tool for compiling Sass, concatenating, autoprefixing and much more. Prepros is another very capable application which can be used on all systems. Both are paid applications but are well worth it if you’ll be using them in the long run. If you just want to try out Sass without paying for anything you can use the terminal, or Koala ( here’s our review ), a free cro

A product page is any page on your website that showcases a product. It has to describe its features, give some screenshots, and be descriptive. Naturally, this is the place where you build up the visitor’s interest towards your product,  but it is getting increasingly difficult to be original in grabbing their attention. Luckily, a new compact JavaScript library can help you make a splash. impress.js is a small, standalone library that makes it easy to design advanced CSS3 presentations with eye-catching effects . But what if we used impress.js for something other than a presentation? This is what we are doing today – we will be spicing up a plain old product page with some CSS3 magic! The HTML We start of with a simple HTML5 document that will be the backbone of today’s example. index.html Impressive CSS3 Product Showcase | Tutorialzine Demo <!-- Google Webfonts and our stylesheet

3D Thumbnail Hover Effects Today we want to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase .  In our examples, we’ll use thumbails that will reveal some more information on hover. We will create a structure with jQuery that will allow making the image appear as folded or bended when we hover over it. For the hover effects we will use CSS 3D transforms.   THE MARKUP __________________________________________________________________________________ The markup for the thumbnail structure will be as follows: 566 124 →       __________________________________________________________________________________   Each thumbnail goes into a division with another division for the details (view-back). The structure that we want to create for each division with the class view using JavaScript is the