Archive for the ‘ HTML & CSS ’ Category

The Beauty of jQuery


I’ll admit, I resisted the use of frameworks. I believe in understanding the core structure and building from it. But after 2 years of working with heavy Javascript, I decided it was time to test out some frameworks to speed up my work.
There’s about 100+ Javascript frameworks out there. Picking one was no easy task. I took about 2 weeks to test out a handful of frameworks and ended up choosing jquery.

It’s tiny. no overhead. It also has a well supported community. Which means plugins galore. And it based off of CSS syntax. So there’s very little learning curve.

And the best feature of all… it’s cross browser compliant!!

No more MSIE hacks or special code for Opera. Your complex Javascript will work on all browsers. That’s a saving of 2 weeks worth of programming already!

With MooTools and Prototype, you have to be careful not to use the same variable name as their API. But not with jQuery. It is completely isolated in it’s scope and won’t affect any global namespace.

Yahoo UI and Dojo, well those are big boys. And i mean HUGE files. I prefer small footprint over bulky features. In fact, I’ll stab my eye out before I use Dojo… but I’ll digress.

For more info : http://htmltree.com/the-beauty-of-jquery/

fontsquirrel.com converting typefaces for @font-face


There are a number of formats for typefaces available which are used within @font-face. Typically, you may only have a typeface in one format, such as TrueType or OpenType. To provide as much support for your choice of typeface as possible in your Magento store, you will want to convert to a range of formats.

There are a number of online @font-face conversion tools that generate the necessary CSS and typeface files for you, including Font Squirrel’s FontFace Generator (http://www.fontsquirrel.com/fontface/generator).

@font-face support across browsers
There is surprisingly good support for @font-face across even older browsers.

EOT: Internet Explorer
The EOT (Embedded Open Type) format typefaces are supported in all versions of Internet Explorer.

TTF: Safari, Opera, Chrome, and Firefox
Safari version 3.2 onwards, Opera version 10 onwards, Firefox version 3.5 onwards, and all versions of Chrome support the TTF (TrueType Format) for typefaces in @font-face.

OTF: Safari, Opera, Chrome, and Firefox
Similarly to the TrueType Format, OTF (OpenType Format) is supported by Safari version 3.2 onwards, Opera version 10 onwards, Firefox version 3.5 onwards, and all versions of Chrome support the TTF (TrueType Format) for typefaces in @font-face.

SVG: iPhone and Chrome
The SVG (Scalable Vector Graphics format) is supported by the iPhone and Chrome browsers. SVG font files are specially formatted .svg files that contain vector graphics for each glyph and character of the typeface it represents, allowing for easy scalability.

WOFF: Firefox
The WOFF (Web Open Font Format) is currently supported by Firefox, but is in the process of becoming a standard for font formats across all major browsers, including those by Opera, Microsoft, and Mozilla.

CSS for @font-face
The CSS for using the @font-face attribute is relatively simple. In your new theme’s local.css file (in the /skin/frontend/default/m2/css directory), add the @ font-face  CSS at the top of the file:

@font-face {
font-family: ‘FranchiseRegular’;
src: url(‘../types/franchise-webfont.eot’);
src: local(‘?’), url(‘../types/franchise-webfont. woff’) format(‘woff’), url(‘../types/franchise-webfont. ttf’) format(‘truetype’), url(‘../types/franchise-webfont. svg#webfontgvcdROVT’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
font-family: FranchiseRegular, sans-serif;
}

Amazing HTML5 Tags, Attributes and Browser readiness


Amazing HTML5 Tags, Attributes and Browser readiness

Ultimate HTML 5

Introducing the Google Font API & Google Font Directory


You can use WebFont Loader with fonts on your own server, with links to the just-announced Google Webfont API, or with your Typekit account.

As for Google’s new Font API, well, it’s so simple its hardly an API. You just need to add a link to Google’s stylesheet in the head tags of your page and then apply that font to some element in your page.

The syntax looks like this:

Then, in your stylesheet, you can apply that font to any body element. For example:

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>

body { font-family: 'Tangerine', serif; }

For more information : http://googlecode.blogspot.com

CSS3 PIE: CSS3 decorations for IE


PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are difficult and time-consuming to implement, involving complex sprite images, extra non-semantic markup, large JavaScript libraries, and other lovely hacks.

For more information : http://css3pie.com

Simplify CSS 3 With Online Code Generators


CSS Maker is a free tool to experiment with CSS properties and values and generate a simple stylesheet for your site

For more information : http://www.css3maker.com/

Real Fonts Now Easiest Way To Use


This will change the way you design websites.

Add a line of code to your pages and choose from hundreds of fonts. Simple, bulletproof, standards compliant, accessible, and totally legal. 
For more information: Click Here