https://www.clairecodes.com/categories/css/ Recent content in Css on clairecodes Hugo -- gohugo.io en-gb Mon, 01 Feb 2021 14:01:55 +0000 https://www.clairecodes.com/blog/2021-02-01-font-face-and-styled-components// Mon, 01 Feb 2021 14:01:55 +0000 https://www.clairecodes.com/blog/2021-02-01-font-face-and-styled-components// A method to add a font using font-face to a React app using styled-components. Adding a Google font to your project using a <link> tag is quick and easy, but you may want to self-host these files instead, perhaps for performance reasons. Or maybe your project uses a non-Google font! How can you add font files with @font-face to a project that uses styled components? The first step is to obtain your font files. https://www.clairecodes.com/blog/2020-05-26-css-transitions-for-multiple-properties-on-one-element// Tue, 26 May 2020 21:35:20 +0100 https://www.clairecodes.com/blog/2020-05-26-css-transitions-for-multiple-properties-on-one-element// This caught me out recently so I thought it was worth documenting in a blog post. How do you define a CSS transition for multiple properties on the same HTML element? The CSS transition property defines the effect between two different states of an element. transition is a shorthand property, which means it combines other CSS properties in single declaration. The resulting shorthand is simpler to read and write. Other common shorthand properties are margin, background and font. https://www.clairecodes.com/blog/2019-04-26-styling-list-bullets-with-emoji// Fri, 26 Apr 2019 11:48:09 +0100 https://www.clairecodes.com/blog/2019-04-26-styling-list-bullets-with-emoji// The available styles of bullet points for HTML unordered lists <ul> are limited. Using CSS, they can be changed to something more exciting, like emoji! 🎉👯‍♂️✨ In this post, I’ll show you two methods to replace them: @counter-style, which is concise and flexible (but your browser probably doesn’t support it), and the more tried-and-tested technique of using the ::before pseudo-element. We will transform an unordered list with unstyled counters from this: https://www.clairecodes.com/blog/2019-04-21-my-misconceptions-about-the-universal-selector-in-css// Sun, 21 Apr 2019 23:31:22 +0100 https://www.clairecodes.com/blog/2019-04-21-my-misconceptions-about-the-universal-selector-in-css// The asterisk * is known as the universal selector in CSS. It matches all elements of any type. * { color: red; } This example would change the colour of all the text on the page to red (as long as there wasn’t a more specific rule applied to the element). I don’t often use the universal selector, because I assumed that selecting everything would be bad for page performance and difficult to override. https://www.clairecodes.com/blog/2018-10-25-drawing-a-shield-with-one-div// Thu, 25 Oct 2018 16:57:13 +0100 https://www.clairecodes.com/blog/2018-10-25-drawing-a-shield-with-one-div// Have you ever seen A Single Div by Lynn Fisher? The following example is in no way as impressive but follows the same concept: drawing an item using CSS and only one HTML div. I was inspired by seeing this site explaining the concept of using multiple values in the border-radius value. I already knew you could do this, but looking at the shape reminded me of a shield, and things escalated from there. https://www.clairecodes.com/blog/2018-10-19-sass-or-scss// Fri, 19 Oct 2018 21:18:44 +0100 https://www.clairecodes.com/blog/2018-10-19-sass-or-scss// What do you use to style web pages? Do you write CSS or use a preprocessor? Sass is a popular CSS preprocessor, but why do you sometimes see Sass, and other times SCSS? Do you find all these acronyms and file extensions confusing, when all you want to do is make your title text a nice shade of maroon? In this post, I’ll define some of the common abbreviations associated with Sass and explain the difference between Sass and SCSS. https://www.clairecodes.com/blog/2018-10-11-emoji-silhouettes// Thu, 11 Oct 2018 21:38:16 +0100 https://www.clairecodes.com/blog/2018-10-11-emoji-silhouettes// To change the colour of text with CSS, we can simply use the colour CSS property. However, this doesn’t work on emoji characters. But by using the background-clip property, it’s possible to fill the whole emoji shape with a colour, or gradient. This enables us to create text effects like this: .silhouette-one { font-size: 24px; display: inline-block; background: -webkit-linear-gradient(to right, #ffea00, #f50057); background: linear-gradient(to right, #ffea00, #f50057); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } 🐘 ☘️ ⭐️ TL;DR The CSS required to create the silhouettes above looks like this: https://www.clairecodes.com/blog/2018-10-10-css-polka-dot-background// Wed, 10 Oct 2018 23:14:56 +0100 https://www.clairecodes.com/blog/2018-10-10-css-polka-dot-background// TL;DR This post explains how to produce this design using CSS: .polka-space-one { background-image: radial-gradient(#212121 20%, transparent 20%), radial-gradient(#FAFAFA 20%, transparent 20%); background-color: #E53935; background-position: 0 0, 50px 50px; background-size: 100px 100px; width: 100%; height: 300px; } It can be created with only a single HTML tag and these background-related CSS properties: body { background-image: radial-gradient(#212121 20%, transparent 20%), radial-gradient(#fafafa 20%, transparent 20%); background-color: #e53935; background-position: 0 0, 50px 50px; background-size: 100px 100px; } Below is an explanation of how this works, or you can experiment with the code directly in this CodePen example: https://www.clairecodes.com/blog/2018-09-14-customising-styled-components-with-props// Fri, 14 Sep 2018 17:35:27 +0100 https://www.clairecodes.com/blog/2018-09-14-customising-styled-components-with-props// How do you change the style and appearance of a React styled component the value of a prop? Define the component in your app and pass the prop. (Setting a prop with no value as I do below implicitly passes a boolean true.) I’m using a boolean to keep things simple. <Widget invisible>Hello World</Widget> Next, in your component, pass the prop to the styled component wrapper. We can access the props within the styled component’s tagged template literal. https://www.clairecodes.com/blog/2018-04-16-drying-out-css-selectors-with-sass-maps// Mon, 16 Apr 2018 22:31:21 +0100 https://www.clairecodes.com/blog/2018-04-16-drying-out-css-selectors-with-sass-maps// Repetitive selectors I recently wrote some Sass that looked like this: $color-apple: green; $color-lemon: yellow; $color-strawberry: red; .apple-button { background-color: $color-apple; } .strawberry-button { background-color: $color-strawberry; } .lemon-button { background-color: $color-lemon; } // This compiles to: // .apple-button { // background-color: green; // } // // .strawberry-button { // background-color: red; // } // // .lemon-button { // background-color: yellow; // } (No I’m not working on a website for a greengrocers, the fruit theme is just for example purposes! https://www.clairecodes.com/blog/2018-04-02-making-a-sticky-sidebar-with-two-lines-of-css// Mon, 02 Apr 2018 16:19:53 +0100 https://www.clairecodes.com/blog/2018-04-02-making-a-sticky-sidebar-with-two-lines-of-css// Have you ever been on a website where an element “sticks” to the screen and follows you as you scroll down the page? This is what I call a sticky sidebar, and I’ve spent many hours battling with legacy code trying to debug one. In the past, developers used JavaScript to build this feature, by recalculating the position of the sidebar on the browser’s scroll event. This was complicated to maintain and also costly for performance. https://www.clairecodes.com/blog/2018-03-19-reasons-not-to-use-ids-in-css// Mon, 19 Mar 2018 20:54:03 +0000 https://www.clairecodes.com/blog/2018-03-19-reasons-not-to-use-ids-in-css// Sometimes when I’m reviewing code, I advise a colleague not to use IDs for CSS style selectors, and inevitably get asked why. Like standing in queues, making a cup of tea or applying a full face of makeup in the dark at 6am, avoiding IDs in CSS is something I do without thinking. I’ve been doing it for so long without questioning it, that it takes me a minute before I can explain to other people why. https://www.clairecodes.com/blog/2018-03-16-styling-inline-code-tags// Fri, 16 Mar 2018 08:58:21 +0000 https://www.clairecodes.com/blog/2018-03-16-styling-inline-code-tags// I like writing tech-related blog posts (you’re reading one right now!). My posts often contain the <code> tag as I illustrate code examples. The default browser style for this tag can be pretty dull, typically using the system monospace font and a beige background colour. I’ve added my own custom style to this tag. This is a step-by-step explanation of it, as I’d rather do that than watch some drivel on Netflix today. https://www.clairecodes.com/blog/2017-11-21-multiline-comments-in-sass// Tue, 21 Nov 2017 21:35:19 +0000 https://www.clairecodes.com/blog/2017-11-21-multiline-comments-in-sass// Note: These rules are specifically for sass-lint, because that’s my linter of choice. However, equivalent rules will (probably) exist for other linters such as stylelint or csslint. If you lint your Sass code using an automated tool like sass-lint, you might have encountered the rule: no-css-comments. Depending on the severity level in your linter config, this will trigger an error or a warning when it encounters comments like this /* I am a CSS style comment */. https://www.clairecodes.com/blog/2016-05-02-so-you-think-you-know-how-clear-works// Mon, 02 May 2016 23:03:12 +0000 https://www.clairecodes.com/blog/2016-05-02-so-you-think-you-know-how-clear-works// TL;DR Clears floating elements preceding the one it's applied to Whether you need clear: left or clear: right depends on the direction the element is floating I thought I understood the clear property in CSS, but it turns out I didn’t. Take 3 divs. Let’s float them side-by-side (excuse the pseudo-HTML): <style> .left { float: left; } </style> <div class="left">ALPHA</div> <div class="left">BETA</div> <div class="left">GAMMA</div> They will now look something like this on the screen: https://www.clairecodes.com/blog/2016-04-16-selecting-the-last-n-elements-in-css// Sat, 16 Apr 2016 16:25:27 +0000 https://www.clairecodes.com/blog/2016-04-16-selecting-the-last-n-elements-in-css// Let’s a take a bog-standard list: 🚽📋 <ul> <li>Doris Lessing</li> <li>Angela Carter</li> <li>Ann Patchett</li> <li>Iris Murdoch</li> </ul> Quick, off the top of your head: 👴 How would you select only the last list item? li:last-child What if we added another item to the list. How would you select only the last 2 elements? li:nth-last-child(-n+2) A final list element is added: there’s now 6 li’s and we want only the last 3. https://www.clairecodes.com/blog/2015-12-15-the-not-pseudo-class// Tue, 15 Dec 2015 00:00:01 +0000 https://www.clairecodes.com/blog/2015-12-15-the-not-pseudo-class// How do you use CSS to style a particular element differently from other similar elements? You’d stick a class or ID on it, like so: <style> .special { color: red; } </style> <p>Normal</p> <p>Normal</p> <p class="special">Special</p> <p>Normal</p> <p>Normal</p> .code-example, .code-example-two { border: 1px solid #dcdcdc; border-radius: 3px; padding: 15px; font-family: serif; font-size: 16px; } .code-example .special { color: red; } Normal Normal Special Normal Normal But what if you have the opposite problem - you want to exclude an element from a particular style?