background preloader

CSS demonstrations

CSS demonstrations
Below is a list of CSS demonstrations that range from the simplest for beginners, to the most complex for advanced users. If you do not find what you are looking for then please contact me with your requirements and I will let you know if it is possible using just CSS. Avatar ParadeSimple image display using :hover. What's on TVAnother method of displaying images using :hover. A photograph galleryA photo gallery using thumbnail images. A photograph gallery - with links » 20-02-2009A photo gallery using thumbnail images amd linking to large images. A photograph gallery - using <object> » 06-06-2009A photo gallery using the object element. A mixed gallery - using <object> » 22-06-2009A mixed gallery using the object element. Photo Gallery Mk.IIA photo gallery with horizontal scrolling. A gallery using :target » 25-11-2011A gallery using :target with no browser window jump and no cycling back though the image using the 'back' button. Sliding photo-galleriesCompressed images that expand on :hover.

http://www.cssplay.co.uk/menu/

The Secret Law of Page Harmony - Retinart “A method to produce the perfect book.” The perfect book. This is how designer-genius Jan Tschichold described this system. Not the ok book, nor the pretty good book, but the perfect book. The Future of Style The Future of Style aggregates posts from various blogs that talk about the development of Cascading Style Sheets (CSS) [not development with Cascading Style Sheets]. While it is hosted by the W3C CSS Working Group, the content of the individual entries represent only the opinion of their respective authors and does not reflect the position of the CSS Working Group or the W3C. CSS Scoping, CSS Line Grid First Public Working Draft

CSS Swag: Multi-Column Lists One of the minor holy grails of XHTML and CSS is to produce a single, semantically logical ordered list that wraps into vertical columns. The ideal situation, in my view, would be a single XHTML list whose wrapping is controlled entirely by CSS. Further, the wrapped list should tolerate text resizing (easily accomplished by styling everything in ems). CSS and the browsers that support it don’t yet provide us with “vertical wrap,” so we have to augment basic list markup with additional attributes and styling rules to achieve the effect. I’ll take you there—or as close as we can get using today’s browsers—but along the way let’s look at a variety of ways to accomplish a similar effect.

Powerful CSS-Techniques For Effective Coding Advertisement Sometimes being a web-developer is just damn hard. Particularly coding is often responsible for slowing down our workflow, reducing the quality of our work and sleepless nights with pizza and coffee laying around the laptop. Reason: with a number of incompatibility issues and quite creative rendering engines it sometimes takes too much time to find a workaround for some problem without addressing browsers with quirky hacks. Easy Slider 1.7 I got a lot of emails and feedback about my easySlider plugin, thank you all for that. However, I have to apologize to all of you who sent emails asking for a little help with implementation or small bug fixes. I simply don’t have the time to answer all of your emails.

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along. Before we get started, consider using one of our HTML5 Templates or CSS Themes for your next project—that is, if you need a quick and professional solution. Otherwise, it's time to dig into these techniques. Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.

CSS Layout - 100% height Min-height The #container element of this page has a min-height of 100%. That way, if the content requires more height than the viewport provides, the height of #content forces #container to become longer as well. Possible columns in #content can then be visualised with a background image on #container; divs are not table cells, and you don't need (or want) the fysical elements to create such a visual effect.

Designing for the Web The web professional's online magazine of choice. In: Columns > Design in Theory and Practice By Joshua David McClurg-Genevese Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser. by Matthew James Taylor on 26 July 2008 A lot of people want centered menus on their website but for the CSS novice this task seems impossible. If you do a search online you will find a few centering methods but most of these rely on CSS hacks, JavaScript or non-standard CSS rules that are not supported by all browsers (display:inline-block; is an example). In this post I'm going to show you my secret method of achieving centered tabs that does not use any CSS hacks and will work in all the common web browsers. It is also compatible with my perfect liquid layouts. Let's start with a basic example then I'll explain how it works.

HOW TO: Get Started with Less Framework The Web Development Series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace's hosting solutions here. For the past few years, CSS grid systems have become increasingly popular with web designers. Thanks to efforts like Nathan Smith's 960.gs, designing with a grid is less complicated, and better looking sites can be crafted with ease. One of my favorite CSS grid systems of late is Less Framework. A List Apart: Articles: Sliding Doors of CSS A rarely discussed advantage of CSS is the ability to layer background images, allowing them to slide over each other to create certain effects. CSS2’s current state requires a separate HTML element for each background image. In many cases, typical markup for common interface components has already provided several elements for our use. Article Continues Below One of those cases is tabbed navigation.

Paper.js Vs. Processing.js Vs. Raphael Advertisement Before drawing anything in a browser, ask yourself three questions: Do you need to support older browsers?If the answer is yes, then your only choice is Raphaël. It handles browsers all the way back to IE 7 and Firefox 3. Raphaël even has some support for IE 6, although some of its underlying technology cannot be implemented there.Do you need to support Android?

Related: