Username:
Password:
Remember me:
Register

Back to forum: Profile Design (3DSPlaza BBCode and BBCode CSS)


Search forums via Google


11 Users appreciate this thread.

3DSPlaza CSS3 Animation Codes
 >  >>
Started by ChampionLeake
(2015-05-12 23:47:23)
ChampionLeake (2015-05-12 23:47:23)
updated: July 23, 2016

I know there are other guides for this but this is my CSS3 Guide to style your profile.

!WARNING!

((Some of these codes may lag your profile on different devices. Some CSS3 codes may not support your device and will not show up. The majority of the CSS3 code will work on a PC.))

Text Content
* = Pick Color
* = Degree Number
part of profile = Replace with any profile selector

Blinking Text Code:
This code allows your profile text to blink off and on.
[style]*{text-decoration:blink !important;}[/style]

Color Text Change Animation:
This code allows your profile to change your text into different colors.
[style]@-webkit-keyframes color{0%{color:*;}20%{color:*;}40%{color:*;}60%{color:*;}80%{color:*;}100{color:*;}}part of profile{-webkit-animation:color 1s infinite linear;}[/style]

Rotating Profile X-Axis
This code allows your profile to rotate to the x-axis.
[style]@-webkit-keyframes orbit{0%{-webkit-transform: rotateX(0deg)}100%{-webkit-transform:rotateX(360deg);}}part of profile{-webkit-animation: orbit 9s infinite linear;}[/style]

Rotating Profile Y-Axis
This code allows your profile to spin to the Y axis ( up ).
[style]@-webkit-keyframes spin{0%{-webkit-transform:rotateY(0deg)}100%{-webkit-transform:rotateY(360deg);}}part of profile{-webkit-animation: spin 9s infinite linear;}[/style]

Gradient Background
This code allows your background to fade into another color.NOTE: This code only works on 3DS and PC
[style]body{background:-webkit-gradient(radial, center center,0, center center,170, from(*), to(*));}[/style]

Special Blinking Code
This code allows your links to have a disappear and reappear effect.
[style]a:link,a.visited{-webkit-animation: spin 9s infinite linear;}@-webkit-keyframes blinker{0%{opacity:0}100%{opacity:1;}}a{-webkit-animation:blinker 3s infinite linear alternate};[/style]

Box Shadows
This code allows your profile container to glow and have a shadow effect.
[style].content{box-shadow:0 0 26px 10px *, inset 15px 15px 54px *;}[/style]

Tilted Comment boxes
Code allows you to tilt your comment boxes with the degree points you want. WARNING: This code may lag 3DS and is not visible with DSi.
[style].commentbox_1{transform:rotate(*deg);-ms-transform:rotate(*deg);-webkit-transform:rotate(*deg);}.commentbox_2{transform:rotate(*deg);-ms-transform:rotate(*deg);-webkit-transform:rotate(*deg);}[/style]

That's all the CSS3 codes for now. I'll add more soon. If you would like to add a code here just comment the code.

This post has been edited one or more times, the last time was:
2016-07-23 22:55:15

I'm a web developer, a game developer, a digital artist, musician, and a reverse engineer. A weird mix right?
My Twitter
Leviathan (2015-05-18 21:20:56)
This is useful. You've given the information I need to do the one thing I haven't learned yet.

+1
I'm an open book, there are few questions I won't answer honestly, no matter how embarrassing.
silveon (2015-05-29 15:32:10)
Oddly enough, the coding isnt working for me... Can you help me out?
! This account has switched to Silvesary !
Lani (2015-05-29 17:55:53)
@Silveon

There's a possibility that your profile doesn't support the codes...this glitch is common for older profiles. My profile can't even style my comment boxes for some reason....some codes just don't work for all profiles.

But we can still try to make it work for you. Which codes did you want?

Wolf (2015-05-30 10:03:16)
Thank you, this is very helpful!
I am amazing and epic!
ChampionLeake (2015-05-30 15:25:51)
@Wolf Thanks. I'm glad to help.

@Lani Did you try using !important at the end?
I'm a web developer, a game developer, a digital artist, musician, and a reverse engineer. A weird mix right?
My Twitter
ChampionLeake (2015-06-07 19:56:02)
Updated
I'm a web developer, a game developer, a digital artist, musician, and a reverse engineer. A weird mix right?
My Twitter
Effy (2015-06-24 21:39:49)
yeah my prof is older so some of these codes don't work and im sad. xc
Battling cancer <3
Sherlock
Supernatural
Merlin
Destiel
Johnlock

MarioErmando (2015-06-27 11:16:51)
Your profile's age won't affect the CSS; you might be doing it wrong. Also, +1
hie.....................
ChampionLeake (2015-06-30 04:32:02)
^ What Erman said.
Also like I said in the beginning of this thread some codes may not be visible to certain devices.
I'm a web developer, a game developer, a digital artist, musician, and a reverse engineer. A weird mix right?
My Twitter
Waffle (2015-08-22 23:39:46)
Thanks.

What's inside? show
Yo Mama
squirtle2016 (2016-02-24 02:33:44)
NOTE: The DSi's browser does NOT support CSS3!
Stop, or you die.
PANZERFAUST (2016-02-25 22:47:41)
Yeah, it pretty much says that.
Sleep (I've Been Slipping)
AlphaWolf (2016-03-13 17:47:08)
Wow, this helped me a lot. Thank you for this.
Only the bold color outside the lines.
katy32roar (2016-06-10 18:10:36)
The code isn't working. Really wanted to use it
 >  >>

Log in to submit a comment

This topic's ID: 80049

Back to forum: Profile Design (3DSPlaza BBCode and BBCode CSS)




Total registered users: 7652
New registered users today: 0
Newest registered user: AnnaQueen

©  Copyright 2018 3DSPlaza. All Rights Reserved