01. Always; (revamped version of Beneath Anubis)
It’s been an extremely long while! Since I still do not have the time to make themes from scratch, I decided to renew and improve my already published themes. So, here you go.
This version has:
The gist is the same, though. This is a very plain and simple theme. As usual, do not copy, redistribute or claim as your own any piece of coding.
Hope to be more themes soon! Stay tuned.
Tutorial 01 - Transitions - Advanced
This first tutorial is about transitions. Since, I use them a lot in my themes, I thought I’d impart what I know on to people who may want to learn.
This is an advanced tutorial which just means that you should know your way around CSS and HTML to make sense what to do, where to put it, and how to make it your own.
There’s a lot you can do with transitions and I do mean A LOT, so this tutorial doesn’t really go into simple transitions like making text that was green turn blue - but kind of the more complex stuff like making blocks slide out to the right. (I promise it makes more sense with the examples!)
I hope you guys enjoy this first tutorial and that it hopefully helps you!
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.
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.”
In this series of tutorials I’ll try to explain some css basics, maybe not to the extent of being able to make themes after reading this tutorial, but definetely not having a hard time when editing some minimal things in a theme.
I’ve planned so far to make three parts of css, and another extra one for html codes.
This first part I’ll talk about fonts in css. But first,
Basic of CSS:
font-family: trebuchet ms;
First comes the property, in this case: font-family.
And then the value, in this case the font name: trebuchet ms.
The (:) and (;) are essentials. Why? just because that’s how css works, if you forget to put them, the code won’t work.
It defines the font, there are plenty of fonts you can use in your html, the ones I use the most are: (monospace) corier new, lucida console, consolas. (sans-serif) arial, trebuchet ms. (serif) georgia.
Here are some fonts names you can use in your html (remember the fonts must be the ones that come in the windows/mac pack, you cannot put the name of a font you have downloaded here, unless you’re using font-face, which I’ll talk about later…well, if I not forget…).
arial / courier new / georgia / lucida console/ lucida sans unicode / palatino linotype -palatino-/ tahoma / times new roman / trebuchet ms / verdana / geneva / ms sans serif / consolas / Sylfaen / Tunga / Gautami / Vrinda / Garamond / Book Antiqua/ Bookman Old Style / Constantia / Segoe UI Light / cambria
The code should be something like this:
font-family: trebuchet ms;
It defines the size of the font, I usually use pixels as value to almost everything in css, since is easier for me. I believe you want to make your text in a resonable size that isn’t too big/small. Don’t even try to use size less than 7px it’s illegible. Normally 8px until 14px to body texts. Well personally I consider 13 and 14px already big, but there are people who like so…Remember the size of a font vary depending of the font, for example, 8px for trebuchet ms is almost illegible while for georgia is a good size. Anyways, the code should be something like this:
It defines the height between the font base line, See the images bellow for example. Well, I’ve learned that the line-height value should be 2px more than the font size value by a not that reliable teacher. (example: if the font size is 9px the line height I’d put would be 11px). I still use her rules, but feel free to add a value that you think is good for reading. Note the space between the pink lines.
It defines if the font will be in:
uppercase (the famous capslock, all your text will be in uppercase);
none (will have no changes in your original text, if you wrote something LiKe THiS will appear like that);
capitalize (All of the first letter of each word will be in uppercase),
lowercase (all the letters will be in lowercase)
(respectively, uppercase, none, capitalize, lowecase)
important! only use one code.
It defines the space between the letters, you can use this feature for titles, mostly. You can use negative values as well. If you put it in a body text it may cause problems to read. See the images bellow for examples.
(Respectively values: 0px. 1px. 2px. -1px. -2px)
I think everyone who is reading this uses microsoft word right? so I won’t explain in details (There’s not much to explain anyway) I’ll just use some examples:
important! only use one code.
Well, for me there are only normal and bold. I’ve seen some codes with values or lighter, bolder, but to be honest I’ve never used this, I prefer the good and old <b>bold text</b>
It defines the italic for fonts.
It defines the color for the text, you should put the hex code to the color, Always put the # before the code, like this:
useful color hex code genarete site: colorpicker.com
The code you’re going to use is the one above the square gradient.
With this I finished the font propriety, I may be forgetting something, I don’t know. Sorry for that. Next one (If there is one ~laziness is screaming in my head~ it will be about div)
Excuse my poor grammar/english and my laziness to double check the tutorial to find mistakes.