2.3 CSS Zen Garden Works appreciation (next)

First, cacao--food theme design Some of the works in Zen Garden are designed around a theme. For example, the No. 057 work shown here is a food-based design. It was designed by the American designer Shaun Inman. Can the visitor's appetite be lifted by exquisite food photographs? In addition, this design describes a very beautiful pop-up menu. However, this effect can be displayed normally in Firefox, and it is not possible to display the menu effect in IE 6 and IE 7. Visit with this crystal site is http://www.csszengarden.com/?cssfile=057/057.css, the designer's personal website is http://www.shauninman.com/. Second, the city-architectural theme design Similar to the previous case, this case is designed around the theme of architecture, using different perspectives of the building, organized in a page, with a strong sense of space, designed by Canadian designers Matt Kim and Nicole. The URL to visit this work is HTTP://WWW.CSSZENGARDEN.COM/?CSSFILE=146/146.CSS. Three, "cartoon version" Zen Garden--characteristic effect No. No. 099 works do not use the usual form of web pages, but the use of cartoon comic strip expression, ingenuity. The complete work is divided into several pages. It was designed by the Australian designer Joseph Pearson. The site of the work is HTTP://WWW.CSSZENGARDEN.COM/?CSSFILE=099/099.CSS, the design of the handsome personal site http://www.make-belicve.org Four, radio--characteristic effect The feature of number No. 059 is that it is not a common vertical extension layout, but a horizontal column, and more interestingly, when dragging the scroll bar on the lower side of the browser. The pointer on the top side of the page moves all the way, as if it were a radio station, and the idea is unique. The site of the work is http://www.csszengarden.com/?cssfile=058/058.css. It was designed by the Dutch designer Marc LA van den Heuvel. The designer's personal website is http://www.mlavdh.nl. V. Killer style--characteristic effect Here is an unofficial piece of work that looks a bit different at first, but if you drag the scroll bar of the browser, you'll find it interesting. Lodidance.com Can see, there is a knife the page "cut" open a gap, when the visitor drags the browser scroll bar continues to browse, the knife will cut the page two whole. This idea is amazing! It is important to note that this effect can only be displayed correctly in Firefox and IE 7 and is not valid in IE 6. The work's access URL is Http://adjustafresh.com/zen, designed by American designer Scott Kiekbusch, whose personal site is http://www.adjustafresh.com. Six, the underwater world--characteristic effect This works in the CSS Zen garden near thousands works, can be called the most "magical" works. It shows an exquisite underwater world with a long page and only a small portion of the browser window. Regardless of dragging the browser's scroll bar, the "diver" on the page will be in the same place, that is to say "diver" will float or dive in "seawater". The upper part of the page is relatively shallow, which means that the deeper the "ocean" background will be in the vicinity of the sea, which means divers are constantly diving underground. Most amazing of all, the "diver" in the hands of the searchlight can be as the depth of the dive constantly brighter. Bubbles pop up when the browser page scrolls to the bottom of the sea. A small crab will run out of the billet. If the reader is interested, you can study this work carefully. Note that this web page works best in Firefox, although the changes in the searchlight can be seen in IE 7. But because this page uses the special technology, the background color display is not as natural in Firefox. In IE 6, there is no effect. Visit the site of this work is http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css, by the German designer Kai Laborenz Design, his personal website is http://www.css-praxis.de. Note: The CSS file does not know what the reason is deleted by the author, the specific effect please see: Vii. Museums-Featured designs The 148th works are also a very interesting design, designed by Belgian designer Samuel Marin. He designed the entire page as a section of a museum building, where you can see the collection of many floors, and each one is exactly one item on the page, a very ingenious idea. The site of the visit is Http://www.csszengarden.com/?cssfile=148/148.css, and the designer's personal website is http://www.info.fundp.ac.be/~sma/. Eight, theatre effect--characteristic effect The No. 202 works were designed by Eric Rage, a solid designer. The theater effect of the work is very interesting, when dragging the browser scroll bar, the webpage content is like the movie "the screen" the text to scroll upward, extremely creative, the effect vivid. It is important to note that this effect can be displayed correctly in Firefox and IE 7 and is not valid in IE 6. The site of the visit to this work is http://www.csszengarden.com/?cssfile=202/202.css, and the designer's personal site is http://space-sheeps.info. section of this chapter In this chapter, readers can enjoy more than 20 works from the "CSS Zen Garden" website. The same HTML file, only through the different CSS settings, resulting in such a rich and colorful page effect, the CSS for the page to set the importance of juice, so it is the web designer hands the most powerful weapon. In the chapters later in this tutorial, you'll delve into all aspects of CSS design, and hopefully, after completing this tutorial, you will not only be able to create the page effects described in this chapter, but also design and create more exciting Web pages. Click to download the 1th to 7th CSS Tutorial resource to return to the tutorial list of CSS Tutorial layout

Editor: Web Learning Network

This address: http://www.lodidance.com/css/jc/663.html