How many times haven't you heard this line: “There must be a CSS for that!”. You might have said to yourself: “yeah, right, like CSS could be the answer to any coding dilemma”.
You'd be surprised: in way too many cases it actually turns out to be that “magic formula” you need. And it would be a pity not to make use of CSS's helpful resources. With only one or a few more lines of code CSS works its magic for you, lifting a heavy weight off your shoulders!
Enough beating around the bush now: we'll go ahead and share with you our top favorite CSS tips that will help you improve and thus speed up your workflow:
1. Center Your Content Vertically
A bit frustrated for there is no “official” method (yet) for centering content within its container in CSS?
We've been there, too, you know. And here is the solution that we're happy to share with you after our own experience of striving to align text in CSS: the line-height property.
Let's use it in an example:
.nav li{
line-height:50px;
height:50px;
}
Note: make sure that your line-height value is (almost) the same as your container's height!
Furthermore, you need to keep in mind that this method applies only to single line texts. If you're dealing with a multiple lines text, going for this solution will only add too much white space to your website (it's logical if you consider that the same line-height value will be applied to the space between those lines).
So, stick to single line texts such that of navigation menus when applying this CSS trick.
2. Dealing With CSS Tables
We'll just have to accept it now: there's nothing we can do to turn back the hands of time and make up for all the time “wasted” when we didn't use display: table for handling CSS layout.
So, let's sum up our “findings” regarding this CSS “trick”.
First, you can use display: table for efficiently:
- setting equal heights for neighboring columns (it's true, you can also use JavaScript for that, but: oh boy! isn't JS a lot heavier and packed with its own particular drawbacks!)
- centering an item, vertically, next to a larger one
And now if you're still a big hesitant to replace the conventional “table layout” with this new “formula”, let us add that unlike it, this “new” (although it's been specified in CSS even from its 2.1 version) can quickly be turned responsive: you just need to add a breakpoint for removing the display: table.
There' more! Here are other 2 “great things” that you can achieve with this CSS solution:
- float-less grids
- tables without the <table>
3. A Few Words About Transition
How are you responding to the challenge of puling of hover effects on the websites that you're building these days (for gradually changing the menus or the images' colors)? Admirably? OKish? Or really badly?
Well, if you've been having trouble creating really smooth effects, CSS is ready to lend you a hand. Just take a look at this example here:
.entry h2:hover{
color:#f00;
transition: all 0.3s ease;
}
Why should you replace the old JavaScript technique for creating hover effects? Because you're in a highly competitive world (the online world), where you simply can't afford not reaching for “perfection” (instead of "second best").
In other words: why should you stick to jarring jQuery animations (or to the much heavier JavaScript) when you could go for a more time-effiecient (just an additional line of code, no need for you to learn a new language if you're a coding newbie) smoother hover effect?
So, it's a win win situation: for you and for your website's future visitors!
4. Aim for The Absolute Positioning
Centering in CSS is probably the ultimate source of “frustrations”!
With all those different elements, requiring different CSS properties before they can be “tamed”/centered, “absolute positioning” sure sounds like a beautiful utopia, wouldn't you agree?
But it can become reality: you just need to start using the position property. Like in this example here:
position:absolute; top:20px; right:20px
Just type in bottom, top, left and right and add a pixel value to each one of them, thus keeping a steady control of where your element will be positioned on your website.
For instance, in the above example we've set that the element should be positioned at 20x from the top.
Note: this CSS trick works wonders when you're dealing with a single child element (otherwise the other element within the same container will get affected)
5. Pull Off the “Storybook” Effect
You love it, we love it, they (your website's visitors) sure love it!
The storybook effect, you know, the one focusing on capitalizing the first letter of a page/paragraph is still so loved since it reminds everyone of all those old story books brightening up their childhood memories.
So, why not recreate this attention-grabbing typographical effect on your website? Especially, when it's so quick and easy to do it in CSS?
The :first letter pseudo element is the CSS “trick” you need to use for puling off this "traditional printed book" effect.
p:first-letter{
display:block;
float:left;
margin:3px;
color:#f00;
font-size:300%;
}
You can just see, in the example above, how you can use :first letter, plus specific pixel values, for targetting the very first letter of the first line of the selected element on your website: here it makes it 3px wider than the rest of the letters in the text.
And these are just 5 CSS tricks that can help you create better looking websites. They “aim” for guaranteeing both a better user experience and less sleepless nights and moments of frustration for you and your team, too.
Give them a try, run some tests and find our if they'll boost your efficiency as web developer/s, too!
