Iconize Drupal | Failboat

Iconize Drupal

silviogutierrez

12/14/2007

0 comments

• Drupal
• Icons

I’ve gotten a lot of feedback on this site’s design, and probably the most frequent compliment I get regards the icons on this site. I added them because it’s a very small addition that makes a site a lot more exciting. As much as I love Drupal, I was surprised when I learned that there’s no unique CSS ID for most menu items in the Drupal core. This tutorial will show you how to add these handlers to make adding icons trivial.

Throughout this short tutorial I’ll assume you have some knowledge of Drupal’s theme system, but if you don’t, head over to the handbook to learn more.

Head over to your theme folder and open template.php, or create it if it doesn’t exist. Make sure the file has the opening php tag, but not a closing one. Once the file is ready, add the following code… [see article]

Iconize Drupal | Failboat

Blogged with the Flock Browser

Tags: drupal, logo

Tango Desktop Project - Tango Desktop Project

Tango Desktop Project

From Tango Desktop Project

What is the Tango Desktop Project?

The Tango Desktop Project exists to help create a consistent graphical user interface experience for free and Open Source software.

While the look and feel of an application is determined by many individual components, some organization is necessary in order to unify the appearance and structure of individual icon sets used within those components.

The Tango Desktop Project defines an icon style guideline to which artists and designers can adhere. A sample implementation of the style is available as an icon theme based upon a standardized icon naming specification. In addition, the project provides transitional utilities to assist in creating icon themes for existing desktop environments, such as GNOME and KDE.

Tango Desktop Project - Tango Desktop Project

Blogged with the Flock Browser

Tags: icones

Rubik’s Cube GENERATOR

Rubik’s Cube

Use your digital camera to create your own cool Rubik’s Cube. You’re not 10-years old anymore, but these last forever!

Rubik’s Cube

Blogged with the Flock Browser

LunaPic | Free Online Photo Editor | photo-spread tool

Photo-spread

Upload an image to create this effect!

or, check our out File Open Tool for other options.

LunaPic | Free Online Photo Editor | photo-spread tool

Blogged with the Flock Browser

Joe King : How to cover an IE windowed control (Select Box, ActiveX Object, etc.) with a DHTML layer.

How to cover an IE windowed control (Select Box, ActiveX Object, etc.) with a DHTML layer.

It was about 1 year ago that Coalesys released the first WebMenu 2.0 beta.  At that time we began demonstrating a technique for overlaying windowed controls in Internet Explorer.

In case you don’t already know, windowed controls in IE will always cover DHTML layers.  That means if you have a DIV that pops up or floats on the page and it intersects with a windowed control (such as the common SELECT box), the windowed control will obscure the DIV, no matter what zIndex you have set for each element.  More information is available in this Microsoft KB article.

The initial solution adopted by most developers who cared about such things (including ourselves) was to dynamically hide windowed controls when it was necessary to display the DIV over them.  Far from being a perfect solution, it was better than the alternative of doing nothing at all.

It did have one very frustrating aspect.  People who evaluated WebMenu didn’t understand why their select boxes would disappear.  And we are talking much more than just ASP.NET developers, as we produce WebMenu for ASP, as well as general web development.  It seemed like every day we received a support question, “I found a bug in WebMenu. The select boxes are disappearing”.  And although we did provide the ability to turn the feature off, nobody really bothered once they understood the nature of the issue.

Then, as luck would have it, a developer called who wanted to use our product for it’s broad set of features, but who absolutely needed to have the menu appear over some windowed objects.  What was unique about his call was that he had the idea for a solution and shared it with us.  While we didn’t use the full scope of his idea, we were able to take from it what we needed to cover windowed controls in IE 5.5.  So, enough yacking.  You probably surfed here to read about the solution.  And here it is:

IFRAME

The IFRAME control has a unique nature in IE 5.5.  It can exist in both the zIndex of windowed controls and the zIndex of regular HTML elements.  Simply put, you can shim an IFRAME under your DIV. The IFRAME will block out the windowed control.

Set up your IFRAME:

The src attribute is set with a useless JavaScript statement so that the IFRAME does not try to load a page (which you won’t notice it doing, but it will be the cause for tripping the “Unsecured Items” message if you use it on a HTTPS page).

