{"id":22402,"date":"2014-11-25T21:01:33","date_gmt":"2014-11-25T13:01:33","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=22402"},"modified":"2018-11-26T19:40:36","modified_gmt":"2018-11-26T11:40:36","slug":"simple-css-snippets","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/simple-css-snippets\/","title":{"rendered":"10 Simple &#038; Smart CSS Snippets"},"content":{"rendered":"<p>CSS is the underlying language that gives websites its look. Although CSS is a straightforward language and easy to learn, it can be difficult to harness in some cases. Nothing to fear, there are workarounds that you can find online, and here are but just 10 handy ones that you can use.<\/p>\n<p>If you want to wrap long text, auto adjust the width of your table columns, or create a simple loading state without the use of Gifs, we have the snippets that will deliver, and more.<\/p>\n<p class=\"note\"><strong>Recommended Reading: <\/strong><a href=\"https:\/\/www.hongkiat.com\/blog\/css-snippets-for-designers\/\">50 Useful CSS Snippets Every Designer Should Have<\/a><\/p>\n<h2>1. Vertical Align Anything<\/h2>\n<p>If you work with CSS, then this will bug you: how do I align text or an element vertically of the container? Now, with the use of CSS3 Transforms, we can address this problem more elegantly, like this:<\/p>\n<pre>\r\n.verticalcenter{\r\n\tposition: relative;\r\n\ttop: 50%;\r\n\t-webkit-transform: translateY(-50%);\r\n\t-o-transform: translateY(-50%);\r\n\ttransform: translateY(-50%);\r\n}<\/pre>\n<p>Using this technique, everything \u2014 from a single line of text, a series of  paragraphs, or a box \u2014 will  align vertically. As far as browser support is concerned, CSS3 Transform works in Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9.<\/p>\n<h2>2. Stretch an Element To Full Window Height<\/h2>\n<p>In certain scenarios, you might want to stretch an element to the full window height. Basic  element resizing will only resize up to the container size so to make an element span the height of the entire window height, we need to span the top-most element: <code>html<\/code> and <code>body<\/code>.<\/p>\n<pre>\r\nhtml, \r\nbody {\r\n\theight: 100%;\r\n}<\/pre>\n<p>Then apply 100% height to any element, like so:<\/p>\n<pre>\r\ndiv {\r\n\theight: 100%;\r\n}<\/pre>\n<h2>3. Applying Different Styles Based on File Format<\/h2>\n<p>Sometimes you can have several links that you want to make look different from others, in order to make it easier to know where the link is going. This snippet below will add an icon before the link text and use different icons or images for different kinds of sources, which in this example is an external link.<\/p>\n<pre>\r\na[href^=\"http:\/\"]{\r\n    padding-right: 20px;\r\n    background: url(external.gif) no-repeat center right;\r\n}\r\n\/* emails *\/\r\na[href^=\"mailto:\"]{\r\n    padding-right: 20px;\r\n    background: url(email.png) no-repeat center right;\r\n}\r\n  \r\n\/* pdfs *\/\r\na[href$=\".pdf\"]{\r\n    padding-right: 20px;\r\n    background: url(pdf.png) no-repeat center right;\r\n}<\/pre>\n<p>Here\u2019s what it looks like.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"https:\/\/jsfiddle.net\/agusesetiyono\/3sL1r0mw\/embedded\/result,html,css\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<h2>4. Cross-Browser Image Grayscale<\/h2>\n<p>Grayscale can deliver a deeper tone to your website making it look more classy and sometimes minimalistic.  Here, we will be adding a grayscale filter to an image using SVG. Here\u2019s what we do to apply grayscale:<\/p>\n<pre>\r\n&lt;svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\"&gt;\r\n\t&lt;filter id=\"grayscale\"&gt;\r\n\t\t&lt;feColorMatrix type=\"matrix\" values=\"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\"\/&gt;\r\n\t&lt;\/filter&gt;\r\n&lt;\/svg&gt;\r\n<\/pre>\n<p>And to deliver this cross-browser, we use the <code>filter<\/code> property this way:<\/p>\n<pre>\r\nimg {\r\n    filter: url(filters.svg#grayscale); \/* Firefox 3.5+ *\/\r\n    filter: gray; \/* IE6-9 *\/\r\n    -webkit-filter: grayscale(1); \/* Google Chrome, Safari 6+ & Opera 15+ *\/\r\n}<\/pre>\n<h2>5. Animating A Gradient Background<\/h2>\n<p>One of the most enticing feature in CSS is the ability to add animation effect. You can animate background color, opacity, size, but unfortuantely not for Gradient Color. Currently, you can\u2019t animate the gradient background however this snippet may be of some help. It moves the background postion to make it look as if it is animating.<\/p>\n<pre>\r\nbutton {\r\n\tbackground-image: linear-gradient(#5187c4, #1c2f45);\r\n\tbackground-size: auto 200%;\r\n\tbackground-position: 0 100%;\r\n\ttransition: background-position 0.5s;\r\n}\t \r\nbutton:hover {\r\n\tbackground-position: 0 0;\r\n}<\/pre>\n<p>Here\u2019s a demo to show you what it does.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"https:\/\/jsfiddle.net\/agusesetiyono\/gw46dk27\/1\/embedded\/result,html,css\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<h2>6. CSS Table Column Autowidth<\/h2>\n<p>Tables are a pain especially when it comes to adjusting the widths of columns. However, there is a shortcut you can use.  Add <code>white-space: nowrap<\/code> in the <code>td<\/code> element to easily correct the text wrapping.<\/p>\n<pre>\r\ntd {\r\n    white-space: nowrap;\r\n}\r\n<\/pre>\n<p>Check out  the demo to compare the result.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"400\" src=\"https:\/\/jsfiddle.net\/agusesetiyono\/1uotj8wv\/3\/embedded\/result,html,css\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<h2>7. Showing Box Shadow Only on One or Two Sides<\/h2>\n<p>If you want to have box shadows, try this trick which can give you box shadows on either side of a box. To make this, first define a box with a specific width and height. Give it a shadow using <code>:after<\/code> pseudo element and play around to get the right positioning. This is the code to make a bottom-only shadow:<\/p>\n<pre>\r\n.box-shadow {\r\n    background-color: #FF8020;\r\n    width: 160px;\r\n    height: 90px;\r\n    margin-top: -45px;\r\n    margin-left: -80px;\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n}\r\n.box-shadow:after {\r\n    content: \"\";\r\n    width: 150px;\r\n    height: 1px;\r\n    margin-top: 88px;\r\n    margin-left: -75px;\r\n    display: block;\r\n    position: absolute;\r\n    left: 50%;\r\n    z-index: -1;\r\n    -webkit-box-shadow: 0px 0px 8px 2px #000000;\r\n       -moz-box-shadow: 0px 0px 8px 2px #000000;\r\n            box-shadow: 0px 0px 8px 2px #000000;\r\n}<\/pre>\n<p>This is the demo:<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"https:\/\/jsfiddle.net\/agusesetiyono\/1kwhsfvo\/embedded\/result,html,css\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<h2>8. Wrapping Long Text Context<\/h2>\n<p>If you ever come across a word that is longer than the container itself, this trick will be helpful to you.  By default, the text will fill horizontally regardless of the width of the container for example:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/simple-css-snippets\/wrapping-long-text-before.jpg\" height=\"86\" width=\"550\"><\/p>\n<p>With simple CSS code you can make the text adjust the width of the container.<\/p>\n<pre>\r\npre {\r\n\twhite-space: pre-line;\r\n\tword-wrap: break-word;\r\n}<\/pre>\n<p>This is what it looks like now:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/simple-css-snippets\/wrapping-long-text-after.jpg\" height=\"153\" width=\"300\"><\/p>\n<h2>9. Making the Blurry Text<\/h2>\n<p>Want to turn text blurry? What we can do is make the color transparent,t hen add text-shadow like this.<\/p>\n<pre>\r\n.blurry-text {\r\n   color: transparent;\r\n   text-shadow: 0 0 5px rgba(0,0,0,0.5);\r\n}<\/pre>\n<p>And voila, you got yourself some blurry text.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"https:\/\/jsfiddle.net\/agusesetiyono\/n5uh4s0j\/embedded\/result,html,css\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<h2>10. Animating Ellipsis Using CSS Animation<\/h2>\n<p>These snippets will help you make an animation  called ellipsis, useful for making simple loading states instead of using a gif image.<\/p>\n<pre>\r\n.loading:after {\r\n    overflow: hidden;\r\n    display: inline-block;\r\n    vertical-align: bottom;\r\n    animation: ellipsis 2s infinite;\r\n    content: \"\\2026\"; \/* ascii code for the ellipsis character *\/\r\n}\r\n@keyframes ellipsis {\r\n    from {\r\n        width: 2px;\r\n    }\r\n    to {\r\n        width: 15px;\r\n    }\r\n}<\/pre>\n<p>Lets see the demo.<\/p>\n<p><iframe loading=\"lazy\" width=\"100%\" height=\"300\" src=\"https:\/\/jsfiddle.net\/agusesetiyono\/MDzsR\/69\/embedded\/result,html,css\/\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\"><\/iframe><\/p>\n<p>Do play with the snippets and experiment with what more you can do with it.<\/p>","protected":false},"excerpt":{"rendered":"<p>CSS is the underlying language that gives websites its look. Although CSS is a straightforward language and easy to learn, it can be difficult to harness in some cases. Nothing to fear, there are workarounds that you can find online, and here are but just 10 handy ones that you can use. If you want&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>10 Useful CSS Snippets For Web Developers<\/title>\n<meta name=\"description\" content=\"CSS is the underlying language that gives websites its look. Although CSS is a straightforward language and easy to learn, it can be difficult to harness\" \/>\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.hongkiat.com\/blog\/simple-css-snippets\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Simple &amp; Smart CSS Snippets\" \/>\n<meta property=\"og:description\" content=\"CSS is the underlying language that gives websites its look. Although CSS is a straightforward language and easy to learn, it can be difficult to harness\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/simple-css-snippets\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-11-25T13:01:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-11-26T11:40:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/simple-css-snippets\/wrapping-long-text-before.jpg\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/simple-css-snippets\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/simple-css-snippets\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"10 Simple &#038; Smart CSS Snippets\",\"datePublished\":\"2014-11-25T13:01:33+00:00\",\"dateModified\":\"2018-11-26T11:40:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/simple-css-snippets\\\/\"},\"wordCount\":690,\"commentCount\":24,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/simple-css-snippets\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/simple-css-snippets\\\/wrapping-long-text-before.jpg\",\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/simple-css-snippets\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/simple-css-snippets\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/simple-css-snippets\\\/\",\"name\":\"10 Useful CSS Snippets For Web Developers\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/simple-css-snippets\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/simple-css-snippets\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/simple-css-snippets\\\/wrapping-long-text-before.jpg\",\"datePublished\":\"2014-11-25T13:01:33+00:00\",\"dateModified\":\"2018-11-26T11:40:36+00:00\",\"description\":\"CSS is the underlying language that gives websites its look. Although CSS is a straightforward language and easy to learn, it can be difficult to harness\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/simple-css-snippets\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/simple-css-snippets\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/simple-css-snippets\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/simple-css-snippets\\\/wrapping-long-text-before.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/simple-css-snippets\\\/wrapping-long-text-before.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/simple-css-snippets\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"10 Simple &#038; Smart CSS Snippets\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Useful CSS Snippets For Web Developers","description":"CSS is the underlying language that gives websites its look. Although CSS is a straightforward language and easy to learn, it can be difficult to harness","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.hongkiat.com\/blog\/simple-css-snippets\/","og_locale":"en_US","og_type":"article","og_title":"10 Simple & Smart CSS Snippets","og_description":"CSS is the underlying language that gives websites its look. Although CSS is a straightforward language and easy to learn, it can be difficult to harness","og_url":"https:\/\/www.hongkiat.com\/blog\/simple-css-snippets\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-11-25T13:01:33+00:00","article_modified_time":"2018-11-26T11:40:36+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/simple-css-snippets\/wrapping-long-text-before.jpg","type":"","width":"","height":""}],"author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/simple-css-snippets\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/simple-css-snippets\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"10 Simple &#038; Smart CSS Snippets","datePublished":"2014-11-25T13:01:33+00:00","dateModified":"2018-11-26T11:40:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/simple-css-snippets\/"},"wordCount":690,"commentCount":24,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/simple-css-snippets\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/simple-css-snippets\/wrapping-long-text-before.jpg","keywords":["CSS","CSS Tutorials"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/simple-css-snippets\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/simple-css-snippets\/","url":"https:\/\/www.hongkiat.com\/blog\/simple-css-snippets\/","name":"10 Useful CSS Snippets For Web Developers","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/simple-css-snippets\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/simple-css-snippets\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/simple-css-snippets\/wrapping-long-text-before.jpg","datePublished":"2014-11-25T13:01:33+00:00","dateModified":"2018-11-26T11:40:36+00:00","description":"CSS is the underlying language that gives websites its look. Although CSS is a straightforward language and easy to learn, it can be difficult to harness","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/simple-css-snippets\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/simple-css-snippets\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/simple-css-snippets\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/simple-css-snippets\/wrapping-long-text-before.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/simple-css-snippets\/wrapping-long-text-before.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/simple-css-snippets\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"10 Simple &#038; Smart CSS Snippets"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5Pk","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=22402"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22402\/revisions"}],"predecessor-version":[{"id":46121,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/22402\/revisions\/46121"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=22402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=22402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=22402"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=22402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}