Świat Webmastera - CSS / Design - Część 3

www.cssplay.co.uk documents my attempts at understanding and exploring the possibilities of CSS. Mapping of irregular shapes using just css. With hover effect and popup information panel. Using CSS3 adjacent sibling selector to produce a Clickbox Gallery. Using CSS3 general sibling selector to produce a left/right click gallery. Using webkit keyframes to continuously anumate a set of cubes. The Tower of Hanoi puzzle in collaboration with Javier Román Cortés Using CSS3 and keyframes to produce an interactive marquee Using Microsoft filter to produce a dropdown menu with drop shadows and gradient fill overlays Using Microsoft filter to produce a drop shadow for all versions of IE to match the css3 shadows of Firefox etc. Using Webkit keyframes to produce an analogue clock. A small javascript routine is used to set the correct time on page entry. Using Webkit keyframes to produce an auto-run digital time to show how long you have been on a page. Using Webkit keyframes to produce an auto-run slideshow with pause facility using absolutely NO javascript. For Safari and Chrome at the moment. In collaboration with Javier Román Cortés I have produced an infinite zoom-in set of images animated with nothing more than Safari CSS webkit styling. To celebrate 20 years of Photoshop. Using CSS3 to style different color square boxes into 3D spheres. Using CSS3 to produce a multi purpose dropdown menu system that can contain any information. Using CSS3 to parallax scroll text. The previous demo adapted to have a continuous left to right rolling can. Using CSS3 selectors to animate two static images to give 3D effect. Using CSS3 selectors to animate a series of static images. Using CSS3 to produce a slide up/down multi column lists menu system Using CSS3 'general sibling' selector problems when using :hover in Safari and Chrome Using CSS3 styles to produce a tabs menu with no graphics and no extra markup The Image Magnifier of 2005 revisited to improve quality and make simpler and smoother. Using CSS3 styles to produce a sliding information panel over images. Using CSS3 styles to produce buttons without graphics and no extra markup. Using CSS3 styles to produce a zoom/fade-in photo gallery. Using CSS3 styles to produce a sliding photo gallery. Using CSS3 styles to produce an animated fade-in menu with curverd corners, drop shadows and gradient fills. Using CSS3 styles to produce an animated slide down/up menu identical to javascript versions. Using the same NEW method as the previous menu to have the sub line appear above the top level links. This one has simpler styling. Using the latest no hack system to have top level images and dropdown boxes cntaing images and text Using the same NEW method as the previous menu to have the sub line appear above the top level links. A dropline menu using a totally NEW method that requires NO hacks and works in all browsers. Also allows tabbing. A revised and simplified 'Slideshow' that now eorks in Safari(PC) and Chrome. A practical use of CSS play's 'Clickbox'. A CSS only version of Lightbox that now works in Safari(PC) and Google Chrome. Back to the very basic styling to produce this no hacks dropdown/flyout menu. CSS play's 'Clickbox' version of Lightbox that now works in Safari(PC) and Google Chrome. A small restyle to make this menu system more robust and have an easy menu trail style. The multi level dropdown/flyout menu with the path through the menu highlighted. A skeleton flyout menu with the path taken through the menu highlighted.. The previous menu with the ability to adjust the widths of all levels and center each level. The previous menu with the ability to adjust the widths of all levels. A multi-level drop/fly menu using the new system with manually adjusted widths for top and sub levels. A multi-level drop/fly menu using the new system and mouse clicks instead of hovers. Using the new multi-level menu system this has a better indication of the path taken through the menu structure. The no hacks, no javascript, no tables and no conditional comments dropdown/flyout menu with png opacity background images. The no hacks, no javascript, no tables and no conditional comments flyout menu with tabbing. The no hacks, no javascript, no tables and no conditional comments dropdown/flyout menu restyled to work correctly in all browsers, with tabbing. A vertical flyout menu with multi column lists ans opacity. Using the no hacks dropdown system and a little extra styling to produce a dropdown button menu with highlight on hover. A simple anywidth CSS flyout menu with an easy method of having a breadcrumb trail. A dropdown version of the previous multi-line flyout menu A simple multi-level flyout menu with fixed widths and multi-line text. A dropdown menu using top level png images with the submenu used for image information. The previous gallery but with the thumbnails arranged vertically instead of horizontal. A click gallery using a sliding set of thumbnail images to navigate. The large image is permanently on screen until another image is chosen EVEN when refreshing the page. With descriptive text and linking option. A click gallery using 'Previous' and 'Next' preview images to navigate, in which the large image is permanently on screen until another image is chosen EVEN when refreshing the page. With descriptive text and linking option. A click gallery using 'Previous' and 'Next' buttons to navigate, in which the large image is permanently on screen until another image is chosen EVEN when refreshing the page. With descriptive text and linking option. A more complex method of replacing all text with images in a single level dropdown menu using individual png images. A simple method of replacing all text with images in a single level dropdown menu with rollover. A method of creating irregular shaped image maps with ease exploiting an odd effect when using Microsofts AlphaImageLoader to render background PNG images. Only for IE though. A method of replacing menu link text with rollover png images that works in IE6 and also degrades well when images are of and/or CSS is off. A CSS slide show using numbers with a hover/click state but with the controls only visible when reqired. A dropdown menu with current page styling and the ability to override the current page style when hovering other items. A CSS dropdown menu using an image map for the top level items with a rollover state, using just two images. A vertical sliding menu with current page styling and the ability to override the current page style when hovering other items. A dropdown menu with top level centered and sub menus dynamic widths to fit the longest text, and all in shades of grey and black. It is now possible to use ttf fonts in your web pages. There are now 5 browsers that support @font-face A zoom icon with a popup sub menu in a speech bubble. A CSS ONLY answer for 'max-width' in IE6. No javascript or Microsoft expressions. Added a click to open and also a reclick to close feature. A variation of the hover slide menu in which the top level links have two options. A click gallery in which the large image is permanently on screen until another image is chosen EVEN when refreshing the page. ..and finally a multi level version using the new system, again with no hacks, table, conditional comments or javascript. For those who prefer nested unordered lists for their menus, again with no hacks, table, conditional comments or javascript. A horizontal pullup menu to continue with this series, again with no hacks, table, conditional comments or javascript. A fly left version of the previous menu, again with no hacks, table, conditional comments or javascript. Using the latest techniques for no hacks menus this is a vertical flyout version with all the features of the slide menu including tabbing, and the sub list stays open when clicking the top level. Using the latest techniques for no hacks menus this is a vertical slide version with all the features of the dropdown menu including tabbing, and the sub list stays open when clicking the top level. A definition list menu using the new menu system to simplify the styling Afer all this time there is finally a dropdown menu that doesn't use javascript, table, conditional comments, hacks, extra markup and works in all the major browsers including IE6. A vertical menu with a 2 tier flyout and the last tier can contain any information you like including images, text and further links. Zooming a single image on hover. A simple hover over thumbnail gallery with a zoom feature. An experimental menu to explore the possibility of having sliding images on hover Adding the use of png images for IE6 and giving a smoother zoom animation Another version of the CSS only fisheye menu, this time with expanding images and associated text. A very simple method of magnifying an image using just CSS A similar menu to the previous image version, but this time using expanding text on mouseover. A CSS only version of the popular javascript dynamic menu. Fixing a problem when having vertical divide lines between horizontal link and using rollover images. A droplist menu using top level blocks containing images with text and links. A previous professional droplist menu with the additional feature of a dropline heading with droplists giving extra lists within the same dropdown. Back to basics to show how to use the latest techniques to produce a flyout menu with the widths of the sub levels automatically sized to fit the longest text. There have been many methods of centering unordered lists of unknown width, but this is the one I have found to be most robust. As promised, the previous filmstrip gallery rotated into a vertical format with a few enhancements. A gallery using a horizontal scrolling filmstrip containing negative/positive thumbnails and landscape/portrait large images with show/hide descriptive text. A dropline with dropdown menu which has widths automatiaclly set to suit content, the top level centered and all sub levels centered beneath the parent item. A version of my mini tabbed pages with the ability to have a tab open on page entry. A droplist menu with method of setting the number of columns in each list and the option of a full width bottom bar for extra linking. An anywidth menu with the top level centered and the sub menus as wide as required with pullup and flyout left/right. A version 2 of the dropline, dropdown and flyout hybrid menu. A mixed gallery using just html/css to switch the contents of an 'object'. The content can be text, images, shockwave/flash and quicktime movie. A three link block of information with rollover effect. A conversion of the horizontal scrolling gallery into a vertical version. A multi level dropdown flyout anywidth menu with dropdown and flyouts that are centered beneath the top level links, with the ability to have a left or right flyout. A dropline anywidth menu with droplines that are centered beneath the top level links which are also centered. A single level dropdown anywidth menu with dropdown that are centered beneath the top level links. A photograph gallery using just html/css to switch the contents of an 'object' for browsers that understand and an iframe alternative for IE. A single level dropdown menu with multi-columns, headings and curved corners using sliding doors techniques for the dropdowns. A dropdown menu with any width sub menus and the option of left or right dropdown/flyouts. After much searching of the web and with the arrival of IE8, I now have a method of positioning horizontal menus of unknown width left / center / right in the containing element. A dropdown menu that uses a table to hold the dropdown information. A second 'any width' flyout menu, this time with an over run area and gapping between menu items. Applying the iframe shim fix to the variable width dropdown/flyout menu system. Using expressions to add the iframe and styling. The fourth in the skeleton menu series restyled to use recent developments to make it work in all versions if IE from IE5.5 to IE8. A restyled version that allows dropdowns and flyouts to the left and right. Centered top level list and different color sub levels. Even works in IE5.5. A flyout version of the 'any width' dropdown menu. A simplified method of producing a centered dropdown and flyout menu with variable widths depending on text content. A CSS only method of hovering over a horizontal menu link to change the whole menu background image. A CSS only method of hovering over text OR associated images to highlight both AND grey out other images. A dropline menu which uses sliding doors tabs for the top level and a horizontal scrolling dropline which has images and caption. A click version of the Light Box for all browsers except Safari and Chrome A CSS take on the javascript LightBox using hover over thumbnail images A photograph gallery with hover to show large images with linking to full size images or another page. A second version of the tabbed pages with a default page open on entry. An update to one of my early 'one page' demonstrations to bring it up to date using the latest CSS techniques. An update to one of my early gallery demonstrations to bring it up to date using the latest CSS techniques. A centered dropline, dropdown, flyout menu, using the latest centering technique, with current selection option A centered dropdown menu, using the latest centering technique, with flyout images A set of 7 variations on the 3 column equal height theme. All full width with header and footer, a mixture of fixed and percentage column widths and no images. A fluid layout with max/min width, header/footer and multiple percentage columns ALL reaching the footer using NO images. Tree Frog menu revised to have scrolling sub menu lists to save space. Applying a simple method of centering single level variable width, float left menus. At last a stable cross browser method of centering a variable width float left dropdown menu. Just revisiting an old bug in IE6 for those who are still strugglimg for an answer. Not strictly CSSplay news but a new project for 2009. A new site for CSS only menus. A new layout for a change. This one is semi-fluid 100% height with a semi-fixed footer. Another in the dropline series. This one has a simplified method of adding a 'current' selection. A simple dropdown, flyout menu with the sub links sliding over the flyout menu lists. The previous menu expanded to have sub menu icons with descriptive text. A simple single level circular menu using icons with mouseover descriptions. A horizontal concertina menu that takes on the appearance of a bookshelf with lever arch files. A simple dropdown menu with no graphics but plenty of 'style'. A CSS only version of the vertical sliding menu published on stunicholls.com. A sliding doors version of inline blocks to fit any text width. A version of the previous demo that uses sematically correct markup to achive the same results but fails in Safari(PC) and Google Chrome which do not undestand the styling. An easy, validating method, to apply block styling to inline links. A follow on from #4 but using another single line expression to place the iframe shim and work out the size required. A follow on from #3 but using a single line expression to do what suckerfish does with javascript. The answer to the problem of having variable width for each dropdown and flyout submneu without the need to style each width. The first in a series of fly line menus, this one using icons and image replacement techniques Image replacement techniques to have top level icons and a simple method of displaying the meaning of each icon. The 7th professional dropline menu which can have as many droplines as you wish. The demo goes up to 5 lines. The thirteenth in the professional dropdown menu series. This one has full png transparency to give a translucent appearance to the menu with a single level dropdown menu. The fourth in the professional dropdown menu 3D series. This one has full png transparency to give a translucent appearance to the menu, variable width sub menus and incorporates an IE6 fix for select boxes. A third method of fixing the IE6 bug when dropdown menus are transparent and dropping under select boxes. A second method of fixing the IE6 bug when dropdown menus are dropping under select boxes. The 6th professional dropline menu with ability to have a current selection and dropline highlighted. Another CSS game, just for fun and to show that it can be done. Uses small javascript routine to read mouse clicks and hovers. The logic, however, is all CSS. A demonstration for Safari users only to show how this browser is expanding its webkit repertoire. A vertical example of a concertina menu with the first level open as default. An experimental menu using horizontal scrolling images. A flyout menu with the facility to add a breadcrumb trail to the current page. A horizontal concertina menu for displaying further information including list, images and text. An easy method of fixing the IE6 bug when dropdown menus are dropping under select boxes. The third in the professional dropdown menu 3D series. This one has full png transparency to give a translucent appearance to the menu. Solving the problem of having unselectable links when placed over AlphaImageLoader pngs. The gallery that many visitors have been asking for. The simplest gallery with three extra features. The second in the professional dropdown menu 3D series. This one has greater flexibility in size and color. A professional dropdown menu with a 3D look using png shadows. A fix to get flyout (and dropdown) menus to show over a flash object. Finally an easy fix for the IE5.x and IE6 bug where a select box will always appear on top of a dropdown menu list. All done with CSS and an iframe shim. Another version of the dropline dropdown hybrid menu to add a flyout stage. A follow on from the sliding gallery but this time using clicks to open each set. Also has additional features allowing the use of landscape and portrait images and descriptive text. A menu that many visitors have asked for. Using images in place of text. The seventh in the professional drop down series. This one has a current drop-line feature. A method of producing CSS only circular hot-spots on an image map. A vertical sliding menu with flyout sub levels based on my javascript 'tree frog' series. A photo gallery in which the photos can be split into various category lists which appear in a sliding menu system. A dropline menu split into two parts with left aligned and right aligned top level items. A hybrid menu using a dropline and dropdown sub menu system The second in the skeleton series, this time for use on dark backgrounds. Continuing the Professional horizontal series with menu #17. Continuing the Professional dropdown series with one that allows section headings and dividers in the submenus. A simple menu with variable width drop-down and flyout sub levels in which the widths are as large as necessary to contain the text. The second in a series of galleries using just a little javascript to control the styling and produce a left/right thumbnail selector. A Photograph Click Gallery using a little javascript to give more control over the presentation. A revised 'show me some more' demonstration using a small javascript 'toggle' routine to alter stylesheet class names. The previous 'Tree Frog' menu revisited and restyled into a vertical slide menu with sub level flyouts. Back to a more 'normal' menu which has a 'pull down' action with the top level list item dropping down to reveal the sub menu. An experimental menu using javascript 'click' to open the top level drop down list and 'hover' to open sub levels. Uses a small javascript routine that styles 'li:click' and li:hover. An experimental menu using 'click' to open the top level drop down list. Uses a small javascript routine that styles 'li:click' in a simailar way to the suckerfish 'li:hover'. Another drop down menu in the professional series, this time with top level image replacement and variable width sub levels. A scrolling Image Map with fixed information panes. Professional drop down menu with variable widths for the drop down. Convertion of one of the simple horizontal professional series into a drop down menu. Professional looking drop-down menu using text over background images. Professional looking drop-line menus in four different colors. A 3D look maze puzzle made entirely with CSS. Highlighting a transparent border styling error in IE7. How to style transparent borders in IE5.x and IE6 using just CSS border styling and a couple of extra divs. A bit of lighthearted fun using just CSS. A professional quality sliding doors drop tab centered with text links and description option. A professional quality sliding doors drop-line centered with text links. A professional quality sliding doors drop-down with text links. A professional quality drop-down menu with top level image rollovers. A series of professional quality horizontal menus using the 'sliding doors' techniques. Back to the 'traditional' menus using conditional comments, this is a vertical menu with up to five levels of flyout. The flyouts have alterante pull-up and drop-downs to save vertical space. Also has overlap and overrun for ease of use. Probably the menu in the 'Magic Menu' series for a while. This one is a vertical flyout menu with a difference. Again it uses no javascript, no conditional comments, no behaviors and no .htc file, just css and html. Another menu in the 'Magic Menu' series. This one uses no javascript, no conditional comments, no behaviors and no .htc file, just css and html. Two new experimental dropdown menus added. Both using a small javascript routine, no conditional comments or hack, and both with multiple flyouts.. Look under 'Recent Pages' > 'Menus'. Three new experimental dropdown menus added. One with no conditional comments or javascript but does not support one browser, one with a small javascript file for all browsers and a final one without any javascript or conditional comments for all browsers. Look under 'Recent Pages' > 'Menus'. Three new menus added, a hexagon shaped, a 'shutter' dropdown and an enlarging with shadow effect. Based on the ziggy menu this one is lozenge shaped and has transparent borders which work in IE5.5 and IE6 using just CSS. Four new demonstrations including a zig-zag dropdown menu, tool links and transparent borders in IE5.5 and IE6 using just CSS. Two new menus showing paged information with a default page when initially displayed. One new experiments under 'Demos' showing image mapping maps, and FIVE new menus under 'Menus' Two new experiments under 'Demos' showing tooltips and background color change on hover Four new horizontal centered menus and a Menu Builder for the simplified flyout menu. Make building the html and css a whole lot easier. A new six level dropdown menu with overrun and overlap and simplified CSS styling A new five level flyout menu with overrun and overlap and simplified CSS styling A new slant on the original image map technique showing speech bubbles with embeded links Three new demonstrations, 'CSS only speech bubbles', 'Overlap and overrun menu' and 'Chunky borders' Two new gallery slideshows showing the power of CSS Two experimantal overlapping tab menus using small images and plenty of CSS. A method of compressing six mini information pages into one. A tabbed menu with 45 degree side slopes How to make an image gradually appear using just CSS How to center a float left sliding doors 100% clickable menu. The last one in this series to show how compact this type of menu can be. A menu based on the sliding doors tab method with a drop line for each tab. Also demonstratets how to style a 'selected' link'. How to make A List Apart's Sliding doors clickable over the whole tab. No extra markup, just a small style change. CSS play has redesigned to take on board all the comments over the last year and improve the look and navigation of the site. Four totally new drop down menus using definition lists. CSS only and compatible with all the latest browsers. Twelve or more demonstrations, menus and examples have been added to the list at CSSplay A much simplified CSS solution to CSS only flyout menus now with three sub levels. CSSplay goes through a major update and adds a method of adding pop-up images to your inline links. CSS PLaY has another small redesign of the menu system (to stop visitors getting tired of the same old look ;o) A page for fly-out examples showing what is possible with the 'CSS PLaY only' technique. Uses a much simplified single style sheet. A page of dropdown/flyout examples showing what is possible with this 'CSS PLaY only' technique. Also a further animation based on the 'streaker' at http://www.cssplay.co.uk/menu/streaker_two.html which is best viewed in Firefox v1.5x and Opera v8.54 A new demonstration to show that css can be dynamic in Firefox and Opera. Also a new page for drop-down examples shwn web ready ideas. A redesign of the sub menu system to make pages easier to find, a demonstration of true css animation for Firefox and a gradient image magnifier can be found in this latest site update A variation on the photo gallery theme that will accomodate both landscape and portrait photos and a pop-up bubble for further information which can contain further link(s). How Internet Explorer's conditional comments can be used to target non-IE browsers and a combination of specific IE browsers with non-IE browsers. A re-write of the CSS PLaY's previous examples has produced a multi line, drop down menu that can be resized yet stay in working order. A follow on from the multi-page photo gallery with an additional feature. A new css only photo gallery system modelled around the Suckerfish HoverLightbox. Four new menu ideas based on the recent method of producing validating cross browser fly-out and drop-down menus. Based on the cross browser fly-out and drop-down menus, this is the drop-line version which again works without javascript or behaviors and is compatible with Internet Explorer. Why not try advertising by using your favicon. This favicon page offers an inexpensive way of promoting your web site. CSS PLaY finally comes up with a w3c cross-browser drop-down cascading menu system. CSS PLaY solves the problem of nesting links within links and passing w3c validation in Internet Explorer with this nested link calendar. A new demonstration showing how to produce an irregular shape image map with a hover effect.. CSS PLaY has three new demonstrations including a new CSS ONLY flyout menu that works in Internet Explorer and an update to the click gallery to add options to place the thumbnails to the left, right and bottom of the images. CSS PLaY boasts four new demonstrations including a new magnifying menu and an update to the cross browser drop domn menu to add a second level cascade in all browsers. Stu produces another pure css puzzle for you to solve. And finally a method of creating circular links without the normal square selection area. A method of creating links that are not rectangular (the example is an interlinking cross array) and with no overlapping of link areas. Four methods of applying text over an image by making the area beneath the text opaque. Several of the methods also work in Opera. For Firefox, Safari, Opera (in fact all browsers but IE) a method of creating two color headers and drop shadow text without having to duplicate html information. IE sees only plain text.