css tricks posts

CSS

A Step-by-Step Guide to Dark Mode in CSS

Enabling dark mode in CSS allows website visitors to switch to an eye-friendly and resource-saving design whenever they want. There are a couple of UX patterns you can use to add a dark theme to your site. In this tutorial, we will show you how to add a simple jQuery toggle to the top of the page so that users can easily switch dark mode on and off. Our demo will be responsive as well, so it will look good on all device sizes, from smartphones to desktops to large screens. Here is how the light mode will finally look...
CSS

Transitions in Space

A few simple transitions can make a huge difference. In this article we’ll learn how we can use transitions to bring our content to life, as well as plan and build our hover effects to perform smoothly and look great. Transitions vs Animations ... Transitions are a great way to smooth the changes from one state to another, and back again, in the browser. They seem like a simpler alternative to the keyframes and animation approach, but they are useful in very different ways. For example, a transition isn’t...
CSS

8 simple CSS hover effects

With support for CSS3 increasing with each new release for every browser, and those tiresome CSS2-only browsers slowly dropping off the usage charts, we have far more options for hover effects and transitions in general. Almost all the calls to action that you see on the Web use some form of hover effect, because they draw the eye and make a website feel more engaging. Last year I brought you a set of 8 simple transitions that will wow your users, and today we’re going to look at 8 more… Getting started...
CSS

Introducing the calc function

Math is a necessary (if not always welcome) tool in our programming languages. We use it constantly to make all kinds of dynamic decisions. Until recently, it wasn’t available in CSS without a pre-processor; however the introduction of the calc function to CSS3 provides a way of running Math calculations natively which increases performance and even enables mixed units. Browser support ... Unusually, in the case of the calc function browser support is actually pretty good: on the desktop it’s...
CSS

How to change text selection color with CSS

If your website has a lot of text, at some point or another people will more than likely want to select it to copy, or search on Google. Changing the text selection color is always a nice touch, it shows that you're paying attention to the finer details of the site. Today I'm going to share a quick tip that will allow you to achieve some different looks for your selected text. Browser support ... The browser support for this selector is pretty good nowadays, it's supported by all the latest versions of the most...
CSS

How to style range sliders in Webkit

HTML5 saw the introduction of several new form input types, including range. This means that range sliders can be created in HTML itself, although initially it tended not to be used, firstly because of JavaScript alternatives already in use, and secondly because of the lack of adaptable components. In most browsers there is still no way to completely customize an input slider, but webkit browsers do provide some nice control. The demo for this article can be found here. The input ... The range input...
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress