Tuesday, July 23, 2013

My Templates

My Templates
Even though they're only the basics towards success I'd still love it if you put a little bit of credit to me if you used my templates...I'd appreciate it thanks! Please note that I've highlighted the parts of the HTML that you can change yourself! good luck :)


Beginners
Text HTML: 
<span style="color: #F0000 ; font-family: &quot;Century Gothic&quot;; font-size: 14pt;">LoveWildchild27

Background HTML:
<p style="background: #000000; padding: 0px; margin: 0; text-align: center; line-height: 20px;">LoveWildchild27</p>

To add these 2 codes together you just simply add the text HTML onto the end of the background HTML but you need to remove the </p> and add it to the end of the html.

________________________________________

Intermediate
Squashed Text:
letter-spacing: 0.0pt; - you need to add this after the font size. eg: font-size: 14pt; letter-spacing: -3.5pt;">

Shadows:
text-shadow: 1px 1px 1px #000000;"> - This should be placed after the letter spacing eg: letter-spacing: -2.4; text-shadow: 2px 3px 4px #000000;">LoveWildchild27

Borders HTML:
<p style="border: solid 3px #000000; - after you've written this, to add in a background just add in background: #cccccc; ect. 

________________________________________



Advanced
Middle Border HTML:
<p " style="border: 1px solid #000000; width: 200px; height: 200px; background-color: pink; margin: auto; text-align: center;"><br> <br> <br> LoveWildchild27<3</p>


Scrolls HTML:
<p style="white-space: pre-wrap; word-wrap: break-word; overflow-x: auto; overflow-y: auto; width: 200px; height: 200px; background-color: white; text-align: center; padding: 0px; margin: auto; border:2px dotted black;">LoveWildchild27- All you need to do is add more text to make it scroll

The Rainbow Effect:
<p style="background: red; padding: 0px; margin: 0; text-align: center; line-height: 1px;">.</p> - Just keep making as many as you like of these and it creates a rainbow effect, or you could use WORD - but the shadows and other HTMLS will be effected.


________________________________________


Extreme 

Flashing text:
text-decoration: blink;"> - Thats all it is, if you're going to use flashing text be sure to add it after text-shadow eg: Text-shadow: 2px 2px 2px;  #000000; text-decoration: blink;">Write here.</span> - NOTE* will only work in Mozilla

Multiple border: 
<p style="border: 10px solid #000000; margin: 0pt; padding: 0px; background: rgb(0, 0, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; text-align: center; line-height: 0px;"><span style="color: rgb(255, 255, 255); font-family: &quot;&quot;; font-size: 39pt; letter-spacing: -6.8pt; text-shadow: 2px -2px 2px;"><p style="border: 10px solid #000000; margin: 0pt; padding: 0px; background: rgb(0, 0, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; text-align: center; line-height: 0px;"><span style="color: rgb(255, 255, 255); font-family: &quot;&quot;; font-size: 39pt; letter-spacing: -6.8pt; text-shadow: 2px -2px 2px;"><p style="border: 10px solid #000000; margin: 0pt; padding: 0px; background: rgb(0, 0, 0) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; text-align: center; line-height: 0px;"><span style="color: rgb(255, 255, 255); font-family: &quot;&quot;; font-size: 39pt; letter-spacing: 0.8pt; text-shadow: 2px -2px 2px;">LoveWildchild27  - you only really need to edit the last part of the border for the text shadows ect to work

Extreme shadowing:
Instead of adding ';' replace it with a ',' and then add as many shadows as you like, heres the template; <span style="color: transparent; font-family: &quot;&quot;; font-size: 39pt; letter-spacing: 0.8pt; text-shadow: 0px 0px 99px #000000, 0px 0px 4px #ffffff, 0px 0px 5px #000000, 0px 0px 5px black;">LoveWildchild27- This is how I create my metallic look!

-I Would LOVE it if you copyrighted it to me...or credited, anything I don't mind :) Thanks! Hope they come in hand to you. :)

No comments:

Post a Comment