You can code your IFRAME as a static element on the page, or if you are going to be using more than one of them you may want to dynamically create them as required.  The insertAdjacentHTML() method is good for that.

Now, all that is needed is to size the IFRAME according to the dimensions of your DIV, position it, place it one layer beneath the DIV in the zIndex order and make it “visible”.  The IFRAME’s style object will allow you to do these tasks:

iframe.style.top
iframe.style.left
iframe.style.width
iframe.style.height
iframe.style.zIndex
iframe.style.display

What about transparency?

If the DIV has transparent areas, you’ll want those areas to punch through the IFRAME to the page background.  There are two ways you can make an IFRAME transparent.  The one that works for this situation is to set the style object’s filter property:

iframe.style.filter=’progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)’;

This in effect makes the entire IFRAME transparent, but it will still block out the windowed controls.  The other technique, which uses the IFRAME element’s ALLOWTRANSPARENCY attribute, actually pertains to making the interior page background of the IFRAME transparent, so that any content inside the IFRAME can have transparency.  However, this mode changes the nature of the IFRAME and it no longer serves our purpose for blocking out windowed controls.

What about IE versions prior to 5.5?

The IFRAME’s unique nature surfaced only in IE 5.5.  Prior to this, IFRAMEs where straight windowed controls themselves.  That means they could get above other windowed controls, but no HTML element (like the DIV) could be seen above them.  There is a solution, but it involves a lot of effort to get working.  You can dynamically write the content of your DIV into the IFRAME itself, get it sized appropriately based on the dimensions of the original DIV, and then just move it around as your absolutely positioned element.  There are a couple of caveats:

1.  The IFRAME, like any frame,  has it’s own JavaScript environment.  If you want DHTML actions in the IFRAME to integrate with the JavaScript functions in your main page, you will have to bridge the gap between the two JavaScript environments.

2.  Mouse events, such as OnMouseOut and OnMouseOver, can be called out of logical order when the mouse moves between frames in IE 4 and 5.  This problem is compounded when you are using timers and need to precisely control their execution and cancellation via mouse events.

Our original WebMenu 2.0 beta used this technique successfully for IE 4 and 5, but in looking forward to adding new features to the product, we could see that this solution “over-worked the plumbing” to a great extent.  The “shim” technique compatible only with IE 5.5 had zero architectural impact and was chosen for this reason.  You can still hide windowed elements in earlier browsers as an acceptable solution.

Joe King : How to cover an IE windowed control (Select Box, ActiveX Object, etc.) with a DHTML layer.

Blogged with the Flock Browser

Tags: selectbox, ie

afficher une image en mettant le code base 64 directement dans la page. http://www.ietf.org/rfc/rfc2397

Examples : afficher une image en mettant le code base 64 directement dans la page.

   A data URL might be used for arbitrary types of data. The URL

                          data:,A%20brief%20note

   encodes the text/plain string "A brief note", which might be useful
   in a footnote link.

   The HTML fragment:

   <IMG
   SRC="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
   AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
   ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
   a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
   ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
   F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
   hhx4dbgYKAAA7"
   ALT="Larry">

http://www.ietf.org/rfc/rfc2397

Blogged with the Flock Browser

Tags: astuce

1400 icônes 3D gratuites sous licence libre 1400 free 3D icons licensed free

1400 icônes 3D gratuites sous licence libre 1400 free 3D icons licensed free

1400 free 3D icons licensed free

20 juil, 2007 20 2007 Ressources gratuites Free Resources

On trouve sur l’internet beaucoup de ressources gratuites . Can be found on the Internet a lot of free material. Pourtant, certaines sont soumises à des licences strictes qui restreignent leur utilisation, notamment certaines licences creative commons. However, some are subject to strict licensing that restrict their use, including some creative commons licenses.

Un bonne solution est alors de se tourner vers le site A good solution is to turn to the site Wikimedia Commons Wikimedia Commons , qui répertorie des ressources sous licence libre. , Which lists resources under license free.

