• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource Starry Sheet for starry characters!

Sana Natsuko

Sana Natsuko

A Wandering Name
[div class="base"] [div class="stickyInformation"] [div class="moon"][/div] [div class="stars"] [div class="star"][div class="starTop"][/div][div class="starBottom"][/div][/div] [div class="starDelay1"][div class="starTop1"][/div][div class="starBottom1"][/div][/div] [div class="starDelay2"][div class="starTop2"][/div][div class="starBottom2"][/div][/div] [/div] [div class="shootingStars"] [div class="shootingStar"][/div] [div class="shootingStar1"][/div] [/div] [div class="appearance"] Appearance [div class="pictureAppearance"]
full
[/div] [div class="textAppearance"] Quite odd and usually doesn't know what they are doing or why they are doing it, most times she will think of something fun to do, but end up getting bored within the next few minutes. Constantly out to try and find something fun to do, she will usually end up playing games with just normal circumstances, the most common one being guessing games. Despite being really energetic, they will almost never leave the house always opting to spend their energy online either speaking or playing games. Wait... This is technically a roast of myself isn't it! [/div] [/div]
Name [div class="name"] Sana Natsuko [/div]
Age [div class="age"]Never telling![/div] [/div] [div class="nonStickyInformation"][div class="scroller"] [div class="stars"] [div class="starDelay3"][div class="starTop3"][/div][div class="starBottom3"][/div][/div] [/div] Personality [div class="personality"] This is just a lot of text that symbolises the type of personality I have, like for this one I am doing now it would probably be short attention spanned or the fact that I am currently getting the urge to go play games instead of do the thing I originally intended to, or even the fact that I am doing coding to avoid doing my work due in at the end of the month, which wouldn't seem too odd if it wasn't for the fact that my work due in IS STILL CODING WORK, LIKE WHAT AM I AVOIDING DOING? ITS LIKE INSTEAD OF GOING TO CUT THE GRASS OUTSIDE YOU GO AND PLAY A GAME WHERE YOU CUT THE GRASS OUTSIDE! [/div]
[div class="stars"] [div class="starDelay4"][div class="starTop4"][/div][div class="starBottom4"][/div][/div] [/div] Background [div class="background"] This is for you to go wild with your character's background, like explaining why they dislike curry or how they got used to that one sacred weapon that chose them out of pretty much anyone else in a centuries time, maybe your character was born into a fishing village, but is actually allergic to fish. Or they are a demon who came to cause havoc but found the person of their dreams in the first town they ever walked into and are now stuck between going on a mass murder spree or settling down with this random person. I am not the only one who goes on like huge rants in a backstory am I? Like I will think 'oh best start that background story for this character' next think I know its 5:00am and I am just finishing up the arc about how at the age of 7 they killed 50 armed guards with their eyes closed and then had to disinfect the one wound they took from the entire week long battle they had days prior, I haven't even started on how they obtained the legendary ring which allows them to control space and time with their mind while also being able to fly now for no reason in particular. [/div] [div class="extra"] [/div] [/div][/div] [/div] [class name="base"] width: 800px; height: 700px; margin: auto; background-image: linear-gradient(150deg, #0a47f2, #002078); border: 5px solid white; border-radius: 5px; font-size: 14px; color: #cb7ffa; z-index: -1; [/class] [class name="stickyInformation"] position: sticky; height: auto; padding: 10px; text-align: center; border-bottom: 5px solid white; border-radius: 5px; z-index: 1; [/class] [class name="nonStickyInformation"] overflow: hidden; height: 240px; margin: 0 10px; z-index: 1; [/class] [class name="scroller"] width: 100%; height: 100%; box-sizing: content-box; padding-right: 200px; overflow-y: scroll; overflow-x: hidden [/class] [class name=moon] position: absolute; right: 0; width: 80px; height: 80px; border-radius: 50%; box-shadow: 15px 15px 0 0 white; animation-name: {post_id}moonAnimation; animation-duration: 6s; animation-iteration-count: infinite; [/class] [class name=starTop] position: absolute; width: 0; height: 0; top: 20%; left: 24%; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid white; animation-name: {post_id}starAnimation; animation-duration: 6s; animation-iteration-count: infinite; [/class] [class name=starBottom] position: absolute; width: 0; height: 0; top: 21%; left: 24%; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid white; animation-name: {post_id}starAnimation; animation-duration: 6s; animation-iteration-count: infinite; [/class] [class name=starTop1] position: absolute; width: 0; height: 0; top: 35%; left: 65%; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid white; animation-name: {post_id}starAnimation; animation-duration: 6s; animation-iteration-count: infinite; [/class] [class name=starBottom1] position: absolute; width: 0; height: 0; top: 36%; left: 65%; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid white; animation-name: {post_id}starAnimation; animation-duration: 6s; animation-iteration-count: infinite; [/class] [class name=starTop2] position: absolute; width: 0; height: 0; top: 82%; left: 31%; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid white; animation-name: {post_id}starAnimation; animation-duration: 2s; animation-iteration-count: infinite; [/class] [class name=starBottom2] position: absolute; width: 0; height: 0; top: 83%; left: 31%; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid white; animation-name: {post_id}starAnimation; animation-duration: 2s; animation-iteration-count: infinite; [/class] [class name=starTop3] position: relative; width: 0; height: 0; top: 6px; left: 700px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid white; animation-name: {post_id}starAnimation; animation-duration: 4s; animation-iteration-count: infinite; [/class] [class name=starBottom3] position: relative; width: 0; height: 0; left: 700px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid white; animation-name: {post_id}starAnimation; animation-duration: 4s; animation-iteration-count: infinite; [/class] [class name=starTop4] position: relative; width: 0; height: 0; left: 300px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid white; animation-name: {post_id}starAnimation; animation-duration: 5s; animation-iteration-count: infinite; [/class] [class name=starBottom4] position: relative; width: 0; height: 0; bottom: 6px; left: 300px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid white; animation-name: {post_id}starAnimation; animation-duration: 5s; animation-iteration-count: infinite; [/class] [class name=shootingStar] display: block; position: absolute; transform: translate(-15px, 300px); width: 5px; height: 7.15px; background-color: white; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation-name: {post_id}shootingStarAnimation; animation-duration: 14s; animation-timing-function: linear; animation-iteration-count: infinite; [/class] [class name=shootingStar1] display: block; position: absolute; transform: translate(-15px, 300px); width: 5px; height: 7.15px; background-color: white; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation-name: {post_id}shootingStarAnimation; animation-duration: 14s; animation-delay: 1s; animation-timing-function: linear; animation-iteration-count: infinite; [/class] [animation=moonAnimation] [keyframe=0] transform: rotate(90deg) [/keyframe] [keyframe=50] transform: rotate(80deg) [/keyframe] [keyframe=100] transform: rotate(90deg) [/keyframe] [/animation] [animation=starAnimation] [keyframe=0] transform: rotate(0deg) [/keyframe] [keyframe=50] transform: rotate(20deg) [/keyframe] [keyframe=100] transform: rotate(0deg) [/keyframe] [/animation] [animation=shootingStarAnimation] [keyframe=0] transform: translate(790px, 260px) [/keyframe] [keyframe=80] transform: translate(790px, 260px) [/keyframe] [keyframe=100] transform: translate(480px, 100) [/keyframe] [/animation]

So this took a while to make, basically I did my first animation a week ago and somehow my first thought was stars, so I decided to try and make a sheet with it. I learned a lot doing this, like how much I have translate. Either way, please tell me if you find any big problems and I will try and fix them! The only real errors you should run into is the height with the stars and the scroll box at the bottom, but I have commented where you should change those values in the code
Code: 
[nobr]
[div class="base"]
    [div class="stickyInformation"]
            [div class="moon"][/div]
            [div class="stars"]
            [div class="star"][div class="starTop"][/div][div class="starBottom"][/div][/div]
            [div class="starDelay1"][div class="starTop1"][/div][div class="starBottom1"][/div][/div]
            [div class="starDelay2"][div class="starTop2"][/div][div class="starBottom2"][/div][/div]
        [/div]
        [div class="shootingStars"]
            [div class="shootingStar"][/div]
            [div class="shootingStar1"][/div]
        [/div]
        [div class="appearance"]
            [comment]If you don't want either a picture or text version of your appearance, feel free to remove the entire div. But don't forget to change the height in nonStickyInformation![/comment]
            [B]Appearance[/B]
            [div class="pictureAppearance"]
                [IMG width="102px"]https://www.rpnation.com/gallery/sana1-png.43148/full[/IMG]
            [/div]
            [div class="textAppearance"]
Quite odd and usually doesn't know what they are doing or why they are doing it, most times she will think of something fun to do, but end up getting bored within the next few minutes. Constantly out to try and find something fun to do, she will usually end up playing games with just normal circumstances, the most common one being guessing games. Despite being really energetic, they will almost never leave the house always opting to spend their energy online either speaking or playing games. Wait... This is technically a roast of myself isn't it!
[/div]
        [/div]
        [br][/br]
        [B]Name[/B]
        [div class="name"]
            Sana Natsuko
        [/div]
        [br][/br]
        [B]Age[/B]
        [div class="age"]Never telling![/div]
    [/div]
    [div class="nonStickyInformation"][div class="scroller"]
        [div class="stars"]
            [div class="starDelay3"][div class="starTop3"][/div][div class="starBottom3"][/div][/div]
        [/div]
        [B]Personality[/B]
        [div class="personality"]
This is just a lot of text that symbolises the type of personality I have, like for this one I am doing now it would probably be short attention spanned or the fact that I am currently getting the urge to go play games instead of do the thing I originally intended to, or even the fact that I am doing coding to avoid doing my work due in at the end of the month, which wouldn't seem too odd if it wasn't for the fact that my work due in IS STILL CODING WORK, LIKE WHAT AM I AVOIDING DOING? ITS LIKE INSTEAD OF GOING TO CUT THE GRASS OUTSIDE YOU GO AND PLAY A GAME WHERE YOU CUT THE GRASS OUTSIDE!
        [/div]
        [br][/br]
        [div class="stars"]
            [div class="starDelay4"][div class="starTop4"][/div][div class="starBottom4"][/div][/div]
        [/div]
        [B]Background[/B]
        [div class="background"]
This is for you to go wild with your character's background, like explaining why they dislike curry or how they got used to that one sacred weapon that chose them out of pretty much anyone else in a centuries time, maybe your character was born into a fishing village, but is actually allergic to fish. Or they are a demon who came to cause havoc but found the person of their dreams in the first town they ever walked into and are now stuck between going on a mass murder spree or settling down with this random person. I am not the only one who goes on like huge rants in a backstory am I? Like I will think 'oh best start that background story for this character' next think I know its 5:00am and I am just finishing up the arc about how at the age of 7 they killed 50 armed guards with their eyes closed and then had to disinfect the one wound they took from the entire week long battle they had days prior, I haven't even started on how they obtained the legendary ring which allows them to control space and time with their mind while also being able to fly now for no reason in particular.
        [/div]
        [div class="extra"]
        [/div]

    [/div][/div]

[/div]

[comment]Start of the physical code[/comment]

[class name="base"]
    width: 800px;
    height: 700px;
    margin: auto;
    background-image: linear-gradient(150deg, #0a47f2, #002078);
    border: 5px solid white;
    border-radius: 5px;
    font-size: 14px;
    color: #cb7ffa;
    z-index: -1;
[/class]

[class name="stickyInformation"]
    position: sticky;
    height: auto;
    padding: 10px;
    text-align: center;
    border-bottom: 5px solid white;
    border-radius: 5px;
    z-index: 1;
[/class]

[class name="nonStickyInformation"]
    overflow: hidden;
    height: 285px;
    margin: 0 10px;
    z-index: 1;
[/class]
[comment]Change the height depending on how much was entered for the sticky information. (Affects the scroll box height)[/comment]

[class name="scroller"]
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    padding-right: 200px;
    overflow-y: scroll;
    overflow-x: hidden
[/class]
[comment][URL='https://www.rpnation.com/threads/%E2%98%82-snippets.411246/#post-9672326']Tutorial - ☂ snippets[/URL] - Reference used for the scroll bar, thanks Alteras![/comment]

[comment]End of the physical code[/comment]

[comment]Start of decoration code[/comment]

[class name=moon]
    position: absolute;
    right: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 15px 15px 0 0 white;
    animation-name: {post_id}moonAnimation;
    animation-duration: 6s;
    animation-iteration-count: infinite;
[/class]

[comment]If the stars are in your text or you want to move them, change the percentage on the top and left for both top and bottom to a place you like and then increase bottom's top percentage by 1 to get a star.[/comment]
[class name=starTop]
    position: absolute;
    width: 0;
    height: 0;
    top: 20%;
    left: 24%;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid white;
    animation-name: {post_id}starAnimation;
    animation-duration: 6s;
    animation-iteration-count: infinite;
[/class]

[class name=starBottom]
    position: absolute;
    width: 0;
    height: 0;
    top: 21%;
    left: 24%;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid white;
    animation-name: {post_id}starAnimation;
    animation-duration: 6s;
    animation-iteration-count: infinite;
[/class]

[class name=starTop1]
    position: absolute;
    width: 0;
    height: 0;
    top: 37%;
    left: 65%;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid white;
    animation-name: {post_id}starAnimation;
    animation-duration: 6s;
    animation-iteration-count: infinite;
[/class]

[class name=starBottom1]
    position: absolute;
    width: 0;
    height: 0;
    top: 38%;
    left: 65%;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid white;
    animation-name: {post_id}starAnimation;
    animation-duration: 6s;
    animation-iteration-count: infinite;
[/class]

[class name=starTop2]
    position: absolute;
    width: 0;
    height: 0;
    top: 82%;
    left: 31%;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid white;
    animation-name: {post_id}starAnimation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
[/class]

[class name=starBottom2]
    position: absolute;
    width: 0;
    height: 0;
    top: 83%;
    left: 31%;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid white;
    animation-name: {post_id}starAnimation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
[/class]

[class name=starTop3]
    position: relative;
    width: 0;
    height: 0;
    top: 6px;
    left: 700px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid white;
    animation-name: {post_id}starAnimation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
[/class]

[class name=starBottom3]
    position: relative;
    width: 0;
    height: 0;
    left: 700px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid white;
    animation-name: {post_id}starAnimation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
[/class]

[class name=starTop4]
    position: relative;
    width: 0;
    height: 0;
    left: 300px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid white;
    animation-name: {post_id}starAnimation;
    animation-duration: 5s;
    animation-iteration-count: infinite;
[/class]

[class name=starBottom4]
    position: relative;
    width: 0;
    height: 0;
    bottom: 6px;
    left: 300px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid white;
    animation-name: {post_id}starAnimation;
    animation-duration: 5s;
    animation-iteration-count: infinite;
[/class]

[class name=shootingStar]
    display: block;
    position: absolute;
    transform: translate(-15px, 300px);
    width: 5px;
    height: 7.15px;
    background-color: white;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation-name: {post_id}shootingStarAnimation;
    animation-duration: 14s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
[/class]

[class name=shootingStar1]
    display: block;
    position: absolute;
    transform: translate(-15px, 300px);
    width: 5px;
    height: 7.15px;
    background-color: white;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation-name: {post_id}shootingStarAnimation;
    animation-duration: 14s;
    animation-delay: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
[/class]

[comment]End of decoration code[/comment]

[comment]Start of animations[/comment]

[animation=moonAnimation]
    [keyframe=0]
        transform: rotate(90deg)
    [/keyframe]
    [keyframe=50]
        transform: rotate(80deg)
    [/keyframe]
    [keyframe=100]
        transform: rotate(90deg)
    [/keyframe]
[/animation]

[animation=starAnimation]
    [keyframe=0]
        transform: rotate(0deg)
    [/keyframe]
    [keyframe=50]
        transform: rotate(20deg)
    [/keyframe]
    [keyframe=100]
        transform: rotate(0deg)
    [/keyframe]
[/animation]

[animation=shootingStarAnimation]
    [keyframe=0]
         transform: translate(790px, 260px)
    [/keyframe]
    [keyframe=80]
         transform: translate(790px, 260px)
    [/keyframe]
    [keyframe=100]
        transform: translate(480px, 100)
    [/keyframe]
[/animation]

[comment]End of animations[/comment]

[/nobr]
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

arsensonfire
Help Anyone's shop still open?
Replies
1
Views
229
The Dark Wizard
The Dark Wizard
Alteras
Resource Text Templater — a plain text template to form field generator
Replies
3
Views
197
A Murder Of Corviknight
A Murder Of Corviknight
mizton
Help quote bubble codes?
Replies
1
Views
139
Uxie
Uxie
Back
Top