CSS3 comes with an unlimited number of possibilities and options to play with a website. There is no dearth of choices when it comes to the images, effects, background music or displays, cross browser support or various text styles designers can select. These effects are very easy to use and can be applied with the help of a step-by-step tutorial provided online.
There are also various forums that allow designers to gain knowledge about latest developments and options available. These forums also will respond to questions. Designers with a basic understanding of website development can learn these options easily.
Matrix,HTML5.Do you still remember the movie The Matrix? Do you still remember the cool matrix effect in that movie? How is that effect achieved? Shaun Dunne shared a piece of HTML5 code which displays a cool matrPixelstech, this page is to provide vistors information of the most updated technology information around the world. And also, it will provide many useful tips on our further career. The website also offers HTML codes for marquees and photo effects. Big Nose Bird: This website offers free tutorials, scripts and graphics to site users. It also has several pages of cool HTML tricks, including demonstrations for colorful tables, instructions for using a strong background image in an effective manner, and creating a drop down.
There are various text effects available which can be applied you make the websites more appealing.
Here are some of the options for text effects:
Cool Tumblr Effects Codes Code
1. Text Rotation
This feature by Johathan Snook lets designers display the text in all angles. It is good to display the dates, calendar, vCard details and other images where text needs to be displayed without any comma and in one block.
2. Shadow Effect
This has been around since the creation of Microsoft word. But Juan Brujo has tried to play with it by allowing the users to increase or decrease the effect as and when needed.
3. Slashed Effect
This is a very small code that gives a “knife sliced” effect on the text, written by Robert Messerle. It is good for using in games or mystery websites.
4. Animation Text
This is also a short code that allows animation to be added to text. It allows designers to create a number of effects in even a short sentence.
5. Background Clip Text
With this code designers can display any image in the background of the text. The image will appear distorted and highlight only the text. Jintos designed this code while playing with Webkit background clip and now has over 16 cool creations.
6. Animated Signature
This is a super cool effect that makes a signature appear on a website. The author created a real time signing animation which works by applying Javascript to SVG path and then animating the signature.
7. Cosmos
So welcome to Star trek. This simple code makes the logos and titles appear in cosmo state while encircling an orbit. Super cool effect for Geeks!!
8. Elastic Stroke Animation
This effect is available in HTML and CSS and allows designers to play with a color stroke for the text which appears on the screen. When used creatively, this is an awesome effect!
9. Foggy Text Effect
This is an animation effect where the text appears hazy and foggy. It is only for Webkit browsers though.
10. Hit the Floor
A wonderful 3D effect which plays on shadow of a word.
Let us know how some of these ideas helped to create an attractive and fun website.
Related Reading
Hey, nobody wants a lame looking Tumblr page, so this article will give you some Tumblr HTML codes to use to make your page look great. You can do things like add effects to the text on the page, change the font and add scrolls by adding a little HTML code. If you want to learn more about learning HTML, then you can take a very inexpensive online HTML class.
HTML Codes for Tumblr
Any of these codes can be inserted where you are allowed to put custom HTML codes in Tumblr. Just replace the words Your Text Message with your own words. Enter the code and you will be done!
HTML Codes to Dress up Your Tumblr Text
Make your text bold: <b>Your Text Message</b>
Italicize your text: <i>Your Text Message</i>
For the times you want your text to appear that it has a line through it, like you changed your mind about saying it use this code: <s>Your Text Message</s>
Underline your text to emphasize it: <u>Your Text Message</u>
Make your text blink off and on: <blink>Your Text Message</blink>
Subscript text, like you would use for a footnote: <sub>Your Text Message</sub>
How to Format Text on Tumblr
The following are HTML codes to format your text on your Tumblr page to make it just how you want it.
To align your text to the left side of the page or table cell: <div align=left> Your Text Message</div>
To align your text to the right side of the page or table cell: <div align=right> Your Text Message</div>
Put your text in the middle of the page: <center>Your Text Message</center>
HTML Code to Change the Font on Tumblr
An example of how this would look when you are done is <ARIAL BOLD” size=”E.G.1″ color=”FFFFFF”>Mary had a little lamb.</font>
HTML Code to Make a Button on Tumblr
The url that is written there is where the button should take the person that clicks on it. So, you would put your own url in there. You can also change the value to be whatever word you would like to see on your button.
HTML Code to Make a Scroll Box on Tumblr
This code gives you a scroll box that will be 100px by 100px in size. You can change 100 and put in whatever size you would like the sides to be. Of course, enter your own text where it has Your Text Message and those will be the words that scroll in the box.
If you’d like a scroll across the page that is called a Marquee, here is the HTML Code for that: <marquee direction=”right” scrollamount=”1″>Your Text Message</marquee>
You can change the speed of the scroll by change that number 1 to a different number. You can have it scroll to the left by replacing the word right with the word left.
HTML Code to Make a Table on Tumblr
Here is a basic table for your Tumblr page. You can change the border to be any size you want by changing that number 1 to a different number. You can change it to zero if you don’t want a border. You can also put the url of a photo in the where it says Your Text Message.
You can add more cells by adding more of this line: <td>Your Text Message</td>
You can add more columns by adding more of this line before the code </table>:
HTML Code for a Link
If you would like to write a link to use on your Tumblr page, use this: <a href=”https://www.udemy.com”>Your Text Message</a>
Change this: https://www.udemy.com to the url that is where ever you want the person to go. And of course, the Your Text Message needs to be changed to the words that you want to be highlighted and clicked.
HTML Code for Inserting an Image to Tumblr
You need to enter the exact url that pulls up your image on the Internet. Enter that url instead of using: https://www.udemy.com/yourimage.jpg. And of course, change the Your Text Message to whatever title you want to have on that image when it displays on your Tumblr page. You will need to change the width and the height numbers to the exact size you want the image to be.
If you do not want to add an image title or don’t want to have to enter the size of the photo, use this HTML code instead:
Of course, you use the url of your actual image, not the sample shown.
How to Change the Size of the Font on Tumblr
Here is the HTML code you need to change the size of the font on your page:
You can change that 20 number to any size number that you want it to be.
Code for a Pop up Message on Tumblr
If you would like a message to pop up to welcome guests to your Tumblr page or to ask them to do something like join your mailing list, you can use this code:
Write whatever message you want the pop up to display where it says Your Text Message.
To use the code, put your text message in the code and then add it to the HTML customization section of your Tumblr page.
Mouse Sparkle Trails Code for Tumblr
Would you like a trail of sparkles to happen every time someone moves their mouse on your Tumblr page? Then go to the customization section and paste the following javascript code before the </head> tag on your Tumblr page. Be sure you find </head> and not <head>. They are two different things.
You can change the color of the sparkles by entering a different color code where it has “var colour=”. #00baff is a teal green color. To choose your own special color, you can use this color code generator.
Dressing Up Your Tumblr
Cool Tumblr Effects Codes 10%
You can use just about any HTML code on Tumblr to make changes and get away from the standard choices that are available as themes. Or maybe you need just some quick HTML modifications to use your Tumblr account for business. By learning some HTML, you can make all the changes you want to make to have your Tumblr looking exactly the way you want it to look. By taking an intense class for HTML online, it is the easiest and least expensive way to learn new HTML tricks that you can use on Tumblr.