Nowadays, most web designers can use images or sIFR to produce some very beautiful typography, but there is something unique and special about using only CSS. It is incredibly useful too, if you know the extent you can take CSS you end up with much more flexible websites.
There are a lot of great sites out there that have beautiful Typography using only CSS, however simply looking at them is only half of the picture. We want to know what did they do, and how/why does it result in beautiful type?
3.7Designs has pointed out an important point. We should not simply steal the design/code/style, learn from it instead. He has seen a few sites that have ripped off the design elements of these beautiful typography and the site is awful.
Source: 10 Examples of Beautiful CSS Typography and How They Did It
Everystockphoto is a license-specific photo search engine. Currently they index and search millions of freely licensed photos, from many sources, and present them in an integrated search. They make an effort to show as much information as they have about particular photos on the photo page, including source, license, dimensions, photographer, and other data. The license is almost always shown below and left of a photo, and clicks through to the specific license page. Membership is free and allows you to rate, tag, collect and comment on photos. You can add your favourite photos to your collections as well.
Requirements: –
Demo: http://www.everystockphoto.com
License: See Individual Images
PHPBench was constructed as a way to open people’s eyes to the fact that not every PHP code snippet will run at the same speed. You may be surprised at the results PHPBench generates. It was also created so that you would be able to find discovery in these statistics and then maybe re-run these tests in your own server environment to play around with this idea yourself, by using the code examples. You can see some interesting conclusions from PHPBench as follow as well.
1. Surprising results show that if you implement sizeof() there is almost no difference in whether calculating the size of a loop in advance.
2. In reality the echo and print functions serve the exact purpose and therefore in the backend the exact same code applies. The one small thing to notice is that when using a comma to separate items whilst using the echo function, items run slightly faster.
3. The while loop 90% of the time is indeed slightly faster.
Requirements: –
Demo: http://www.phpbench.com/
License: License Free
Phototype is a client/server-side library, based on prototype, which supports all kinds of image manipulations. On the serverside the library is powered by combination of PHP/GD that renders the image. With phototype, you are able to rotate, resize, flip and do some other cool effects to images.
Requirements: Prototype Framework
Demo: http://ajaxorized.com/phototype-image-manipulation-with-javascript
License: GPL License
Wysiwym Markdown editor (WMD) is a simple, lightweight HTML editor for blog comments, forum posts, and basic content management. You can add WMD to any textarea with one line of code. Add live preview with one line more. WMD works in nearly all modern browsers, and is now completely free to use. The next release will be open source under an MIT-style license. This is not a normal WYSIWYG editor.
Wysiwym stands for What You See Is What You Mean. WMD produces clean semantic HTML, leaving presentation details like fonts and colors up to style sheets. But you’re not left in the dark about cosmetics; as you type, WMD’s live preview shows you exactly what your text will look like after the current styles have been applied.
Markdown is a simple markup language that’s as easy to read and write as plain-text email. WMD uses Markdown as an input format, converting it into HTML behind the scenes. You can also mix raw HTML with Markdown, so the full expressiveness of HTML is always there if you need it.
Requirements: –
Demo: http://wmd-editor.com
License: License Free , MIT License
Introducing Feed Compare, a free web application that you can use for comparing FeedBurner feeds. This tool is great for checking out your competition and noticing trends in growth.
Much like comparing website ranks using the Alexa website, you can use Feed Compare to compare your feeds against up to three other feeds. All you have to do is input the name of your feed, and then the name of your competitors feeds.
Features for this tool include: viewing up to 24 months worth of data (other options are: 12 months, 6 months, 3 months and one month). Zoom in on particular timeframes using click and drag. Users can link directly to the feed comparisons chart much like Alexa ‘permalink’ style. And it allows users compare up to 4 feeds at a time.
Requirements: –
Demo: http://www.feedcompare.com
License: License Free
Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG), and covers the following topics:
- Ad Units
- Calendars
- Carousels
- Charts and Tables
- UI Controls
- Form Elements
- Grids
- Menus and Buttons
- Mobile – General
- Mobile – iPhone
- Navigation and Pagination
- OS Elements
- Placeholder Text
- Screen Resolutions
- Tabs
- Windows and Containers
I am sure you will find them useful when designing user interface for your website / web application. All of them are licensed under a Creative Commons Attribution 2.5 License.
Requirements: –
Demo: http://developer.yahoo.com/ypatterns/wireframes/
License: Creative Commons 2.5 License
We have published a post about Prototip a while ago. It was a lovely script that allows us to create simple and complex tooltips easily. Now Prototip 2 has just released with a lot of new features and it looks truly stunning. It is easy to customize. You have complete control over tooltip positions. You can also have rounded corners, speech bubble effect, special close button and custom style for the tooltip easily.
However, Prototip 2 is not free… A small fee is required for non-commercial use. The script can be used on a Single Domain for $3 and unlimited use for $15. I know it is sad that Prototip 2 is not free for us, however you can get this amazing script for as low as $3 is really worthwhile.
Requirements: Prototype Framework
Demo: http://www.nickstakenburg.com/projects/prototip2/
License: $3 – $295
Nick La has made another great great tutorial for us. Nick La shows us how to decorate our images and photo galleries without editing the source images. The trick is very simple. All you need is an extra tag and apply a background image to create the overlaying effect. It is very easy and flexible with over 20 styles, from a simple image icon to a rounded corner to a masked layer (both decorative and complex). To change the look and feel, simply edit the CSS specifications of the span element. To show how flexible it is, Nick La has created 15 different styles as examples for us (notice the HTML markup is same).
Source: CSS Decorative Gallery
If your website doesn’t stand out and do a heck of lot of things right, then chances are it’s going to crash and burn. Take the “Successful Website Checklist Challenge†designed by Chromatic Sites and see what you’re doing right, what you’re doing wrong, and what you’re forgetting to do. They have even included notes and resources for nearly every item on the checklist (just to make your life easier). The checklist is divided into the following sections.
1. Planning
2. Design/Layout
3. Usability/Accessibility
4. Content
5. Website Optimization/Standards
6. Search Engine Optimization/Marketing
Source: The Official “Successful Website Checklist Challenge”
