This online utility allows you to upload TTF or OTF to convert for embed with CSS3:
http://www.fontsquirrel.com/fontface/generator
Category Archives: Design
CSS Snippet for Drop Shadow
Use this snippet to add drop shadows to elements for Mozilla, Webkit, and browsers that support CSS3:
-moz-box-shadow: 1px 2px 3px #666; -webkit-box-shadow: 1px 2px 3px #666; box-shadow: 1px 2px 3px #666; /* box-shadow: X Y blur hex; */
CSS Snippet for Rounded Corners
Use this CSS to apply rounded corners to Mozilla, Webkit, and browsers that support CSS3:
-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
Icon Generator
Ever want to create some of those iPhone-type shiny candy button icons? Flavor Studios made an online tool to generate them for you! Fill out a form with level of glossiness, background color, image settings, upload your PNG, eureka! Check it out: flavorstudios.com/iphone-icon-generator
Wordle
Was checking out the new WordPress Foundation site and saw in the sidebar it said their header image was generated with Wordle. Curious, I checked it out and found Wordle is a Java Applet that creates a graphic word matrix based on the number of recurring words in any RSS feed. There are a bunch of fonts and layout algorythms you can choose from and you can create custom color palette as well. Here is one I generated from underblob.com’s RSS:
Pretty cool!
Shopify Design Upgrades
Shopify is a hosted e-commerce solution that I have been using for a couple years now for clients that want to sell their products online. It is great software with quick setup and really intuitive and easy to use Admin. They offer a variety of pre-canned themes to choose from so a store can be set up in a few hours by anyone. If you know HTML/CSS and aren’t afraid of a little bit of programming, you can also create your own customized themes. So it is a perfect choice for smaller companies without a million dollar budget to hire a web designer to get a custom-branded storefront up on their website.
Shopify just released a whole bag of tricks for theme designers that really extends the flexibility of theme design. Previously, the theme structure was set to a fixed number of templates that could be used in the theme… collections, products, informational pages, etc. They’ve just added the ability to add child templates that you can specify on each product, collection, or page in the Admin. For example, 3 different types of products need to have different visual treatment and layout: shoes, pants, shirts. Instead of trying to jam a bunch of conditions into one product template to make it work, you can create 3 additional templates (product.liquid is the default template):
product.shoes.liquid
product.pants.liquid
product.shirts.liquid
The same type of branching is now available for the entire layout as well using the new layout tag.
This is only one of the great new features that was added in this round of upgrades. Read more about the other just-as-great additions on the Shopify blog: blog.shopify.com/theme-customization-for-everyone
WordPress “Gallery” Theme
Smashing Magazine announced today the release of an image-driven WordPress theme:
smashingmagazine.com/download-gallery-a-free-wordpress-theme
Image Gallery Revamped
The image gallery has been revamped to fit into the new iframe structure of our version 3 site. To check it out, click on the “Archives” link, then “image” link in the sidebar nav.
The animations utilize the Javascript Motion Tween classes written by Philippe Maegerman from Brussels, Belgium. Thanks, Pim!
Links
Hope by Luceplan
GAX
UPDATE 2010.05.31: GAX was found to harbor a Trojan in the latest release from Dolphiq.
We’ve been using the Microfox screen ruler and screen loupe for doing pixel-perfect web design work for the past few years. It is definitely a very handy tool. But what about when you need to sample a color from a web page? Use the old ALT + “Prnt Scrn” button, paste it into a new Photoshop document, use the Color Picker to sample the image and get our hex value. There’s got to be a better way, right? What if there was a tool that had a screen ruler, a screen loupe, a resizable screen capture and a color picker, all in one? Check out GAX Reloaded from Dophiq Software Development. After using the software for a couple months, we don’t know how we ever got by without it. The good news is that it’s free! The bad news is that it’s only for Windows. :(