MooTools Font-Size Scroller with Cookie Save
MooTools Font-Size Scroller with Cookie Save
|
|
David Walsh just recently published an excellent MooTools based font size scroller. Using only 4 lines of HTML it is very easy to implement thanks to MooTools, so if you are looking for a quick and painless way to add this type of functionality into your project, head over to the project page and check it out!
Similar Posts
- 16px default main text size
- Partial 26px baseline grid
- Serif for Heading, sans-serif for the paragraphs
- Lower color text contrast
- Intensified paragraph division (new line + indent)
- Bigger leading (line-height) 1.625
- We maintain the book standards (12pt) for font size on the web (12px). But the distance from the monitor is triple. Just put your newspaper to your monitor and try to read. Hell! Is hard!
- Additionally the paper reflects the light and monitor emits the light. If you have old “cathode” monitor it’s like looking directly in a light bulb.
- You also have distraction noise: strong colors, links, flash animation, banners , not defined site architecture, click here, digg me, follow me on twitter, by my products… it’s fucking jungle out there.
- Typography
- Absinthes to Go Mad Over – NY Times
- An American Prayer – The Doors
- Critique of Pure Reason – Immanuel Kant
- Excerpt from No Way To Paradise – Charles Bukowski
- How To Sniff Out A Liar – Forbes
- Hubble – Ars Technica
- One Day in Spring – Rabindranath Tagore
- Shaman’s Blues – The Doors
- Tarantino – NY Times
- The Alchemist – Paulo Coelho
- The Last Question – Isaac Asimov
- The Raven – Edgar Allan Poe
- Viva Las Vegas – Elvis Presley
CSS Friendly Stacked Bar Graphs
Looking for a good, CSS friendly Stacked Bar Graph implementation? Look no further as Stephen of The Wojo Group has published their implementation, which is being used in Backbone, a CMS that runs on Ruby on Rails. It is based off Alen Grakalic’s Pure CSS Data Chart, and the awesome thing is that it is semantically correct, so it will definitely look good in screen readers.
Interview with Chris Wilson
Vitamin has an interview with Chris Wilson, Group Program Manager of the Internet Explorer Platform team at Microsoft. They’re not calling it a podcast, but I’m going to. (Being a podcaster myself, I’m capable only of speaking in hip web terminology.) At just over 5 minutes, it’s a quick and easy listen.Topics discussed include: the new features of IE 7, Microsoft’s involvement with the Web Standards Project, and the process of updating to IE 7. Chris WIlson’s turn-ons include: RSS, Flickr, and working closely with the web development community.Read | Permalink | Email this | Linking Blogs | Comments
Non-Flash Peeling Page Effect Using jQuery & CSS
The Peeling Page is an effect is normally used by advertisers to show advertisements that would otherwise occupy space that is larger than what is available on a page. It is very slick, and is normally implemented in Flash. This script on Flashden costs $4, though there is a free tutorial available. The thing about the Flash version is that it uses both JavaScript and Flash, which may not be everyone’s cup of tea.
This is where Soh Tanaka’s jQuery + CSS idea comes in. It uses simple CSS and jQuery to mimic the Flash version, which can possibly translate to faster development and maybe even faster loading pages. The tradeoff is the absence of any extensive banner animation — something that can only be done in Flash. However, I believe this solution is worthy of a look, at least for those in need of a quick peeling page component for their project.
CSS Sticky Footer
If you are looking for a good pure CSS footer solution, look no further. CSS Sticky Footer works for over 50 Windows, Linux, and Mac-based browsers. Included in this list are the latest releases of Google Chrome, Mozilla Firefox, Opera, Safari, and Internet Explorer.
CSS Sticky Footer is developed by Steve Hatcher, and is based on the Exploring Footers article from A List Apart, and takes suggestions from Cameron Adams’ footerStickAlt, and The Pure CSS Footer example from lwis.net. It applies a clear fix hack to keep the footer in place in Google Chrome and other browsers where the footer would float up when you resized the window. The clearfix also fixes problems that might occur if you are using floats to create two or three column layouts.
Far from being perfect, it does have its share of issues. The first one deals with margins, which can easily be solved by changing margins to padding instead. The second one deals with the use of relative font sizes such as % or em, something which many of the more advanced CSS gurus like me are very much fond of. The author suggests using px instead, which many find unacceptable.
To get started, check out the HowTo page for details on how to implement the CSS Sticky Footer.
Featured CSS Library: Better Web Readability Project
The Better Web Readability Project aims to promote screen-friendly and more readable fonts. The result is a CSS library that redefines, among others, the standard font size as well as leading (the amount of space between text). Other features of this library are:
The original idea came from Vladimir Carrer, who also came up with the library. In his post entitled How we read on web and how can we improve that he reveals that most of us who use computers to read news, blogs, and various sites end up scanning rather than reading. He then compares reading a book to reading on the monitor, and provides three reasons why it is harder to read on a computer screen:
He then comes up with a set of standards and rules that would allow for better and easier on-screen reading, and packages it as a CSS library. The resulting text is beautiful and pleasing to the eyes. One such example can be seen in the screen shot below. You should notice how your eyes would easily glide through the text:
You can head over to the project homepage, or click on the links below to view the library in action:
You can also head over and download the full library here.
WebKit-based browser for Windows
Safari – or at least, something not unlike it – may be coming to the Windows platform. Swift is a new browser for Windows, based on Apple’s WebKit rendering engine.Swift is in the very earlier stages of development. Practically embryonic, you might even say. The repository was created a mere three weeks ago. And, as the Web Standards Project warns, “it’s marked as 1.0pre alpha, and it is very much an alpha: very rough-looking UI, no scrollwheel support, pathetic form controls and I’ve had reports from colleagues that some folks can’t even get it to install.”
Nevertheless, Swift looks promising! I recommend keeping a close watch on this project. It could be very helpful to developers who need to ensure that their sites (particularly those with heavy scripting) function across browsers.Read | Permalink | Email this | Linking Blogs | Comments
30 Excellent CSS Based Navigation and Buttons Tutorial | Showcases …
CSS is the most important part in modern standard based web design. … 30 Excellent CSS Based Navigation and Buttons Tutorial. Daniel Adams …Firescope Firefox Add-on for Firebug
Fans of the swiss army knife of web development Firebug will be happy to hear that this wonderful Firefox add-on has added another blade to its arsenal. With the help of the Firescope add-on, it can now provide CSS and HTML reference in a snap. Just right-click on any tag and click on the context menu to perform a lookup. The tool appears to have been developed by the web gurus over at SitePoint, so tool has links to further information on the SitePoint Reference web site.
The tool is also searchable. You can:
… search for HTML elements, HTML attributes, or CSS properties (or any combination). The search happens live as you type, so usually you’ll only have to type one or two letters to get the results you want.
Check out the screenshots:
Fonts
… phase of the CSS font mechanism concerns how style sheet authors specify which … 4.0//EN”> <HTML> <HEAD> <TITLE>Font test</TITLE> <STYLE TYPE=”text/css” MEDIA …Take Your CSS to the Desktop with Adobe AIR!
Here is an article that you may find useful.
Designers would find it surprising that to know that you can now take your HTML and CSS skills and use it to create desktop applications. This now very much possible for anyone who is willing to explore the power of Adobe AIR. Andrew Tetlaw has a nice little article over at SitePoint entitled Take Your CSS to the Desktop with Adobe AIR!. It provides a good, short introduction to Adobe AIR and how easy it is to use your web development skills to create rich cross-platform desktop applications.
For further reading, you may wish to check out Akash Mehta’s winning article, Walk on AIR: Create a To-do List in Five Minutes.