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.
Buttons styling
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:
view source
print?
/* removes extra side spacing in IE
*/
.button{
overflow: visible;
}
/* removes extra inner spacing in
Firefox */
.button::-moz-focus-inner{
border: 0;
padding: 0;
}
Want to see some
buttons that are using the above snippet?
·
Just
some other awesome CSS3 buttons
·
Design
a beautiful CSS3 search form
·
Cool
CSS3 search box
Using
pseudo-elements
I’m sure you already know that using
pseudo-elements like :before and :after helps you specifying which content
should be inserted before (or after) the content of that element. Besides that,
elements like input or img have no content, therefore, the pseudo-elements will
not render anything for them. Anexception is the hr element, which, for some
reason, allows adding pseudo-elements to it.
Also, keep in mind the difference between :before and ::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:
view source
print?
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
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:
Use background-position on :hover to
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.
view source
print?
a{
background: linear-gradient(orange, red) repeat-x;
display: inline-block;
padding: 20px;
}
a:hover{
background-color: red;
background-position: 0 -15px;
transition: background-position .1s linear;
}
The second option
(and my favorite) is to transition the background-color and apply a gradient
image to it which fades to transparent value. Again, this gives the illusion of
an transitioning gradient.
view source
print?
a{
background-color: orangered;
background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
transition: background-color .1s linear;
display: inline-block;
padding: 20px;
}
a:hover{
background-color: red;
}
Inline-block gaps
Let’s say you’d like to use
inline-block instead 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:
view source
print?
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
you’ll have to use
something like this:
view source
print?
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
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:
view source
print?
<div id="parent">
<div id="child">2</div>
</div>
and
view source
print?
#parent{
height: 400px;
padding:10px;
background:red;
}
#child{
height: 100%;
background:green;
}
In the above example, the green
colored #child, using 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-spacing to The border-collapse‘s default value is
separate, you’ll only need to set it to collapse for IE7 and lower ( for a
graceful degradation).
view source
print?
table {
*border-collapse: collapse; /* IE7 and lower */
border-spacing: 0;
border-radius: 5px;
}
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 height or
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 box-sizing:
view source
print?
box-sizing: content-box | padding-box | border-box;
Conclusion
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.
No comments:
Post a Comment