blog sur le développement web, jquery,css3, Magento, Symphony, php et bien d'autres choses

Articles tagués ‘effet’

Texte stylisés avec Photoshop.

Voici quelques bon tutoriels photoshop pour créer des textes stylés avec photoshop.

tous ces tutoriels sont relayés par le très bon site Vandelay Design que vous pourrez consulter en cliquant ci-dessous

logo vandelay design

logo vandelay design

en avant gout des réalisations:

voici donc les tutoriels photoshop qui vous sont proposé pour transformer et styliser vos polices avec photoshop.

Les tutoriels

Spritely.net

Spritely est une librairie jquery permettant de créer des animations simples.

Effet néon sur du texte en jquery et html

Transition de couleur,

néon texte html

et jquery

j’ai trouvé cet effet de néon en jquery plutôt sympa. il s’agit d’une transition d’image en jquery qui donne un effet neon, de changement de couleur sur du texte et au final c’est assez sympa.

c’est très simple:

créer deux images avec du texte coloré, avec des dégradés sur les mots comme sur l’exemple:
image effet néon jquery transition de couleur

on pose le code html:

<h1 id="neonText">
	Neon Text Effect With jQuery & CSS.
	<span id="layer1"></span>
	<span id="layer2"></span>
</h1>

on pose le CSS

/* The two text layers */
#neonText span{
	width:700px;
	height:150px;
	position:absolute;
	left:0;
	top:0;

	background:url('img/text.jpg') no-repeat left top;
}

span#layer1{
	z-index:100;
}

span#layer2{
	background-position:left bottom;
	z-index:99;
}

/* The h1 tag that holds the layers */
#neonText{
	height:150px;
	margin:180px auto 0;
	position:relative;
	width:650px;
	text-indent:-9999px;
}

et enfin le code j-query:

$(document).ready(function(){

	setInterval(function(){

		// Selecting only the visible layers:
		var versions = $('.textVersion:visible');

		if(versions.length<2){
			// If only one layer is visible, show the other
			$('.textVersion').fadeIn(800);
		}
		else{
			// Hide the upper layer
			versions.eq(0).fadeOut(800);
		}
	},1000);

});
 

et au final! l’animation de couleur, style neon sur du texte full jquery ça donne ça

>>>>>Demo du style neon sur le texte en jquery html et css<<<<<
%d blogueurs aiment cette page :