begin process at 2012 05 28 09:41:53
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > EFFET DE TEXTE EN CSS3

EFFET DE TEXTE EN CSS3


 Information sur la source

Note :
Aucune note
Catégorie :Effets Classé sous :transforme, effet texte, texte, css3 Niveau :Débutant Date de création :17/06/2010 Date de mise à jour :21/06/2010 13:46:07 Vu / téléchargé :4 231 / 342
Auteur : kazma

Ecrire un message privé
Commentaire sur cette source (6)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
tout comme le titre l'indique il s'agit d'effet de texte utilisant transforme du css3 rotation et scale le tout est je l'admet pas tres utile mais sa m'a amusé de le faire et  sa donne un apercu de ce que l'on peut faire avec le css3

Source

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <link rel="stylesheet" type="text/css" href="style.css"/>
  • <script type="text/javascript" language="JavaScript">
  • function roro(elem,ntour){
  • this.el=document.getElementById(elem);
  • this.gg=00;
  • this.sens='aller'
  • this.nbtour=ntour
  • var spl=Math.round(Math.random()*2000)
  • var lui = this
  • setTimeout(function() { lui.rond(); },spl);
  • }
  • roro.prototype.rond = function(){
  • if(this.gg==30 && this.sens=='retour'){
  • return false
  • }
  • if(this.sens=='aller'){
  • this.gg+=30;
  • }
  • else{
  • this.gg-=30;
  • }
  • if(navigator.vendor){
  • this.el.style.WebkitTransform='rotate('+this.gg+'deg) scale('+this.gg/30+')';
  • }
  • else if(navigator.userAgent.indexOf('Opera')!=-1){
  • this.el.style.OTransform='rotate('+this.gg+'deg) scale('+this.gg/30+')';
  • }
  • else{
  • this.el.style.MozTransform='rotate('+this.gg+'deg) scale('+this.gg/30+')';
  • }
  • if(this.gg==360*this.nbtour){
  • this.sens='retour';
  • }
  • var lui=this;
  • setTimeout( function() { lui.rond(); }, 100 );
  • }
  • function init(){
  • d1=new roro('txa',3);
  • d2=new roro('txb',3);
  • d3=new roro('txc',3);
  • d4=new roro('txd',3);
  • d5=new roro('txe',3);
  • d6=new roro('txf',3);
  • d7=new roro('txg',3);
  • d8=new roro('txh',3);
  • d9=new roro('txi',3);
  • }
  • onload=init;
  • </script>
  • </head>
  • <body>
  • <br><br><br><br>
  • <span id='txa'>raison</span>
  • <span id='txb'>desire</span>
  • <span id='txc'>passion</span>
  • <span id='txd'>haine</span>
  • <span id='txe'>amour</span>
  • <span id='txf'>tentasion</span>
  • <span id='txg'>peur</span>
  • <span id='txh'>passion</span>
  • <span id='txi'>peur</span>
  • </body>
  • </html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" language="JavaScript">

function roro(elem,ntour){
this.el=document.getElementById(elem);
this.gg=00;
this.sens='aller'
this.nbtour=ntour
var spl=Math.round(Math.random()*2000)
var lui = this
setTimeout(function() { lui.rond(); },spl);
}

roro.prototype.rond = function(){

if(this.gg==30 && this.sens=='retour'){
return false
}

if(this.sens=='aller'){
this.gg+=30;
}
else{
this.gg-=30;
}

if(navigator.vendor){

this.el.style.WebkitTransform='rotate('+this.gg+'deg) scale('+this.gg/30+')';
}
else if(navigator.userAgent.indexOf('Opera')!=-1){

this.el.style.OTransform='rotate('+this.gg+'deg) scale('+this.gg/30+')';
}
else{
this.el.style.MozTransform='rotate('+this.gg+'deg) scale('+this.gg/30+')';

}
if(this.gg==360*this.nbtour){
this.sens='retour';

}
var lui=this;
setTimeout( function() { lui.rond(); }, 100 );
}

function init(){
d1=new roro('txa',3);
d2=new roro('txb',3);
d3=new roro('txc',3);
d4=new roro('txd',3);
d5=new roro('txe',3);
d6=new roro('txf',3);
d7=new roro('txg',3);
d8=new roro('txh',3);
d9=new roro('txi',3);
}

onload=init;
</script>
</head>
<body>
<br><br><br><br>
<span id='txa'>raison</span>
<span id='txb'>desire</span>
<span id='txc'>passion</span>
<span id='txd'>haine</span>
<span id='txe'>amour</span>
<span id='txf'>tentasion</span>
<span id='txg'>peur</span>
<span id='txh'>passion</span>
<span id='txi'>peur</span>
</body>
</html>

 Conclusion

hihan

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

21 juin 2010 13:46:08 :
modif du code

 Sources du même auteur

