Spring Sale! Save $10 on The Tao of WordPress and book bundles with Digging Into WP and .htaccess made easy – Coupon code: Spring2014

New Site: xyCSS.com – 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.com with a simple tweet: Bringing it all together: http://xycss.com/ As implied (and explained), xy.css is a lightweight CSS template for creating semantic HTML5 designs on a responsive liquid matrix. Read more »

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! Read more »

3D Text with CSS3 text-shadow

Here’s a fun way to make text look 3D using CSS3. Using CSS whenever possible instead of images has several key advantages, including faster page-loads and better SEO I use the CSS text-shadow technique in a previous theme, and a few people had asked about it, so here it is: everything you need to create your own stunning 3D-text with CSS3.. Read more »

The Art & Science of Folding CSS Code

One of the joys of working with CSS is that you can basically write the code any way you want. Sure there are some basic rules you have to follow (like using brackets), but for the most part you can format your CSS code as elaborately or as plainly as you see fit. You can use this vast flexibility to improve the organization and usability of your working stylehseets before compressing them for production use. Read more »

Awesome New CSS3 Selectors

The W3C CSS Working Group introduced some powerful new CSS3 selectors to the working CSS3 specification. These new selectors aren’t yet supported by all browsers (currently only Webkit and IE), but designers can start using all the goodness a la progressive enhancement. Let’s check out these awesome new CSS3 selectors and see some real-world examples that are simply too good to be true. Read more »

Ajax Slide & Fade Content with jQuery

I recently redesigned my business site, Monzilla Media. The new design features a clean and simple single-page, fixed-sidebar layout. Visitors use the various links in the fixed sidebar to quickly and automatically scroll through to any section. In the Portfolio section, each item contains a “Details” link that loads more content into the fixed sidebar. As the site is mostly static, I wanted this bit of functionality to really shine, and after much testing and tweaking, ended up with a cross-browser slide & fade technique for loading content via Ajax and jQuery. Note this technique has been updated to work […] Read more »

CSS3 Tip: Removing Box Shadows

Adding box shadows is a great way to bring depth and focus to your design. You have probably seen this trick before: .selector { -webkit-box-shadow: 0 3px 5px #333; -moz-box-shadow: 0 3px 5px #333; box-shadow: 0 3px 5px #333; } Read more »

Display Latest Tweet with Show/Hide Cookies

Update (2013/08/03): This simple technique no longer works thanks to the 2013 Twitter API, which makes it much more complicated to grab your latest tweet. For WordPress, check out the Latest Tweets Widget. My previous theme displays my latest tweet at the top of every page. It turned out to be an excellent technique for getting more followers – visitors see the tweet, click the link, and possibly follow me on Twitter. There is even a cookie-powered “Hide” link for uninterested visitors to hide the tweet for awhile. I received quite a few requests for a tutorial on the technique, […] Read more »

Target iPhone and iPad with CSS3 Media Queries

When designing a website, it’s always a good idea to test on as many different platforms, devices, and browsers as possible. These days, pimping your websites for the iPhone and iPad is an important step in the design process. Especially on the iPad, sites tend to look about 20% cooler than on desktop browsers, so you definitely want to take the time to fine-tune the details. And when dealing with iDevices, it’s often necessary to deliver some custom CSS to make everything just right. Want to apply CSS styles to the iPad and iPhone? Here is the plug-n-play, copy-&-paste code […] Read more »

Best Method for Email Obfuscation?

Awhile ago, Silvan Mühlemann conducted a 1.5 year experiment whereby different approaches to email obfuscation were tested for effectiveness. Nine different methods were implemented, with each test account receiving anywhere from 1800 to zero spam emails. Here is an excerpt from the article: When displaying an e-mail address on a website you obviously want to obfuscate it to avoid it getting harvested by spammers. But which obfuscation method is the best one? I drove a test to find out. After reading through the article and its many findings, here are what seem to be the best methods for obfuscating email […] Read more »

How to Micro-Optimize Your CSS

There are many ways to optimize your web pages. In addition to reducing HTTP requests and delivering compressed files, we can also minify code content. The easiest way to minify your CSS is to run it through an online code minifier, which automatically eliminates extraneous characters to reduce file size. Minification shrinks file size significantly, by as much as 30% or more (depending on input code). This size-reduction is the net result of numerous micro-optimization techniques applied to your stylesheet. By learning these techniques and integrating them into your coding practice, you’ll create better-optimized CSS during the development process. Sharper […] Read more »

Wrapping Long URLs and Text Content with CSS

To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre></pre> tags): pre { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP Printers */ word-wrap: break-word; /* IE 5+ */ } See demonstration Explanation By default, the white-space property is set to normal. So you might see something like this when trying to […] Read more »

Top 5 CSS Shorthand Properties

An excellent way to simplify and streamline your Cascading Style Sheets (CSS) is to take advantage of the many different shorthand properties available to you. Working with a lot of CSS, you eventually memorize these different shortcuts, but every now and then, I find myself needing a quick, straightforward reference for some of the more elaborate property combinations. In this post, I’ll show you the shorthand rules for the following properties: Font Properties List Properties Background Properties Border and Outline Properties Transition Properties (CSS3) These are the top 5 on my list of most complicated and frequently used shorthand properties. […] Read more »

Visual Walkthrough of @font-face CSS Code

In my previous post on Quick and Easy CSS @font-face Code, I provide a choice set of CSS rules for embedding custom fonts into your web pages. It’s a solid, cross-browser technique that works great, but as Marty Thornley pointed out, it would be useful to have a more thorough explanation of how the code actually works. So, rather than going back and adding a bunch of additional information to the original post, I’m following up with a visual walkthrough of the @font-face code. In step-by-step visual format, this article will show you what the code is doing and how […] Read more »

Quick and Easy CSS @font-face Code

I’ve been using custom fonts in my designs for quite a few sites now, and have refined what seems to be an ideal chunk of CSS code for implementing the @font-face rules. Some of the sites that include these rules include Perishable Press and Digging into WordPress, which look more stylish and refined with the custom fonts in effect. I’ve tested this code on quite a few browsers, including the following: Safari 3.1+ Opera 10+ Firefox 3.5+ Chrome 4.0+ Internet Explorer 6+ This technique delivers your custom fonts quite consistently to all of these browsers, and degrades gracefully for those […] Read more »

Latest Tweets Spring Sale! Save $10 on book bundles w/ Tao of WP, Digging Into WP and htaccess made easy. Coupon code: Spring2014 @ wp-tao.com