4 Useful CSS Snippets Every UI Developer Should Know

Every day UI developers have to deal with browser compatibility and pixel-perfect UI layout. To fully understand these tasks faced by UI developers one should have the thorough knowledge of CSS and CSS3. So in this post, we try to bring you some of the most used CSS snippets that are useful for every UI developer.

#1 Align text or anything vertically

This is one of the most common tasks faced by UI developer when faced with an image slider. The text has to be vertically aligned in the div. You can align text or any element (be it single line texts, paragraphs, so on ) vertically by using CSS3 transforms.


.verticalcenter{

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

-o-transform: translateY(-50%);

transform: translateY(-50%);

}

#2 Let elements occupy full height of the window

You can think of a scenario where you want a div to stretch to fit full height of the window. Then you should try the following CSS code below.


html,

body {

height: 100%;

}

Let us apply 100% height to the div element:


div {

height: 100%;

}

#3 Auto width for table columns

Tables are not easy to deal with when it comes to setting the width of each cell. But there is a simple solution to bring appropriateness in the text wrapping by adding “white-space:nowrap” to the “td” element.


td {

white-space: nowrap;

}

#4 Wrap text inside an element that is too long

If the intended text inside an element is overflowing outside or it is longer than their containers. Then you can use this simple CSS snippet to fix.


pre {

white-space: pre-line;

word-wrap: break-word;

}

fit the text inside a container

Conclusion:

Hope you like these CSS snippets which are useful for everyday tasks. Bookmark this page and try to memorize these tricks to improve your developing skills.

Buy me a coffeeBuy me a coffee
Facebooktwittergoogle_plusredditpinterestlinkedinmail