▲
43. Páramo
PREVIEW | DOWNLOAD
ok, finally a new theme after… how many months? Hope you guys like it! (I know I do, I’m using it myself :P)
42. Beramour
PREVIEW | DOWNLOAD
This was made for fandom type blogs (though not exclusively for them as anyone who chooses can use this theme). I was inspired by a lot of theme-makers who I admire for their originality in fandom-type themes, this theme was largely influenced by the following theme-makers and I would like to thank them…mcpoyles, colinsexual, drunkwerewolves, pevensied, doucheywolf, daeynerys
These people are amazing, I just want to stare at their themes all day, go check them out!
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.
41. Nuvola
PREVIEW | DOWNLOAD
I was suddenly really wanting to code a theme that was suitable for art/photography blogs and I’ve been feeling in a fun mood today so here’s a quirky theme for you all to enjoy. /gah, the preview image looks so bland, I promise it looks cooler in the live preview!
Some themes do not include the source link codes which makes “via/source” links automatically appear under posts (such as quotes or text). To remove those, insert the following between {block:posts} and {/block:posts}
{block:ContentSource} <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} --> {/block:ContentSource}What you’re doing is hiding the codes so that it ONLY appears in the CODES (are not displayed unless you search up HTML) since you’re adding <!— and —> around the codes which makes it a “comment”. It’s still read, but it’s hidden and only visible in the source code.
EDIT: The source link I’m talking about is the EXTRA source link that appears under any post type (including photos) in addition to the “reblogged from” and “originally from” which many theme makers already KNOW to include (but don’t know about the extra source link code).
The difference between the two types of source code is that the ”reblogged from” and “originally from” is optional. If you don’t put that in, tumblr won’t include it. However, the code that the original post was talking about, if you don’t put that in, tumblr will include it anyways.
I’m not, in any way, discouraging sourcing material. Some codes are redundant and I’m just sharing a way to hide it.
40. Colibri
PREVIEW | DOWNLOAD
When I started making this theme, all I wanted to do was to make a theme for my music blog. But it just flowed out so naturally and grew into a tumblr theme in full. Choosing the right piece of music for this took awhile though, but I’ve found the perfect one!
38. Ensueño
Preview | Download
God, I am on FIRE! I’ve made a theme each day for 3 consecutive days already (technically I made 1.5 themes today)! The hardest part was actually the black bar on the right of the posts, I had the idea down in my head but using CSS/HTML to achieve was rather hard because the height effect (in comparison to the content posts / white blocks) wasn’t simple, I had to use negative margins and tables in order to achieve it. I’m proud of myself for figuring that out, that, by itself, probably took about a whole gosh darn hour.I personally think this theme is great for text posts or blogs that post a variety of media. The title means “daydream” or “fantasy” in Spanish.
37. Baleine
Preview | Download
This is a bit more stylized than some of my other themes. You’ll probably spend a bit more time customizing it. I recommend black/gray/white base (ex: backgrounds, menu link backgrounds etc) with coloured accentuations (ex: borders, links etc). I’m really loving the blur effect.Photo credits to Fawkus
36. Batavia
Preview | Download
Actually quite happy with how this turned out. It’s a fun theme but versatile too, originally was gonna make it a black & white, grunge, glam punk style theme but thought I’d do something with colour. Though the default settings are black and white. I changed the name too! Étranger just doesn’t fit the preview (it means ‘foreign’ in french) so I chose Batavia which actually is the name of many things (wiki) and I thought the history and the sound of it was interesting.
35. History
Preview | Download
Been working on this for over a stretch of two weeks already! I was having a hard to pulling all the elements together. I don’t even know how I feel about this theme anymore ;A; thanks to Lien, A LOT, because her edits were my inspiration. Her edits are so awesome uhuhuhu everytime I look at her edits, I’m reminded of how I’m no good at photoshop.
