WP-Mix

A fresh mix of code snippets and tutorials

Category Archive: CSS

Posts about CSS

Page 1 of 4

Font Smoothing in Chrome & Firefox

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 […]

CSS select all except last child

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..

CSS hover link slide-up background

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.

Fix double abbr underlines

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.

CSS Vertical Center Block

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.

jQuery Auto Resize Multiple Textareas

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.

jQuery check inline CSS property

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.

Disable iOS Tap Color

Here is a quick CSS snippet to disable the tap color in iOS.

CSS Style Placeholders

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.

CSS Dark Pre Tag Styles

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.

CSS Viewport Tricks

Note to self: you can specify various viewport properties such as initial-scale and user-zoom via <meta /> tags or directly via CSS.

CSS box-sizing all elements

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.