Bidouilleur

Il y a quelques jours je vous parlais de WebGL qui permet de gérer nativement la 3D au sein d’un navigateur en se basant sur les balises canvas (Voir ici) et de son intégration dans la version de dev de Webkit .
Et aujourd’hui c’est au tour de Firefox de l’intégrer dans sa dernière Nightly Build!

Bon j’ espère vous dire la même chose pour internet explorer dans quelques jours…mais sincèrement je n’y crois pas…

Twitter ce post

WebGL vient d’être intégré au moteur de rendu Webkit (en version de Dev) qui est utilisé par Safari, Chrome ou en encore par l’Iphone, cette techno permet de gérer nativement la 3D au sein d’un navigateur, elle se base sur la nouvelle balise <canvas> (HTML5) et utilise OpenGL pour gérer la 3D.

Voici un exemple de code : http://trac.webkit.org/browser/trunk/WebCore/manual-tests/webgl/Earth.html?rev=48330

Et voici une vidéo de démonstration du rendu :

Twitter ce post

Vous en avez rêvé ColoRotate l’a fait !

Ce site vous donne accès à un sélecteur de couleur en forme de diamant et donc en 3Dimensions, chaque couleur choisie est représentée par un point dans ce diamant et grâce à un joystick vous pouvez modifier les tons de votre palette de couleur très simplement.

Une fois votre palette créée vous pouvez la télécharger en .act (Adobe Photoshop Color Table File).

Il y a ensuite de nombreuses options sympa, pour les tester c’est par ici.

Twitter ce post

Vous devez sans doute connaître le plugin Wordpress WP-cumulus qui est très à la mode en ce moment  et qui permet d’afficher  un nuage de mots clés dynamique et en 3d qui tourne en fonction de la position de la souris.

Le petit ou gros problème de ce plugin est que le nuage est généré en flash, ce qui peut poser quelques petits problèmes de référencement..

Pour remédier à cela je vous propose un plugin Jquery qui fait exactement le même nuage mais en HTML /Javascript.

Code HTML:

1
2
3
4
5
6
7
8

<div id="tagShpere">
<ul>
	<li><a href="#">Mot clé 1</a></li>
	<li><a href="#">Mot clé 2</a></li>
.......
	<li><a href="#">Mot clé n</a></li>
</ul>
</div>

Code Javascript :

1
2
3
4
5
6
7
8
9

$(document).ready(function(){
		$('#tagsphere').tagSphere({
			height: 280,
			width: 280,
			slower: 0.65,
			radius: 120,
			timer: 50
		});
	});

Télécharger le plugin.

Lien.

Et un exemple fait maison ici.

Twitter ce post

Preloaders.net vous permet de générer des preloaders gif en 3D !

Pour ceci choisissez un des nombreux preloaders 3D, puis choisissez sa couleur de fond, sa couleur, sa taille, puis la vitesse de l’animation, cliquez sur « Generate » et le tour est joué!

Exemples:

Lien du générateur.

Aperçu :

Générateur de preloaders(image d'attente pendant un chagement) en 3D

Le générateur propose aussi des dizaines de preloaders en 2D. De quoi faire patienter vos visiteurs en toute beauté!

Twitter ce post