Your mushroom wizard Leon drawing has been my phone background for longer than I've had my current phone just wanted to say thanks for making it. I am never changing it.
I'm really happy to hear!! :] I have great affection for all the wizard leon designs I made, but coziness-wise that still tops the chart, even though it's not a very leon silhouette. also a lot of ideas I still want to try and execute irl in there! here's him again for good time's sake
Love the pony posts lately i've been getting back into mlp:fim and a big reason is bcse the fan artists just remind me how much i miss the show. (also i love peridot so much but this ask is about ponies rn so uhh yeah)
im so glad youre enjoying the pony posts!!! mlp:fim especially means so much to me so im always happy to share! <3
i know almost no tik toks rip, but theres that one i love So Much of these two women reciting this like jumping from one unconnected thing to next as if it's slam poetry and end with "YOUR CHILD IS GAY," iconic
ooohgdzb i have TOO MANY favorite vines, but here's a list off the top of my head: i wanna suck your Dick homie, what the Fuck Richard, peanut butter baby, oh my god they were roommates, a CHILD, you messin with my truck??, you owe me a kiss on the lips, has anyone told you you look like beyonce, im a bad bitch you cant kill me, PATRICIA, road work ahead, i want to see my little boy
OMG that commission you did of 13 and clara is freaking awesome, it also made me discover your blog which is full of tons of awesome art! But i cannot express how happy that one of clara and 13 makes me eeee!!
A tutorial for the roman numeral changing to text effect used in theme #25:
Hello there! This tutorial will help you to create the hovering effect used on the links in theme #25. (Preview). To use this tutorial, you will need to know basic CSS and HTML. If you are wanting a code to copy and paste, this is not the tutorial for you.
Click here for a breakdown of the basic process. The CSS and HTML on the right of the breakdown are explained below:
HTML
The basic idea for this effect is that we are going to make one <div> element to hold all the links, a repeating <div> element for each separate link, and within that, two separate <div> elements - one for the roman numeral and one for the text. Here is an example:
<div id="allthelinks">
<!--- within that, the section for our first link: --->
<div id="link">
<!-- within that, the roman numeral -->
<div class="roman"><a href="/LINK">i</a>
</div>
<!-- this ends the 'roman' section -->
<!-- the link text -->
<div class="text"><a href="/LINK">link name one</a>
</div>
<!-- this ends the 'text' section -->
</div>
<!-- this ends the first link section -->
<!-- now for another link, but without the comments -->
<div id="link">
<div class="roman"><a href="/LINK">ii</a>
</div>
<div class="text"><a href="/LINK">link name two</a>
</div>
</div>
<!-- this ends the second link section -->
<!-- now for another link -->
<div id="link">
<div class="roman"><a href="/LINK">iii</a>
</div>
<div class="text"><a href="/LINK">link name three</a>
</div>
</div>
<!-- this ends the third link section -->
<!-- and repeat for however many links you want. -->
</div> <!-- and this ends the entire link section -->
Now we will need to make the corresponding CSS.
Roman Numeral CSS
Let's start with the roman numeral section. Here, we need to style the roman numeral link. You can style it any way you like. My default is:
-webkit-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
}
Text CSS
Now, we are going to position the text section:
.text {
margin-top:-15px;
}
This positioning is needed to keep your text on the same line as the roman numeral, otherwise it will be below. The amount by which you'll need to raise it (increasing the number) will depend on how you style the numeral. -15px works with the styling used here.
Next we need to specify the link selector. Again, you can style the link however you want, but you need to include 'opacity:0;'. This renders the text invisible:
-webkit-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
opacity:0;
}
Link CSS
For each individual link section, the CSS is basically the same as creating a regular link, but you must include the link alignment by using 'display:block', or 'dispay:inline-block'. 'block' is vertically aligned and 'inline-block' is horizontally aligned. You also must specify the height and width of your link.
These are numbers that work for my links. You'll need to tweak your own. The margin-top creates a gap between the bottom of each link and the top of the next (as used in Pilot Lights). If you are using horizontal links, you will want to use margin-left and margin-right for spacing. In the Pilot Lights theme, I added a border to the bottom of each link to help define them.
Link Hover CSS
Now for the fun part! The hovering effect. First:
#link:hover .roman a {
opacity:0;
-webkit-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
}
This means that when the #link element is hovered over, it makes the .roman element invisible. The transition is just that - it creates a smooth transition that lets the numeral and text fade out and in.
And lastly, the text hover section:
#link:hover .text a {
opacity:1;
-webkit-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
}
This does the opposite of the previous, and makes the link text visible when the link is hovered over. Be sure to specify '.text a' and not the regular '.text' selector.
Here's a visual for those that might find it helpful:
the black is the entire link. The dark gray is the roman. (with added width and height) The light gray is the link text. (also with added width and height).
Here, I've made the text visible without removing the numeral. You can see why you need to move the text up (it is currently at -15px) - it appears too low (because I made the numeral section so tall).
If you were to copy and paste all the code I've used above, it would look like this.
That's it! This is a very bare-bones example, so have fun creating your own - experiment with borders, padding, colors, sizes, arrangements, etc!
This is my first tutorial, so it would aid me greatly if you could drop by with some feedback. Also, please like or reblog if you found this helpful in any way.
As usual, please don't hesitate to ask any questions you might have about this tutorial.
