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.. Continue reading »
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. Continue reading »
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. Continue reading »
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 […] Continue reading »
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; } Continue reading »
Display Latest Tweet with Show/Hide Cookies
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, so here is how to display your latest tweet with show/hide cookies. For […] Continue reading »
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 […] Continue reading »
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 […] Continue reading »
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. […] Continue reading »
Wrapping Long URLs and Text with CSS
Quick tutorial post today. 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+ […] Continue reading »
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: Continue reading »
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 […] Continue reading »
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 […] Continue reading »
Understanding CSS3 and CSS2.1 Border Properties
Even before CSS3 introduced a cornucopia of new border properties, CSS2.1 provided plenty of great functionality, enabling designers to style and enhance borders in many different ways. But now with the many new border properties available with CSS3, much more is possible, including everything from background border images, asymmetrical border radii, border transformations, custom fitting, and much more. While not every browser fully supports all of the awesome new styles, we can practice progressive enhancement to create beautiful, well-styled borders […] Continue reading »
CSS3 + Progressive Enhancement = Smart Design
Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.. CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. As designers, it’s up to us to decide which browsers to support for our projects. While everyone has their own particular strategy, there seem to […] Continue reading »
Better Image Preloading with CSS3
I recently added to my growing library of image-preloading methods with a few new-&-improved techniques. After posting that recent preloading article, an even better way of preloading images using pure CSS3 hit me: .preload-images { background: url(image-01.png) no-repeat -9999px -9999px; background: url(image-01.png) no-repeat -9999px -9999px, url(image-02.png) no-repeat -9999px -9999px, url(image-03.png) no-repeat -9999px -9999px, url(image-04.png) no-repeat -9999px -9999px, url(image-05.png) no-repeat -9999px -9999px; } Using CSS3’s new support for multiple background images, we can use a single, existing element to preload all […] Continue reading »