C’est ainsi que j’ai découvert via Thus, I discovered via lifehacker Lifehacker la collection d’icônes The icon collection Crystal Clear Crystal Clear . Elle contient plus de 500 icônes 3D issues du gestionnaire de fenêtres linux KDE. It contains over 500 icons from the 3D window manager linux KDE.

L’ensemble est divisé en plusieurs sections : Actions, Applications, Matériel, Système de fichiers, KDM et MIME-Types. The set is divided into several sections: Stocks, Applications, Hardware, File System, and KDM MIME-types. Chaque icône mesure 128×128 pixels et peut être téléchargé individuellement en format PNG. Each icon measuring 128 × 128 pixels and can be downloaded individually in PNG. On peut télécharger l’ensemble complet sur le site de You can download the complete set on the site of Everaldo .

L’auteur vient également de terminer le projet The author also has to complete the project Crystal Project Crystal Project qui regroupe plus de 900 icônes . Which includes over 900 icons.

Ca nous fait donc plus de 1400 icônes libres livrées sous licence LGPL . It therefore makes us more than 1400 icons supplied free under the LGPL license. Un grand merci donc à Everaldo. Many thanks to Everaldo.

Les créateurs de site web et autres geeks sauront les utiliser à bon escient! The creators of website and other geeks will use it wisely!

Pour aller plus loin Further Reading

Vous pourrez trouver d’autres icônes sur wikimedia chez certains utilisateurs, par exemple You can find more icons on wikimedia among some users, for example Libellule_bleue ou Or BenduKiwi

Et voici d’autres sites à explorer : And here are some other sites to explore:

KDE-look

GNOME-look

Tango Desktop Project Tango Desktop Project

Oxygen Icons Oxygen Icons

Blogged with the Flock Browser

Garland Simple mod Tutorial - part 2

An example of what will be achieved by the end of this tutorial can be seen at www.venturacottage.com

Fresh install of Drupal5 > Using [Windows explorer], Go to themes folder > make copy
of Garland folder and rename custom > open custom folder > > open style.css in
notepad and alter the lines

Garland Simple mod Tutorial - pa

Blogged with the Flock Browser

Tags: drupal, design, part2

Garland Simple modification Tutorial | drupal.org

Garland Simple modification Tutorial

Drupal 5.x

An example of what will be achieved by the end of this tutorial can be seen at www.venturacottage.com

Fresh install of Drupal5 > Using [Windows explorer], Go to themes folder > make copy

of Garland folder and rename custom > open custom folder > > open style.css in

notepad and alter the lines

background: #f7f1de url(bg-navigation.png) repeat-x 50% 100%;
to
background: #f7f1de url(bg-navigation.png) repeat-x 0% 100%;
and
background: #fbf9f2 url(body.png) repeat-x 50% 0;
to
background: #fbf9f2 url(body.png) repeat-x 0% -37px;
and
background: #ffffff url(bg-content.png) repeat-x 50% 0;
to
background: #ffffff url(bg-content.png) repeat-x -10px 0;
and
max-width: 1270px;
to
max-width: 1920px;

- save and close

Using your browser go to your website > admin/build/themes > enable the custom theme

and set to default > [Save Configeration] Now > [configure] and choose the color set

that you want to base your custom theme on (in my case Belgium Chocolate). Decide if

you wish to use the [Logo] and [Site name] options, or if you are incorporating them

directly into your background graphic and tick/untick accordingly. I DO use them, but

have my own home_logo.gif that works well and is available within the download >

[Save configuration]

Using [Windows explorer], Go to files > color > new folder something like

[custom-1e27bf52] view this folder as thumbnails.

Download drupalcustom.pspimage, which is a PaintShopPro v8 file, a trial version of

which is available at

http://www.hensa.ac.uk/sites/ftp.simtel.net/pub/simtelnet/win95/grafedit…

Open file - drupalcustom.pspimage, on RLS of window you will see the layer box > in

the group called GarlandColour most are inactive > turn off pinkplastic (by clicking

on the eye) and turn on say belgiumchocolate > you will see that the background has

changed. Now within [Group - main] > choose [mainimage] > Edit > Cut and the car should have gone. File > open > bring in an image of your own (anything will do for now) > edit > copy > back to drupalcustom and paste > as new selection > position top left to suit your wishes > selections >select none. To recap, we can change the base colour to whatever we want and brining an image in automatically blends it with the background. Now [File] > [Revert] > and change colour the belgiumchocolate as above > and save as drupalcustom.png > close this file

