All CSS Filter Functions + Quick Copy/Paste Examples
CSS makes it easy to customize image appearance on the fly. So you don’t have to crank open your image editor and do any work there. You can apply many visual effects directly on the image using the CSS filter property. You can change image brightness, contrast, opacity, saturation — even do things like rotate hues, drop shadows, and blur the image. Browser support is solid for all major browsers. Continue reading »
Margin Offset for Anchor Targets with CSS or JavaScript
For sites using a fixed-position “sticky” header or similar, it’s necessary to add an offset margin to any on-page anchor targets. For example this recent article provides a Table of Contents menu with links to each section on the page. Click a link and the page scrolls down to the target element, which is an <h2></h2> heading tag. Thanks to one of the CSS solutions provided in this tutorial, the scrolling takes into account the page’s 50-pixel sticky header, so […] Continue reading »
Better CSS Placeholder
I haven’t seen anyone mention this little CSS tip. All the proprietary vendor-specific placeholder rules now safely can be replaced with just ::placeholder. Seems very useful especially with the ever-increasing emphasis on site performance. The end result is less code and thus faster loading, better SEO and so forth. Continue reading »
CSS Text Decoration (and Related) Properties
I’ve always made use of CSS text-decoration properties in my theme designs and other dev work. From underlining text to making hyperlinks look great, text-decoration is essential CSS. Until recently I was not aware of a couple of related properties, text-underline-offset and text-underline-position. I am currently planning the next redesign of Perishable Press and thinking about using text-underline-offset to add some style to various link elements. So this post is to bring these related CSS properties together on paper, forever […] Continue reading »
CSS: Odd Bug with Colons and Combined Pseudo Elements
According to specification (and these helpful posts by Chris Coyier), CSS pseudo elements like ::before and ::after should be written with two preceding colons. It can be confusing because while pseudo elements are prefixed by two colons, like ::element, pseudo selectors (aka pseudo classes) are prefixed by only one, like :selector. So that’s the context for an odd little CSS bug.. Continue reading »
CSS: Center-Align List with Left-Aligned Text (and Unknown Width)
Here is a quick CSS tutorial showing how to center-align a list element with left-aligned text. For example, if you have an <ul></ul> or <ol></ol> of unknown width, and you want it to stay centered on the page and keep the inner text aligned to the left. That’s the trick we’re looking at in this tutorial. Continue reading »
Case of the Invisible CSS ::selection
Recently I noticed a weird bug in my free WordPress security plugin, Banhammer. For some reason, I could not select any text on the page. Usually when you click and move the mouse cursor over some text, it becomes highlighted and displayed in some other color. But this wasn’t happening on the Banhammer settings screen. No matter which HTML/text I tried to select, it just wasn’t working. T’was a real mystery.. Continue reading »
CSS Background Hover Slide Effect
While working on the site’s 24th redesign, I played around with a number of styles to customize the appearance of links. As you can see by hovering over any link, I decided to keep the styles as minimal as possible while still letting the user know that, “hey, this is a link”. This quick post shares one of the link styles I was considering, it’s sort of a “slide-up” background-color effect that happens when the user hovers over the hyperlink. Continue reading »
X Theme Leftover Code Snippets
While working on the site’s 24th redesign, I ended up with about 10 code snippets that were awesome but ultimately not needed. So rather than just delete these tasty functions, I am posting them here for future reference. Who knows, during the next site update I may decide to implement or repurpose some of these techniques. And of course sharing is caring, so feel free to use any of these code snippets in your own projects. Check out the Table […] Continue reading »
Clearfix Hack Evolution: From Dumpster Fire to One Line of Code
Is the clearfix method of clearing floats still useful? It’s been years now and I think the answer is “yes”. For example, I use clearfix to clear floats in the site’s current design. It’s the “cleanest” way to clear floated elements without setting widths, hiding overflow, or floating (nearly) everything. I know what some of you are thinking: “Cleanest..? Clearfix is a hack. A total nightmare event.” Years ago that may have been the case, but not so much anymore.. Continue reading »
Get featured in my new CSS book
I am working on some new books and one of them focuses on CSS techniques. I can’t share any specifics at this point, but I am inviting CSS experts and enthusiasts to be featured in the book by contributing their favorite CSS snippet. Continue reading »
xy.css moved to Perishable Press
Recently I’ve been implementing SSL on my domains and have been streamlining and updating some projects along the way. Consolidating properties is a great way to simplify workflow and boost productivity, so I’ve went ahead and moved xyCSS from its own domain, xy.css, to its new home here at Perishable Press. Continue reading »
CSS Dropdown Menu in WordPress
In this tutorial I am going to show you how to build a pure CSS drop down menu in WordPress. I will walk you through the steps of creating a menu in WordPress, customizing it with CSS, and then printing the menu in your theme file. This tutorial requires that you have access to edit your WordPress theme files and also a basic understanding of HTML and CSS. I will walk through the process step-by-step so don’t worry if you […] Continue reading »
Force Margin/Space Between List and Floated Image
If you’re displaying floated images in your posts, you may notice that margins of lists and other block-level elements seem to “collapse”, as shown in this screenshot from the 2013 redesign: Continue reading »
xy.css – Responsive Grid Design
For the past year or so, I’ve been heavy into responsive, grid-based design. In December, I “soft-launched” my new site, xyCSS with a simple tweet: Bringing it all together: https://perishablepress.com/xycss/ As implied (and explained), xy.css is a lightweight CSS template for creating semantic HTML5 designs on a responsive liquid matrix. Continue reading »
CSS Hooks for User Submitted Posts
Here is a list of all CSS hooks available for the User Submitted Posts submission form. If you notice any errors or if I’ve missed anything, please let me know with a comment or by sending an email via my contact form. Thanks! Continue reading »
