you should see that your text editor changed into html. Then click on the two colors to change them. So you just type your text into the first box. Now ignore all the code on the left and upper right of the screen. Tumblr’s resizing can sometimes mess with pictures. Backup link here.įor this tutorial, right click “view image in new tab” if the images seem blurry. the output code has a (semicolon) after every hex code and having that there will prevent tumblr from changing the text colorīut just erase the semicolons and bam! it works! this is super easy to do and takes like 5 seconds to paste it into a text replacer site like this one and it gets rid of the semicolons for you (or you can do it in word but this site’s quicker)įirst, go to this gradient text generator created by (?). With this site though, there’s an extra step you have to make. This one here is great and it has a color picker and a 3 gradient option and everything. There’s an even better site now for generating html text code! ( and you can tweak the opacity on the generator or manually in your code by just altering the last number in the rgba - anything from ‘0′ ( invisible ) to ‘1′ ( visible with no opacity )).*by (I’ve since changed my url lmao) Since the OP of the original tutorial on tumblr deleted their post, here’s another tutorial (with pictures) on how to make your text a gradient on tumblr like this: Holy shit!? that’s a lot of code… O_O – and yes, you need all of it, for cross browser compatibility. the example above is a -45 degree gradient ( top left corner to bottom right corner ) Yes, i know it’s a bit eyewatering, because i chose rather vibrant colours, but you can mix and match to your hearts content - you can also change the angle of the gradient. What you can also do with rgba colours - is to include a gradient. ) - if you’d tried to do this with a hex value, there’s no way to lower the background opacity without lowering the entire post opacity ( including the text ) making it harder to read ( unless you want to code in a whole ton of extra styling blocks :\ )! The rgb is ‘0′ (black) and the ‘a’ is ‘0.7′ meaning an opacity of 0.7 (so if you have a background then it will be partially visible through the background, but your posts should be easily readable. This theme has an rgba background for the posts. If you want to know what rgba matches to what hex value, you can use something like - .Īt this point, rgb values seem a little more complicated - but there is an advantage to using them - if you add in another value - rgba - then you can bring in opacity! Rgb ( red, green, blue ) values will produce exactly the same colours as hex values - for example In some themes, you might see rgb or rgb(a) values instead – so why use them? These are also the colours you see in tumblrs basic editor when you’re editing a theme. When making themes, most theme makers will use hex colours - the 6 digit alphanumeric code that corresponds to a colour, usually prefixed with a ‘#’…e.g. ( honestly, they can be lovely i’m just not good at picking colours… O_O ) Or - how to make nice opacities and gradients on your theme… Theme makers guide to colour options - hex values or rgb(a)?
0 Comments
Leave a Reply. |