Showing posts with label Visual Material. Show all posts
Showing posts with label Visual Material. Show all posts

custom cursors

A friend of mine from Second Life, four Yip, has seen the easy peasy site and has given me a huge list of resources, of which I will be making good usage! Thank you four Yip :-) 

So, here is one of them: Would you like a custom cursor for your site?

Think carefully before you say yes. While some people (myself included) will love them, others may become highly irritated by them; especially since they will not be getting the little hand thingy for the links. That said, if the answer is still yes - here is a good place for them: http://www.cursors-4u.com/




Find the one which you think will work well with your overall design scheme and then copy the code from the little box underneath it where it says "universal CSS/HTML code for your web page".

Now comes the important part: Paste this code onto a text file first since you will need to do some serious cleaning up before you can put it into the HTML editor. Here is what the code will look like:

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth580.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/02/16/sapphire-9.html" target="_blank" title="Sapphire"><img src="http://cursors-4u.com/support.gif" border="0" alt="Sapphire" style="position:absolute; top: 0px; right: 0px;" /></a>

Delete everything that is highlighted with red! Only keep the stuff that is highlighted with white, from <style type> to </style>, in other words. If you do not do this you will get a little "support Cursors4U" banner on your site. Which, in this case I find a bit excessive since Cursors4U seems to be doing quite nicely with lots of advertisements already.

Next step: Take the cleaned up code and paste it into the <head>, at the very bottom, just above the line which says <b:skin><![CDATA[/* and before </head>.

Done! You now have a custom cursor!

.................................................................................................................................

bitmap/pixel fonts

http://www.dafont.com/bitmap.php

Now that we are beginning to speak about image based menu items - the above link will take you to one of the best collections of free bitmap fonts online.

 (Note:  Since bitmap fonts are based upon an exact pixel count they need to be used at the exact specified size which you will see all the way to the right on the red bar above the font preview. (Typographic point sizes correspond to the pixel size at 72 ppi screen resolution by the way). So, be sure to have the right size - anything less or more will make the font break up in really ugly ways.  ) 

 (Also:  Remember to set the anti-aliasing value to "none" from the pull down menu on the font palette, as shown in the screenshot below, since this value is what will give you the crystal clear sharpness that you want from a bitmap font.   ) 



.................................................................................................................................

image based menus

Look on the left column right here on this site and you will see that the pages menu now has image buttons with rollovers instead of just plain text ones. This was done with a code generated here:
So easy it is almost ridiculous!

































Once you have the code, go to Design and add an HTML/CSS gadget to one of your columns, paste the code, save - and you are done!  (Tip:  Needless to say, you can make more than just 3 buttons. The generator gives you 5 to begin with anyway. However if you have even more than that, simply copy paste the lines from the script and change the image and destination URLs in the added lines.  

Some other nice stuff too on this site by the way, such as a pull down menu generator, a pop-up window maker, a story generator - gotta love this one! :-), lots of image effects, text effects, and and...

http://javascript.internet.com/

.................................................................................................................................

for slideshows...



Absolutely fabulous!

All you need to do is go to http://web.photodex.com/ and create a free account. This is an online version of the famous proshow slideshow application. These people are simply the very best in their field, so naturally what they have now developed for the web stands head and shoulders above all the competition as well. There are beautiful themes to choose from (I didn't even touch the one which I used, it was that nice to begin with), but you can customize them as well. Add music from your computer or their library. Again, I was lazy, used their music...

Once your show is done, you can get the embed code and paste it straight into the HTML editor of your post here. (Or wherever else you are creating your site, of course). And another neat thing, which I just discovered is that if you edit the show at photodex it will automatically refresh itself to the new version wherever you have linked it to, since the original URL doesn't change.

 (Tip:  The show is rendered 640 pixels wide and unless you post column is wide enough for it, it will hang off the side if you do not resize it properly. Simply resize by changing the values from inside the code, just like you do with images.  ) 

A free account has its limitations, obviously - such as that you can only use 15 photos per slideshow, your videos (yes! you can in fact embed videos into this!) have to be below a certain length, and your upload space is limited to 100MBs in total. And also I do not think that you can have HD.

I splurged and got a yearly plus account since I know that this is something that I will probably make quite a bit of usage of on my many blogs, but to start out with the free plan certainly gives you enough to play with as well.

.................................................................................................................................