{"id":982,"date":"2015-01-14T17:09:41","date_gmt":"2015-01-14T17:09:41","guid":{"rendered":"https:\/\/intelligentbee.com\/blog\/?p=982"},"modified":"2024-08-28T12:30:47","modified_gmt":"2024-08-28T12:30:47","slug":"10-awesome-css-tips-tricks","status":"publish","type":"post","link":"https:\/\/intelligentbee.com\/blog\/10-awesome-css-tips-tricks\/","title":{"rendered":"10 Awesome CSS Tips and Tricks"},"content":{"rendered":"<p>This is a collection of CSS tips, tricks, and fixes, or whatever you want to call them, that I stumbled upon along the way. I have to say from the very beginning that you can\u00a0find most of these, if not all of them, familiar. On the other hand, I really hope that some of you\u00a0might learn something new from this post. So let&#8217;s begin.<\/p>\n<p><!--more--><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_68_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/intelligentbee.com\/blog\/10-awesome-css-tips-tricks\/#1_How_to_add_another_border\" title=\"1. How to add another border\">1. How to add another border<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/intelligentbee.com\/blog\/10-awesome-css-tips-tricks\/#2_How_to_add_ellipsis_dynamically_with_CSS\" title=\"2. How to add ellipsis dynamically with CSS\">2. How to add ellipsis dynamically with CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/intelligentbee.com\/blog\/10-awesome-css-tips-tricks\/#6_How_to_avoid_mobile_font_boosting\" title=\"6. How to avoid mobile font boosting\">6. How to avoid mobile font boosting<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/intelligentbee.com\/blog\/10-awesome-css-tips-tricks\/#8_How_to_better_position_your_background_images\" title=\"8. How to better position your background images\">8. How to better position your background images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/intelligentbee.com\/blog\/10-awesome-css-tips-tricks\/#9_How_to_dynamically_calculate_dimensions_with_CSS\" title=\"9. How to dynamically calculate dimensions with CSS\">9. How to dynamically calculate dimensions with CSS<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_How_to_add_another_border\"><\/span>1. How to add another border<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you ever find yourself in the situation where you need to display an element with two borders or you just want to give your border some space in or out of the box,\u00a0<strong>outline<\/strong> may come in handy:<\/p>\n<pre class=\"lang:css decode:true \">.div{\r\n    outline: 1px #000 solid;\r\n    outline-offset: 5px;\r\n}<\/pre>\n<p>You can easily try it out\u00a0\u00a0and you might also want to check which browsers support it.<\/p>\n<p>As you can see, the offset is another cool thing that you can play with when using outline.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_How_to_add_ellipsis_dynamically_with_CSS\"><\/span>2. How to add ellipsis dynamically with CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>If you ever want to shorten a longer text, but you don&#8217;t want to just suddenly cut the text, you can use:<\/p>\n<pre class=\"lang:css decode:true \">.div{\r\n    overflow:hidden;\r\n    white-space: nowrap;\r\n    text-overflow: ellipsis; \r\n}<\/pre>\n<p>You can see an example <a href=\"http:\/\/jsfiddle.net\/mqzvzckh\/\" target=\"_blank\" rel=\"noopener\">here<\/a>\u00a0or check which browsers support this <a href=\"http:\/\/caniuse.com\/#search=text-overflow\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h3>3. How to easily clear the floats in your element<\/h3>\n<p>Let&#8217;s say that you have an element with two inline children. One has to float to the left, and one to the right. The problem that you&#8217;re going to see is that the parent\u00a0element will not take the height of the children elements.<br \/>\n<a href=\"http:\/\/jsfiddle.net\/s2aqqnhs\/\" target=\"_blank\" rel=\"noopener\">Example<\/a><\/p>\n<p>You can fix this by using a third child element which has &#8220;clear:both&#8221; property, or you can just add the <strong>overflow<\/strong> property to your parent element with the value of\u00a0auto, hidden or scroll.<\/p>\n<pre class=\"lang:css decode:true \">.customBox{\r\n    overflow:auto;\r\n    \/\/overflow:hidden;\r\n    \/\/overflow:scroll;\r\n}<\/pre>\n<p><a href=\"http:\/\/jsfiddle.net\/s2aqqnhs\/1\/\" target=\"_blank\" rel=\"noopener\">Fixed example<\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>4. How to style placeholders<\/h3>\n<p>Have you ever had\u00a0the need to style a placeholder? Then,for example, you may know that is not as\u00a0easy at it is to style a text. Using the next few lines will do\u00a0the trick:<\/p>\n<pre class=\"lang:css decode:true \">::-webkit-input-placeholder {}\r\n::-moz-placeholder {}\r\n:-ms-input-placeholder {}<\/pre>\n<p>See it work <a href=\"http:\/\/jsfiddle.net\/0p39dofv\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h3>5. How to keep your padding and borders inside<\/h3>\n<p>There is a thing I never liked about paddings and borders: in most browsers, I had to take them into consideration when thinking about my element&#8217;s width.<br \/>\nThere is a CSS property that you can use so that you force the element to display them inside your box without affecting the width.<\/p>\n<pre class=\"lang:css decode:true \">box-sizing: border-box;<\/pre>\n<p>Interested in it&#8217;s browser support? Find it <a href=\"http:\/\/caniuse.com\/#search=box-sizing\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"6_How_to_avoid_mobile_font_boosting\"><\/span>6. How to avoid mobile font boosting<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You might have\u00a0noticed that some of your texts look bigger than they should when browsing your website from some mobile devices. That&#8217;s called font boosting and appears when the height of the element is set dynamically. One way to stop this is by adding the next line of code at the beginning of your CSS file:<\/p>\n<pre class=\"lang:css decode:true \">html * {max-height:1000000px;}<\/pre>\n<p>This will set the max-height property with an unreachable value for all your elements and stop the font boosting.<\/p>\n<p>&nbsp;<\/p>\n<h3>7. How to add multiple background images<\/h3>\n<p>If you ever need to add multiple background images to an element, you need to know that you can easily do this by just adding the URLs and other background properties\u00a0separated by a comma.<\/p>\n<pre class=\"lang:css decode:true \">.div{\r\n    background-image: url(\"http:\/\/imageUrl.jpg\"), url(\"http:\/\/imageUrl.jpg\");\r\n    background-position: left top, right top;\r\n    background-size: 50px auto;\r\n    background-repeat: no-repeat, repeat-y;\r\n}<\/pre>\n<p>You can see an example <a href=\"http:\/\/jsfiddle.net\/u01726qe\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"8_How_to_better_position_your_background_images\"><\/span>8. How to better position your background images<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>It&#8217;s good to know that you can specify exactly\u00a0where you want your background image to be positioned inside your element. You can add the exact number of\u00a0pixels you want it to distance itself\u00a0from the element extremity.<\/p>\n<pre class=\"lang:css decode:true \">.div{\r\n    background-position: right 200px top 40px;\r\n}<\/pre>\n<p>See it working <a href=\"http:\/\/jsfiddle.net\/nyzohufo\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p>Browser support, <a href=\"http:\/\/caniuse.com\/#feat=multibackgrounds\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"9_How_to_dynamically_calculate_dimensions_with_CSS\"><\/span>9. How to dynamically calculate dimensions with CSS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>A pretty cool thing added to CSS is the property that let us to calculate dimensions dynamically. The property is simply called <strong>calc<\/strong> and you can see it working <a href=\"http:\/\/jsfiddle.net\/vs5rg7fk\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<pre class=\"lang:css decode:true \">.div{\r\n    width:calc(100% - 125px);\r\n}<\/pre>\n<p>You just need to still be careful about its browser support, <a href=\"http:\/\/caniuse.com\/#search=calc\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h3>10. How to scale your elements relative to the viewport dimensions<\/h3>\n<p>When speaking of element dimensions relative to the viewport sizes we should consider using these units: <strong>vw, vh, vmin, vmax<\/strong>.<br \/>\nSetting an element&#8217;s width to 25vw and its height to 35vh will make it 25% of your viewport width and 35% of your viewport height.<\/p>\n<pre class=\"lang:css decode:true \">.div{\r\n    width:40vw;\r\n    height:70vh;\r\n}<\/pre>\n<p>You can play with it <a href=\"http:\/\/jsfiddle.net\/6gLw15en\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.<br \/>\nThis is it&#8217;s browser support, <a href=\"http:\/\/caniuse.com\/#search=vw\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<p><em>I hope these tips helped! Let me know your thoughts in the comment section below.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is a collection of CSS tips, tricks, and fixes, or whatever you want to call them, that I stumbled [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":1175,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[98,103,107,115,126,140,174,188,245,247,254],"yst_prominent_words":[5,1037,1236],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/posts\/982"}],"collection":[{"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/comments?post=982"}],"version-history":[{"count":3,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/posts\/982\/revisions"}],"predecessor-version":[{"id":133208,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/posts\/982\/revisions\/133208"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/media\/1175"}],"wp:attachment":[{"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/media?parent=982"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/categories?post=982"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/tags?post=982"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/intelligentbee.com\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=982"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}