Category Archive: CSS
Posts about CSS
Working with text in Chrome (and other Webkit-based browser) and Firefox can be frustrating. Depending on context, certain fonts may be displayed weird: too heavy, too fat, too thick, and so forth. So much so that the text can look distorted and difficult to read. Fortunately, we can apply the CSS font-smoothing property to make […]
Blazing fast snippet for you today: how to select all children except the last child. Targeting HTML with CSS has never been so much fun..
Quick CSS snippet for you, sort of hard to explain but basically it’s an effect whereby the background color slides up when the link is hovered. Keep reading to check out a demo and grab the code.
The developers at Firefox decided to add their own default styles for <abbr></abbr> and <acronym></acronym> tags — completely ignoring the fact that many sites already include their own styles for abbreviations and acronyms. The result is an ugly double underline and/or text-decoration in Firefox browsers.
Here are two ways to vertically center a block-level element using CSS. The first method uses CSS flexbox, while the second method uses CSS transform.
The User Notes Widget that’s included in my Dashboard Widgets Suite plugin enables users to edit notes right on the WP Dashboard. To make things extra awesome, each note automatically expands as the user types more lines of text. This post explains how I achieved this trick, aka multiple auto-resize textareas.
Working on my WordPress plugin, Dashboard Widgets Suite, I needed a quick function to check a property defined via the inline style attribute on a specific element. Here is an easy, plug-n-play solution that works great.
Here is a quick CSS snippet to disable the tap color in iOS.
When displaying with HTML forms, most modern browsers display placeholder values for textarea and input fields. Once you’ve added placeholder attributes to your form fields, you can style their appearance via CSS.
Here is a quick CSS snippet for adding some smooth, dark styles to any <pre> tag. One-step snippet for complete pre styling: add to your stylesheet and done.
Note to self: you can specify various viewport properties such as initial-scale and user-zoom via <meta /> tags or directly via CSS.
The CSS box-sizing property makes it much easier to work with elements that have padding and borders. Here is a ruleset that will apply the box-size property to all elements.