Today we have a guest post by Andy Walpole sharing his experience from creating the Lightbox Ultra on Mozilla Demo Studio. Several years ago developer Lokesh Dhakar created the familiar Lightbox scri...
Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. ...
One of the common challenges when designing responsive design for mobile is the navigation menu. If the site has many sections or pages, it gets challenging to squeeze all the items into a small mobi...
Today I would like to share the design process of an ecommerce theme that I recently designed. Shopdock is an Ajax ecommerce theme where the user can quickly add/remove items to the cart with a singl...
Im proud to announce my latest CSS experiment—The CSS Social Buttons. They are not another "pure CSS3" or "HTML5 canvas" icons. These icons use the basic traditional background-...
Previously I wrote two tutorials on how to style the image element with CSS3 inset box-shadow and border-radius. The trick is to wrap the image with a span tag and apply the image as background-image...
Responsive web design is no doubt a big thing now. If you still not familiar with responsive design, check out the list of responsive sites that I recently posted. To newbies, responsive design might...
At FITC Toronto in May of this year, Shawn Pucknell, FITC’s director approached James White to develop the creative for the following years event, FITC Toronto 2012. “Ive spoken at FITC t...
After years of quarantine, the Scalable Vector Graphics is finally raising fame as a feature of HTML5 with full native browser support. Vlog.it, by Marco Rosella, is an experimental site launched las...
When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesnt render the CSS style perfectly. However, if the image is applied as background-image, you can ad...
Those who create responsive design for iPhone may be aware of the viewport scaling bug in iPhone Safari. The bug occurs when you set the viewport width to device-width and rotate the phone to landsca...
I havent written any Photoshop tutorials for a while. Today Im going to share a simple tutorial on how to create reusable background patterns with Photoshop and CSS. I learned this trick from designi...
Although CSS3 @font-face is supported by most major browsers (IE, Firefox, Chrome, and Safari), but not all. When it doesnt, your custom fonts might break the layout or come out with undesired result...
While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and h...
Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebook...
Due to a number of requests, Im writing a detail tutorial on how to create an animated scroll to top as seen on Web Designer Wall. It is very simple to do with jQuery (just a few lines of code). It c...
One of the nice enhancement in HTML5 web form is being able to add placeholder text to input fields. Placeholder attribute allows you to display text in a form input when it is empty and when it is n...
As much as we dont like to deal with the IE bugs, we still have to face it because your boss and visitors are still using Explorer. It gets frustrating when different versions of Explorer displays we...
One of the common problems we face when coding with float based layouts is that the wrapper container doesnt expand to the height of the child floating elements. The typical solution to fix this is b...
You are no longer following . Undo?
English
Suomi
Svenska