CSS Borders trick to make a triangle

February 19th, 2010

Menu imageSo I am working on a project. A WordPress theme that I want to try and sell on Themeforest.net, and I ran into a problem. I’m using jQuery to do a drop down menu, and I want the submenu to fly out and have a triangle on the left side showing where it came from. Look at the image and you will see what I mean. I was having a terrible time getting that to do what I wanted it to. Which was look like it does in the image you see. I spent about an hour and a half trying to get the stupid thing to work.

Today, I’m browsing my favorite sites, and I come along Jon Rohan’s website. That isn’t anything special, you say. Well, I disagree, because on his site is EXACTLY what I am looking for.

First though, here is the link to the specific page on his site, dinnermint.org.

This CSS trick basically changes a border on something into a shape do to the div having its width and height set to 0. You also give the border a thickness of like 20. You can make all sorts of crazy shapes using a div and its border styles.

Anyway, this fixes my issue nicely, and hopefully you can find some use for it to.

@font-face made easy with FontSquirrel.com

February 17th, 2010

I used to be afraid of @font-face css. Why, well, because I didn’t know how to use it. Well last night I tried it out on a contest I entered over at css-tricks.com. The CSS-Off. Basically, they give you a psd and you have to build it. Well, I didn’t have one of the fonts they used.

So I went over to this site I saw in a video tutorial over at nettuts. Check the link out if you find my short tutorial not to your liking. You should get the hang of this though, since it really is quite simple.

Font SquirrelOnce you are over at FontSquirrel.com, click on @font-face kits, choose a kit, and click on its Get Kit link. This will then download the kit to your desktop.

After you unzip the file, copy the font files (you will need the .eot, and the .ttf) to your website folder, and put them in new folder called fonts… or whatever you want to call it. It doesn’t really matter. Open the stylesheet that comes with the kit, copy the @font-face style, which will look like this:

@font-face {
	font-family: 'CloisterBlackLight';
	src: url('CloisterBlack.eot');
	src: local('Cloister Black Light'),
local('CloisterBlack-Light'), url('CloisterBlack.ttf')
format('truetype');
}

See that font-family: there in the style? Change it to whatever you want. Doesn’t matter…could be called font-family: ‘Awesome’;. Then change the src: url to the correct path on your server. So it would possibly be this: src: url(‘../fonts/CloisterBlack.eot’);.

Do that for the second src url as well. The first one is for IE, because Internet Explorer hates true-type for some reason and needs its own font file. The second src is for all the other browsers.

Then, if you want to use that font family, say on an h1 tag you do this:

h1 {
font-family: Awesome;
}

I would add default familys onto the end of that just in case, but this works in most browsers: Original TrueType or OpenType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+,
EOT fonts for Internet Explorer 4+.

Have fun with it, and aren’t you ticked it was easier than you thought? You could have been using this for ages!

3D Flash Slider….CU3ER!

February 16th, 2010

I know these posts are too few, but I’ve had a lot to do. I’m entering a CSS contest over at css-tricks.com, redesigning THIS blog, learning jQuery, trying to learn PHP…whew. Not enough time, but I promise to do better.

Anyway, I saw this today while looking at a WordPress theme over at themeforest.net. I was reluctant to share this with you all, because I don’t think many know about this cool piece of flash. But…here it is.

CU3ER

cu3er

What is this you ask? Watch the demo. It does crazy transformations to whatever images you want, which you list in the xml file. This thing is FREAKIN’ easy to use. Check it out.

New design, coming along….

February 9th, 2010

I threw this up quick just to get the jQuery written. So far so good. Here is a link to what it will look like. Take into account that the size will be adjusted of the overall layout.

Jack of all trades web designers

February 3rd, 2010

I read….scratch that, I scanned through an article today about the best way (according to the author) to create forms for you website. I won’t mention where, because that isn’t important. Neither is who wrote it.

It was some tutorial on how to use this web application called Wufoo, which from the sounds of it, does all the hard work for you. Creates the css, xhtml, and parses the data from the form created. Sounds great, right? That was my first thought, but five seconds later, I changed my mind.

Why Jeremy? Why is this bad for heaven’s sake? It does all the work for you! My answer…because it does the work for you. I’m not saying short cuts and what not are bad, I’m saying there is too much of this sort of thing. I really dislike the idea of web designers being a jack of all trades. No one becomes good at any one thing. They just sort of start packing all this nonsense into there sites, but they don’t know how to do it themselves. To me, that is dangerous.

Read the rest of this entry »