and open up drupalcustom.png again (this ensures it

is now a single layer flat image). Save it in the [custom-1e27bf52] folder as

body.png overwriting existing one > check home page in browser to view change - if

all ok continue

On RHS of PainShopPro window in Overview section click Info tab (if not already showing) > this will show your cursor position

zoom to say 300% > use the selection tool to select 0,0 to 1920×37 copy/ paste as new image > save in the [custom-1e27bf52] folder as bg-navigation.png

overwriting existing one > check home page in browser to view change

go to position 220,117 and select to the bottom right corner > copy and paste to a

new image > save overwriting current bg-content.png.

Now select from top,left > 50 wide x352 deep > copy and paste as new image and save

overwriting current bg-content-left.png. > check home page in browser to view change

(on bg-content.png) go to position 491,0 and select to depth 352 and a width of 50 > copy and paste to a new image > save overwriting current bg-content-right.png.

Now select from top,left > 50 wide x352 deep > copy and paste as new image and save

overwriting current bg-content-left.png.

back to bg-content.png > go to position 488,0 now select 50 wide x352 deep > copy and

paste as new image and save overwriting current bg-content-right.png.

back to the new bg-content.png and crop to 200 deep. Then go from 0,481 total depth and width 10px >edit > copy. Then select from 0,491 to bottom right corner > Edit > paste > into selection > file > save > check home page in browser.

That is pretty much it. Execept to say that you should backup your [custom-1e27bf52] folder, because if you go into the theme settings for whatever reason it helfully overwrites all your custom graphics with new ones!

I hope this is useful to those like me who struggled initially to adapt themes. Let us hope others with more knowledge take this further.

A version of this tutorial with extra screenshots is also at www.venturacottage.com/garlandmod2.htm

Garland Simple modification Tutorial | drupal.org

Blogged with the Flock Browser

Tags: drupal, theme, garland

BREEK.FR : site e-commerce souple et évolutif avec Drupal et Ubercart » Breek

VU SUR BREEK.FR : Naturalglam - site e-commerce souple et évolutif avec Drupal et Ubercart

Besoin

Créer un site de e-commerce souple et évolutif, dans un délais court mais sans sacrifier la qualité.

Rôle

Conception ergonomique et graphique, choix d’outil, installation et paramétrage de Drupal et d’Ubercart, développement de modules sur mesures, documentation, formation, optimisation et référencement.

Solution

