Category Archive: CSS
Posts about CSS
I’ve posted before about fixing weird default browser styles. It happens all too often. Well-intentioned browser developers taking liberties on the page with things like CSS styles. This post shares a quick code snippet that fixes the Chrome browser’s new “rounded corners” style that now is applied to form elements like buttons and inputs.
It’s easy to style a <div></div> by targeting its ID. But what if you only want to add style when a specific fragment identifier is targeted via the URL? So for example, your page at /about/ has a table with all the data. When visitors arrive directly at /about/, no extra styles are added. But […]
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.