CSS


It’s pretty bad for me to even do this because some of these ebooks might have copyright blah blah on them but I got them from the web too!

I. save_the_pixel_by_ben_hunt

Here’s my favorite reference: Save the Pixel by Ben Hunt. Ben Hunt is a very good and practical web designer. Not the usual web designer who just draws and edit images in Photoshop and uses them as CSS background images. I don’t know if he minds but he also said that it’s a good thing that people can actually learn from him (without any monetary returns) since it helps build his reputation (not that he even needs it, I mean – he must really be popular in the field of web design and I truly admire him).
One of the first references I have actually read regarding basics of CSS, DHTML and Ajax (as the name suggests). It’s  a really good book for beginners. Comprehensive and precise. Here’s the complete book description:
CSS, DHTML, and Ajax, Fourth Edition: Visual QuickStart Guide

The Web doesn’t stand still, and neither does this guide: Completely updated to cover the new browsers, standards, and CSS, DHTML, and Ajax features that define the Web today, the one thing that hasn’t changed in this edition is its task-based visual approach to the topic. In these pages, readers will find friendly, step-by-step instructions for using CSS, DHTML, and Ajax to add visually sophisticated, interactive elements to their Web sites. Using loads of tips and screen shots, veteran author Jason Cranford Teague covers a lot of ground–from basic and advanced dynamic techniques (for example, making objects appear and disappear) to creating effects for newer browsers, migrating from tables to CSS, and creating new DHTML scripts with embedded scroll areas, fixed menu bars, and more. Users new to CSS, DHTML, and Ajax will find this a quick, easy introduction to scripting, while more experienced programmers will be pleased to find practical, working examples throughout the book.

III. joomla-template-design1

I actually did not benefitted much from this book as this book is just a guide for really joomla newbies re: template design. But in a beginner’s perspective – I feel that this will help them with actually building a new template. 😀

 

I have a history of learning how to round – up corners using CSS to Javascript.  But I’m not saying I’m an expert to any of these fields (namely CSS and Javascript). It just happens that my previous job has provided me enough space and opportunity to learn some techniques and skills on these area. (Thanx to Sir Troy for that)

Ive gone from using tables plus external images (atleast four) to generate a container with round corners. (a primitive way i think). This was the time where tables are the mainstream for layouting your page.

Then come the tableless layout using div. It was a remarkable alternative from layouting webpages. Using tables are messy (code-wise) and ugly. Div’s are seamless and with CSS positioning and all that, div is the way to go for layout.

I adapted how rockettheme.com layouts their template by superimposing atleast three divs on top of each other and positioning these div’s in such a way that any of them can take the left, center, and right part of a rounded rectangle as a background image.

Soon, since I always look for better alternatives, I discovered nifty corners  and my quest for rounded corners finally ended. 😀

I love the library of nifty corners. Easy, light and direct.

I never had a problem with it until I have to make a site with background gradients and rounded corners and I opted not to use the (sliding doors of css by alistapart.com) on my tabs. Simply because I am in no mood to reconsider all the prerequisites of a sliding doors of css  (the background images for the left and the sliding door side).

I looked for js libs that could create the bg gradient for me. But found nothing that suits my taste. So after an hour of searching and trying, I gave up and went back to images. Surely, a single background gradient from an external image will not be that hard to load compared to the (3 images from rockettheme’s style).

And then i tried if i could use nifty corners to round up the top of my div, and a single image file (gradient) as bg image for that div and voila! It worked…

I have yet to see if i could mimic the sliding doors though. 😀

it’s my task for the coming night. 😀