Notre équipe à fourni une prestation clé en main de la lecture du cahier des charges à la mise en ligne (choix de (l’hebergeur, de l’outil, paramétrage, dialogue avec la banque, saisie initiale…). Ainsi, notre client a pu se concentrer sur les dizaines d’autres tâches liées à la création de son site.

Au final, naturalglam.com repose sur Drupal et Ubercart ainsi qu’une quinzaines de modules dont certains développés sur mesures. Cette solution apporte une très grande souplesse (extention du type de contenu, ajout de fonctionnalités, etc.) et offre tous les services de base nécessaires à l’acquisition et la fidélisation de clients :

• envoyer à un ami,
• parrainage,
• couponing,
• carte de fidélité,
• réductions basées sur des règles commerciales (frais de port offerts au-delà de 69 euros d’achat, etc.),
• cross selling
• newsletter,
• etc.

Le site joue sur une approche web 2.0 pour renforcer sa relation avec les clientes. Ces derrières peuvent donner leur avis sur les produits, se tenir informer en temps réel via les flux RSS, etc. Elles pourront même, à terme, noter les produits.

Le projet, de son initialisation à la mise en production, aura duré moins d’un mois même si des réglages ont eu lieu quelques jours après la mise en ligne. « C’est très court quand on sait que ce délais comprend le brief, la cinématique, les pistes graphiques, la structuration du catalogue, l’installation et le paramétrage, le développement de quelques modules spécifiques, la rédaction et la saisie initiales, l’intégration au système de paiement, la documentation, la recette, la mise en production, etc. » précise Stéphane Bordage, responsable du projet chez Breek.

www.naturalglam.com

site e-commerce souple et évolutif avec Drupal et Ubercart » Breek

Blogged with the Flock Browser

16 librairies et scripts pour générer des graphiques sur Internet

A lire : 16 librairies et scripts pour générer des graphiques sur Internet

“Voici un tour d’horizon des principales librairies que l’on peut rencontrer pour générer des graphiques en barres, des diagrammes ou des camemberts et les afficher sur une page web. La représentation de statistiques ou de données est souvent quelque chose de compliquée sur Internet. Heureusement différentes possibilités existent en fonction des technologies à votre disposition.”

Blogged with Flock

Tags: bloggéde www.simpleentrepreneur.com

A découvrir : Create A Graph, JDocs et Bust A Name

• Create A Graph : ce service en ligne permet de générer des graphiques de tout type (courbe, histogramme, camembert, …). Les possibilités en terme d’exportation sont très riches, puisqu’il est possible de générer des fichiers sous forme d’images (PNG, JPG) ou dans différents formats vectoriels comme EPS, SVG et PDF. Create A Graph ne permet pas en revanche d’importer des données existantes. Il faudra donc les rentrer à la main, mais le rendu des graphiques est très réussi et sa facilité d’utilisation en font un outil très appréciable pour donner vie à une suite de chiffres et illustrer un article.
• JDocs : ce site n’intéressera que les développeurs qui programment en Java puisqu’il donne accès aux documentations des librairies et kit de développement de ce langage. La fonction de recherche est très pratique et l’interface propose de nombreuses fonctionnalités comme la possibilité de sauvegarder ses librairies favorites pour y accéder plus rapidement, de consulter le code source et des statistiques (nombre de classes, de packages, …) et même d’annoter des pages (car doté d’un mécanisme de type wiki). A découvrir !
• Bust A Name : il est bien évidemment de plus en plus difficile de trouver aujourd’hui un nom de domaine qui signifie quelque chose et qui soit libre. Il existe déjà des services pour rechercher des domaines qui n’ont pas encore été réservés, mais Bust A Name est probablement un des plus efficaces. En effet, cet outil est capable de combiner les mots qui vous intéressent entre eux et même d’en proposer de nouveaux grâce à un dictionnaire intégré (malheureusement en anglais). Les résultats s’affichent rapidement et certains filtres peuvent être appliqués à ces derniers (comme ajouter un préfixe ou un suffixe). Il souffre néanmoins de quelques limitations (pas de support pour le .fr par exemple), mais est indispensable pour débusquer le nom de domaine idéal.

Blogged with Flock

Tags: bloggédepuis “www.simpleentrepreneur.com

s’amuser un peu avec ajax, dhtml…

Voici quelques liens sympa pour s’amuser un peu avec ajax, dhtml…
http://miniajax.com/ : quelques scripts
http://script.aculo.us/ : pas besoin de faire les présentations ;o)
http://prototype-window.xilinus.com/samples.html : classe de gestion de fenêtres utilisant prototype
http://www.ajaxim.com/ : un très bon chat ajax
http://www.huddletogether.com/projects/lightbox2/ : excellent pour une galerie d’images

Blogged with Flock

Tags: ajax, web2.0

Features - FormSpring

  Ajax Form Builder

  Multi-page form with skip logic

  JavaScript and server-side field validation

  Search, browse and share data

  Download data to a spreadsheet

  Secure your form with passwords, SSL and PGP

Form Builder

• Web-based control panel to create and configure forms with a web browser (Internet Explorer 6 & 7, Firefox and Safari). No need to install additional software.
• Add any kind of form widget (text fields, select lists, radio buttons, check boxes, etc) to your form, and change settings like sizes and layout. All without having to know HTML or scripting.
• Easily create multi-page forms with skip/branching logic to hide non-applicable questions.
• Calculating form fields
• Use the FormSpring form importer to automatically create forms from an external webpage or HTML file.

Form Submission 

• Send submitted form data to an unlimited number of email addresses.
• JavaScript and server-side validation to make sure users enter information for all required fields.
• Choose a password for each of forms so you can choose who can submit data.
• Create a custom message for users to read after they submit your form.
• Send users a custom confirmation email after they submit your form.
• Ability to let users upload files

Form Data

• Create Saved Searches and make browsing and finding your data easier
• Use the FormSpring API to add, edit and retrieve data stored within your FormSpring account, it currently returns data in XML, JSON and serialized PHP. To learn more check out our API Documentation here
• Search, browse, and view each data submission online.
• View summarized reports of submitted data.
• Download submitted data as a CSV file to use within Microsoft Excel or Access.
• Download submitted data as a RTF file to use within Microsoft Word
• Receive your form submissions with an RSS subscription.
• Share data and reports with other users without giving them access to your account.

Security

• Forms can be viewed and submitted over a secure 128-bit encrypted connection.
• Encrypt emailed data with secure PGP encryption.
• Encrypt data saved in the database with secure 128-bit encryption.
• Your control panel is accessed over a secure 128-bit SSL encrypted connection, protecting your account information and form data.

Customization

• Customize FormSpring with your own logo and branding using our private label feature.
• PayPal Integration
• Create custom templates to add branding and design to your forms.
• After users submit your form you can redirect them to a custom URL on your site.
• Customize email and web page confirmation messages with the data submitted in the form.
• Ability to embed a form on your site with one line of code

NOTE: Certain features are available only with paid accounts. For more information about what you get with a paid account versus a free account, visit our pricing page.

Features - FormSpring

Blogged with Flock

Tags: php, design

LightWindow Demo

Why another light-’whatever’?
After researching every single modal window, lightbox, slimbox, etc out there nothing fit the bill. Granted some of them were very nice but only fit a specific purpose, others were a nightmare on the code end, and others were just hacks of another. None of them truly supported all of the features we needed and those that were close could not be easily adapted without a bottle of Prozac near by.

LightWindow Demo

Blogged with Flock

Tags: javascript, bibliotheque

MooTools

Alternative à EXTJS :

pour la présentations de photos, il existe MooTools ( http://www.mootools.net/ ).

Exemple de réalisation de Jonathan Schemoul : http://www.parisenvies.com/ .

(Jonathan Schemoul  a  aussi fait la librairie Smooth Gallery avec, http://smoothgallery.jondesign.net/ )

Jonathan Schemoul  trouve que MooTools est un des meilleurs outil, la gestion des classes est très avancée et le code maintenable et que sur la durée, un code mootools est bien plus clair et lisible.

moo tools

Blogged with Flock

Tags: MooTools

ColorZilla :: Firefox Add-ons

ColorZilla 1.0 Homepageby Alex Sirota

Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies…Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily. And there’s more…

ColorZilla :: Firefox Add-ons

Blogged with Flock

Tags: extesion, firefox, design

PHP/SWF Charts > Introduction

PHP/SWF Charts is a simple, yet powerful PHP tool to create attractive web charts and graphs from dynamic data.Use PHP scripts to generate or gather the data from databases, then pass it to this tool to generate Flash (swf) charts and graphs. Any other scripting language (ASP, CFML, Perl, etc.) can be used with XML/SWF Charts (the XML version of the same tool.)PHP/SWF Charts makes the best of both the PHP and SWF worlds. PHP scripts provide integration, and Flash provides the best graphic quality. Features: * Web charts and graphs from dynamic data * Live and interactive chart updates without reloading the web page * Clickable charts, and drill-down * Animated transitions * Printable charts * Simple and flexible chart generation * Quality Flash graphics * Supports PHP 3, 4, and 5 * Supports unicode text to display special characters and any language

PHP/SWF Charts > Introduction

Blogged with Flock

Tags: php, charts

Css Trick - Pure Css Text Gradients

What is it?

Text Gradient is a simple css trick that allows you to improve your site’s

appearance by putting gradients on system font titles using nothing but css and a png image.

yes it work!

Sure it does! Try it yourself, change the above title by typing your own words in the field below.The trick is very simple. Text Grannt in png should start with your background color (in this case we use white gradient).

First the html set up. Each title (preferably heading tag) uses additional
empty nested span element.

http://cssglobe.com/lab/textgradient/

Blogged with Flock

Tags: design2.0