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

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.

Codes

This is a half-chokato'd collection of code snippets because I clearly have nothing else better to do with my life. Anything you pull from here is for you to play and fiddle around with, no credit obliged. I don't offer code help because ~lazyy.

Footnote

This is a paragraph. Hover over the footnote for more info. [?]Oh look, a footnote appears! Lorem Ipsum belh bleh bleh. Mauris dolor enim, semper et tristique non, sodales vel enim. Suspendisse eu dui condimentum augue ultricies rutrum. Vestibulum turpis felis, sollicitudin sed venenatis sit amet, commodo non dui. Etiam sed commodo nullaMauris dolor enim, semper et tristique non, sodales vel enim. Suspendisse eu dui condimentum augue ultricies rutrum. Vestibulum turpis felis, sollicitudin sed venenatis sit amet, commodo non dui. Try hovering over this one as well! [?]Another a footnote appears! Ninja aw yeah.

Floated Images

What are floated images? They're basically images with the float property applied to them. The nice thing about them is that no matter the size of the image, the text wraps around the image to accomodate for it. The illustration is floated to the right. You can also try adding things like margin or padding for some spacing. Suspendisse quis turpis vel ante dapibus pulvinar. Fusce vitae justo metus. In hac habitasse platea dictumst. Aliquam non diam elit. Morbi nibh sem, lobortis hendrerit egestas sed, lacinia in dui. Fusce vel dui est, non sagittis lectus. Aliquam tincidunt semper libero posuere sagittis. Nam nulla augue, egestas nec, condimentum sed arcu. Proin sed elit urna, luctus elementum eros. Aliquam erat volutpat. Integer tempus ante sit amet dolor rhoncus nec luctus nunc posuere. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

This blumaroo image is floated to the left. Sed odio metus, ultrices non ultrices vitae, lobortis et nisl. Phasellus ullamcorper, quam id varius iaculis, turpis lectus auctor magna, sit amet sagittis ante tortor sed purus. Quisque euismod nisl ullamcorper eros eleifend vel cursus augue bibendum. Aenean dignissim convallis dignissim. Nam rutrum nisl et enim aliquam sed interdum turpis commodo. Pellentesque elit enim, dapibus id aliquam nec, sagittis rutrum leo. Quisque ornare arcu non mauris congue rhoncus. Curabitur mauris ipsum, convallis vitae ornare vel, porttitor at mi.

Pet Image Codes

The image is floated to the left and cropped. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae nisl vitae nibh porttitor dignissim a sed eros. Vestibulum nulla ligula, tristique sit amet cursus non, lacinia non ante. Curabitur urna elit, facilisis vitae elementum nec, placerat a elit. Suspendisse quis turpis vel ante dapibus pulvinar. Fusce vitae justo metus. In hac habitasse platea dictumst. Aliquam non diam elit. Morbi nibh sem, lobortis hendrerit egestas sed, lacinia in dui. Fusce vel dui est, non sagittis lectus. Aliquam tincidunt semper libero posuere sagittis. Nam nulla augue, egestas nec, condimentum sed arcu. Proin sed elit urna, luctus elementum eros. Aliquam erat volutpat. Integer tempus ante sit amet dolor rhoncus nec luctus nunc posuere. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Sed odio metus, ultrices non ultrices vitae, lobortis et nisl. Phasellus ullamcorper, quam id varius iaculis, turpis lectus auctor magna, sit amet sagittis ante tortor sed purus. Quisque euismod nisl ullamcorper eros eleifend vel cursus augue bibendum. Aenean dignissim convallis dignissim. Nam rutrum nisl et enim aliquam sed interdum turpis commodo. Pellentesque elit enim, dapibus id aliquam nec, sagittis rutrum leo. Quisque ornare arcu non mauris congue rhoncus. Curabitur mauris ipsum, convallis vitae ornare vel, porttitor at mi.

Pet's Name or Caption here Pet's Name or Caption here

Pet's Name or Caption here.This is a blurb. Lorem ipsum bleh bleh bleh.


^hover over me for a blurb!
blurb hither. Vestibulum nulla ligula, tristique sit amet cursus non, lacinia non ante. I seriously question my priorities in life sometimes.
^hover over for blurb!

^hover over for larger previews!
Hover to the images
on your left for a larger preview

CSS Navigation Bars (One Layer)













CSS Navigation (Two Layers)


CSS Floats

This is the first column.
This is the second column.
This is the first column.
This is the second column.
This is the third column.
This is a one column.
This is the second column.
This is the third column.
This is the fourth column.
This is a Header
This is a sidebar.
This is the content.
This is a footer.
This is a Header
This is the content.
This is a sidebar.
This is a footer.
This is a Header
This is a sidebar.
This is the content.
This is a sidebar.
This is a footer.

Pocket Dailies

Anchor Management Bank Interest Coltzan's Shrine Deserted Tomb Fruit Machine Giant Jelly Giant Omelette Grumpy Old King Healing Springs Lunar Temple Meteor Qasalan Expellibox Rich Slorg Symol Hole TDMGPOP Tombola Fishing Vortex Weltrude's Toy Chest Wise Old King Lab Ray Petpet Lab Ray Turmaculus



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-2015.
® 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