http://zegobelin.net
html css jQuery

Play With Your Text

Je me suis amusé un peu avec Javascript afin de modifier l'aspect de certains éléments de mon dernier projet Web. Je vous partage tout cela, même si c'est un bien maigre butin.
<script type="text/javascript">
// color and size
$( ".title, .code-color, .circle").css("transition", "0.5s ease 1s");
$( ".title, .code-color").css("-webkit-transition", "0.5s ease 1s");
$( ".title" ).css( "color", "#89C141" );
$( ".title" ).css( "-moz-transform", "" );
$( ".title" ).css( "font-size", "3rem" );
$( ".title" ).css( "text-shadow", "");
$( ".code-color" ).css( "color", "#89C141");
$( ".circle" ).css( "background-color", "#89C141");
$( ".code-code, .code-effect, .code-rotate " ).css( "color", "");
document.title = '| Title of your Page |';
});

 
// rotate
$( ".rotate").on( "click", function() {
$( ".title, .code-rotate, .circle").css("transition", "0.5s ease 1s");
$( ".title, .code-rotate").css("-webkit-transition", "0.5s ease 1s");
$( ".title" ).css( "color", "#00A7CC" );
$( ".title" ).css( "font-size", '' );
$( ".title" ).css( "text-shadow", "");
$( ".title" ).css( "-moz-transform", "rotate(180deg)" );
$( ".title" ).css( "-webkit-transform", "rotate(180deg)" );
$( ".code-rotate" ).css( "color", "#00A7CC");
$( ".circle" ).css( "background-color", "#00A7CC");
$( ".code-color, .code-effect, .code-code" ).css( "color", "");
document.title = '| Title of your Page |';
});

 
// font 3D effect
$( ".effect").on( "click", function() {
$( ".title, .code-effect, .circle").css("transition", "0.5s ease 1s");
$( ".title, .code-effect").css("-webkit-transition", "0.5s ease 1s");
$( ".title" ).css( "color", "#D7107B" );
$( ".title" ).css( "font-size", "" );
$( ".title" ).css( "-moz-transform", "" );
$( ".title" ).css( "-webkit-transform", "" );
$( ".title" ).css( "text-shadow", "0px 0px 0 rgb(134,-65,41),1px 1px 0 rgb(66,-133,-27), 2px 2px 0 rgb(-2,-201,-95),3px 3px 2px rgba(0,0,0,0.6),3px 3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2)" );
$( ".code-effect" ).css( "color", "#D7107B");
$( ".circle" ).css( "background-color", "#D7107B");
$( ".code-rotate, .code-color, .code-code" ).css( "color", "");
document.title = '| Title of your Page |';
});

 
// open code
$( ".opencode").on( "click", function() {
$( ".title, .code-code").css("transition", "0.5s ease 1s");
$( ".title, .code-code").css("-webkit-transition", "0.5s ease 1s");
$( ".title" ).css( "color", "" );
$( ".title" ).css( "text-shadow", "");
$( ".code-container" ).css( "width", "50%" );
$( ".code-container" ).css( "font-size", "0.8rem" );
$( ".code-container" ).css( "opacity", "1" );
$( ".code-container").css("transition", "0.5s ease 1s");
$( ".code-container").css("-webkit-transition", "0.5s ease 1s");
$( ".code-code" ).css( "color", "#A79D94");
$( ".code-effect, .code-rotate, .code-color " ).css( "color", "");
document.title = '| Title of your Page |';
});

 
// reset all
$( ".default" ).on( "click", function() {
$( ".title").css("transition", "0.5s ease 1s");
$( ".title").css("-webkit-transition", "0.5s ease 1s");
$( ".title" ).css( "color", "" );
$( ".title" ).css( "font-size", "" );
$( ".title" ).css( "-moz-transform", "" );
$( ".title" ).css( "text-shadow", "");
$( ".code-container" ).css( "font-size", "" );
$( ".code-container" ).css( "opacity", "" );
$( ".code" ).css( "width", "" );
document.title = '';
});

</script>

Get the .css