Enabled checkbox\\\\n\\\\n \\\\n\\\"]}]}]}]}],[0,{\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Note that the presence of the disabled attribute alone indicates that the element will be disabled; assigning a value is unnecessary.\\\"]}]}],[0,{\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"It's also possible to set the disabled attribute through JavaScript by setting the element's disabled property to true. Another way to prevent click events is to call event.preventDefault, as the first thing, to prevent the default behavior of the element.\\\"]}]}],[0,{\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"const element = document.querySelector('button')\\\\n\\\\nelement.addEventListener('click', event => {\\\\n event.preventDefault()\\\\n // Additional logic goes after the `preventDefault` call\\\\n})\\\\n\\\\n// Or set the `disabled` property\\\\nelement.disabled = true\\\"],\\\"languageCode\\\":[0,\\\"js\\\"],\\\"caption\\\":[0,\\\"Preventing click events through JavaScript\\\"]}]}],[0,{\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"The above examples show how to prevent click events for a submit button in JavaScript.\\\"]}]}],[0,{\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Line 1: We first query the DOM element using document.querySelector and store it in the element variable.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Line 4: To prevent the default browser action, we need to call the preventDefault method on the event object which is automatically passed to the callback function of an event listener.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Line 9: Another way is to set the disabled property of the element to true. This prevents click events by disabling the element dynamically.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}]}],[0,{\\\"type\\\":[0,\\\"alert\\\"],\\\"data\\\":[0,{\\\"type\\\":[0,\\\"info\\\"],\\\"message\\\":[0,\\\"In terms of performance, prefer preventing click events through CSS instead of JavaScript for better performance. Use the above solutions when you need dynamic behavior.\\\"]}]}],[0,{\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"CSS vs JavaScript\\\"],\\\"level\\\":[0,2],\\\"anchor\\\":[0,\\\"css-vs-javascript\\\"]}]}],[0,{\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"So which option should you use? Ultimately, the choice will depend on your specific requirements, but as a rule of thumb, use CSS when you have to deal with:\\\"]}]}],[0,{\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Simple interactions: If you only need to visually disable an element and don't need to perform any additional logic or actions when the element is clicked, then prefer using CSS.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Styling effects: If you're primarily concerned with the visual presentation of the element and want to indicate that it's not clickable, pointer-events: none; is a straightforward way to achieve this without affecting other aspects of the element's behavior.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Performance: Disabling pointer events with CSS can be more performant in some cases, especially for static elements or when you're dealing with a large number of elements. CSS-based solutions typically require less overhead than JavaScript event handling.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}]}],[0,{\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"On the other hand, opt for using JavaScript if you need:\\\"]}]}],[0,{\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Dynamic interactions: If you need to dynamically enable or disable click events based on certain conditions, JavaScript allows you to add or remove event listeners, toggle event handling, or prevent default behavior based on more complex logic.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Additional logic: If you need to perform additional actions or validation when an element is clicked, such as form validation, triggering animations, updating the UI, or handling complex user interactions, then JavaScript offers more flexibility and control over these behaviors.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}]}],[0,{\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Summary\\\"],\\\"level\\\":[0,2],\\\"anchor\\\":[0,\\\"summary\\\"]}]}],[0,{\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"In summary, pointer-events: none; in CSS is suitable for scenarios where you want to visually disable an element without affecting its underlying functionality, while JavaScript is more appropriate when you need to dynamically control or modify the behavior of click events based on specific conditions or interactions. If you'd like to learn more about CSS, check out our category page, where you can find our latest CSS tutorials.\\\"]}]}],[0,{\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}]}]]\"]}],\"wordCount\":[0,957],\"prevUrl\":[0,\"/webtips/css/how-to-target-file-extensions-in-css\"],\"nextUrl\":[0,\"/webtips/css/how-to-center-text-vertically-and-horizontally-in-css\"],\"readTime\":[0,5]}],[0,{\"id\":[0,2589],\"publishDate\":[0,\"2020-11-30\"],\"lastModified\":[0,\"2020-11-30\"],\"url\":[0,\"/webtips/css/how-to-center-text-vertically-and-horizontally-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Center Text Vertically and Horizontally in CSS\"],\"excerpt\":[0,\"We can align text in the center by simply setting text-align to center. But how do you align it vertically? You can use line-height or flexbox...\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/center-text-vertically-and-horizontally.png\"],\"featuredImageAlt\":[0,\"How to Center Text Vertically and Horizontally in CSS\"],\"metaDescription\":[0,\"We can align text in the center by simply setting text-align to center. But how do you align it vertically? You can use line-height or flexbox...\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"suEkOkRWFu\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"We can align text in the center by simply setting text-align to center. But how do you align it vertically? Simply set line-height to the containerβs height and you are done:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"OWzI4VrT3j\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".container {\\\\n background: cornflowerblue;\\\\n width: 250px;\\\\n height: 250px;\\\\n text-align: center;\\\\n line-height: 250px;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"center.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"zknTMHH7s6\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"In the example above, the height of the container is set to 250px so the line-height should be 250px as well.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"hxfOJjkpkt\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"The Modern Solution\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"LlmonetNul\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"If you want to go with a modern and shorter solution, you can also use flexbox, with justify-content and align-items:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"DiPqvwMBrZ\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".container {\\\\n display: flex;\\\\n justify-content: center;\\\\n align-items: center;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"center.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"gPR0ofd1s6\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"justify-content centers it on the horizontal axis\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"align-items centers it along the vertical axis\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"mUdTiFj3Pq\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/center-text-vertically-and-horizontally.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips,\\\\n\\\\t\\\\t\\\\t\\\\tfollow @flowforfrank\\\\n\\\\t\\\\t\\\\t\\\"],\\\"alt\\\":[0,\\\"Center text vertically and horizontally in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"1cEG810goe\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"AhTXMSGJYo\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"G0MC6jFi2e\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"g58GpGGLBW\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The line-height property in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,132],\"readTime\":[0,1]}],[0,{\"id\":[0,2582],\"publishDate\":[0,\"2020-11-30\"],\"lastModified\":[0,\"2020-11-30\"],\"url\":[0,\"/webtips/css/how-to-blur-background-behind-elements-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Blur Background Behind Elements in CSS\"],\"excerpt\":[0,\"You can use the backdrop-filter property in CSS to blur the background image behind an element with a transparent background...\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/blur-backgrounds-in-css.png\"],\"featuredImageAlt\":[0,\"How to Blur Background Behind Elements in CSS\"],\"metaDescription\":[0,\"You can use the backdrop-filter property in CSS to blur the background image behind an element with a transparent background...\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"lbBx84aRkm\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can use the backdrop-filter property in CSS to blur the background image behind an element with a transparent background:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"ihSFj1392Q\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".background {\\\\n background-image: url(castle.jpg)\\\\n}\\\\n\\\\n.backdrop {\\\\n backdrop-filter: blur(1);\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"backdrop.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"dGTaOJ0lyr\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"It applies to everything behind the element where the backdrop-filter is defined, therefore make sure you make the element at least partially transparent in order to see the result. This property is often used to blur out the background behind a popup.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"v9gv5y6qB7\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Also, this not only works with blur, but with other filter functions as well.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"vPKdztsv2D\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".backdrop {\\\\n backdrop-filter: brightness(50%);\\\\n backdrop-filter: contrast(50%);\\\\n backdrop-filter: drop-shadow(0 0 5px #000);\\\\n backdrop-filter: grayscale(100%);\\\\n backdrop-filter: hue-rotate(90deg);\\\\n backdrop-filter: invert(100%);\\\\n backdrop-filter: opacity(50%);\\\\n backdrop-filter: sepia(100%);\\\\n backdrop-filter: saturate(100%);\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"backdrop.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"ufI0Jqoek1\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/blur-backgrounds-in-css.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to blur backgrounds in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"2pXgA7MOvG\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"oZkUsevm2Z\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"X9i8g1eosL\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"BZve7I6Iuy\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The backdrop-filter property in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,143],\"readTime\":[0,1]}],[0,{\"id\":[0,2596],\"publishDate\":[0,\"2020-11-23\"],\"lastModified\":[0,\"2020-11-23\"],\"url\":[0,\"/webtips/css/how-to-dead-center-absolutely-positioned-elements-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Dead Center Absolutely Positioned Elements in CSS\"],\"excerpt\":[0,\"If you want to dead-center an absolutely positioned element in CSS, you can use transform: translate with negative values of top and left...\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/dead-center-absolutely-positioned-elements.png\"],\"featuredImageAlt\":[0,\"How to Dead Center Absolutely Positioned Elements in CSS\"],\"metaDescription\":[0,\"If you want to dead-center an absolutely positioned element in CSS, you can use transform: translate with negative values of top and left...\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"M19Z9Z1FZb\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Use transform: translate with negative values of top and left to dead center an absolutely positioned element in CSS:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"GUusfwnwA1\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".center {\\\\n position: absolute;\\\\n top: 50%;\\\\n left: 50%;\\\\n transform: translate(-50%, -50%);\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"center.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"3B5oNDvuVx\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"This will move the element -50% to the top and also -50% to the left. By default, anchor points are set to the top-left corner of an element. To dead center absolutely positioned elements, you need to move them back -50% on both axis. Think of it as setting an anchor point to the center.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"O5dMDDEHoO\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Note that you should use the negative values of top and left. For different values, your translate rule should look similar:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"ynmoW3OPVc\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".center {\\\\n position: absolute;\\\\n top: 25%;\\\\n left: 30%;\\\\n transform: translate(-25%, -30%);\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"center.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"oOfPJn3vKQ\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"The first parameter of the translate function is used for the x-axis, while the second is used for the y-axis.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"kQCygjK8ay\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Are you not using absolute positioning?\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"Z5cySfF9rl\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can also use flexbox, to center an element, with only three lines:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"6R21ws1LFW\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".center {\\\\n display: flex;\\\\n justify-content: center;\\\\n align-items: center;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"center.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"sAxnLLqVcu\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"justify-content centers it on the horizontal axis\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"align-items centers it along the vertical axis\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"eplCdiUDJv\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Another option is to set the line-height to the height of the container:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"qBEXZMbmcW\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".center {\\\\n height: 250px;\\\\n line-height: 250px; /* Set the line-height to the same as the height */\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"center.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"K8GJCR1SvY\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/dead-center-absolutely-positioned-elements.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to dead center absolutely positioned elements in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"E1fvrh8SuZ\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"IOSJEl6lmC\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"2HJDZxwwDc\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"x40KvKGJpy\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The CSS transform property\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The translate function in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"justify-content in Flexbox\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"align-items in Flexbox\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,260],\"readTime\":[0,2]}],[0,{\"id\":[0,2587],\"publishDate\":[0,\"2020-11-23\"],\"lastModified\":[0,\"2020-11-23\"],\"url\":[0,\"/webtips/css/how-to-vertically-align-text-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Vertically Align Text in CSS\"],\"excerpt\":[0,\"Get your weekly dose of webtips\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/vertically-align-text-in-css.png\"],\"featuredImageAlt\":[0,\"How to Vertically Align Text in CSS\"],\"metaDescription\":[0,\"Get your weekly dose of webtips\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"FuysiNzXyx\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Having trouble aligning text vertically with CSS? All you need to do is use the vertical-align property. Works for tables as well:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"fwpvEA1mKA\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"\\\\n\\\\n
\\\\n \\\\n
\\\\n
I'm at the top
\\\\n
I'm in the middle
\\\\n
I'm at the bottom
\\\\n
\\\\n \\\\n
\\\"],\\\"languageCode\\\":[0,\\\"html\\\"],\\\"filename\\\":[0,\\\"vertical-align.html\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"js54VaN1uQ\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"The above example, wil produce the following:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"n5KjwI36Su\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"\\\\n
\\\\n \\\\n
\\\\n
I'm at the top
\\\\n
I'm in the middle
\\\\n
I'm at the bottom
\\\\n
\\\\n \\\\n
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"avNZLSZYSl\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Apart from the three values, it can also take the value of:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"zBQMydQnzj\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"baseline: it's initial value, the element is aligned to the baseline of its parent.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"sub: Aligns the elements to the subscript-baseline of its parent.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"super: Aligns the elements to the superscript-baseline of its parent.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"text-top: Aligns the top of the element with the top of its parent element's font.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"text-bottom: Aligns the bottom of the element with the bottom of its parent element's font.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"Wkz58j635o\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/vertically-align-text-in-css.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to vertically align text in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"KUrgNfWhIT\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"vOmzyxCKt1\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"s52FgKl6uR\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"ZHiPwtcQmz\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The vertical-align property in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,206],\"readTime\":[0,2]}],[0,{\"id\":[0,2584],\"publishDate\":[0,\"2020-11-23\"],\"lastModified\":[0,\"2020-11-23\"],\"url\":[0,\"/webtips/css/how-to-use-variables-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Use Variables in CSS\"],\"excerpt\":[0,\"You don't need to use CSS preprocessors anymore, if you want to use variables inside CSS. It is now possible right inside it without any preprocessor...\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/use-variables-in-css.png\"],\"featuredImageAlt\":[0,\"How to Use Variables in CSS\"],\"metaDescription\":[0,\"You don't need to use CSS preprocessors anymore, if you want to use variables inside CSS. It is now possible right inside it without any preprocessor...\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"CqHV2oRuaS\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"CSS variables have been a feature that CSS lacks for a long time. CSS preprocessors filled this deficiency and provided an easy way to use them. However, now you can also define and use variables right inside CSS without any preprocessor:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"Lnq0nlUz3Q\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"/* Create variables on the root and access them with the var(); function */\\\\n:root {\\\\n --main-bg-color: aliceblue;\\\\n}\\\\n\\\\nbody {\\\\n background-color: var(--main-bg-color, #FFF);\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"css-variables.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"w1DnxcbprL\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can declare new variables by using a double hyphen followed by an arbitrary name. You can use any valid CSS property as a property value. The ruleset where you define a variable will define its scope where it can be used.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"JzvGYltLRr\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"span {\\\\n --main-bg-color: aliceblue;\\\\n background-color: var(--main-bg-color, #FFF);\\\\n}\\\\n\\\\n/* Note that you can't use `--main-bg-color` here as it has been defined inside the span */\\\\ndiv {\\\\n background-color: var(--main-bg-color, #FFF);\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"css-variables.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"sEmEfxpi7T\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"If you want to use variables globally, you can add your variables for the :root pseudo-class, therefore it will be available for all rulesets.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"uo7iT6fE0H\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Also note, that you can define fallback values as a second parameter passed to the var function. This value will be used if the variable cannot be found.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"EoWWqT7K7e\\\"],\\\"type\\\":[0,\\\"alert\\\"],\\\"data\\\":[0,{\\\"type\\\":[0,\\\"warning\\\"],\\\"message\\\":[0,\\\"Note that fallback values won't fix compatibility issues. If the browser doesn't support CSS custom property, var will be an invalid value.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"dMNfrIJUZX\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"At the writing of this, it has a ~96% global support, where IE is unsupported. For the full list of support table, you can refer to caniuse.com.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"2FAFaeIuhg\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/use-variables-in-css.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to use variables in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"mEK7mvhp4l\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"y9TBGqDsn8\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"Z0um37MD6T\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"m19y4ZXrgw\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Using CSS custom properties\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,251],\"readTime\":[0,2]}],[0,{\"id\":[0,2597],\"publishDate\":[0,\"2020-11-22\"],\"lastModified\":[0,\"2020-11-22\"],\"url\":[0,\"/webtips/css/how-to-use-multiple-text-shadows-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Use Multiple Text Shadows in CSS\"],\"excerpt\":[0,\"Get your weekly dose of webtips\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/multiple-text-shadows-in-css.png\"],\"featuredImageAlt\":[0,\"How to Use Multiple Text Shadows in CSS\"],\"metaDescription\":[0,\"Get your weekly dose of webtips\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"6I0D3XCukP\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"A small CSS trick: you can use multiple text-shadows on a text by comma separating them:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"kcp1vYlvjT\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"\\\\n\\\\n\\\\nERROR\\\"],\\\"languageCode\\\":[0,\\\"html\\\"],\\\"filename\\\":[0,\\\"text-shadows.html\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"83RBVyVzEC\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"The example above, will produce the following text:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"RO1alfDXbC\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"ERROR\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"JbIMftFj0w\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"If you were wondering, the different values for text-shadow are as follow:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"zDrI4ruzgz\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"ordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"value: Represents the X coordinate of the shadow.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"value: Represents the Y coordinate of the shadow.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"value: Sets the amount of blur to be used for the shadow.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"value: Lastly, you can specify the color of the shadow.\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"CEzK5pojmj\\\"],\\\"type\\\":[0,\\\"alert\\\"],\\\"data\\\":[0,{\\\"type\\\":[0,\\\"info\\\"],\\\"message\\\":[0,\\\"Note that you can also use RGBA values for colors to create semi-transparent shadows.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"DjcQEXla5l\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/multiple-text-shadows-in-css.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to use multiple text shadows in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"SvdTceiIEW\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"sFOcVo1H5G\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"IUB3oogRHu\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"hkTfvw3oQ2\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The text-shadow property in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,152],\"readTime\":[0,1]}],[0,{\"id\":[0,2594],\"publishDate\":[0,\"2020-11-19\"],\"lastModified\":[0,\"2020-11-19\"],\"url\":[0,\"/webtips/css/how-to-truncate-text-with-ellipsis-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Truncate Text With Ellipsis in CSS\"],\"excerpt\":[0,\"There can be times where you don't want your text to span multiple lines but you need to truncate it. This is where text-overflow: ellipsis is useful...\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/truncate-text-with-ellipsis-in-css.png\"],\"featuredImageAlt\":[0,\"How to cut text with ellipsis in CSS\"],\"metaDescription\":[0,\"There can be times where you don't want your text to span multiple lines but you need to truncate it. This is where text-overflow: ellipsis is useful...\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"wfFwGXcrsT\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"There could be times where you don't want your text to span multiple lines but you need to truncate it because of its length. This is where text-overflow: ellipsis is really useful:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"fUBYK3vDrC\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"span {\\\\n overflow: hidden;\\\\n white-space: nowrap;\\\\n text-overflow: ellipsis;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"ellipsis.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"OtEZQFf6xf\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"So why do you also need overflow and white-space? If you don't specify overflow: hidden, the text will overflow its container. white-space on the other hand, prevents the text from being wrapped.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"aJVbW8eEar\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/truncate-text-with-ellipsis-in-css-1024x1024.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to cut text with ellipsis in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"0XEWFCPL73\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"SHSPw8MYrT\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"7UZcf1ndMr\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"5dxtZtcOuj\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Documentation for text-overflow\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Documentation for overflow\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Documentation for white-space\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,97],\"readTime\":[0,1]}],[0,{\"id\":[0,2591],\"publishDate\":[0,\"2020-11-19\"],\"lastModified\":[0,\"2020-11-19\"],\"url\":[0,\"/webtips/css/vertically-write-text-with-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Vertically Write Text With CSS\"],\"excerpt\":[0,\"Little known, is that you can create vertical texts in CSS by using the writing-mode and text-orientation properties together...\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/vertically-write-text-with-css.png\"],\"metaDescription\":[0,\"Little known, is that you can create vertical texts in CSS by using the writing-mode and text-orientation properties together...\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"iigKolrAyn\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Little known is that you can create vertical texts in CSS by using the writing-mode and text-orientation properties:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"f5lWb8I4y4\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"/* Use writing-mode with text-orientation to create vertical texts */\\\\nspan {\\\\n writing-mode: vertical-rl;\\\\n text-orientation: upright;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"vertical.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"AjnJf5soE8\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can also change the horizontal writing direction from right-to-left and left-to-right with vertical-lr and vertical-rl respectively.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"Qq3p05UfQ7\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"span {\\\\n writing-mode: vertical-lr; /* left to right */\\\\n writing-mode: vertical-rl; /* right to left */\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"vertical.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"9N9n78qosi\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"While writing-mode sets whether the lines are following each other horizontally or vertically, text-orientation sets the orientation of each letter. By default, this property is set to mixed.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"W90h7DWW4N\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/mixed-vs-upright-orientation-1.gif\\\"],\\\"caption\\\":[0,\\\"Interactive example from MDN's documentation\\\"],\\\"alt\\\":[0,\\\"Example of difference between mixed and upright orientation\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"dFWce9J4Bq\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/vertically-write-text-with-css.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips,\\\\n\\\\t\\\\t\\\\t\\\\tfollow @flowforfrank\\\\n\\\\t\\\\t\\\\t\\\"],\\\"alt\\\":[0,\\\"How to make writing direction vertical in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"Yf72xzoMw2\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"qbkNVqSKH1\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"COs9NcpLDW\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"IISrEyUluV\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The writing-mode property\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The text-orientation property\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,114],\"readTime\":[0,1]}],[0,{\"id\":[0,2595],\"publishDate\":[0,\"2020-11-19\"],\"lastModified\":[0,\"2021-07-17\"],\"url\":[0,\"/webtips/css/make-table-columns-equal-width-with-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Make Table Columns Equal Width With CSS\"],\"excerpt\":[0,\"To keep each column of a table the same width in CSS, you only need to set the table-layout property to fixed, with a width set to 100%...\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/make-table-columns-same-width-in-css.png\"],\"featuredImageAlt\":[0,\"How to Make Table Columns Equal Width With CSS\"],\"metaDescription\":[0,\"To keep each column of a table the same width in CSS, you only need to set the table-layout property to fixed, with a width set to 100%...\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"3clwxnS65U\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"To keep each column of a table the same width in CSS, you only need to set the table-layout property to fixed, with a width set to 100%:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"7vUgdDB6MQ\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"\\\\n\\\\n\\\\n
\\\\n
\\\\n
...
\\\\n
...
\\\\n
\\\\n
\\\\n
...
\\\\n
...
\\\\n
\\\\n
\\\"],\\\"languageCode\\\":[0,\\\"html\\\"],\\\"filename\\\":[0,\\\"same-width.html\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"Q2LXwa6ONk\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"The example above, produces the following output:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"tRLKvwD65x\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"\\\\n
\\\\n
\\\\n
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
\\\\n
Ut enim ad minim veniam
\\\\n
\\\\n
\\\\n
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
\\\\n
Excepteur sint occaecat cupidatat non proident
\\\\n
\\\\n
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"qq5gWdJNkE\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/make-table-columns-same-width-in-css.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips,\\\\n\\\\t\\\\t\\\\t\\\\tfollow @flowforfrank\\\\n\\\\t\\\\t\\\\t\\\"],\\\"alt\\\":[0,\\\"How to make table columns same width in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"TFNv8N7ml7\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"7WlJBXZ9K3\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"eoLeqdYwrt\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"chCLtpfAye\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The table-layout property in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,126],\"readTime\":[0,1]}],[0,{\"id\":[0,2583],\"publishDate\":[0,\"2020-11-18\"],\"lastModified\":[0,\"2020-11-18\"],\"url\":[0,\"/webtips/css/how-to-make-smooth-scrolling-using-only-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Make Smooth Scrolling Using Only CSS\"],\"excerpt\":[0,\"Get your weekly dose of webtips\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/add-smooth-scrolling-in-css.png\"],\"featuredImageAlt\":[0,\"How to Add Smooth Scrolling Using Only CSS\"],\"metaDescription\":[0,\"Get your weekly dose of webtips\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"wT0Sp50q3Y\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"If you want some smooth scrolling to happen without using an algorithm, you can use the CSS scroll-behavior property:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"rs91f3rHvq\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"\\\\n\\\\n\\\\n\\\\n\\\\nPage #1\\\\nPage #2\\\\nPage #3\\\"],\\\"languageCode\\\":[0,\\\"html\\\"],\\\"filename\\\":[0,\\\"smooth-scroll.html\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"oJF2R1wbEv\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Keep in mind this is only supported for modern browsers. You can check the working example at Codepen:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"Yz5cpmQOX3\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Check Smooth Scrolling on Codepen\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"HeUkNpAkUj\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"If you want a JavaScript-based solution with a little bit more support, you can use the behavior option in window.scroll:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"EpCJDyn1oq\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"// JavaScript equivalent for smooth scrolling\\\\nwindow.scroll({\\\\n top: 100, \\\\n left: 0, \\\\n behavior: 'smooth'\\\\n});\\\"],\\\"languageCode\\\":[0,\\\"js\\\"],\\\"filename\\\":[0,\\\"scroll.js\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"vvmYs7RFAG\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/add-smooth-scrolling-in-css.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to add smooth scrolling only with CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"FQ35hi6Xuz\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"TTyHbuPP4E\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"yKUVHbPB3O\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"dRXxIHjyWA\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The scroll-behavior property\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Support table for scroll-behavior\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,147],\"readTime\":[0,1]}],[0,{\"id\":[0,2586],\"publishDate\":[0,\"2020-11-18\"],\"lastModified\":[0,\"2020-11-18\"],\"url\":[0,\"/webtips/css/how-to-style-invalid-inputs-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Style Invalid Inputs in CSS\"],\"excerpt\":[0,\"You can style input elements with CSS based on their validity with the in-range and out-of-range pseudo-class selectors...\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/style-invalid-elements-in-css.png\"],\"featuredImageAlt\":[0,\"How to Style Invalid Inputs in CSS\"],\"metaDescription\":[0,\"You can style input elements with CSS based on their validity with the in-range and out-of-range pseudo-class selectors...\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"ChJLFIUXZx\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can style input elements with CSS based on their validity with the in-range and out-of-range pseudo-class selectors:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"1Sa8d6D5dP\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"\\\\n\\\\n\\\\n\\\"],\\\"languageCode\\\":[0,\\\"html\\\"],\\\"filename\\\":[0,\\\"in-range.html\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"zP9RuQvmTw\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"\\\\n\\\\n\\\\n\\\"],\\\"languageCode\\\":[0,\\\"html\\\"],\\\"filename\\\":[0,\\\"out-of-range.html\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"HnF0AjztQt\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Make sure you always give feedback to your users about the action they take.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"l8pVHgZ2zG\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/style-invalid-elements-in-css.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to keep image aspect ratio in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"S8YBgZ8cgh\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"Yu8Jkf17IW\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"lfqBvnoxn6\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"GZubc1eIuf\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\":in-range pseudo-class selector\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\":out-of-range pseudo-class selector\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,122],\"readTime\":[0,1]}],[0,{\"id\":[0,2585],\"publishDate\":[0,\"2020-11-18\"],\"lastModified\":[0,\"2020-11-18\"],\"url\":[0,\"/webtips/css/keep-aspect-ratio-of-images-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Keep Aspect Ratio of Images in CSS\"],\"excerpt\":[0,\"Use object-fit with object-position in CSS if you want to resize an image, but keep the aspect ratio and center it inside itself.\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/keep-aspect-ratio-in-css.png\"],\"featuredImageAlt\":[0,\"How to Keep Aspect Ratio of Images in CSS\"],\"metaDescription\":[0,\"Use object-fit with object-position in CSS if you want to resize an image, but keep the aspect ratio and center it inside itself.\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"If you ever wanted to resize an image disproportionately without losing aspect ratio in CSS β these two properties will help you out:\\\"]}]}],[0,{\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"/* Center an image in itself without losing aspect ratio */\\\\nimg {\\\\n width: 300px;\\\\n height: 300px;\\\\n object-fit: none;\\\\n object-position: 50% 50%;\\\\n background: blue;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"aspect-ratio.css\\\"]}]}],[0,{\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"It uses object-fit with object-position. By default, object-fit takes the value of fill, which scales the image disproportionately if the container doesn't match the aspect ratio of the image. object-position on the other hand, sets the position of the image inside the container. To better understand how they work, take a look at object-fit taking up different values:\\\"]}]}],[0,{\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\\n
\\\\nobject-fit: fill; (default)\\\\n
\\\\n\\\\n\\\\n\\\\n
\\\\nobject-fit: contain;\\\\n
\\\\n\\\\n\\\\n\\\\n
\\\\nobject-fit: none;\\\\n\\\\n\\\\n
\\\\n
\\\"]}]}],[0,{\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"The original size of the images is 200x300, but they are set to 200x200 through CSS.\\\"]}]}],[0,{\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"With object-fit set to none on every image, observe how object-position changes the position of the image inside itself:\\\"]}]}],[0,{\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\\n
\\\\nobject-position: left top;\\\\n
\\\\n\\\\n\\\\n\\\\n
\\\\nobject-position: 50% 50%; (dead-center)\\\\n
\\\\n\\\\n\\\\n\\\\n
\\\\nobject-position: right bottom;\\\\n\\\\n\\\\n
\\\\n
\\\"]}]}],[0,{\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"The original size of the image is 100x100px, but they are set to 200x200 through CSS.\\\"]}]}],[0,{\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/keep-aspect-ratio-in-css.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to keep image aspect ratio in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}]}],[0,{\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}]}],[0,{\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}]}],[0,{\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}]}],[0,{\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The object-fit property in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The object-position property in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}]}]]\"]}],\"wordCount\":[0,181],\"readTime\":[0,1]}],[0,{\"id\":[0,2421],\"publishDate\":[0,\"2020-11-04\"],\"lastModified\":[0,\"2020-11-04\"],\"url\":[0,\"/webtips/css/how-to-select-empty-elements-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Select Empty Elements in CSS\"],\"excerpt\":[0,\"You can use the :empty pseudo-class selector in CSS to target elements that don't have any content...\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/select-elements-without-children-in-css.png\"],\"metaDescription\":[0,\"You can use the :empty pseudo-class selector in CSS to target elements that don't have any content...\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"FO7Os0gvcf\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can use the :empty pseudo-class selector in CSS to target elements that don't have any content:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"moJxY865WN\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"/* Selects span elements that don't have any content */\\\\nspan:empty {\\\\n ...\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"empty.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"ySslLke1JH\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/select-elements-without-children-in-css.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips,\\\\n\\\\t\\\\t\\\\t\\\\tfollow @flowforfrank\\\\n\\\\t\\\\t\\\\t\\\"],\\\"alt\\\":[0,\\\"How to select empty elements in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"MxMuBV3QKo\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"gc4HE29WTK\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"q15d5FhdvC\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"fljeSewGxh\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The :empty pseudo-class selector\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,38],\"readTime\":[0,1]}],[0,{\"id\":[0,2422],\"publishDate\":[0,\"2020-11-04\"],\"lastModified\":[0,\"2020-11-04\"],\"url\":[0,\"/webtips/css/how-to-create-two-columns-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Create Two Columns in CSS\"],\"excerpt\":[0,\"You can create columns in CSS without having to rely on HTML. The column property is intended for this purpose along with other column specific properties\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/two-columns-in-css.png\"],\"metaDescription\":[0,\"You can create columns in CSS without having to rely on HTML. The column property is intended for this purpose along with other column specific properties\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"PIMqrK8ZUw\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can create columns in CSS without having to set up any layout in HTML. The column property is intended for this purpose along with many multi-column properties for styling such as column-gap or column-width.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"VvutDVMfII\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".two-columns {\\\\n columns: 2;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"columns.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"xakb0QaWsg\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"The example above will create a two column layout. The other two properties that are related to columns are the previously mentioned gap and width.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"dkox64cwq1\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".columns {\\\\n column-gap: 10px; /* Sets the space between columns */\\\\n column-width: 33%; /* Sets the width of the individual columns */\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"columns.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"4gACHvQ9qS\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/two-columns-in-css.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips,\\\\n\\\\t\\\\t\\\\t\\\\tfollow @flowforfrank\\\\n\\\\t\\\\t\\\\t\\\"],\\\"alt\\\":[0,\\\"How to create two columns in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"msel6FJAbR\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"tLWkVgALmj\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"QdxhOFD19J\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"itFXJLquEt\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The CSS column property\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,100],\"readTime\":[0,1]}],[0,{\"id\":[0,2424],\"publishDate\":[0,\"2020-11-04\"],\"lastModified\":[0,\"2020-11-04\"],\"url\":[0,\"/webtips/css/how-to-position-caption-for-tables-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Position Caption for Tables in CSS\"],\"excerpt\":[0,\"If you ever happen to need to position caption for a table in CSS, there's a rule for that, called caption-side. No additional rules needed...\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/position-caption-for-tables-in-css.png\"],\"metaDescription\":[0,\"If you ever happen to need to position caption for a table in CSS, there's a rule for that, called caption-side. No additional rules needed...\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"5AUWxfLT5X\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"If you ever happen to need to position caption for a table in CSS, there's a rule for that, called caption-side. No additional rules or markup is needed, just this one:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"9nTJk9ESS7\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".bottom {\\\\n caption-side: bottom;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"caption.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"mSvWiLvDwQ\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"By default, this is set to top. It also accepts the following non-standard values:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"0TRMPD2WFT\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".non-standard {\\\\n caption-side: left; \\\\n caption-side: right; \\\\n caption-side: top-outside; \\\\n caption-side: bottom-outside; \\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"caption.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"K5ZJZMqDfu\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/position-caption-for-tables-in-css.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips,\\\\n\\\\t\\\\t\\\\t\\\\tfollow @flowforfrank\\\\n\\\\t\\\\t\\\\t\\\"],\\\"alt\\\":[0,\\\"How to position captions for tables in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"KBOyDmDi5v\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"UwFytuSVSI\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"JeALMZNdoV\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"OMmUJIZ228\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The caption side property in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,84],\"readTime\":[0,1]}],[0,{\"id\":[0,2423],\"publishDate\":[0,\"2020-11-04\"],\"lastModified\":[0,\"2020-11-04\"],\"url\":[0,\"/webtips/css/how-to-blur-images-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Blur Images in CSS\"],\"excerpt\":[0,\"With the introduction of CSS3 filters, a lot of image effects became available natively inside the browser. One of them being blur...\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/how-to-blur-images.png\"],\"metaDescription\":[0,\"With the introduction of CSS3 filters, a lot of image effects became available natively inside the browser. One of them being blur...\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"EuPaHm8QCS\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"With the introduction of CSS3 filters, a lot of image effects became available natively inside the browser. One of them being blur - you can achieve interesting hover effects or background blurs for modals:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"gxNS8kE0Mx\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".im-blurry-anyway {\\\\n filter: blur(4px);\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"blur.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"EBExphddn7\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"The function accepts a radius as a value. It defines the deviation to the gaussian function. The filter CSS property also accepts other functions, such as:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"piGtbPO2nf\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"brightness()\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"contrast()\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"drop-shadow()\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"grayscale()\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"hue-rotate()\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"invert()\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"opacity()\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"saturate()\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"sepia()\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"9Hdei4JWiC\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/how-to-blur-images.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips,\\\\n\\\\t\\\\t\\\\t\\\\tfollow @flowforfrank\\\\n\\\\t\\\\t\\\\t\\\"],\\\"alt\\\":[0,\\\"How to blur images in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"B3uxMItS8L\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"eb0CvNK7j8\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"nSTA6W62j9\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"HCsYw7ZOJM\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The CSS blur() function\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,108],\"readTime\":[0,1]}],[0,{\"id\":[0,2425],\"publishDate\":[0,\"2020-11-04\"],\"lastModified\":[0,\"2020-11-04\"],\"url\":[0,\"/webtips/css/how-to-retrieve-attribute-values-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Retrieve Attribute Values in CSS\"],\"excerpt\":[0,\"Use the attr() property in CSS if you want to retrieve the value of an element's attribute and use it in your stylesheets...\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/retrieve-attribute-values-in-css.png\"],\"metaDescription\":[0,\"Use the attr() property in CSS if you want to retrieve the value of an element's attribute and use it in your stylesheets...\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"G4tNAEMtg1\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Use the attr() property in CSS if you want to retrieve the value of an element's attribute and use it in your stylesheets:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"eqXFegCNSR\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"\\\\n\\\"],\\\"languageCode\\\":[0,\\\"html\\\"],\\\"filename\\\":[0,\\\"attr.html\\\"],\\\"highlights\\\":[0,\\\"4-5\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"cbkDVvkLyY\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"In the example above, the value of the attr() funcion will be \\\\\\\"Hibiscus\\\\\\\". You can also specify types to attr(), using the following way:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"81Z0HOA4iy\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".types {\\\\n attr(data-src url); /* Define type as url */\\\\n attr(data-score number); /* Define type as number */\\\\n attr(data-width px); /* Define type as pixel */\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"types.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"ySqWY5gDB7\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"By using a second parameter, you also have the ability to provide fallback values:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"bu0ME3E6OD\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".defaults {\\\\n attr(data-src url, ''); /* Will fallback to an empty string */\\\\n attr(data-width px, inherit); /* Will fallback to the inherited property */\\\\n attr(data-name, 'Unknown'); /* Will fallback to \\\\\\\"Unknown\\\\\\\" */\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"defaults.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"3XC3VJngbX\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/retrieve-attribute-values-in-css.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips,\\\\n\\\\t\\\\t\\\\t\\\\tfollow @flowforfrank\\\\n\\\\t\\\\t\\\\t\\\"],\\\"alt\\\":[0,\\\"How to retrieve attribute values in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"EIDfHs0jRx\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"cUnR0KTGCQ\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"l5jNi9cg4q\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"1flrxqb3WI\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The attr() CSS function\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,177],\"readTime\":[0,1]}],[0,{\"id\":[0,2419],\"publishDate\":[0,\"2020-11-04\"],\"lastModified\":[0,\"2020-11-04\"],\"url\":[0,\"/webtips/css/how-to-play-animations-infinitely-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Play Animations Infinitely in CSS\"],\"excerpt\":[0,\"In order to play CSS animations indefinitely, all you have to do is set the animation-iteration-count property to infinite...\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/make-animations-play-infinitely-in-css.png\"],\"metaDescription\":[0,\"In order to play CSS animations indefinitely, all you have to do is set the animation-iteration-count property to infinite...\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"L2NqsNQZWf\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"In order to play CSS animations indefinitely, all you have to do is set the animation-iteration-count property to infinite.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"QkzUjNZn1a\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"@keyframes rotate {\\\\n from { transform: rotate(0deg); }\\\\n to { transform: rotate(360deg); }\\\\n}\\\\n\\\\n.loading-circle {\\\\n /* We need βlinearβ for smooth transition */\\\\n animation: rotate 2s linear;\\\\n animation-iteration-count: infinite;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"animation.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"rDgRsnfXOS\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Make sure that you return to the initial state in order to create a smooth animation. You can also set an arbitrary number as the iteration count to repeat the animation a number of times.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"PmR7wSt8K9\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"/* This will play the animation twice */\\\\n.animation {\\\\n animation-iteration-count: 2;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"animation.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"kvqKRYBenv\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can also use a shorthand property, where you can define the animation-iteration-count as the very last rule:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"iicCRHNpnb\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".loading-circle {\\\\n animation: rotate 2s linear infinite;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"animation.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"5xp3Alis0H\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/make-animations-play-infinitely-in-css.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips,\\\\n\\\\t\\\\t\\\\t\\\\tfollow @flowforfrank\\\\n\\\\t\\\\t\\\\t\\\"],\\\"alt\\\":[0,\\\"How to play animations infinitely in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"fEtjhwRZE3\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"ZKugssdNkJ\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"C9BlKSHeDW\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"uHjc51iyyd\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The animation-iteration-count in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,143],\"readTime\":[0,1]}],[0,{\"id\":[0,2420],\"publishDate\":[0,\"2020-11-04\"],\"lastModified\":[0,\"2020-11-04\"],\"url\":[0,\"/webtips/css/remove-every-css-rule-from-an-element\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Remove Every CSS Rule From an Element\"],\"excerpt\":[0,\"If you want to reset all previously applied stylings to an element, you can use this one single CSS property called \\\"all\\\"...\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/remove-all-styles-in-css.png\"],\"metaDescription\":[0,\"If you want to reset all previously applied stylings to an element, you can use this one single CSS property called \\\"all\\\"...\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"ugSw2CqeOg\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"If you want to reset all previously applied stylings to an element, you can use this one single CSS property:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"ShWW3PgCpQ\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".reset {\\\\n all: unset;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"reset.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"0V5hzFoLdR\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"This will reset all CSS properties expect unicode-bidi, direction, and custom properties. This is done by setting their values to initial or inherited. It can take the following values:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"z681P7vWKh\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".reset {\\\\n all: initial;\\\\n all: inherit;\\\\n all: unset;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"reset.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"eDo58D9Zc2\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Note that it is unsupported in IE.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"qwz6p3jGGX\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/remove-all-styles-in-css.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips,\\\\n\\\\t\\\\t\\\\t\\\\tfollow @flowforfrank\\\\n\\\\t\\\\t\\\\t\\\"],\\\"alt\\\":[0,\\\"How to remove all css rules from an element\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"9OzqnuPz5g\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"AKDLklZwFI\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"kegGl8Y3ja\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"4hOReS0TzR\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The all property in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,88],\"readTime\":[0,1]}],[0,{\"id\":[0,2418],\"publishDate\":[0,\"2020-11-03\"],\"lastModified\":[0,\"2020-11-04\"],\"url\":[0,\"/webtips/css/the-difference-between-single-and-double-colon-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"What is the Difference Between Single and Double Colon in CSS?\"],\"excerpt\":[0,\"Do you know what is the difference between single and double colon in CSS? Or did you know that there is a difference at all?\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/11/single-vs-double-colon-in-css.png\"],\"metaDescription\":[0,\"Do you know what is the difference between single and double colon in CSS? Or did you know that there is a difference at all?\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"oyPTGkXp73\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Do you know what is the difference between single and double colon in CSS? Or did you know that there is a difference at all?\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"NqRosNEOFy\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"/* CSS3 syntax */\\\\n.css3::before { ... },\\\\n.css3::after { ... }\\\\n\\\\n/* CSS2 syntax */\\\\n.css2:before { ... },\\\\n.css2:after { ... }\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"double-vs-single.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"ic9486lbHD\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Single is used for pseudo-classes like :active or :hover, while double is used for pseudo-elements like ::before or ::after. So what is the difference between pseudo-classes and pseudo-elements?\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"ZdF73zI7lB\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Pseudo-classes\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"AAkvTIvczd\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Pseudo-classes as used for selecting states of an element. They are not elements themselves. Some examples are:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"H2QQ5iPojo\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".anchor:hover {\\\\n /* styles for the hover state of the anchor */\\\\n}\\\\n\\\\n.anchor:visited {\\\\n /* styles for already visited anchor */\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"pseudo-classes.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"u7BhqpB8iQ\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Pseudo-elements\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"47VPze7mxs\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"pseudo-elements on the other hand are used for selecting parts of an actual DOM element, such as what comes before or after it, specific letters, or even lines. Some examples are:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"9Hlxzz1G0A\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".paragraph::before {\\\\n /* style the pseudo element before the paragraph */\\\\n}\\\\n\\\\n.paragraph::after {\\\\n /* style the pseudo element after the paragraph */\\\\n}\\\\n\\\\n.paragraph::first-line {\\\\n /* style the first line of the paragraph */\\\\n}\\\\n\\\\n.paragraph::first-letter {\\\\n /* style the first letter of the paragraph */\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"pseudo-elements.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"C1KYgWoWjm\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/11/single-vs-double-colon-in-css.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips,\\\\n\\\\t\\\\t\\\\t\\\\tfollow @flowforfrank\\\\n\\\\t\\\\t\\\\t\\\"],\\\"alt\\\":[0,\\\"What is the difference between sing and double colon in CSS?\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"IZIW3SVEOe\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"Sco198kOqR\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"8w9CEW1XmD\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"s1tDvAYLYJ\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Pseudo classes in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Pseudo elements in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,208],\"readTime\":[0,2]}],[0,{\"id\":[0,2064],\"publishDate\":[0,\"2020-09-28\"],\"lastModified\":[0,\"2020-09-28\"],\"url\":[0,\"/webtips/css/how-to-blend-elements-together-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Blend Elements Together in CSS\"],\"excerpt\":[0,\"Did you know that you can use pure CSS to blend images together with the mix-blend-mode property in the following way? Note that you have to use isolation..\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/09/how-to-blend-elements-together.png\"],\"featuredImageAlt\":[0,\"How to Blend Elements Together in CSS\"],\"metaDescription\":[0,\"Did you know that you can use pure CSS to blend images together with the mix-blend-mode property in the following way? Note that you have to use isolation..\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"HBWRlqgCrQ\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Did you know that you can use pure CSS to blend images together with the mix-blend-mode property in the following way?\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"LM8H313Qd9\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"\\\\n\\\\n
\\\\n \\\\n \\\\n \\\\n
\\\"],\\\"languageCode\\\":[0,\\\"html\\\"],\\\"filename\\\":[0,\\\"blend.html\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"4d31UvIkRG\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Note, that it's important to set the parent's isolation to isolate if you don't want to blend with the background. The possible values for mix-blend-mode are:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"muCZK04OtG\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"mix-blend-mode: normal;\\\\nmix-blend-mode: multiply;\\\\nmix-blend-mode: screen;\\\\nmix-blend-mode: overlay;\\\\nmix-blend-mode: darken;\\\\nmix-blend-mode: lighten;\\\\nmix-blend-mode: color-dodge;\\\\nmix-blend-mode: color-burn;\\\\nmix-blend-mode: hard-light;\\\\nmix-blend-mode: soft-light;\\\\nmix-blend-mode: difference;\\\\nmix-blend-mode: exclusion;\\\\nmix-blend-mode: hue;\\\\nmix-blend-mode: saturation;\\\\nmix-blend-mode: color;\\\\nmix-blend-mode: luminosity;\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"blend-modes.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"WjFg8e1goe\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/09/how-to-blend-elements-together.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to Blend Elements Together in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"xcYNiJBZaw\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"3YWRv6Bwdv\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"x49O5ZYHff\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"6NKRCBLU34\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The mix-blend-mode property in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The isolation property in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,127],\"readTime\":[0,1]}],[0,{\"id\":[0,1931],\"publishDate\":[0,\"2020-09-16\"],\"lastModified\":[0,\"2020-09-28\"],\"url\":[0,\"/webtips/css/how-to-change-caret-color-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Change Caret Color in CSS\"],\"excerpt\":[0,\"Did you know, that you can change the color of your carets inside input with in CSS using the caret-color property?\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/09/css-caret-color.png\"],\"featuredImageAlt\":[0,\"How to Change Caret Color in CSS\"],\"metaDescription\":[0,\"Did you know, that you can change the color of your carets inside input with in CSS using the caret-color property?\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"L8Ll5WwNyQ\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"CSS often has some hidden gems. One of them is the caret-color property. Seems like you can really change everything with CSS. You can use it to give different color to your carets inside input fields:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"BxX79rXqkV\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"\\\\n\\\\n\\\\n\\\\n\\\"],\\\"languageCode\\\":[0,\\\"html\\\"],\\\"filename\\\":[0,\\\"caret-color.html\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"bpLq86ShPR\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Note that you also have the option to make it invisible, by simply setting its value to transparent.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"zSJtVY39bD\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/09/css-caret-color.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to Change Caret Color in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/intent/user?screen_name=flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"WJLT6wQIiT\\\"],\\\"type\\\":[0,\\\"delimiter\\\"],\\\"data\\\":[0,{}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"z6fBDGWmXo\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"fsCJ8J0Y3k\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"T6sCOtnhym\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The caret-color property in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,105],\"readTime\":[0,1]}],[0,{\"id\":[0,1656],\"publishDate\":[0,\"2020-08-19\"],\"lastModified\":[0,\"2020-08-19\"],\"url\":[0,\"/webtips/css/how-to-blend-text-into-images-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Blend Text Into Images in CSS\"],\"excerpt\":[0,\"Learn how you can use the mix-blend-mode property in CSS to blend text into images.\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/08/blend-text-into-image-css.png\"],\"featuredImageAlt\":[0,\"How to Blend Text Into Images in CSS\"],\"metaDescription\":[0,\"Learn how you can use the mix-blend-mode property in CSS to blend text into images.\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"1ZWvRHYrBx\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can use the mix-blend-mode property in CSS to blend text into images:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"gNTS4Fntae\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"// Use the mix-blend-mode property to blend text\\\\n// into images.\\\\n\\\\n.blend { \\\\n mix-blend-mode: overlay;\\\\n}\\\\n\\\\n\\\\n \\\\n \\\\n βNature does not hurry, \\\\n yet everything is accomplished.β\\\\n~ Lao Tzu\\\\n \\\\n\\\"],\\\"languageCode\\\":[0,\\\"html\\\"],\\\"filename\\\":[0,\\\"blend.html\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"YpLlpgwR6X\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can check the result in the following Codepen:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"ZrSvIqvjNF\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Blending text into images\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"BMrxWPzVuv\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"The mix-blend-mode property can take up a number of different values:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"jrxh7iEas3\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"mix-blend-mode: normal;\\\\nmix-blend-mode: multiply;\\\\nmix-blend-mode: screen;\\\\nmix-blend-mode: overlay;\\\\nmix-blend-mode: darken;\\\\nmix-blend-mode: lighten;\\\\nmix-blend-mode: color-dodge;\\\\nmix-blend-mode: color-burn;\\\\nmix-blend-mode: hard-light;\\\\nmix-blend-mode: soft-light;\\\\nmix-blend-mode: difference;\\\\nmix-blend-mode: exclusion;\\\\nmix-blend-mode: hue;\\\\nmix-blend-mode: saturation;\\\\nmix-blend-mode: color;\\\\nmix-blend-mode: luminosity;\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"blend.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"pHtUIClwNb\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/08/blend-text-into-image-css-1024x1024.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to Blend Text Into Images in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"o6R795Mfkx\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"lpgTEv7TPb\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The mix-blend-mode property in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,102],\"readTime\":[0,1]}],[0,{\"id\":[0,1624],\"publishDate\":[0,\"2020-08-17\"],\"lastModified\":[0,\"2020-08-19\"],\"url\":[0,\"/webtips/css/how-to-create-drop-caps-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Create Drop Caps in CSS\"],\"excerpt\":[0,\"Learn how you can easily create drop caps in pure CSS using pseudo selectors.\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/08/drop-caps-in-css.png\"],\"featuredImageAlt\":[0,\"How to Create Drop Caps in CSS\"],\"metaDescription\":[0,\"Learn how you can easily create drop caps in pure CSS using pseudo selectors.\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"gcVBpmL6xA\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Everyone loves drop caps. In order to create one in CSS, all you have to do is use the first-letter speudo selector and you can give your letter all kinds of styles:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"WSmrDV30ye\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"/* Make drop-caps with the first-letter selector */\\\\n\\\\n.dear-lorem:first-letter {\\\\n font-size: 300%;\\\\n float: left;\\\\n margin: 10px;\\\\n font-family: fantasy;\\\\n color: #FFF;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"drop-caps.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"SVbbjajZ3S\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"There's only one problem with this. It will style the first letter of every paragraph. To get around this, change the above selector to the following:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"BqQKu5R1NS\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".dear-lorem:first-child:first-letter { /* Your initial styles goes here */ }\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"drop-caps.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"I9dsbe84gD\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"This will only select the first child β your very first paragraph inside your content.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"10gFtI8twW\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/08/drop-caps-in-css-1024x1024.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to Create Drop Caps in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"2SBa6eY6dj\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"azWXa0bER2\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The first-letter selector in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The first-child selector\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,117],\"readTime\":[0,1]}],[0,{\"id\":[0,1614],\"publishDate\":[0,\"2020-08-17\"],\"lastModified\":[0,\"2020-08-17\"],\"url\":[0,\"/webtips/css/how-to-create-gradient-texts-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Create Gradient Texts in CSS\"],\"excerpt\":[0,\"Learn how you can create gradient texts in CSS with the use of background gradients.\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/08/gradient-text-in-css.png\"],\"featuredImageAlt\":[0,\"How to Create Gradient Texts in CSS\"],\"metaDescription\":[0,\"Learn how you can create gradient texts in CSS with the use of background gradients.\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"lgKfawGJaK\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"The background-clip property, in combination with the text-fill-color property in CSS can be used for coloring texts with a gradient:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"JsXS3enBMX\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"/* Create text gradients with the following: */\\\\n\\\\n.gradient {\\\\n background: -webkit-gradient(linear, \\\\n left top, left bottom, \\\\n from(#FCA101), to(#F03823)\\\\n );\\\\n -webkit-background-clip: text;\\\\n -webkit-text-fill-color: transparent;\\\\n}\\\\n\\\\n/* Will produce the following: */\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"gradient-text.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"GOOpAIs9NF\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"\\\\n
Welcome to the 90's
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"GISGHZcFEp\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/08/gradient-text-in-css-1024x1024.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to Create Gradient Texts in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"FHUKkZnpXK\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"RbGU3dE10b\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Documentation of gradient data type in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"background-clip property\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"-webkit-text-fill-color property\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,78],\"readTime\":[0,1]}],[0,{\"id\":[0,1563],\"publishDate\":[0,\"2020-08-13\"],\"lastModified\":[0,\"2020-08-13\"],\"url\":[0,\"/webtips/css/how-to-style-scrollbars-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Style Scrollbars in CSS\"],\"excerpt\":[0,\"Learn how you can style different parts of the scrollbar in CSS\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/08/style-scrollbars.png\"],\"featuredImageAlt\":[0,\"How to Style Scrollbars in CSS\"],\"metaDescription\":[0,\"Learn how you can style different parts of the scrollbar in CSS\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"4ZUVoqHAOK\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can style different parts of a scrollbar in webkit browser, using the below selectors:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"GE8Xd63T5K\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"// Change style of scrollbars with the// ::-webkit-scrollbar pseudo elements\\\\n\\\\n::-webkit-scrollbar {\\\\n width: 5px;\\\\n}\\\\n\\\\n::-webkit-scrollbar-track {\\\\n background: #282e3b;\\\\n}\\\\n\\\\n::-webkit-scrollbar-thumb {\\\\n background: #fff;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"scss\\\"],\\\"filename\\\":[0,\\\"scrollbar.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"8Y1cCmyVP9\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Keep in mind that support for scrollbar is really low when using it unprefixed. This is because the specification is still in working draft.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"LR8cGFxhh3\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/08/style-scrollbars-1024x1024.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to Style Scrollbars in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"e2Aktpe21c\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"FQmLs5XnKx\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"CSS scrollbar property\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Support table for the scrollbar property\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,86],\"readTime\":[0,1]}],[0,{\"id\":[0,1561],\"publishDate\":[0,\"2020-08-13\"],\"lastModified\":[0,\"2020-08-13\"],\"url\":[0,\"/webtips/css/how-to-check-for-support-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Check For Support in CSS?\"],\"excerpt\":[0,\"Learn how you can check in CSS whether a CSS feature is supported or not.\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/08/how-to-check-support-in-css.png\"],\"featuredImageAlt\":[0,\"How to Check For Support in CSS?\"],\"metaDescription\":[0,\"Learn how you can check in CSS whether a CSS feature is supported or not.\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"7p9f0fJl3w\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can use the @supports CSS rule to check whether a CSS feature is supported:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"rnBy5bt7NU\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"// Use the @supports CSS at-rule for feature queries\\\\n\\\\n@supports (mix-blend-mode: overlay) {\\\\n .blending {\\\\n mix-blend-mode: overlay;\\\\n }\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"scss\\\"],\\\"filename\\\":[0,\\\"support.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"Uzpoyjd0V7\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"If you need to depend on supporting functionality in JavaScript, you can also achieve the same thing using the built-in CSS API:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"btvkYclgyt\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"// The method accepts two parameters:\\\\n// β’ the CSS property to check\\\\n// β’ the value of the CSS property\\\\n// it will return either true or false, based on whether the feature is supported\\\\nCSS.supports('mix-blend-mode', 'overlay');\\\"],\\\"languageCode\\\":[0,\\\"js\\\"],\\\"filename\\\":[0,\\\"support.js\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"EH2aDHAxTc\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/08/how-to-check-support-in-css-1024x1024.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to Check For Support in CSS?\\\"],\\\"link\\\":[0,\\\"https://twitter.com/flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"MVWBx9CSrj\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"bJHq1IV1VJ\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"@supports rule in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The CSS API in JavaScript\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,113],\"readTime\":[0,1]}],[0,{\"id\":[0,1557],\"publishDate\":[0,\"2020-08-12\"],\"lastModified\":[0,\"2021-08-10\"],\"url\":[0,\"/webtips/css/what-is-the-difference-between-visibility-hidden-and-display-none-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"What is the Difference Between visibility: hidden and display: none in CSS?\"],\"excerpt\":[0,\"Do you know what is the difference between visibility hidden and display none in CSS? There is a fundamental difference between the two.\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/08/visibility-hidden-vs-display-none.png\"],\"featuredImageAlt\":[0,\"What is the Difference Between visibility: hidden and display: none in CSS?\"],\"metaDescription\":[0,\"Do you know what is the difference between visibility hidden and display none in CSS? There is a fundamental difference between the two.\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Both methods are used to hide elements on a page, but they are fundamentally different, therefore, we must differentiate between the two. When you set visibility to hidden on an element, it is like setting opacity to 0. The box model of the element is invisible but it still affects the layout. Space is still allocated to it.\\\"]}]}],[0,{\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"When you use display: none;, however, the element is completely removed from the document layout. This means you can't tell that there is an invisible element on the page. The document is rendered like the element doesn't even exist.\\\"]}]}],[0,{\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"\\\\n\\\\n\\\\n\\\\n\\\\n\\\\n\\\"],\\\"languageCode\\\":[0,\\\"html\\\"],\\\"filename\\\":[0,\\\"visibility-vs-display.html\\\"]}]}],[0,{\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Note that when removing an element from the visible layout with either setting visibility to hidden, or display to none, the element will also get removed from the accessibility tree. This means that the element and all of its descendants will be invisible to screen readers too.\\\"]}]}],[0,{\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"We must also point out that when we set an element invisible using visibility, its descendants can be still visible when setting visibility to visible:\\\"]}]}],[0,{\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"// I am set to hidden, but I still affect the layout\\\\n.hidden {\\\\n visiblity: hidden;\\\\n \\\\n // Although my parent is invisible, I can still be visible\\\\n .visible {\\\\n visibility: visible;\\\\n }\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"scss\\\"],\\\"filename\\\":[0,\\\"visibility.scss\\\"]}]}],[0,{\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/08/visibility-hidden-vs-display-none.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"What is the Difference Between visibility: hidden and display: none in CSS?\\\"],\\\"link\\\":[0,\\\"https://twitter.com/flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"],\\\"stretched\\\":[0,true]}]}],[0,{\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resources:\\\"],\\\"level\\\":[0,2]}]}],[0,{\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The visibility property in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The display property in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"The accessibility APIs\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}]}]]\"]}],\"wordCount\":[0,287],\"readTime\":[0,2]}],[0,{\"id\":[0,1515],\"publishDate\":[0,\"2020-08-10\"],\"lastModified\":[0,\"2021-07-19\"],\"url\":[0,\"/webtips/css/how-to-easily-create-arrows-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Easily Create Arrows in CSS\"],\"excerpt\":[0,\"Learn how you can easily create arrows and triangles in CSS using the border property and CSS transforms.\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/08/css-arrows.gif\"],\"featuredImageAlt\":[0,\"How to Easily Create Arrows in CSS\"],\"metaDescription\":[0,\"Learn how you can easily create arrows and triangles in CSS using the border property and CSS transforms.\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"G6RcV7SnMe\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can tweak around with the border property and transform in CSS to create chevrons:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"4eZKH1mAy7\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".arrow {\\\\n display: inline-block;\\\\n border: solid #FCA101;\\\\n border-width: 0 3px 3px 0;\\\\n padding: 3px;\\\\n}\\\\n\\\\n.arrow--up { transform: rotate(-135deg); }\\\\n.arrow--down { transform: rotate(45deg); }\\\\n.arrow--left { transform: rotate(135deg); }\\\\n.arrow--right { transform: rotate(-45deg); }\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"arrows.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"5gIAzSA2dD\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can also turn the above example into triangles by changing the border property around a bit:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"tAIp0mIIFl\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".triangle-up {\\\\n border-left: 5px solid transparent;\\\\n border-right: 5px solid transparent;\\\\n border-bottom: 5px solid #FCA101;\\\\n}\\\\n\\\\n.triangle-down {\\\\n border-left: 5px solid transparent;\\\\n border-right: 5px solid transparent;\\\\n border-top: 5px solid #FCA101;\\\\n}\\\\n\\\\n.triangle-left {\\\\n border-top: 5px solid transparent;\\\\n border-bottom: 5px solid transparent;\\\\n border-right: 5px solid #FCA101;\\\\n}\\\\n\\\\n.triangle-right {\\\\n border-top: 5px solid transparent;\\\\n border-bottom: 5px solid transparent;\\\\n border-left: 5px solid #FCA101;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"triangles.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"DqSbEXbxf8\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"By also combining the above examples with some transforms, you can achieve diagonal triangles:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"8JCyntIYMr\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".diagonal-triangle {\\\\n /* Make sure your element is block level. Otherwise you can't transform it. */\\\\n display: inline-block;\\\\n border-left: 5px solid transparent;\\\\n border-right: 5px solid transparent;\\\\n border-bottom: 5px solid #FCA101;\\\\n transform: rotate(45deg);\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"triangles.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"oBTLdY87QN\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/08/css-arrows.gif\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to Easily Create Arrows in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"ZsHgqtIWsJ\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resource\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"8mZrLCvFg0\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"CSS borders\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"Transforms in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,238],\"readTime\":[0,2]}],[0,{\"id\":[0,1512],\"publishDate\":[0,\"2020-08-10\"],\"lastModified\":[0,\"2020-08-10\"],\"url\":[0,\"/webtips/css/how-to-create-equal-height-columns-with-flexbox\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How To Create Equal Height Columns With Flexbox\"],\"excerpt\":[0,\"Learn how you can create equal height columns in CSS using flexbox and a number of different ways. You need no more than two rules.\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/08/equal-height-columns.png\"],\"featuredImageAlt\":[0,\"How To Create Equal Height Columns With Flexbox\"],\"metaDescription\":[0,\"Learn how you can create equal height columns in CSS using flexbox and a number of different ways. You need no more than two rules.\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"4WV10XiWpT\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Using flexbox it only takes two rules to create even height columns in CSS, even if your content is different for each of them:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"TbOTwMdyDj\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".columns {\\\\n display: flex;\\\\n\\\\n .column {\\\\n flex: 1;\\\\n }\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"scss\\\"],\\\"filename\\\":[0,\\\"flex-columns.scss\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"ziiscEig3a\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"There are also other ways to achieve the same effect. For example, by using grid, again, you need two rules:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"6jYpyICbpM\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".columns {\\\\n display: grid;\\\\n grid-auto-flow: column;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"scss\\\"],\\\"filename\\\":[0,\\\"grid-columns.scss\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"mOk4mEZL4A\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"And the same can be done using tables as well:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"c6QHWS58VL\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".columns {\\\\n display: table;\\\\n\\\\n .column {\\\\n display: table-cell;\\\\n }\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"scss\\\"],\\\"filename\\\":[0,\\\"table-columns.scss\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"tkyYsauDk4\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/08/equal-height-columns-1024x1024.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How To Create Equal Height Columns With Flexbox\\\"],\\\"link\\\":[0,\\\"https://twitter.com/flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"uNJ40zDaC7\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resource\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"CIzyDQVhAc\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"flex: 1 in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"grid-auto-flow in CSS\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,124],\"readTime\":[0,1]}],[0,{\"id\":[0,1458],\"publishDate\":[0,\"2020-08-05\"],\"lastModified\":[0,\"2020-08-05\"],\"url\":[0,\"/webtips/css/how-to-center-elements-in-css-with-flexbox\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Center Elements in CSS With Flexbox\"],\"excerpt\":[0,\"Get your weekly dose of webtips\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/08/flexbox-center.png\"],\"featuredImageAlt\":[0,\"How to Center Elements in CSS With Flexbox\"],\"metaDescription\":[0,\"Get your weekly dose of webtips\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"tZXSniFiuy\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Using flexbox, it takes only three rules to dead center elements in CSS:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"HpdCKTEvLT\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".city {\\\\n display: flex;\\\\n justify-content: center;\\\\n align-items: center;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"center.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"7UWdzgkJZc\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"justify-content centers it on the horizontal axis\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"align-items centers it along the vertical axis\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"ixtS5iFsWQ\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Don't Want to Use Flexbox?\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"C4N25hj7XJ\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"There are several other ways to dead center elements. If you need to center a text vertically, you can do it by setting the line-height to the height of its container:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"0qUQziL7QH\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".container {\\\\n background: cornflowerblue;\\\\n width: 250px;\\\\n height: 250px;\\\\n text-align: center;\\\\n /* set line-height to the height of the container */\\\\n line-height: 250px;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"center.css\\\"],\\\"highlights\\\":[0,\\\"7-8\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"DTlj6Ito6d\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\" You can also easily center absolutely positioned elements by using transform.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"0iVOthDkQd\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\".center {\\\\n top: 50%;\\\\n left: 50%;\\\\n /**\\\\n * This will move the element -50% \\\\n * It will also move it -50% to the top\\\\n **/\\\\n transform: translate(-50%, -50%);\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"css\\\"],\\\"filename\\\":[0,\\\"center.css\\\"],\\\"highlights\\\":[0,\\\"8-9\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"6YNH2Uxg2E\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"By default, anchor points are set to the top-left corner of an element. To dead center absolutely positioned elements, you need to move them back -50% on both axis. Think of it as setting an anchor point to the center.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"hJ68W5U5hJ\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/08/flexbox-center-1024x1024.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to Center Elements in CSS With Flexbox\\\"],\\\"link\\\":[0,\\\"https://twitter.com/flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"Lh3GDCb3jt\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resource\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"8e1J24wL5s\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"justify-content in flexbox\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}],[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"align-items in flexbox\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,196],\"readTime\":[0,1]}],[0,{\"id\":[0,1455],\"publishDate\":[0,\"2020-08-05\"],\"lastModified\":[0,\"2020-08-05\"],\"url\":[0,\"/webtips/css/the-small-caps-value-in-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"The small-caps Value in CSS\"],\"excerpt\":[0,\"Get your weekly dose of webtips\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/08/small-caps-1.png\"],\"featuredImageAlt\":[0,\"The small-caps Value in CSS\"],\"metaDescription\":[0,\"Get your weekly dose of webtips\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"ksFwntqOlS\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can use font-variant: small-caps to change the styling of your fonts\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"GpR6LoqNIm\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"\\\\n\\\\n
\\\\n In a small-caps font, ALL lowercase letters\\\\n are converted to uppercase.\\\\n
\\\"],\\\"languageCode\\\":[0,\\\"html\\\"],\\\"filename\\\":[0,\\\"font-variant.html\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"etxKLEADrF\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"This will produce the following:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"mUIIgXxqs4\\\"],\\\"type\\\":[0,\\\"raw\\\"],\\\"data\\\":[0,{\\\"html\\\":[0,\\\"
\\\\n In a small-caps font, ALL lowercase letters\\\\n are converted to uppercase.\\\\n
\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"A5anMcxmmN\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Apart from small-caps, the font-variant property can take up a number of different values. See the CSS demo and the full list of available values on MDN documentation on the provided link.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"SzMVhZSQa9\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/08/small-caps-1-1024x1024.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"link\\\":[0,\\\"https://twitter.com/flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"4Fv8WFXlCr\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resource\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"kBLllL0n1b\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"CSS font-variant\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,80],\"readTime\":[0,1]}],[0,{\"id\":[0,1414],\"publishDate\":[0,\"2020-07-31\"],\"lastModified\":[0,\"2020-07-31\"],\"url\":[0,\"/webtips/css/how-to-darken-background-to-give-focus\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Darken Background to Give Focus\"],\"excerpt\":[0,\"Learn how you can darken background elements in CSS to give focus to inputs or other call to actions.\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/07/mask.png\"],\"featuredImageAlt\":[0,\"How to Darken Background to Give Focus to Input Elements in CSS\"],\"metaDescription\":[0,\"Learn how you can darken background elements in CSS to give focus to inputs or other call to actions.\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"xryPxGqjku\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Imagine you want to darken the entire background of your page, except for one element. This can act as a great way to focus the user's attention to the most relevant part of the page, such as an important message, a search bar or a CTA.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"B2fGNxx9Ch\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can achieve this effect by using only one CSS property: box-shadow.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"a3kOec2Xk3\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"// This will mask out everything on the page expect for the element\\\\n// that has the box shadow.\\\\n.input-focused {\\\\n box-shadow: 0 0 0 9999px #000000b0;\\\\n}\\\"],\\\"languageCode\\\":[0,\\\"scss\\\"],\\\"filename\\\":[0,\\\"mask.scss\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"E6esYjE4ct\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"This works by specifying the spread-radius of the box-shadow. By increasing the spread, you increase the size of the box-shadow. The goal is to make it so big, that it covers the whole page.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"ANFbZeYonz\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"See how it starts to cover everything as I increase it's value:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"6vBFr2W6tu\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/07/increasing-box-shadow.gif\\\"],\\\"caption\\\":[0,\\\"Learn how to make a day & night toggle in CSS\\\"],\\\"link\\\":[0,\\\"https://webtips.dev/how-to-make-an-animated-day-and-night-toggle-switch\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"l4DeFxXYlF\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can also start creating interesting effects by defining an element with no content and changing its position through JavaScript. \\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"UZ8A2CAXh4\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/07/moving-shadow.gif\\\"],\\\"caption\\\":[0,\\\"By changing the position of the element, you can create user friendly walkthrough tutorials\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"lHUHoAMBk6\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Experiment With Box-Shadow\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"9McXQnatq5\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can use the Codepen below to interact with the element and see live how box-shadow is created :\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"WJpE9KtOpx\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Edit box-shadow live\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"UhrVps61DB\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/07/mask-1024x1024.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to Darken Background to Give Focus to Input Elements in CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"BdNyxbvPnH\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resource\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"STrFoF3HLm\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"CSS box-shadow property\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,178],\"readTime\":[0,1]}],[0,{\"id\":[0,1412],\"publishDate\":[0,\"2020-07-31\"],\"lastModified\":[0,\"2020-07-31\"],\"url\":[0,\"/webtips/css/how-to-make-custom-bullet-points-with-css\"],\"status\":[0,\"published\"],\"type\":[0,\"webtip\"],\"title\":[0,\"How to Make Custom Bullet Points With CSS\"],\"excerpt\":[0,\"Learn how you can make custom bullet points purely in CSS with pseudo elements.\"],\"authors\":[0,{\"name\":[0,\"Ferenc Almasi\"],\"url\":[0,\"ferenc\"]}],\"tags\":[1,\"[[0,{\\\"id\\\":[0,9],\\\"name\\\":[0,\\\"CSS\\\"]}],[0,{\\\"id\\\":[0,20],\\\"name\\\":[0,\\\"Webtips\\\"]}]]\"],\"featuredImage\":[0,\"https://allma.si/blog/wp-content/uploads/2020/07/custom-bullets.png\"],\"featuredImageAlt\":[0,\"How to Make Custom Bullet Points With CSS\"],\"metaDescription\":[0,\"Learn how you can make custom bullet points purely in CSS with pseudo elements.\"],\"content\":[0,{\"blocks\":[1,\"[[0,{\\\"id\\\":[0,\\\"BebzKVlISU\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"You can easily make custom bullet points for HTML lists with the use of CSS ::before pseudo-element.\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"WWHducdy1H\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"ul {\\\\n list-style: none;\\\\n}\\\\n\\\\nul.complete li::before {\\\\n content: 'βοΈ ';\\\\n}\\\\n\\\\nul.incomplete li::before {\\\\n content: 'β ';\\\\n}\\\\n\\\\n// Will produce the following\\\\nβοΈ Learn about HTML\\\\nβοΈ Learn about CSS\\\\nβ Learn about JavaScript\\\"],\\\"languageCode\\\":[0,\\\"scss\\\"],\\\"filename\\\":[0,\\\"bullets.css\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"BHPqzaYumz\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Using ::before for Numbering\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"lXiTbsJCJD\\\"],\\\"type\\\":[0,\\\"paragraph\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Another common trick that ::before elements can be used are for numbering headings, for example in a table of contents:\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"1wB0XO6EBy\\\"],\\\"type\\\":[0,\\\"code\\\"],\\\"data\\\":[0,{\\\"code\\\":[0,\\\"
Table of Contents
\\\\n
The Tale of CSS
\\\\n
Acknowledgments
\\\\n\\\\n\\\\n\\\\n<-- Will produce the following: -->\\\\n1) Table of Contents\\\\n2) The Tale of CSS\\\\n3) Acknowledgments\\\"],\\\"languageCode\\\":[0,\\\"html\\\"],\\\"filename\\\":[0,\\\"numbers.html\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"B8GGHg9C1T\\\"],\\\"type\\\":[0,\\\"image\\\"],\\\"data\\\":[0,{\\\"url\\\":[0,\\\"https://allma.si/blog/wp-content/uploads/2020/07/custom-bullets-1024x1024.png\\\"],\\\"caption\\\":[0,\\\"If you would like to see more Webtips, follow @flowforfrank\\\"],\\\"alt\\\":[0,\\\"How to Make Custom Bullet Points With CSS\\\"],\\\"link\\\":[0,\\\"https://twitter.com/flowforfrank\\\"],\\\"linkTarget\\\":[0,\\\"_blank\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"lc6KTwOLAH\\\"],\\\"type\\\":[0,\\\"header\\\"],\\\"data\\\":[0,{\\\"text\\\":[0,\\\"Resource\\\"],\\\"level\\\":[0,2]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}],[0,{\\\"id\\\":[0,\\\"Y7w12JXGID\\\"],\\\"type\\\":[0,\\\"nestedList\\\"],\\\"data\\\":[0,{\\\"style\\\":[0,\\\"unordered\\\"],\\\"items\\\":[1,\\\"[[0,{\\\\\\\"content\\\\\\\":[0,\\\\\\\"::before speudo element\\\\\\\"],\\\\\\\"items\\\\\\\":[1,\\\\\\\"[]\\\\\\\"]}]]\\\"]}],\\\"tunes\\\":[0,{\\\"anchorTune\\\":[0,{}]}]}]]\"]}],\"wordCount\":[0,126],\"readTime\":[0,1]}]]"],"cardTitleTag":[0,"h2"]}" renderer-url="/client.788af3ea.js" ssr="" uid="Z1SWbqC" await-children="">
This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.
Get access to 300+ webtips π
Level up your skills and master the art of frontend development with bite-sized tutorials.