WordPress
I’m proud to announce my latest CSS experiment—The CSS Social Buttons. They are not another "pure CSS3" or "HMTL5 canvas" icons. These icons use the basic traditional background-image technique. The purpose of these icons is to provide a cross-browser, consistent and versatile CSS that can be applied in any design, app or theme. Basically, it […]
Advertise here with BSA
Technorati Tags: blog, rss, feed, news, google
Original post by Nick La
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. However, I recently ran into a problem with that trick while designing the PhotoTouch theme. The issue is that the […]
Advertise here with BSA
Technorati Tags: blog, blogging, google
Original post by Nick La
Technorati Tags: blog, blogging, google
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 last month to explore two aspects of SVG with interesting potential for the design of original interfaces: clipping paths and scalable 2D motion graphics. […]
Advertise here with BSA
Technorati Tags: blog, blogger, feed, news
Original post by Nick La
Technorati Tags: blog, blogger, feed, news
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 landscape view. To see this in action, view the bug demo page with your iPhone and rotate the phone from portrait […]
Advertise here with BSA
Technorati Tags: blog
Original post by Nick La
Technorati Tags: blog
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 notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn’t work any more. Web design needs […]
Advertise here with BSA
Technorati Tags: blog, rss, feed, google
Original post by Nick La
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 notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn’t work any more. Web design needs […]
Advertise here with BSA
Technorati Tags: blog, blogger, blogging, feed, news, google
Original post by Nick La
Technorati Tags: blog, blogger, blogging, feed, news, google
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 notebooks, tablet devices such as iPad or Playbook to access the web. So the traditional fixed width design doesn’t work any more. Web design needs […]
Advertise here with BSA
Technorati Tags: blog
Original post by Nick La
Technorati Tags: blog
Due to a number of requests, I’m 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 checks if the scrollbar top position is greater than certain value, then fade in […]
Technorati Tags: blog, feed, google
Original post by Nick La
As much as we don’t 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 web pages differently due to the inconsistent rendering engine. We typically use IE conditional comments to fix the IE issues. But there are more ways than the conditional comments…
View Demo IE Specific
Technorati Tags: blog, blogger, google
Original post by Nick La
One of the common problems we face when coding with float based layouts is that the wrapper container doesn’t expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But did you know you can also use the overflow property to fix this problem? It’s not a new CSS trick either. It’s been documented before long long ago. Today I would like to revisit the topic along with a few tips.
View Demo Clear Floats
Original post by Nick La