Merveilles du web 2.0… mon « copier bloguer » du web

26 février 2009

25+ Web 2.0 Generators to rescue ( Be Lazy)

Classé dans : Design, Web 2.0 — Rémi SOUBEYRAND @ 11:28
Tags:

Sometime there are projects or clients that need to be done in one days or so. When you need a quick striped background, a CSS menu, web 2.0 badges these tools are lifesavers. Recently, these generators helped me on one of the photo gallery I was working on. Maybe your are designer who wants to create and do all your design from scratch. But these tools are just a help dose on the side when you need them.  So,use these tools when you need and share them. Here are they are:

Web 2.0 Generator

Well it is web 2.0 age. This web 2.0 generator automatically generate the XHTML/CSS layout with rounded corners. What else can you ask for? The XHTML is also valid. You can choose the colors you like. All these can be done within a minute.

web20generator

Stripe Generator 2.0

You got your CSS?XHTML layout, but you want a striped backgorund. No problem. Just use Stripe generator.  You can generate any kinds of stripe you want with lots of options. Also, you can browse and download other stripes that has been used by other users.

stripe20

Tabs Generator

Are you a fan of Tabs? Here is a handy web generator for you. With these tab generator, you can see what the page you will look like and when you are done creating just click download and it will give you the PNG file. That easy.

tabs

Web 2.0 Badges

Lets say you do not like the badge you got from Web 2.0 generator or You have web 2.0 badge and want a different color or type. Use these generator to create the kind badge you like.

badge

Button Generator

Well you got the Layout, badges, tabs  What else can do need? Some buttons to offer the free downloads or maybe something else. Buttanator will help you with that easily generate web 2.0 . There are more button generators. I will add the link at the end of the post.

button

Favicon

“A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16 pixel square icon associated with a particular website or webpage. (source)”
If you want to create  professional a web site a favicon is a must. I have seen many websites that is a professional , nicely designed site but lacks a favicon. With these generator you can see the favicon in your browser in real time. If you have an image you can generate favcion from the image too.

favico

Ajaxload Web 2.0

Stop wasting your time on creating pre loaders. Instead use this generator. I absolutely  love this site. They have all kinds of loader and you change the color and background. Also, this site has nice design as well.

ajaxload

3d Box Generator

Some of the web sites sometime gives out free vectors, photshop brushes and more. They put the images of the brushed on a  realistic 3d box. Take a look at Bittbox example. It can be done in Photoshop or a good image editor. But why not use something easy. Just upload 3 images for the box (front,sides and top) in less than a minute you will have a 3d box with any kind format you want to download.  Take a look at the box i created just using a random image. Isn’ t that great or what?!!!!!

box

Picmarker

If you are a photographer or someone who has lots images on your site and make sure people do not steal your images, use this tools to watermark images. The cool thing about Picmarker   you can watermark your images from your computer, facebook, flickr, Picasa album. The watermark again can be done using any image editors. But this tools allows you to watermark couple images easily.

pic

CSS R0unded Corner

Easily Create Rounded CSS corners with HTML and CSS.

rounded

