MEDBLOG : Actualités Geek Web 2.0 & Webdesign

Actualités Geek Web 2.0 & Webdesign

Un Js pour vos effets Glace à la sauce Web 2.0


Comme toujours je fais un tour sur le blog de dadou3x pour voir ce qu’il y avait d’intéressant et pour laisser un commentaire c’est là que je suis tombé sur un commentaire qui parlé d’un script js du nom de Glossy.js qui avait l’air vraiment utile surtout dans le cas ou vous n’avez pas beaucoup de temps ou que vous n’aimez pas trop le traitement des images c’est possible aussi :)

Ce script Js vous permet d’avoir un effet glace à la web 2.0, tout ce qu’il faut : image arrondie ainsi qu’un ombrage.

Donc j’ai décidé de faire un petit tutorial pour vous expliquer comment faire l’ajout et son paramétrage.

Premier partie : Ajout du Js Glossy.js dans votre site ou blog.

Téléchargez et placez le fichier Glossy.js dans votre répertoire racine par exemple, ensuite ajoutez la balise qui va faire appel à ce script entre <head> et </head> :

<script type="text/javascript" src="glossy.js"></script>

Bien sûr faites attention au paramètre “src” qui indique l’emplacement du script.

Deuxième partie : Ajout de la class à votre image pour afficher l’effet

<img src="images/example.jpg" width="300" height="202" class="glossy" />

Paramétrage du style :
Pour changer le style d’arrondi pour l’image il faut ajouter et paramétrer la valeur “iradius25″ - min=20 max=50 par défaut =25

<img src="images/example.jpg" width="300" height="202" class="glossy iradius25" />

Pour enlever l’ombrage de l’image ajoutez le valeur “noshadow”. Par défaut l’ombrage est active pour l’image.

<img src="images/example.jpg" width="300" height="202" class="glossy noshadow" /><

Dans le site officiel vous trouvez d’autre d’informations sur ce script ainsi que d’autres scripts tel que corner.js; qui va vous permettre d’appliquer d’autres effets sur vos images.

N’hésitez pas à me laisser des commentaires après vos essais.

AddThis Social Bookmark Button

38 commentaires, commentaire ou Trackback

  1. Bah ça marche niquel depuis 5 mois :D

    En tout cas, malgré qu’il soit assez lourd, c’est très joli. De mon côté je vais essayer de changer le script pour faire des variantes…

  2. Salut thomas
    Je l’avais déjà remarqué sur ton blog :); le tuto a été fait pour aider et faciliter l’intégration de l’effet; donne moi des nouvelle des Maj que tu vas apporter si tu veux bien sûre :) Merci pour ta petite visite. :D

  3. Tes articles sont tous très intéressants, je ne manquerais pas de repasser.
    J’ai fais quelques test pour modifier le script et j’en suis arrivé a la conclusion…que c’est niquel, en fait j’ai testé plusieurs truc (changer les couleurs de dégradé, la taille des bordures) mais je trouvais le résultat moins beau que l’original…

    En attendant jte repasse le lien vers un script que j’avais fais il y a peu pour pouvoir profiter chaque jour d’une vignette de BD sur la page google.
    C’est un peu compliqué mais le final est vraiment sympa. :D
    http://www.calingratuit.be/TDBlog/?p=214

  4. oh lala, mehdi le blogueur plus rapide que son ambre, j’aurais qu’à faire un lient sur ton excellent article, j’hésite encore à l’intégrer à mon blog parce que comme l’a signalé Thomas c’est assez lourd à charger mais si beau à voir.

  5. lol dadou3x, je ne pense pas l’ajouté au blog surtout que mon design ne s’adapte pas trop a cet effet, cetté surtout pour aider :)

  6. C’est marrantq ue je retrouve Thomas dans les commentaires…car ce script Glossy me faisait penser à son blog…merci pour ce billet :)

  7. ダンヒルピュア

  8. ダンヒル財布偽物

  9. ロンシャンパルミエ

  10. ロンシャン+べ

  11. フルラエリザベス激安

  12. ダンヒル時計レディース

  13. ロンシャンaタイプ

  14. ロンシャン新作

  15. フルラ定期入れ

  16. ロンシャンネイビー

  17. フルラ店舗大阪

  18. フルラポシェット

  19. ロンシャン教会図面

  20. 時計ブランド

  21. marcjacobs財布

  22. バッグブランド人気

  23. ロンシャン天気

  24. カルティエサントス

  25. ダンヒルヴィンテージライター

  26. フルラ博多

  27. ロンシャンガーメントケース

  28. ロンシャンメンズブリーフケース

  1. links for 2007-08-31 - 31 août 2007
  2. Windows - 15 juin 2014
  3. gaming - 30 juin 2015
  4. movie streaming - 3 janvier 2016

Recevez les derniers articles par mail :

 

Recent Comments

  • Carmine
    Un nouveau logo pour Photoshop
    2021-03-16 20:40:09
  • Kidjo tv
    Scriblink - Le tableau blanc collaboratif en ligne !?
    2021-03-14 10:33:20
  • resilier abonnementorange
    ViewAt.org, Partage de photo panoramique
    2021-03-14 10:30:40
  • Boulanger.Com
    FaceInHole, Changer de corps
    2021-03-14 10:30:29
  • kidjo tv logicom
    SnagIt lance des plugins de capture d’écran
    2021-03-14 10:30:07
  • tv apk
    ImprimeBlog, Imprimer son blog en un livre
    2021-03-14 10:28:51
  • KIDJO TV
    Pulse ARTS : Le magazine des arts graphiques devient à 100% gratuit
    2021-03-14 10:26:30
  • Mamanmi.com
    Read It Later, Enregistrer est remettre la lecture de vos articles à plus tard
    2021-03-14 10:17:21
  • resiliation abonnement
    Vidéo sur les coulisses d’un studio photo
    2021-03-14 10:10:45
  • kidjo tv tiniloo
    Seam Carving les plugins sont disponible maintenant
    2021-03-14 10:10:17
  • supprimer orange
    Google Shared Stuff : bookmarking vu par Google
    2021-03-14 10:09:23
  • kidjo tv logicom
    Iconlet : Moteur de recherche d'icones
    2021-03-14 10:03:25
  • abonement
    Blackle, la version écolo de Google
    2021-03-14 10:03:14
  • abonnementjeu
    Verify Email, contrôle vos adresse e-mail
    2021-03-14 10:01:56
  • tv Abonnement
    SnagIt lance des plugins de capture d’écran
    2021-03-14 10:01:32

Par Albert Einstein

“La connaissance s'acquiert par l'expérience. Tout le reste n'est que de l'information.”

Feedburner RSS
Ajoute a Technorati Favoris