サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
www.cssplay.co.uk
CSS DEMOS › Rotating box with face rotations Date : 7th March 2012 For Firefox, Safari and Chrome This demo is too wide for your mobile screen. Please view on a tablet or PC. Information I know that this has been done many times before but I thought that as Firefox now supports CSS3 3D transforms I would revisit it and put my 'twist' on this. So not only does the box spin, it also has the images o
CSS MENUS › Sliding Icons Menu Date : 19th January 2011 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Mail Address Book Calendar Notes Safari Browser Store Timer Settings Information Just a simple icons menu with a slide action to show a line of text to describe the meaning of each icon when hovered. The slide action will be seen in Firefox v4
CSS DEMOS › CSS3 - The future now - Animated Slideshow Date : 22nd November 2010 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. New Zealand - Australia - Singapore - October 2010 Photographs by Stuart A Nicholls 1 2 3 4 Information Absolutely NO javascript. A simple slideshow that makes use of CSS3 styles to provide sliding animation of the thu
BOXES › CSS3 Background Images - 100% width/height of container Date : 28th July 2010 For all browsers A Box with known width and height A Box with known width and height Caramels caramel tiramisu. Jolly jelly cake fairies. Biscuit roll tiramisu brownie topping. Tart bear claw muffin. A Box with known width and unknown height Sugar plum sesame snaps cotton candy chupa chups jelly lemon drops. Ging
Information I have been working on this menu on and off for a few weeks with many failed attempts to get it to work cross browser. However I have finally managed to produce this version. The top level links use the 'sliding doors' technique so that they can accomodate any length text (within reason) and are centered in the menu. The drop line links use changing background images, can have text of
Founded in the US in 1892, has been the longest-lasting and most successful of the hundreds of fashion magazines that have come and gone. Increasing affluence after World War II and, most importantly, the advent of cheap colour printing in the 1960s led to a huge boost in its sales, and heavy coverage of fashion in mainstream women's magazines - followed by men's magazines from the 1990s. Haute co
CSS MENUS › Single slideout menus Date : 3rd May 2010 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Menu version 1 - using images for text Home Products Services Advertise Privacy Menu version 2 - using text Navigation HomeBack to the home page ProductsSee our range of electronics ServicesWe repair and refurbish AdvertisePlace your ads here Pr
CSS DEMOS › CSS3 Buttons - no graphics and no extra markup! Date : 27th January 2010 For all modern browsers Aqua buttons Black Aqua Red Aqua Blue Aqua Green Aqua Vista buttons Black Vista Red Vista Blue Vista Green Vista Information Now we are on a roll :) This demonstration works in Firefox, Safari and Google Chrome and shows how to style buttons using just border radius, drop shadows and gradie
CSS MENUS › Zoom icon menu Date : 17th April 2010 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Information Just a simple implementation of CSS3 transitions to produce a zoom menu that previously require javascript. The styling is ready for Firefox once they add CSS3 transitions support to their browser. At the moment this works in Safari, Chr
CSS DEMOS › CSS play - F.a.S.T - Fit and Shrink Technique Date : 11th April 2010 For all modern browsers In collaboration with Román Cortés The Problem How to fit images of unknown sizes into fixed width and height boxes and maintain their aspect ratio using just CSS. The four sample images shown below are actual size. The Answer The boxes below are 180 pixels square and all use the same code and
Information A centered dropline menu with current page selection on page entry using two classes within the code. The dropline has transparency so that the background can show through. Nothing too exciting until you hover over the top level links. The current page selection then vanishes and it operates as a normal dropline menu. Moving the mouse off the menu will restore the current page selectio
CSS MENUS › A CSS Select List - with current selection Date : 13th march 2010 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Womens Wear Dresses Coats & Jackets Jeans Knitwear Shirts & Blouses Skirts Shoes Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non nunc dolor. Morbi vestibulum volutpat porttitor. Mens Wear Jackets Trous
CSS DEMOS › Shadow Boxing for all Date : 12th February 2010 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Shadow Boxing I This box will stretch to fit the content and the box shadow will fit the resulting size of the box. This will give a shadow to the box in IE5.5, IE6, IE7, IE8, Firefox, Safari and Chrome. Opera is yet to produce a version t
CSS DEMOS › CSS3 - Zoom...zoooom...zoooooom! Date : 9th February 2010 For all modern browsers Information Working in collaboration with Javier Román Cortés I have produced this demonstration to celebrate 20 years of Photoshop™. In this demonstration we have experimented with the webkit and moz keyframes style to animate 26 images to produce an infinite 'Zoom-In' effect. The idea and the images are
CSS DEMOS › CSS3 Zoom Gallery Date : 27th January 2010 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Information Adding css3 styling to my simple gallery to produce a fade-in and zoom effect for the large images. As with the previous slide gallery this demonstration is only 'fully working' in Safari and Google Chrome which has the large images
CSS DEMOS › CSS3 Animation - Just for fun Date : 1st February 2010 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Click to view animation - Firefox and Opera - and now (10th March 2011) Safari and Chrome Hover to view animation - Safari, Google Chrome, IE8, Firefox and Opera Information After looking at another 'Test you skills' quiz on Sitepoi
CSS DEMOS › Image magnifier Date : 28th January 2010 For all modern browsers Information Original version dated 14th October 2005 revised This demonstration has been completely restyled to produce a simpler smoother magnifier. There is now a scan area indication over the small image and the less chunky movement on the large image. IE6 is slightly jumpy in its scanning of the small image but all ot
CSS MENUS › CSS3 - The future now - menus fade in/border radius/drop shadow/gradient fill Date : 24th January 2010 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Home Contact Us Email Telephone Online Form Snail Mail Address Resort Ski Hire Facilities Main Ski Slopes Beginners Slopes Intermediate Slopes Advanced Skill Levels Local Nearby With i
Information Just a glimpse of the future of CSS, a demonstation of what is coming with CSS3 but not quite here yet. This demonstration is only visible in Safari and Google Chrome and even then only using -webkit styling. Safari has better quality rounded corners similar to those of Firfeox, whereas Google Chrome has very 'blocky' corners. But no doubt this will be seen in more browsers in the comi
Just click any of the thumbnail images below to open a larger image which will be centered horizontally on the screen. Daffodil is a common English name, sometimes used now for all varieties, and is the chief common name of horticultural prevalence used by the American Daffodil Society. The photograph description text goes here. The photograph description text goes here. The photograph description
CSS DEMOS › 3D - CSS puzzle Date : 21st September 2007 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Information You wanted hard, so you've got hard. I have been meaning to attempt an isometric maze for some time now but have not found the time, but here it is at last. Your task is to enter the puzzle by the pathway at the bottom left and navi
CSS DEMOS › The streaker - just for fun Date : 8th July 2004 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Information Now for the FIRST css animation on the web. Just place your mouse on the left of the blue door and scan it quickly to the green door. The quicker the scan the better ;o) Remember...you saw it here first! Works in all the lates
CSS MENUS › Float drop menu system - multi level Date : 22nd December 2009 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Information Carrying on with this series I have now produced this version which caters for links that span more than one line and has a better indication of the path taken through the menu. As previous menus in this series t
CSS MENUS › Float drop menu system - multi level Date : 20th September 2009 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Information After a complete re-style this menu now functions correctly in all browsers. A multi level dropdown and flyout version with three flyout levels, which can be expanded to have as many as you like, to show that an
CSS MENUS › Horizontal sliding menu Date : Pre 2006 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Information Similar to the previous sliding tabs menu, but this one is horizontal (also uses opacity for browsers that understand). The should work in IE5.01, IE5.5, IE6, Opera 7.54, Mozilla 1.75, FF and NN 7.1. Also Mac Safari and IE5. Cascading
CSS MENUS › Simple multi-line flyout Date : 3rd December 2009 For all modern browsers This demo is too wide for your mobile screen. Please view on a tablet or PC. Home Contact Us Email Telephone Online Form Snail Mail Address Resort Ski Hire Facilities Main Ski Slopes Beginners Slopes Intermediate Slopes Advanced Skill Levels Local Nearby With instructor Snow boarding Expert Night Life Restaurants
Information Another dropdown menus using top level png images with alpha opacity. Hovering these images will produce a dropdown panel with the top level image enlarged and link information for the product. The dropdown panel is also a png image with alpha opacity. This menu has been tested and works in IE6, IE7, IE8, Firefox, Opera, Safari(PC) and Google Chrome. This menu also works correctly in I
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' 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.
次のページ
このページを最初にブックマークしてみませんか?
『stu nicholls | CSS PLaY | experiments with cascading style sheets | home page』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く