Create a Simple CSS Pin Map with Ease
Written on 03/19 • 1 CommentsIt is easy to create a map with pins that you can position to correspond to a point of interest then hyperlink the pin to another page or get creative and use javascript to trigger an event. In this example we have a map of the UK with pins positioned roughly over the top ten cities by population. The pins link to the cities Wikipedia page and use the title attribute to show the name when hovering over the pin. This is a bare bones example for you to build on, you could use image sprites to change the image of the pin to a marker of your choice or use javascript to create information bubbles when you mouse over the marker the choice is up to you.
Download Source ZIP File (88,8820 bytes)
Continue ReadingNot So Clear CSS Opacity and RGBa
Written on 12/18 • 0 Comments
Support for transparent PNG paved the way for the use of semitransparent elements within website designs. CSS3 introduced the ability for developers to alter the transparency of an object with the opacity property. This method has some inherent problems, luckily there is a solution; the much less well know RGBa model.
Continue ReadingUsing Numbers as CSS Class or ID Values
Written on 11/20 • 0 Comments
This week I found myself in a situation where I needed to apply CSS to an element only on a specified page. The best way to do this is to add an id to the body tag of the said page thus allowing you to apply a style only to that page. The example below shows an ID applied to the body tag. This is good practice when building your sites but sometimes easier said then done when using a Content Management System to dynamically generate your pages.
Continue ReadingCentering Widthless Floats
Written on 09/25 • 0 Comments
This week I had a problem with centering a widthless floated element with CSS. It seemed an obvious thing to want to do but I could think of no simple solution, align center was not going to cut it here.
Continue ReadingFancy Horizontal CSS List Menu
Written on 09/11 • 0 Comments
This week I am going to show you how to make a simple horizontal CSS list menu then make it a bit fancier. The objective here is to show you how to create a simple, cross browser compatible CSS list menu that will work in all browsers then build on the basics to make the menu more attractive using images gradients. All the source files are included and a demo is available
Continue ReadingCreating and Using CSS Sprites
Written on 08/14 • 0 Comments
CSS sprites are a way to combine images to improve our page loading time and reducing the number of requests our server performs. CSS sprites have been routinely used in CSS for a number of years in rollover effects where loading one image that contains both states. The problem with using two images here is when the page loads, the first image is loaded by the browser, the user then moves the cursor over the image and only then does the browser send the request for the second image. By waiting until the user is already hovering over the image to download the second file the user may experience a delay before that image is fully downloaded by which time the user may have already moved the cursor away. Using CSS sprites one images is used but only partially displayed then moved to show the hidden area containing the hover state. An example of this can be seen on this site in the sidebar, hover over the RSS feed and you will see the hover state of the RSS image.
Continue ReadingMore articles can be found in the archives, feel free to have a look around and leave your comments.
Try a sample pack of 10 Business Cards for free from MOO
Upload images for the first side of your card. Choose up to 10 different images or designs. We accept high resolution JPEG, PNG, GIF or PDF files. Free standard shipping is included.
Mint