opacity: 0.6; filter: alpha(opacity=60); /* For IE8 and earlier */
Category: Design
Font Squirrel
This online utility allows you to upload TTF or OTF to convert for embed with CSS3:
http://www.fontsquirrel.com/fontface/generator
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!