hii how do u use gradient colors on tumblr?? bc i only have specific colors n iw use pastel colors on my texts.. how do i do that?
TUT FOR GRADIENT COLORS .ᐟ.ᐟ
i've been meaning to make this post for a while, i hope this helps all of you aspiring tumblr writers and bloggers for your aesthetic posts!
divider creds to @angeliicide
STEP ONE
use the website, stuffbydavid.com, or another html text colorizer website, and type in whatever texts you want to use
it should look something like this!!
type in the hex code of any color you'd like
(tip: i like to use pinterest color palettes that include hex codes so the colors correspond well!)
(additional tip: if you're using images on your post, and want to match colors, use the site imagecolorpicker.com, and upload your image to see matching hex codes!)
it will look like this!
STEP TWO
next, you're going to want to copy the full html code at the bottom (do not use bbcode, it will not work for tumblr!)
STEP THREE
once you've done that, go to tumblr on browser or site form, this part will not work on the app!
tip: use safari or microsoft or any browsing app that allows you to go to the tumblr website!
STEP FOUR
now, by creating a new post by clicking the little pencil button on the bottom left or opening an old draft, open the settings gear icon on the top right of your post and scroll down to where it says, text editor, and click the dropdown menu to change it to html
STEP FIVE
now exit out of settings back on your post, and paste the html code onto it.
you should now see a jumble of numbers and letters, and once you save it to draft, it will show you your colorful text!
ADDITIONAL STEPS
now sometimes when I want a gradient image for a story, i use pinterest to search for fanart, and then picsart to convert them into colorful gradients
1. find your image of choice
2. open picsart and start a new project with your image
3. find where it says fx effects
4. then scroll until you find color gradient
5. and change around the colors to your liking
6. save your image!!
a/n: hope this helps you lovelies who are confused by the coding/ html aspect of tumblr as it sure confused me when i was first starting out!
Element: anything from the start tag to the end tag.
Tag: a piece of markup language that is used to indicate the beginning and end of an html element in an html document.
Example:
<p> your text here </p>
<header><;/header> - Represents a container for introductory content or a set of navigation links. Usually contains one or more heading elements (<h1> - <h6>), logo or icon, or authorship information.
<;h#></h#> - header element. The higher the number, the greater the importance. Only use one <h1> element per page. There can only be six. Main topic on a web page. When visitors to your website see the h1's, it draws attention as it stands out the most on the page as it generally appears as a larger font size and in bold.
<p></p> - paragraph. used to create a paragraph of text on websites. Always starts on a new line. A lot of browsers add some white space (a margin) before and after a paragraph.
<;!-- ____: _______ --> - comment. Used to notate code with text that will not appear on the website/browser display. It allows you to make code inactive. You can use them to explain your code, which can help you when you edit the source code at a later date.
<main></main> - an element that identifies a content area. The main element. Specifies the main content of a document. This type of element/tag makes your html easier to read and helps with Sear Engine Optimization and accessibility. Should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms. When you put things inside the main element, this is called nesting. Nesting elements should be placed two spaces further to the right from the element they are nested in. This spacing is called indentation and is used to make html easier to read.
Example:
<main>
<h1>Tumblr Meme App</h1>
<h2>Tumblr Photos</h2>
<!-- TODO: Add link to Tumblr photos -->
<;p>See more Tumblr memes in our gallery</p>
</main>
<img> - used to images to your website. This element has an opening tag without a closing tag. A tag for an element without a closing tag is called a self-closing tag.