{"id":18031,"date":"2022-06-23T09:19:53","date_gmt":"2022-06-23T07:19:53","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=18031"},"modified":"2023-10-27T12:46:58","modified_gmt":"2023-10-27T10:46:58","slug":"advanced-css-tricks-that-you-have-to-know","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/","title":{"rendered":"Advanced CSS Tricks That You Have To Know"},"content":{"rendered":"\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-9d765a92      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#why-is-css-important\" class=\"uagb-toc-link__trigger\">Why is CSS Important?<\/a><li class=\"uagb-toc__list\"><a href=\"#fixed-table-layout\" class=\"uagb-toc-link__trigger\">Fixed Table Layout<\/a><li class=\"uagb-toc__list\"><a href=\"#colour-fade-on-hover\" class=\"uagb-toc-link__trigger\">Colour Fade on Hover<\/a><li class=\"uagb-toc__list\"><a href=\"#using-svg-for-icons\" class=\"uagb-toc-link__trigger\">Using SVG for Icons<\/a><li class=\"uagb-toc__list\"><a href=\"#curve-text-around-a-floated-image\" class=\"uagb-toc-link__trigger\">Curve Text Around a Floated Image<\/a><li class=\"uagb-toc__list\"><a href=\"#auto-sizing-columns\" class=\"uagb-toc-link__trigger\">Auto Sizing Columns<\/a><li class=\"uagb-toc__list\"><a href=\"#creating-shapes\" class=\"uagb-toc-link__trigger\">Creating Shapes<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#square\" class=\"uagb-toc-link__trigger\">Square<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#circle\" class=\"uagb-toc-link__trigger\">Circle<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#triangle\" class=\"uagb-toc-link__trigger\">Triangle<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#egg\" class=\"uagb-toc-link__trigger\">Egg<\/a><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#final-thoughts\" class=\"uagb-toc-link__trigger\">Final Thoughts<\/a><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<p>One of the most significant changes in web design was the <strong>separation of style and content<\/strong>. CSS\u2014which stands for <strong>Cascading Style Sheet<\/strong>\u2014is the style side of that separation, and it has come a long way since those early days.<\/p>\n\n\n\n<p>Naturally, there are many <strong>useful advanced CSS tricks to learn<\/strong>, from the basics to things that are a little more advanced. Like many things in life, CSS experience makes the process of <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/pro-tips-for-creating-better-web-experiences\/\">web design faster and smoother<\/a>. A talented designer will be able to work their way through a design problem, but an <strong><em>experienced<\/em> designer won\u2019t need to work through the problem<\/strong> because they\u2019ll probably have encountered it before.<\/p>\n\n\n\n<p>We can\u2019t give you experience, of course, but we can share some of the fruits of experience to help you deal with some of the CSS conundrums you are likely to come across.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-is-css-important\">Why is CSS Important?<\/h2>\n\n\n\n<p>CSS is a critical aspect of web development <strong>because of accessibility<\/strong>. If accessibility wasn\u2019t an issue, the easiest way to make a good-looking web page would be to create the entire design in a graphics editing package and use the image instead of coding HTML and CSS files. But what do we mean by accessibility?<\/p>\n\n\n\n<p>Though it has wider-reaching uses, accessibility essentially means that a website will work well with tools and technologies that help people with disabilities\u2014such as visual impairment\u2014browse the content on the site. <strong>The key to achieving this accessibility is ensuring that a web page \u201cdegrades gracefully<\/strong>\u201d.<\/p>\n\n\n\n<p>Degrading gracefully means that if for whatever reason, there are problems loading the website, the content of the site will still be present and accessible. Such problems could be images being temporarily inaccessible, older browsers not supporting all the features the website makes use of or anything else that would interfere with the way the page is rendered.<\/p>\n\n\n\n<p>This is where CSS comes in. With accessible web design, all of the content is stored in the HTML code, <strong>whereas all of the stylings are contained in the CSS files<\/strong>. In the worst-case scenario, a user\u2014be it a person, bot, or piece of accessibility software\u2014will be able to access the text and images on the page.<\/p>\n\n\n\n<p>Now, let\u2019s get to those <strong>advanced CSS tricks<\/strong> that you have to know.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"436\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/iStock-1353350161-1024x436.jpg\" alt=\"\" class=\"wp-image-18036\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/iStock-1353350161-1024x436.jpg 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/iStock-1353350161-300x128.jpg 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/iStock-1353350161-768x327.jpg 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/iStock-1353350161-1536x654.jpg 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/iStock-1353350161-2048x872.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">CSS is key because of accessibility.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-fixed-table-layout\">Fixed Table Layout<\/h2>\n\n\n\n<p>Tables are incredibly useful for displaying a variety of data, and even for certain formatting situations (though you shouldn\u2019t use tables for anything other than tabular data). The default behaviour of a table is to <strong>set the width of the columns to the width of the content its cells contain<\/strong>, but this can lead to a messy design, especially if you have multiple tables that all end up with differently-sized columns.<\/p>\n\n\n\n<p>To make matters worse, the default behaviour can be somewhat unpredictable when you are first getting to grips with it. For example, you can specify a column\u2019s width as a percentage of the overall width, but giving those columns a fixed width will just get ignored by the rendering engine in most cases.<\/p>\n\n\n\n<p>Enter fixed table layout. By setting the <strong>table-layout<\/strong> property of a table to \u201cfixed\u201d, you can gain more predictable and intuitive control of your table\u2019s format. Suddenly, things like hiding overflow work, and the columns will be the width you set them to regardless of the content they contain. And the good news is that setting a table to a fixed layout is as simple as;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">table<\/span> {\n    <span class=\"hljs-attribute\">table-layout<\/span>: fixed;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Colour Fade on Hover<\/h2>\n\n\n\n<p>Hover effects are, of course, visually appealing. They can not only look very good when used properly, but they also give a web page a more dynamic feel, making it feel less like a static wall of text and images. Beyond the visual benefits, <strong>hover effects also serve an accessibility purpose<\/strong>, making it absolutely clear to the viewer that they are hovering over a dynamic element such as a link.<\/p>\n\n\n\n<p>Colour fade is a little more complicated than fixed table layout as it requires two CSS properties. The first of these is your standard hover type which needs to be set as normal. The second is the <strong>transition<\/strong> property, in which you will put the root of your class. Using this property, you will tell the transition and how it will fade to the new colour. It should look something like this;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.element<\/span> {\n    <span class=\"hljs-attribute\">transition<\/span>: all <span class=\"hljs-number\">0.5s<\/span> ease;\n    <span class=\"hljs-attribute\">background<\/span>: blue;\n}\n\n<span class=\"hljs-selector-class\">.element<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n    <span class=\"hljs-attribute\">background<\/span>: yellow;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>With that code, the element in question will fade from a blue background to a yellow one when the mouse hovers over it, and back again to blue when the mouse leaves.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using SVG for Icons<\/h2>\n\n\n\n<p>SVG\u2014<a href=\"https:\/\/www.adobe.com\/creativecloud\/file-types\/image\/vector\/svg-file.html\" target=\"_blank\" rel=\"noopener\"><strong>Scalable Vector Graphics<\/strong><\/a>\u2014is a type of image format that stores a mathematical representation of the image in question. To explain this; imagine a regular image of a curved line. If you expand that image using conventional means, it will start to get pixellated. <strong>SVG files don\u2019t store the pixels, they store mathematical formulas that describe the curve<\/strong>. The benefit of this is that the image can be shrunk or blown up as much as you want without affecting the quality.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"681\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/Developer-survey-1024x681.jpg\" alt=\"survey, developer types, kinds of developers, survey, Italy\" class=\"wp-image-17933\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/Developer-survey-1024x681.jpg 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/Developer-survey-300x200.jpg 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/Developer-survey-768x511.jpg 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/Developer-survey-1536x1022.jpg 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/Developer-survey-2048x1363.jpg 2048w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/Developer-survey-600x400.jpg 600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Scalable Vector Graphics are great for working logos and other kinds of graphics without worrying about pixelation.<\/figcaption><\/figure>\n\n\n\n<p>SVG images can be included in a webpage using the <strong>img<\/strong> markup as you would with any regular image but with the advantage that they can be resized <strong>without having to worry about the quality of the image being ruined<\/strong>. It should be noted that there are some compatibility things to consider, including earlier versions of Android\u2019s browser and Internet Explorer 8 and below.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Curve Text Around a Floated Image<\/h2>\n\n\n\n<p>Formatting text around an image is nothing new, of course, but what <em>is<\/em> quite new is the ability to curve around images and other elements. Particularly useful when dealing with round images. The code to do so looks like this;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.circle<\/span> {\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">250px<\/span>;\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">250px<\/span>;\n    <span class=\"hljs-attribute\">float<\/span>: left;\n    <span class=\"hljs-attribute\">shape-outside<\/span>: <span class=\"hljs-built_in\">circle<\/span>();\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Auto Sizing Columns<\/h2>\n\n\n\n<p>We mentioned above that you shouldn\u2019t be using tables for general layout purposes. CSS has been notoriously reluctant to offer a table-like alternative\u2026 that is, until the addition of grid layouts.<\/p>\n\n\n\n<p>Grid layouts allow users to <strong>achieve a table look without having to resort to table markup<\/strong>, and it is possible to take advantage of some intuitive auto-sizing options in the process. For example;<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.grid-container<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: grid;\n    <span class=\"hljs-attribute\">grid-auto-columns<\/span>: <span class=\"hljs-number\">50px<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>As the code suggests, this will ensure all of the columns in the grid are 50px wide. The only thing left is to implement your grid in the <strong>HTML document<\/strong>. You do this simply by setting a parent div to the grid-container class (or whatever you called it) and then including a new div for each \u201ccell\u201d you want in your grid.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating Shapes<\/h2>\n\n\n\n<p>The fact that you can make shapes directly in CSS is a bit of knowledge that often gets overlooked by new and old developers alike. Of course, it\u2019s almost always been possible to create squares and rectangles\u2014simply give a div a background colour and you have just that. <strong>Using CSS, you can also create circles and ovals, a variety of triangles, trapezoids, arrows, stars<\/strong>, and much more. So much more, in fact, that it would double the length of this post to show you the code for all of them here. Instead, we\u2019re going to settle for a few examples;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Square<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-id\">#square<\/span> {\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100px<\/span>;\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100px<\/span>;\n    <span class=\"hljs-attribute\">background<\/span>: blue;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">Circle<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-id\">#circle<\/span> {\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100px<\/span>;\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100px<\/span>;\n    <span class=\"hljs-attribute\">background<\/span>: blue;\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">Triangle<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-id\">#triangle-up<\/span> {\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">border-left<\/span>: <span class=\"hljs-number\">50px<\/span> solid transparent;\n    <span class=\"hljs-attribute\">border-right<\/span>: <span class=\"hljs-number\">50px<\/span> solid transparent;\n    <span class=\"hljs-attribute\">border-bottom<\/span>: <span class=\"hljs-number\">100px<\/span> solid blue;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">Egg<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-id\">#egg<\/span> {\n    <span class=\"hljs-attribute\">display<\/span>: block;\n    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">106px<\/span>;\n    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">160px<\/span>;\n    <span class=\"hljs-attribute\">background-color<\/span>: blue;\n    <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">50%<\/span> <span class=\"hljs-number\">50%<\/span> <span class=\"hljs-number\">50%<\/span> <span class=\"hljs-number\">50%<\/span> \/ <span class=\"hljs-number\">60%<\/span> <span class=\"hljs-number\">60%<\/span> <span class=\"hljs-number\">40%<\/span> <span class=\"hljs-number\">40%<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Final Thoughts<\/h2>\n\n\n\n<p>In truth, this post barely scratches the surface of all the little useful tricks you can have in your arsenal when taking on a new <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/css-build-your-pipeline-with-style\/\">web design project<\/a>. The key to advanced CSS lies in knowing which tool is right for the job.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the most significant changes in web design was the separation of style and content. CSS\u2014which stands for Cascading Style Sheet\u2014is the style side of that separation, and it has come a long way since those early days. Naturally, there are many useful advanced CSS tricks to learn, from the basics to things that&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/\">Read more<\/a><\/p>\n","protected":false},"author":64,"featured_media":18037,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":5,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[31],"tags":[66,9952],"collections":[11388],"class_list":{"0":"post-18031","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-developer","8":"tag-css","9":"tag-languages","10":"collections-codemotion-guides","11":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Advanced CSS Tricks That You Have To Know - Codemotion Magazine<\/title>\n<meta name=\"description\" content=\"Discover advanced CSS tricks and best practices to take your skills to the next level in this guide. Shapes, SVGs, columns, hovers, and more\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Advanced CSS Tricks That You Have To Know\" \/>\n<meta property=\"og:description\" content=\"Discover advanced CSS tricks and best practices to take your skills to the next level in this guide. Shapes, SVGs, columns, hovers, and more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-23T07:19:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-27T10:46:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1975\" \/>\n\t<meta property=\"og:image:height\" content=\"1112\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Codemotion\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Codemotion\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/\"},\"author\":{\"name\":\"Codemotion\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c\"},\"headline\":\"Advanced CSS Tricks That You Have To Know\",\"datePublished\":\"2022-06-23T07:19:53+00:00\",\"dateModified\":\"2023-10-27T10:46:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/\"},\"wordCount\":1270,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2.jpg\",\"keywords\":[\"CSS\",\"Languages\"],\"articleSection\":[\"Web Developer\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/\",\"name\":\"Advanced CSS Tricks That You Have To Know - Codemotion Magazine\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2.jpg\",\"datePublished\":\"2022-06-23T07:19:53+00:00\",\"dateModified\":\"2023-10-27T10:46:58+00:00\",\"description\":\"Discover advanced CSS tricks and best practices to take your skills to the next level in this guide. Shapes, SVGs, columns, hovers, and more\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2.jpg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2.jpg\",\"width\":1975,\"height\":1112,\"caption\":\"css tricks, advanced CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web Developer\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Advanced CSS Tricks That You Have To Know\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c\",\"name\":\"Codemotion\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png\",\"caption\":\"Codemotion\"},\"description\":\"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.\",\"sameAs\":[\"https:\/\/x.com\/CodemotionIT\"],\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Advanced CSS Tricks That You Have To Know - Codemotion Magazine","description":"Discover advanced CSS tricks and best practices to take your skills to the next level in this guide. Shapes, SVGs, columns, hovers, and more","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/","og_locale":"en_US","og_type":"article","og_title":"Advanced CSS Tricks That You Have To Know","og_description":"Discover advanced CSS tricks and best practices to take your skills to the next level in this guide. Shapes, SVGs, columns, hovers, and more","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2022-06-23T07:19:53+00:00","article_modified_time":"2023-10-27T10:46:58+00:00","og_image":[{"width":1975,"height":1112,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2.jpg","type":"image\/jpeg"}],"author":"Codemotion","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Codemotion","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/"},"author":{"name":"Codemotion","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c"},"headline":"Advanced CSS Tricks That You Have To Know","datePublished":"2022-06-23T07:19:53+00:00","dateModified":"2023-10-27T10:46:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/"},"wordCount":1270,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2.jpg","keywords":["CSS","Languages"],"articleSection":["Web Developer"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/","name":"Advanced CSS Tricks That You Have To Know - Codemotion Magazine","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2.jpg","datePublished":"2022-06-23T07:19:53+00:00","dateModified":"2023-10-27T10:46:58+00:00","description":"Discover advanced CSS tricks and best practices to take your skills to the next level in this guide. Shapes, SVGs, columns, hovers, and more","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2.jpg","width":1975,"height":1112,"caption":"css tricks, advanced CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/advanced-css-tricks-that-you-have-to-know\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Web Developer","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/"},{"@type":"ListItem","position":4,"name":"Advanced CSS Tricks That You Have To Know"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/201bb98b02412383686cced7521b861c","name":"Codemotion","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/cropped-codemotionlogo-150x150.png","caption":"Codemotion"},"description":"Articles wirtten by the Codemotion staff. Tech news, inspiration, latest treends in software development and more.","sameAs":["https:\/\/x.com\/CodemotionIT"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2-600x600.jpg","author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2.jpg",1975,1112,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2-300x169.jpg",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2-768x432.jpg",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2-1024x577.jpg",1024,577,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2-1536x865.jpg",1536,865,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2.jpg",1975,1112,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2.jpg",100,56,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/css2-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Codemotion","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/codemotion-2\/"},"uagb_comment_info":0,"uagb_excerpt":"One of the most significant changes in web design was the separation of style and content. CSS\u2014which stands for Cascading Style Sheet\u2014is the style side of that separation, and it has come a long way since those early days. Naturally, there are many useful advanced CSS tricks to learn, from the basics to things that&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/18031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=18031"}],"version-history":[{"count":9,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/18031\/revisions"}],"predecessor-version":[{"id":20842,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/18031\/revisions\/20842"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/18037"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=18031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=18031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=18031"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=18031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}