LOLWAT. Quick Jump » Semi-Opaque BGs | Patterned Backgrounds | Bullets

lolwhoareyouandhowdidyoufindthispage Er I mean, welcome I guess? This is just my page where I collect and store my favorite resources for making layouts in one place. I didn't make any of these (with exception of the semi-opaque bgs) so if you want to use them no obligation to link back or anything.

I pulled the image bullets from websitebullets and repeating background images from subtlepatterns, so if you want to visit their entire collection you should go there; this page only contains my personal favorites. So basically if you really must credit somebody, you should credit the aforementioned.

Semi-Opaque Backgrounds

Back in thar day, we used to be able to use opacity coding to create semi-translucent backgrounds. Since then, TNT has changed the filters so now the only way to achieve this effect is to use a repeating background png image instead. You may have noticed that I often incorporate them in my templates already, but here is the full black and white gradient set in case you want to play with them some more.

How to Use: If you want to make an element (such as a div) transparent, all you have to do is add the declaration background: url("imgURL") repeat; to your desired div that you want with teh pretteh semi-translucency. For example...

#container { border: 1px solid #000; width: 300px; padding: 5px; margin: 5px auto; background: url("imgURLhere") repeat; }

«div id="container"» This is the container div with the translucent background. «/div»

10% 20% 30% 40% 50% 60% 70% 80% 90%
10% 20% 30% 40% 50% 60% 70% 80% 90%

Background Image Pulled from Beautifullysublime's Photography.

Patterned Backgrounds

How to Use: If you want to make the entire page with the applied background, incorporate this in your CSS:

body { background-color: #fff; background-image: url("imgURLhere"); background-repeat: repeat/no-repeat/repeat-y/repeat-x; background-attachment: fixed/scroll; background-position: left/right/center top/bottom; }

Basically each possible value is separated by a slash (/). For example, you could have background-position: left top; or background-position: center top; -- they are both valid. Or if you're a lazy bum like me, you could shorthand it like a champ :{D

body { background: #ccc url("imgURLhere") repeat fixed left top; }

Website Bullets

HOW TO USE: The most straightforward technique for using image-based bullets is using the list-style-image property. Where it says imgURLhere, replace with the direct link of the image. To obtain the direct link 1) right click on your desired image above^ and 2) in the menu, select Copy Image URL for Chrome or Copy Image Location for Firefox.

ul { list-style-image: url("imgURLhere"); }

However, I don't recommend this technique at all. Why? Because due to the image size variation combined with varying font sizes and line-heights, this can cause the image and text to be misaligned on some browsers. The technique I personally use is setting a background for the list item and then positioning it:

ul { list-style: none; padding: 0; margin: 0; }

ul li { background-image: url("imgURLhere"); background-position: 5px 7px; background-repeat: no-repeat; margin: 5px 0px; padding-left: 20px; }

When you use pixels for the value for the background-position property, the first value defines the horizontal position and the second defines the vertical position. In this case, the background is shifted 5 pixels to the left, and 7 pixels down.

Or if you're a total pro and you feel like can handle the shorthand version, here it is:

ul { list-style: none; padding: 0; margin: 0; }

ul li { background: url("imgURLhere") 5px 7px no-repeat; margin: 5px 0px; padding-left: 20px; }

So basically yeah this technique does require a bit more effort/thought (and more characters), but I prefer this method because it ensures cross browser compatibility and I get full control over how I want the bullet to be aligned with the text.

Web Safe Fonts

There are three font families: serif, sans-serif, and monospace. I don't really know if these are actually 100% cross-platform proof, but these are pretty good bets. Also if you have a Mac or Windows these fonts probably have different names and such like that.

Font Name Bold italic small-caps Times New Roman Lorem Ipsum Lorem Ipsum Lorem Ipsum Georgia Lorem Ipsum Lorem Ipsum Lorem Ipsum Palatino Linotype Lorem Ipsum Lorem Ipsum Lorem Ipsum Arial Lorem Ipsum Lorem Ipsum Lorem Ipsum Arial Black Lorem Ipsum Lorem Ipsum Lorem Ipsum Comic Sans Lorem Ipsum Lorem Ipsum Lorem Ipsum Impact Lorem Ipsum Lorem Ipsum Lorem Ipsum Lucida Sans Unicode Lorem Ipsum Lorem Ipsum Lorem Ipsum Tahoma Lorem Ipsum Lorem Ipsum Lorem Ipsum Trebuchet MS Lorem Ipsum Lorem Ipsum Lorem Ipsum Verdana Lorem Ipsum Lorem Ipsum Lorem Ipsum Courier New Lorem Ipsum Lorem Ipsum Lorem Ipsum Lucida Console Lorem Ipsum Lorem Ipsum Lorem Ipsum Century Gothic Lorem Ipsum Lorem Ipsum Lorem Ipsum Garamond Lorem Ipsum Lorem Ipsum Lorem Ipsum

There are many various ways to style fonts. First you have font-family, which is for the font name; then there's font-size, which can be measured in pt, px, or em. And then there's font-style if you want something italicized; font-weight to bold something; and then font-variant for lowercase caps -- the default value for these three properties is normal (if omitted, that's what happens anyway).

body { font-family: "Name of Font"; font-size: 12pt/12px/12em; font-style: italic; font-variant: small-caps; font-weight: bold; }

Wow that's a lot of code. There's also the shorthanded version too!

body { font: italic bold 12pt Verdana; }

I can never properly remember the shorthanded form anyway so here a useful cheat sheet diagram thingy that impressivewebs made.




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions