▲
DIFFICULTY: EASY | MEDIUM | HARD
This isn’t at all difficult to do, and really doesn’t even require being much of a tutorial! I got the code for this falling snow effect here.
Click on “get the code” above and paste that code below the <body> tag in your theme. You will see this in your code:
// Set the colors for the snow. Add as many colors as you like
And you can change the colors (starting with #aaaacc) to be whatever you’d like. You can have, I assume, as many colors as possible!
Above that you can change how many snowflakes fall (but I would suggest leaving that), and below you can change the fonts, speed, size, etc. All you have to do is read each of the tags to see what each thing does.
Enjoy your snow!
So apparently, you can only upload sidebar gifs that are under 1MB now. But, that only applies if you are uploading gifs the traditional way. But if you mess with some code, in a way that is very simliar to the changing sidebar code, it will work! (Or, at least, it did when I tried it). Here are your steps:
- Go to the html code for your theme and search for <img src=”{image:sidebar}” />
- Delete that text and replace it with this code
- Upload each gif using static upload
- Paste the url of each gif where the code says image1.gif, etc
And that should work! Then you can add as many gifs as you want, all over 1MB!
So some of you have been wondering how did I changed the tumblr buttons of this blog. I decided to put up a tutorial on this, a detailed tutorial. So sorry if this post is too long.
It’s really easy because all you have to do is to make a new follow and dash buttons then copy and paste some codes.
In this tutorial, we’ll be learning how to create jump pagnition for your theme. For those who don’t know what jump pagnition it, an here is an example (taken from my blog):
What you’ll need to know first: basic knowledge of HTML and CSS.
How to put an image in your background
Just put this after <body>
<img src='IMAGE URL HERE' style='position:fixed;bottom:0px;left:0px;z-index:-999'/>Then for the postion, you can change :
- bottom:0px; for top:0px;
- left:0px; for right:0px;
People use photoshop to cut the background from images you got 3 way to do this (using the pen tool, magic wand and magnetic lasso) I’m gonna teach you how to use the magnetic lasso
so first you open your img in photoshop (I’m using CS6 but you can use any version of photoshop)
then you select the lasso tool and choose “magnetic lasso”
the rest is under the read more
View live preview here.
Copy the below code and paste it above </style>:
#parceiros {
opacity: .99; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease;
}
#parceiros:hover a {
opacity: .20;
}
#parceiros a {
opacity: .80; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease;
}
#parceiros a:hover {
opacity: .99;
}Paste the following where you want it under <body>:
<div id="parceiros"> <center> <a href="link"><img src="link_da_imagem" /></a> <a href="link"><img src="link_da_imagem" /></a> <a href="link"><img src="link_da_imagem" /></a> <a href="link"><img src="link_da_imagem" /></a> </center> </div>
- Tutorial by Eduardo Kunst.
- If you use, like and give credit.
- Do not repost, only reblog.
I decided to translate this tutorial the best I can, using Google. I know it’s not correct word-from-word, but everything there is exactly what it should be. I will not help you create the navigation, or help you make one of my navigations use this effect!
As requested by you, here is the tutorial;
STEP 1:
Add the code below before </style>
.photo{
filter: url(“data:image/svg+xml;utf8,<svg xmlns=’http://www.w3.org/2000/svg’><filter id=’grayscale’><feColorMatrix type=’matrix’ values=’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0’/></filter></svg>#grayscale”); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.photo:hover{
filter: none;
-webkit-filter: grayscale(0);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}
STEP 2:
Then find;
{LinkOpenTag}<img src=”{PhotoURL-500}”>{LinkCloseTag} ,( {photoURL-500} might be different according to your photo size, it could be also 250 or 400 )And change it like this:
{LinkOpenTag}<div class=”photo”><img src=”{PhotoURL-500}”></div>{LinkCloseTag}
Do the same for photosets too, it comes after {block:Photoset} block;<div class=”photo”>{Photoset-500}</div>
This works well for Chrome and this is what I used for my Mono theme.
UPDATED, this works for also Firefox now. Tutorial is taken from here.
Today, we’re going to be looking at how to create the 3D glasses text effect with only CSS. A familiarity with CSS is required but it is a very easy concept to grasp. For a clearer example, please take a look my monologue theme for a live preview of the effect. (Also, click on images for larger view)
So basically, the 3D Glasses effect is just using 2 text-shadow properties placed in different positions to achieve the tri-coloured look. Having one text-shadow property can make a text look like the following:
The text will be put as a heading in the HTML:
<h1>ettudis</h1>
The CSS is:
h1 {
text-shadow: 2px 0 .2px #FF0000;
color:#000;
font:25px lucida sans,arial,sans-serif;
}The 2px explains the positioning in the horizontal plane (positive is to the right, negative is to the left). The 0 explains the positioning in the vertical plane (negative is upward, positive is downward) and the .2px explains the extent of blur and of course, #FF0000 is the hex colour of the shadow.
For example, a blue text-shadow going ONLY to the left will look like the following (note the negative sign):
The CSS:
h1 {
text-shadow: -2px 0 .2px #00F1F5;
color:#000;
font:25px lucida sans,arial,sans-serif;
}Now we put two of those text-shadow properties together, one going to the right (red) and one going to the left (blue).
h1 {
text-shadow: 2px 0 .2px #FF0000, -2px 0 .2px #00F1F5;
color:#000;
font:25px lucida sans,arial,sans-serif;
}Notice, I’ve added a comma, followed by the second text-shadow properties, and ta-da! That’s how you get a 3D Glasses effect for your text using CSS.
For those of you that are interested in learning about cool CSS transitions, make sure you check out this “Animatable” created by Lea Verou!
As quoted from her blog:
“It’s essentially a gallery of basic transitions. It aims to show how different animatable properties look when they transition and to broaden our horizons about which properties can be animated. Hover over the demos to see the animation in action, or click “Animate All” to see all of them (warning: might induce nausea, headache and seizures :-P ).
You can also click on it to see more details and get a permalink. Instead of clicking, you can also navigate with the arrow keys and press Esc to return to the main listing.”
This is definitely an awesome resource, and I know that it’s helped to inspire me as well as give me some new ideas for themes and pages! I hope it inspires you too! :3
