Having worked in web development agencies over the years, I've picked up some tips and tricks along the way. There are some things that I use day to day, that I barely even think about. Some of them are fairly standard, and others are a bit more unusual, but all of the snippets and examples below are things that I've used on client websites.
Transitions
By default on all of the websites I build, I always add a CSS transition on the links and buttons for their hover state. It just adds a nice effect on hover, and takes away from that harsh/abrupt change when you interact with a button or link.
// Background colour transition
transition: background 0.2s ease-in-out;
For a button I'd most likely add the transition for the background colour as shown above, for a link I'd set the transition property to all (transition: all 0.2s ease-in-out) which could allow me to transition the hover colour and border for example.
I also never use text-decoration: underline. You don't have much control using that, whereas you can use a bottom border to get a much nicer effect. Padding allows for better spacing, and you can even transition or animate the border if you'd like.
.link {
transition: border 0.2s ease-in-out;
border-bottom: 1px solid transparent;
}
.link:hover {
border-color: blue;
}
Background overlay
Say you have some text, positioned absolutely on top of an image. But the background image is too bright, making the text unreadable. You could add another div in there somewhere to create a dark overlay behind the text, however this is not great and adds an extra empty div that is not really necessary.
Pseudo-elements to the rescue!
Using the :before element means we can also apply it if a certain class is added to the div for instance. Below is an example of how I would achieve this overlay background:
The key part in the above code is setting your overlay colour, and opacity level. This can be any colour, I've just used black and white as an example:
//Black overlay - 0.5 opacity
background: rgba(0,0,0,0.5);
//White overlay - 0.2 opacity
background: rgba(255,255,255,0.2);
Multi-line underline effect
The pen below is something that may or may not be useful to people, but it is something I was asked to do on a client website. It allows the ability to have a bold underline effect which will span across a sentence to the length of that sentence, even if it's wrapped over multiple lines.
Even if this doesn't apply to your design, or requirements. It can also be used for things such as a link hover effect like the one shown below:
Sticky elements
Need an element to stick on scroll, but don't want to use JavaScript, or a plugin, or the height of your content is dynamic and likely to change? position: sticky is your friend.
position: -webkit-sticky;
position: sticky;
top: 0px;
This was incredibly handy for me when I had to have a sidebar stick next to an accordion element. Because of the accordion opening and closing, I would have had to calculate the height or use some other complicated method, when position: sticky just worked straight away. The only thing I've found to look out for is that it doesn't work when the body element is set to overflow: hidden, and is not supported in IE11 (it just doesn't stick, and Edge is fine).
Prevent highlighting
Being able to select text on a website is fairly standard and expected, however I've found occasionally that the user can click multiple times on an element (for example a carousel arrow) and it selects/highlights the element.
To prevent this, you can use the following snippet:
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
If you got this far, thanks for reading! I hope this comes in handy for some people and I hope to do some further posts with some more day to day snippets if that is of interest to anyone.
Follow me on twitter and instagram for more dev related stuff!
Latest comments (63)
I learned so much! 🙃
Glad to hear it! :)
position: sticky is your friend.
Not supported by all the legacy browsers. Even chrome gives the partial support. But a very handy style rule, browser supports will be granted in near future.
that's some really cool trickrey 😃 well, for background overlay example, I use blend-mode which is really easy. And for the text underline I've been using box-shadow but that hover effect is really cool! I'll try that one.
For that last one (prevent highlighting), if you're using bulma you can use the "is-unselectable" class.
hey thanks i like the time delayed underline on hover
Hot tip:
transition: 0.2s;=
transition: all 0.2s ease;😁
Really love that multiline effect, thanks for sharing !
thank you
You’re welcome 😊
Never ceases to amaze me how much "stuff" there is in CSS, it's endless. Implementing a CSS processing/browser rendering engine must be one of the most dauntingly complex pieces of engineering you can imagine.
I know, right?!
I saw a statement recently that "CSS is the most complex programming language that exists" ... I don't know if it can really be considered a programming language (in the Turing sense), but it is really insanely complex, especially because of its long history and never ending evolution, which means that there are always at least half a dozen different ways to do something.
Anyway, some really great tips and techniques here, thanks for the article! "sticky" is especially a cool one, and the transition tip is simple but very useful.
Beautiful! I was looking for these tips for a while now. Thanks!
The pseudo-selector background overlay is neat! Knew about pseudo-elements but never occurred to me to use them for the background overlay. Always added that extra inner div. Time to refactor!
The underline one was pretty cool too. Heck, they were all interesting in their own way.
Thanks for sharing Lynne
I'm glad it helped! These are things I've discovered along the way, thought it would be good to share :)
Really cool tricks.
Thanks! :)
a big thank you for the writer, i learned new things from this article.
That’s great to hear! Thanks :)
Thank you, Lynne, for that wonderful multi-line effect.
I saw it somewhere but forgot about it. Soon I'll use it on my next project.
I've made some Pens for practicing these & to simply copy-paste next time I use it. Of course, I've given credits to you on top of each CSS file. Here are the links -
1) Transitions - Button & Link
2) Background Overlay
3) Multi Line Underline Effect
4) Sticky Elements
5) Prevent Highlighting
Great, thanks!
Cool