Tuesday, July 09, 2013

Expanding Search Bar Deconstructed

Expanding Search Bar

Summarized, this is what we want the search component to do:

  • Initially, we only want to show a button with a search icon.
  • When clicking on the icon, we want a search input to slide out.
  • The component should be fluid, meaning that we can use it in a responsive context.
  • When we type something we want to be able to submit the form by either hitting enter or clicking on the search icon.

Tuesday, July 09, 2013

View Mode Switch

View Mode Switch

A layout switch with two viewing modes: grid and list. The layout is defined by a view class that gets applied to the main wrapper. Some example media queries show how to make things responsive.

Tuesday, July 09, 2013

Responsive Icon Grid

Responsive Icon Grid

A grid of icons and text that adjusts its number of columns depending on the screen size as shown in some media queries. Some example effects are used for animating the elements on hover.

Tuesday, July 09, 2013

Loading Effects for Grid Items with CSS Animations

Loading Effects for Grid Items with CSS Animations

Today we'd like to share some loading effects for grid items with you. The idea is to show items in a grid with an animation once they are in the viewport. The possibilities are infinite and we'd like to give you some inspiration. Some of the effects are from the awesome CSS3 scroll effects by Hakim El Hattab and the idea is inspired by the tile animation seen in the Google Plus app.

Tuesday, July 09, 2013

Caption Hover Effects

Caption Hover Effects

Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. For some of the effects we will use 3D transforms. The aim is to keep the effects subtle and provide inspiration for many different variations.

Saturday, July 06, 2013

A Beginner’s Guide to Wireframing

A Beginner’s Guide to Wireframing

Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information. If you've yet to use wireframing, it’s time to get your feet wet...

Saturday, July 06, 2013

Designing the dreaded form: getting creative

Designing the dreaded form

In my first article "Designing the Dreaded Form" I discussed planning your forms ahead time by selecting proper UI patterns and handling the dreaded long forms. But the generic title for the article completely left out the “design” part of the form. Although planning ahead is a hugely important part of any design process — the focus on the previous article, this article aims directly at the visual design aspects of the dreaded form.

Saturday, July 06, 2013

Centering Percentage Width/Height Elements

Centering Percentage Width/Height Elements

If you know the exact width/height of an element, you can center it smack dab in the middle of its parent element easily with this classic trick: top and left set to 50% and negative margins half the width and height of the element. That's great if you know the width and height of the element you're trying to center, but what if they are percentages?

Monday, July 01, 2013

Some cool CSS selectors’ addition in selectors level 4 – The future

cool CSS selectors
The web is constantly evolving, Some modules of CSS3 has just started making its way, specs are still in development process and more advance level CSS modules have been drafted to evolve it further, which is being referred as "Selectors level 4". Selectors have been with us since the beginning of CSS. Most awaited selector of level 4 is; Parent Selector of a given element. This advance selector will offer the possibility to target parent of any element without javaScript. There are many such new cool selectors in this level that make website management easier.

Saturday, June 08, 2013

Text-align: Justify and RWD

Text-align: Justify and RWD

Did you know that one of the most powerful tools for fluid and responsive layout has been a native feature for every browser since HTML 4?