background preloader

FONTS

Facebook Twitter

Téléchargez vos fontes, de plus classique à plus cool – Linotype.com. Typekit. Typetester – Compare fonts for the screen. 3D CSS Text Generator. CSS Gradient Text Effect. Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property.

This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how. View Demos Download Demo ZIP Benefits This is pure CSS trick, no Javascript or Flash. How does this work? The trick is very simple. The HTML markups <h1><span></span>CSS Gradient Text</h1> The CSS That's it! Make it work on IE6 Since IE6 doesn't render PNG-24 properly, the following hack is required in order to display the transparent PNG (add anywhere in between the <head> tag): This is why we hate IE 6! jQuery prepend version (for semantic lovers) More samples Want to make Web 2.0 glossy text? Pattern / Texture. Quick tip: Styling blockquotes with CSS. Today’s tutorial is going to be short one, as I’m working on one last piece of coursework. This time I’m going to explain a clever CSS trick borrowed from Nick Boalch .

Here’s a screenshot: Here’s the HTML : <blockquote cite=" <div> Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display.

To minimize these problems, authors should use style sheets to control layout rather than tables. The <div> in the above code is a slight sticking point: it has no structural value but is required for the technique to work. Here’s the relevant CSS : There’s a simple trick at work here. You can see the technique being used on this sample page , or over on Nick’s weblog . CSS @font-face : Des polices personnalisées. Create Your Own @font-face Kits. I Shot the Serif - Free Fonts. Welcome to I Shot the Serif, the webby home of Matthew Welch's fonts. My fonts are all free and available under an MIT-style license. FitText - A plugin for inflating web type. CSSWARP - CSS Text to Path Generator.