CSS3 gradients – quick tutorial
CSS3 gradients aren’t something new, but because of cross browser incompatibility, they weren’t used that much until now. However, you should know that they are available to use in Safari, Chrome (Webkit) and Mozilla Firefox (from 4+) browsers. With this post I will show you how to use CSS gradients for some major browsers: Firefox, Safari, Chrome and IE (surprise!). But first… why use CSS3 gradients? If CSS can help you to get rid of extra images, then you should consider this as a good solution for your design, because: You will get fewer HTTP requests CSS gradients are scalable,…
How to solve common IE bugs
Lately, I wrote more about HTML5, jQuery, CSS3 features and its awesomeness. Today’s article is about Internet Explorer common CSS bugs and how to solve them. You may ask me “why this article?” and you have all the reasons to do that. If you read some of my previous articles, then you know I’m a CSS3, jQuery addicted. But sometimes, when working on some projects that require cross-browser compatibility, you need to know how to action when you encounter IE bugs. Modern browsers are constantly evolving and their bugs or strange behaviors are always fixed due new version releases. But what about old…
10 Web Usability tips for your website
At the beginning, perhaps you were developing websites just for fun or you were just learning some new tricks, but now, when you are developing a website or a web application you can’t afford to skip the usability basics rules. In this article we’ll try to remember some basic, unwritten web usability rules. 1. Place the logo always in the left corner of the viewport As drivers use to search for green traffic light to start leaving the intersection, users search the logo in the left side of the website to click on it. They are used to click on…
How to create slick effects with CSS3 box-shadow
Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop's Blending options. But now, since CSS3 "hit the charts", you don't need Adobe's design tool to add a drop shadow or an inner shadow to a box. Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore. box-shadow property The box-shadow property allows you to add multiple shadows (outer or inner) on box elements. To do that you must specify values as: color, size, blur and offset. <shadow> = inset? && Rocket science? Not at all, here's an quick example:…