When you write CSS, there are some problems you may run into. Then, to overcome the situation, you’ll need to use some small and effective CSS tricks.
In this article I’ll try to show you some tips and tricks that can definitely help you when writing CSS.
I’ll begin with classical HTML buttons. When trying to style buttons like
input type"submit" or
button, if you want to achieve pixel perfection in your designs, don’t forget about the following:
Want to see some buttons that are using the above snippet?
I’m sure you already know that using pseudo-elements like
:after helps you specifying which content should be inserted before (or after) the content of that element. Besides that, elements like
img have no content, therefore, the pseudo-elements will not render anything for them. An exception is the
hr element, which, for some reason, allows adding pseudo-elements to it.
Also, keep in mind the difference between
::before. To summarize it, IE8 is the only reason to use the single colon syntax.
Gradient background for whole body
If you tried before to add a CSS3 gradient for your
body, then you noticed that it will not stretch and it will repeat instead. To fix that, just add the following lines:
Fake transitions on gradients
Speaking of gradients, want transitions for CSS3 gradients? Unfortunately, there’s no browser support for gradients transitions (yet).
But, this can be done using some tricks like:
:hoverto give the illusion that the gradient is transitioning. Actually, it’s shifted using the Y-axis only. This technique is used by Twitter’s Bootstrap.
- The second option (and my favorite) is to transition the
background-colorand apply a gradient image to it which fades to transparent value. Again, this gives the illusion of an transitioning gradient.
Let’s say you’d like to use
float for a horizontal list. When doing that, a horizontal space will appear between your
inline-block elements. To avoid that, you’ll need to use a dirty (also good) method, namely adjust your markup.
So, instead using a clean structure like the below one:
you’ll have to use something like this:
Read more about the CSS display
inline-block value: Why it rocks, and why it sucks.
When height 100% actually works?
It’s actually quite simple: when you set a
height: 100% for an element, always think about the parent’s height. If the parent’s height is not defined in your styles, then the inner element will have height: 100% of nothing.
Please consider the following working (and rough) example:
In the above example, the green colored
height: 100%, will stretch and fill the whole
400px vertical space. Also, you can check my CSS3 progress bars for a live example of the above trick.
Rounded corners for tables
The trick consist of setting the table’s
border-collapse‘s default value is
separate, you’ll only need to set it to
collapse for IE7 and lower ( for a graceful degradation).
Check my CSS3 tables with rounded corners article to read more about it.
Inputs box model
When designing a search box, for example, you’ll notice that after setting the same
width for your
input type="submit" and
input type="text", the result will most likely disappoint you.
Quite frustrating, but the thing is that
input type="submit" has a
border-box box model, while
input type="text" has a
content-box box model (on IE and FF).
To overcome this kind of of issue, you can set for both form’s inputs (text and submit) the same box sizing model. This can be done using CSS3
The above are just some tricks I often use when writing CSS. I found them very useful, and I sincerely wish I knew them at the beginning.
I hope you enjoyed these and feel free to share yours by adding a comment below. Thank you for reading!
Fancy FAQ design using CSS only
CSS3 signup form