Source avec Zip Source avec une capture BOUTON ROTATIF
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT...
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS
Source avec Zip Source avec une capture DIAPO EN CSS 3D
Toutes les sources de kazma

 Sources de la même categorie

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture DIAPO EN CSS 3D par kazma
CHANGER LA TAILLE DU TEXTE ET OU DE FEUILLE DE STYLE AVEC EN... par Annadrill
TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600
Source avec Zip Source avec une capture CSS3 TRANSFORM par kazma
Source avec Zip COMPRESSION DE TEXTE CÔTÉ CLIENT EN JS VIA ALGORYTHME LZW par niamor36

Commentaires et avis

Commentaire de LeFauve42 le 21/06/2010 11:19:46

Salut,

Tu as teste sur quel browser ?
- sur FF 3.5.5, il y a des scales, mais pas de rotation.
- sur Chromium 6.0, il ne se passe rien.

Commentaire de kazma le 21/06/2010 13:49:30 administrateur CS

c'etait le code de la page qui avait un default mais il vaut mieux telecharge le zip car il y a un css associé et il y a deux autres source similaire dont celle qui fait rotation et scale et deux autres qui ne fonts que du scale

Commentaire de LeFauve42 le 21/06/2010 14:08:53

OK, j'avais fait un couper/coller :o)

Ca marche effectivement mieux, sur Chrome et FF.
Merci pour cet exemple.

Eric

Commentaire de kazma le 21/06/2010 18:41:32 administrateur CS

j'ai fait quelques teste par rapport au code que j'avais mis mais qui ne comportait pas le css et j'ai enfin compris pourquoi sa marchait pas avec chrome

avec chrome et safari pour que sa marche il faut que l'element soit en position absolute ou en float ou position fixed mais apparement sa ne marche pas en relative et statique apres sa on en pense ce que l'on veut mais pour mois c'est une implementation incomplete de la part de chrome et safari sachant que sa fonctionne bien avec firefox et opera

Commentaire de LeFauve42 le 23/06/2010 11:03:20

> apres sa on en pense ce que l'on veut mais pour mois c'est une implementation incomplete de la part de chrome et safari sachant que sa fonctionne bien avec firefox et opera

C'est pas si simple. Il faut regarder le texte officiel du W3C. Si ils disent que ca doit marcher en absolute, float ou fixed, alors webkit (le moteur HTML de Chrome et Safari) a tout bon lui aussi.

Commentaire de kazma le 23/06/2010 13:24:26 administrateur CS

ma curiosite m'a poussé a aller voir les specifications http://www.w3.org/TR/css3-2d-transforms/ et il est vrait que ce n'est pas dit explicitement mais en tout cas il est preferable que sa fonctionne avec toute les position car sa permet de faire plus de chose comme par exemple agrandir la partie d'un texte au passage de la souris.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Class qui transforme le texte en * [ par psyckan ] Bonjour, je voudrais créer une class qui tranforme le texte en *Par exemple, si j'ai :Password : &lt;font class='hide'&gt;password&lt;/font&gt;ça me r un input en ecoute un autre? [ par newlc ] Salut,je souhaite faire un truc tout bête en javascript,en faite je voudrais que lorsque que l'on saisie du texte dans un input et bien que le second texte defilant vertical en continu sans espace [ par catlaur ] Bonjour,Tout d'abord je tiens à vous remercier pour ce que vous faites.J'ai un script de texte défilant vertical avec marquee mais il y a un espace de Remplacement avec RegExp [ par XelectroX ] Bonjour,Je cherche depuis 1h comment remplacer une string par RegExp :J'ai une fonction degrade(texte, color1, color2) qui me revois du texte traité.E barre de défilement vertical de texte en javascript [ par ordirepair ] bonjour, je cherche un script en java pour créer un block texte avec une hauteur fixe et une barre de défilement à droite si le texte est plus long je délai d'un texte [ par debladz ] Bonjour,j'ai un petit trou de mémoire.Quel est le script pour que le texte d'un label sur ma page ne s'affiche que sur un temps défini??Merci texte défilant en boucle [ par SoundBoy771 ] Bonjour à tous,Je galère depuis un moment maintenant sur un petit bout de code que je n'arrive pas a faire évoluer. &lt;script type="text/javascript"& Explications pour coder et décoder un texte en binaire. [ par Antonio le grand ] Explications pour coder et décoder un texte en binaire. <?xml:nam un problème avec la supression de la valeur d'une zone de texte [ par honey87 ] Bonjour tout le monde,     j'ai crée un formulaire  avec css et j'ai laissé la valeur de la zone de texte affichée, SVP je veux savoir comment supprim diapo en javascript [ par mimine89 ] bonjour,voila j'ai fais un diaporama d 'image avec du texte qui va en dessous mais je cherche comment faire pour que quand on met la souris dans une d


Nos sponsors


Sondage...

Comparez les prix


Samsung LE26B350 LCD
Entre 359€ et 417€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,638 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)