How to deal with :hover on touch screen devices

read post

Are you planning a web project? Not sure what mobile strategy is right for you? Read our short educational article that can help you make the right choice. This article is a small case study about dealing with hover effects on touch screens. As you know, :hover behavior doesn’t exist on touch screen devices. So when you… Read more »

Roundup of useful tools for custom styled Google Maps

read post

Small collection of tools and tutorials to get you started with custom Google Maps API v3. Fast and easy tutorial about adding custom Google Maps to website – gMaps API v3 Maps are often placed on a company website to help customers find their way there. For that, Google Maps is excellent. But wouldn’t it… Read more »

CSS3 rounded responsive drop shadows & glows

read post

And by rounded drop shadow we mean this effect:

All kinds of nice visual effects are now added to web pages using pure CSS3, and no images. When it comes to creating box shadows, the most used property is – not surprisingly – the box-shadow. A lot of tutorials are available for achieving warped shadow effect. This is just one of them:

Oddly enough, to create a round drop shadow effect like on the picture above, most front end developers still use images. I guess images are somehow seem faster to slap into the code, especially with that deadline looming. And in most cases images work just fine. Still, there are some very good reasons to stop using images and use CSS3 instead… Read more

23 free high resolution blurred backgrounds

read post

Happy freebie Saturday, well since we missed Friday:).
Here is a pack of blurred backgrounds we all love and sometimes overuse:). Free for personal and commercial use, no attribution required.

What’s included in a package:

  1. PSD size 2660px x 1995px
  2. 23 JPG files size 2660px x 1995px
  3. 23 JPG files size 400px x 300px for Dribbble players.

DOWNLOAD 23 free blurred backgrounds

See all backgrounds thumbnails

New service – Multilingual websites

read post

Prowebdesign is launching a new service package – multilingual website. This package is dedicated to multinational businesses, or anyone who wants to gain international exposure. You deliver us your copy in one language; we translate it in up to 7 foreign languages, build a custom dynamic website, and populate it with all the copy and translations! All… Read more »

Good article on CSS Flexible Box Layout Module from SmashingMag

read post

CSS3 Flexible Box Layout Explained …This is invaluable for flexible layouts, Because it means that your padding, margin and border values will always be honored; the browser will simply change the width of the elements until they fit the parent. If the parent changes in size, so will the flexible boxes within it… W3C working… Read more »

Yet another boilerplate for responsive (mobile) web design. YAMB.

read post
A new version of this template – YAMB v.2 – is available. Please use the new version. This version of YAMB is not maintained anymore.
YAMB v.2 tutorial and download page

YAMB   is a small set of tools and best practices that allow web designers to build responsive websites faster.
YAMB includes features that are requested by the clients all the time:

  • Fluid grid.
  • Drop-down menu with possibility of unlimited sub-levels or/and mega subs.
  • For small screens drop-down menu is automatically converted into select box.
  • Responsive image slideshow with captions.

Screen ruler with 5px step for quick mobile / desktop prototyping and resolution testing

read post

I have made a super-simplistic “tool” which helps you resize your browser to any width x height in pixels (range 2580px x 1650px). What’s the use of it? Gives you total control: resize to ANY resolution you want, not just presets. You can test the document you’re coding locally on your computer, without even having… Read more »

Quick web design tip. Mind your @media queries while coding WP child themes

read post

New WordPress default theme, Twenty Eleven, is responsive. Which makes it really awesome:). Don’t forget about this while writing child themes. Quick tips to save you some time and head scratching (“doh, why is it happening on mobile now?” kind): Copy at least @media (max-width: 800px){} into child theme’s CSS file As soon as you… Read more »

How to create glossy gradient menu bar in PhotoShop and then recreate it only with CSS3 and HTML5 (no images)

read post

This tutorial consists of two parts. First one explains how to make glossy red menu bar (smartphone style) in PhotoShop. Second part explains how to recreate this bar in CSS3 without using any background or border images. The tutorial is for people who are regular users of PhotoShop and are on friendly terms with CSS3…. Read more »