Also check out…

  1. BGPatterns : Another useful patterns creator with symbols. Really useful site.
  2. Fresh Generator : Generate Web 2.0 buttons, rounded corners, boxes and more.
  3. Website Ribbon Generator: Another awesome generator. Nice, easy and beautiful.
  4. Free Post it Note Generator: Can this get any better? Generate Cool hand written Post it note.
  5. XHTML/CSS Markup Generator : If your  are like me who forgets all the tags, use this tools to generate the markup.
  6. Reflection Maker: If you have an image you want to create a reflection, upload and choose the size and Your done! So easy and convenient.
  7. Genfavicon: Another Favicon generator.
  8. Web 2.0 logo creator: Create web 2.0 logos easily.
  9. Stripe Designer: Generate stripes with many different options.
  10. Tartan Generator: Forget stripes use tartan. This utility will help you to generate a nice tartan.
  11. Free Footer Generator: FreeFooter is an easy and fast tool that simplifies how you personalize your web site  blog page footer.
  12. Fresh Badge : Anoter Brush Generator.
  13. Cool Text : Free Graphics and Button Generator.
  14. Color Scheme Generator: The Color Wizard is a color matching application for anyone who wants to create designs with great looking colors.
  15. WebFX: A web Based graphic effect generator. Choose an image from your site and let WebFX do the rest.
  16. Dotetemplate: Build and customize a whole website with this web generator.
  17. Avater Generator : Generate Web 2.0 avatar with text or more.
  18. WordPress Plugin Generator: No idea!  Check it out if t works and let me know.
  19. CSS sticky footer: Not a generator , a CSS technique to make your footer stick at the bottom of the page.

If you are looking for menu generator look at my earlier post where I mention a menu generator and if you are looking for online form builder find them here and Mashable’s post on 20+ Button and Badge generator.

Finally, I want to say thank you to all the developers and coders who created this wonderful generators. If there is a web generator you use shout it in the commnet and I will add it in the list.

Blogged with the Flock Browser

30 janvier 2008

Css Trick – Pure Css Text Gradients

Classé dans : Design — Rémi SOUBEYRAND @ 9:36
Tags:

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:

23 janvier 2008

peel.fr – Comment modifier le style du site ( Logo, fond, images) ?

Classé dans : Non classé — Rémi SOUBEYRAND @ 15:35
Tags:

Comment modifier le style du site ( Logo, fond, images) ?

Sur les versions PREMIUM, les pages pricncipales sont stockées dans le répertoire /modeles/default/. Il vous est donc possible de modifier l’apparence du site en quelques clics.

  • La page haut.php contient l’affichage du header (bannière haute) ainsi que la barre de navigation de gauche.
  • La page bas.php contient la barre de navigation de droite ainsi que l’affichage du footer (bannière bas)
  • La page template.php contient l’affichage des produits dans les pages catalogue (fonction template_index_produit)
  • La page style.css contient l’ensemble des éléments de style qui ne sont pas gérés par l’interface d’administration
  • La page banner.php contient l’affichage des bannières publicitaires.

L’interface d’administration permet elle aussi de gérer quelques paramètres :

  • Administrer > Configuration générales > Variables du site permet de gérer le logo afficher dans le header et le nom du site
  • Administrer > Configuration générales > Gérer la feuille de style permet de gérer la police, la taille de la police et sa couleur pour les éléments de texte, titre et tétiere

Quelques exemples de modification :

Modifier le header : ouvrir et modifier le fichier /modeles/default/haut.php ligne au niveau des lignes contenant la variable $logo

Modifier la barre de navigation et son style : ouvrir et modifier le fichier /modeles/default/haut.php au niveau des lignes contenant l’appel à la feuille de style menudyn. La css menudyn se gère quant à elle dans le fichier /modeles/default/style.css

Modifier l’affichage du menu arborescent des catégories : ouvrir et modifier le fichier /modeles/template au niveau de la fonction récursive construit_menu_arborescent_cat

Modifier l’apparence des fiches produits : ouvrir et modifier le fichier /modeles/template au niveau de la fonction template_index_produit

Modifier l’affichage des prix (non recommandé) : l’affichage des prix, des stocks et de l’icône caddie se trouve dans la page /lib/fonctions/fonctions.php fonction print_critere_stock_prix. Nous vous recommandons de ne pas modifier cette fonction d’un point de vue fonctionnelle car elle est au coeur du système (lien avec la gestion de stock multicritère, prise en charge du module BtoC, gestion des critères), vous pouvez néanmoins facilement modifier les icônes Acheter ou Détails qui se trouvent dans le répertoire images (images/more.gif et images/caddie.gif).

Tags:

Publié sur WordPress.