EmanuelBlagonic.com » Something about web design

A few months ago I wrote an article about how to use CSS to create a nice looking map. The process was (I think) well explained in that article, and now I want to show you the real example – or how to use CSS and unordered list to create live, nice looking CSS map (that hopefully rocks :)

I personally love XHTML and CSS combination even when we should achieve the same effect with Flash. This is partly because I never explored Flash so much. The client of ours – Oxy Polyclinic wanted for us to create a map of diving locations for their Ship “Borna”. We could create a map by using Flash, but we used simple XHTML and CSS instead. Why?

Continue reading »

There are several techniques for laying out the image gallery (using list-items, simple IMG tags or using links when you create a “clickable” gallery). If you use any of available techniques, you should get the same or almost same effects. And everything works nice as long as you stick with the thumbnails of the same size. But from my experience when working with different people with different computer skill, you can expect almost anything. First of all, they won’t upload the photos of the same size, so everything you worked on falls apart – floats, sizes, aligns.

If you use some kind of CMS or your own news script, you can the solution explained in this article. I will show you how to create an image gallery that doesn’t falls apart when different sizes of images are loaded and with no images being distorted.

Continue reading »

For one of my personal projects, I needed to create a nice-looking map and position the elements in it. In the past, I would use Photoshop, and sketch the elements on layers that I can move, but today I will use (definitely) CSS. We will create an unordered list to achieve that. Nothing complex, just pure simplicity (and it will look nice too :)

There are so many things we can accomplish using CSS positioning. For example, we could provide the background image of a map, and put the elements (in our example – cities) in it. The cities will be absolutely positioned on our map to the places there actually belong. I used a map of my region Istra for this example, and a few cities.

Continue reading »

A few days ago I stumbled upon an interesting news site called Daylife. Its front page (Covers) is something like an internet/TV hybrid, with its flash intro page that displays most recent news. To say the least, I am a fan of Flash, as of JavaScript and other technologies, but I think that the same (or almost the same) “vow” effect could be done with XHTML/CSS combination as well.

This front page is loading very slowly, and I think it would be better that they considered some XHTML/CSS/AJAX stuff, that would be faster.

In this article I will show you how to create this kind of front page using only XHTML/CSS. As I am not the JavaScript/AJAX expert (yet:), if anyone else would like to expand this article furthermore (to create that expanding effect), please do so.

Continue reading »

If you want to create a dropped shadow background than you could just add a drop shadow layer effect to a specific layer. But what happens when you would like to create a dropped shadow background that fades with the background itself. The easiest way is to use Photoshop “power”.

I am talking about Photoshop masks, and in this illustrated tutorial I will show you how to use masks to create faded shadowed background and also how to use masks when dealing with header images like in the example just bellow.

Continue reading »

In this brief and illustrated tutorial you will learn how to create most commonly used web graphics in Photoshop. Techniques explained in this tutorial, can be used in other similar programs as well. In this tutorial I will try to explain how to create a menu, like the one explained in the article “CSS image replacement techniques” and then I will guide you through the process of creating a custom submit button.

To complete this tutorial you should be familiar with the basics of Photoshop like dragging guidelines, creating layers and applying the effects to them, changing opacity, and using a Tool Menu.

Continue reading »

Drop down menus are among the coolest things on the web. Beside that they are also very good for creating navigations that contain many elements. The main problems of creating drop down menus lies in the Internet Explorer’s inappropriate way of displaying :hover pseudo class (not recognized anywhere except in A tag), and the problem in calculating the z-index when an element is positioned absolutely inside a relatively positioned element.

Continue reading »