Website Design Liskeard

Transparent boxes are becoming a common element to many new designs, as you will see our latest design is build around the design of 2 transparent boxes however this was done using png’s.

There are a number of ways to achieve this effect but today i will show a simple example of how to achieve this using CSS. I am not certain to what extent this code will work on all browsers but any feedback that you might have please let me know as i will include it in this post.

The below example will show a box using the background colour of white and an alpha of 50%.

Transparent Box CSS

#mydiv {
width: 300px;
height: 50px;
margin: 20px 0;
background-color: #ffff00;
/* Internet Explorer */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}

Here’s what it looks like

50%

30%

10%

Advantages

The only real advantage, but a good one, is that you no longer need to use images (e.g. pngs) for your backgrounds which could result in faster loading times for your web page.

Disadvantages

This may not work on all browsers, it certainly does for the most recent versions but how far back this technique goes back I’m not too sure. Using the code above you will also need to keep the width set, in IE it seems to break without it. But im sure there is a work around for this.

For this project I am going to require a large amount of data, images and sources to obtain specific results to create the end result for the user. This requires me to perform a large amount of research into search engine performance and relevancy to this project. Which search engines and websites will provide the best results for the keywords used by the user?

Without the right information and data the project will be worthless and meaningless to the created artwork.

There are many debates to which search engine provides the best result. After visiting the http://www.searchenginewatch.com it was clear which search engines were performing the best at this current time. There awards stated that Yahoo were currently the best for image search. This is something I will now begin to explain and investigate.

Using the following keywords I will compare the results from each search engine: ”Duchamp conceptual art”

So in conclusion to this first search it was clear that google provided the largest amount of results but whether or not all of the images were relevant this was another question. Yahoo’s images were very specific and relevant to the keyword search. This was infact true for all of the search engines tested. As my prototype will be using more keywords and more peculiar sentence structures I will now investigate the same method using “Duchamp Baudrillard Sound Art“ Using the following keywords I will compare the results from each search engine: ”Duchamp conceptual art”

As this project relies on images, Google is defiantly providing more content, the results which are found on its first 2 pages tend to be relevant to the keyword searches performed. As the project will only pull in a maximum of 30 images, Google’s image search will be more than adequate. I will adapt this into the project as soon as development takes place.