What's new

Help learning bbcode (and struggling so pls help)

Galactic

Out of This World 🚀
#1
Hey, it's me, your friendly neighborhood alien. My name is actually Peyton and I'm just here trying to get into BBCode because I've pushed it off for long enough. I don't really have a clue what I'm doing, so if you have any tips or can link me to some tutorials, let me know! This thread is mostly going to be a place for me to post stuff I'm working on and trying to learn and a place for you friendly people to give me some advice, haha.

The only thing special about this little code is it's cute little cursor, but that's about it! I would really like to get the hang of tabs and hovering especially, so please help me if you can!! :')

Objectives:
- Learn Tabs
- Learn Hovering
- Learn Hidden Scrollbars
 

Saccharine Cyanide

One part sweet, two parts poison
#2
I can help with hovering.

What you do is define your div element and use the transition property in conjunction with state=hover to define what happens when you hover over the element (e.g. change size, change color, change position, change opacity).

So here, I have a really crappy div box with a simple expanding transition when you hover over it (click on mobile). When you hover, it expands in width from 50px to 250px in three seconds.



Here's the code:
Code:
[nobr]
[class name="simple_hover_transition"]
     width: 50px;
     height: 50px;
     background: black;
     color: white;
     -webkit-transition: width 3s;
     transition: width 3s;
[/class]

[class name="simple_hover_transition" state=hover]
     width: 250px;
[/class]

[div class="simple_hover_transition"][/div]
[/nobr]
As you can see, you have to specify the values of the div element twice: Once in the state when it's not hovered over, then the new values when the div element is hovered over.

More on transitions
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Top