WooThemes have released a new freebie icon set in partnership with Liam McKay, creator of the popular Function Icons set. The set is known as “WooFunction.”
The icons seem pretty good to me, and there certainly are a lot of them. The set seems to be more targeted for general user interface use rather than being yet another collection of social media button graphics. (Not that social media icon sets are a bad thing…)
Chris Coyier recently released a new article that covers an ingenious CSS trick that puts me in mind of the days of 1-pixel spacer.gif files and tiling graphics meant to replace the <hr> tag.
Basically it uses a one-pixel graphic and a bit of CSS to style a nested list element, with an end result that looks something like this:
That’s a semantically-correct <ul> element styled with one image and no additional markup. It’s so simple I wish I had thought of it… 
Have you ever wanted to add a drop shadow around an element, but didn’t want to mess around with extra background images just to pull off such a simple effect? Why not use a cutting edge CSS3 effect, which won’t work in Internet Explorer of course, but who cares…
I found this useful snippet, and thought it might be of interest.
-moz-box-shadow: 3px 3px 3px #666; -webkit-box-shadow: 3px 3px 3px #666; box-shadow: 3px 3px 3px #666;
The firs line adds the shadow in Mozilla browsers (e.g. Firefox), the second adds it in WebKit browsers such as Safari and Chrome, and the final one is for any browsers that already support the draft box-shadow property, such as Firefox 3.1+ and Safari 3+.
The first two attributes of each of the properties are the horizontal and vertical offsets for the shadow, the third is the blur radius, and the final one sets the color of the drop shadow.
What do you think of the blogroll in my sidebar? It takes up very little space, sweeping all of the links out of sight until they’re called for. When you hover over it, they snap down.
This trick is done entirely with CSS, and it works in all modern browsers. (Read: IE6 won’t do it right…) No JavaScript, just a little bit of styling with the :hover pseudoelement and absolute positioning.
You can find out how to do it for yourself by reading this tutorial by Michael Martin:
How to Create a Beautiful Dropdown Blogroll Without JavaScript.
You may have heard of LESS. It’s a Ruby Gem that allows you to write CSS files with variables, nested rules, operations, and “mixins,” which are akin to custom functions in a programming language. The LESS files are compiled into pure CSS before going into use.
WP-LESS is a plugin that, using the lessphp library, brings LESS to WordPress. I have yet to try it for myself, but it certainly sounds intriguing.
The plugin watches for edits to your LESS source code, then recompiles and caches it as plain CSS, which is served up to your visitors.
Have you ever seen a site where HTML text is rendered over an image? One example of this is Pro Blog Design‘s article headings.
The effect looks good, and it’s search engine-friendly. CSS-Tricks has a tutorial on how to create a similar implementation with CSS absolute positioning.
Basically you create a relatively-positioned DIV and put the image and H2 elements inside. Then you absolutely position the two elements, and add a solid or semi-transparent background behind the heading text.
Text Blocks Over Image [CSS-Tricks]
Don’t want to go all-out with a separate mobile mini-site, but you still want your site to be accessible on phones and PDAs? You can just add a new stylesheet intended only for mobile browsers, in which you can reformat the page to render acceptably on a wide range of handheld web browsing devices.
<link rel="stylesheet" href="style.css" type="text/css" media="Screen" /> <link rel="stylesheet" href="mobile.css" type="text/css" media="handheld" />
By linking a stylesheet with a media of “handheld,” you tell mobile browsers to remove any of the preceding styles. You can then apply some new styles within, taking care to avoid explicitly setting widths or anything that might foul-up mobile browsers.
It’s a little bit more complicated than that in reality, but not too much so. You can find a full how-to over at Perishable Press: The 5-Minute CSS Mobile Makeover.
I’ve reviewed Pro Blog Design‘s theme at least once before, probably twice. Now that Michael Martin’s design blog is entering its third year, it has received yet another redesign.
Last Tuesday Twitter unveiled their redesign of their homepage. The change is intended to help remedy peoples’ inability to grasp the concept of Twitter, putting trending topics and a search field front-and-center. Instead of promoting to new users the ability to say what they’re doing, they’re pushing the idea that they use Twitter to “share and discover what’s happening right now, anywhere in the world.”
Defining a “tweet” for the uninitiated and explaining how to create an account doesn’t resonate with everyone. “Why would I want to do that?” is a common reaction. However, demonstrating the power of Twitter as a discovery engine for what is happening right now through our Search and Trends often awakens a sense of wonder which inevitably leads to a much more compelling question, “How do I get involved?”
Usability authority Jakob Nielsen recently published a new article suggesting that developers “abandon legacy design” and stop masking password fields with bullets or asterisks, because of “reduced usability to protect against a non-issue.”
Most websites (and many other applications) mask passwords as users type them, and thereby theoretically prevent miscreants from looking over users’ shoulders. Of course, a truly skilled criminal can simply look at the keyboard and note which keys are being pressed. So, password masking doesn’t even protect fully against snoopers.
More importantly, there’s usually nobody looking over your shoulder when you log in to a website.
This is wrong on so many levels.
Continue reading →
©2006-2024 Webmaster-Source