CSS Gradients for IE9 « CSS3 Wizardry This works with Desktop IE9, Desktop Firefox, Desktop Chrome, Desktop Safari, Desktop Opera, iOS, and Android. Attention! IE9 will not destroy the world, kill babies, or take away your home or job. Simply put, IE9 is the best browser Microsoft has ever released. Shortly after the initial launch of the beta of IE9, I began testing to see what kind of support it had for all the rich and exciting features CSS3 offers for Web layout and interaction. So what didn’t make it into IE9? When I look at IE9′s support for CSS3, it appears they decided to pick the low hanging fruit: border radius, drop shadow, multiple backgrounds, etc. I have no experience working with Adobe Flash. Presently my main area of focus is the mobile Web on Android, Blackberry 6, iOS and WebOS. I’m going to take one example of an HTML/CSS3 implementation of iOS’s popup dialog box which I originally created for use on iOS devices and show how I got it to render equally in Chrome, Firefox, IE9, Opera and Safari. That’s it.
CSS Play 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.
Try out the CSS 3 Template Layout module @Buguletzu – I’m interested to hear why you feel that makes it unusable. Most enhancement scripts (i.e. JS rounded corner generators) don’t run until the DOM is loaded, do you feel they’re unusable too? Admittedly there is an annoying FOUC-like moment when loading the page, but I don’t see why that should make it too big a deterrent to use. Also of course since it depends on JS, I wouldn’t recommend anyone use the script if they care about how the layout looks for non-JS users. @David – While I appreciate the sentiment, I have the feeling that implementing this in a browser would be significantly harder to do. :) And I too would love to see some experimental browser implementation.
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. Article Continues Below The ideal situation, in my view, would be a single XHTML list whose wrapping is controlled entirely by CSS. 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. We’ll be shooting for something that looks a bit like this: (Why, you’ve doubtless been pondering, is this article entitled “CSS Swag”? Watch your step#section2 I’ll warn you up front. While each of these methods is simple enough to set up, the acid test comes when you add or remove list items in the course of website maintenance. The reality is not so ideal. So why do we bother? To work, then. First, expunge all white space#section3 The default rendering of an XHTML ordered list in browsers is that of a single vertical series of items:
Current page higlighting with CSS This is a basic test page. You can read the article here. First we'll set up our navigation list. I have chosen 4 sections for ease, and its best if navigation sections are kept short anyway: <ul id="navlist"><li><a href="index.html" >Home</a></li><li><a href="products.html">Products</a></li><li><a href="faq.html">FAQ</a></li><li><a href="contact.html">contact us</a></li></ul> Next we need to add a unique class or id (doesn't really matter which) to each of the section pages: <ul id="navlist"><li><a href="index.html" id="homenav">Home</a></li><li><a href="products.html" id ="prodnav">Products</a></li><li><a href="faq.html" id ="faqnav">FAQ</a></li><li><a href="contact.html" id ="connav">contact us</a></li></ul> Before we leave the HTML, on each of the section pages we need to add a unique id to the body tag: This allows us to specify the highlighted tab. Finally, we add the css rules to highlight the correct tab.
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. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10.
CSS 3 selectors explained In September and October of 2005 I published a series of articles that explained the selectors that are available in CSS 2.1. A quick summary is that most of the selectors described in those articles can be used now in modern browsers like Mozilla/Firefox, Safari, and Opera. We just need to wait for Internet Explorer to catch up before we can start using the full power of CSS 2.1 selectors. The good news is that Internet Explorer will catch up, at least to some extent, with the release of version 7. If we look a little further ahead, there are even more powerful selectors waiting to be implemented and used in CSS 3. In this article, the specification I am referring to is the Selectors W3C Working Draft 15 December 2005. I am not going to explain the basics of how CSS selectors in general work here. First, a quick overview of the selectors that are new in CSS 3: If all that doesn’t make much sense right now, don’t worry. Substring matching attribute selectors The :target pseudo-class
Formalize CSS - Teach your forms some manners! CSS3 technology in action: Design examples Ryan Boudreaux highlights some beautiful examples of CSS3 design projects by some individuals who are at the forefront in tinkering with the new code possibilities. While CSS3 and HTML5 technologies are still fresh for most organizations, there are many trend-setting web developers who are taking the new tools by storm. This post will highlight several examples which utilize the full potential of CSS3 in delivering excellence in design, look, and feel. The first group includes several projects and experiments by individuals tinkering with CSS3. You can also view the examples below in a gallery format here. CSS3 Analog Clock by Paul Hayes is his quick project and experiment that works in Safari and Google Chrome. Figure A Snow Flakes by Natalie Downe utilizes examples of CSS3 animation, text-shadow, transform, and keyframes to create a page of gently falling snow flakes. Figure B Figure C Figure D Figure E Figure F Figure G Figure H Figure I Figure J
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. In May 2010, Ethan Marcotte's "Responsive Web Design" helped spur a movement of building websites designed to fluidly adapt to various platforms and device sizes — think mobile optimized sites and tablet-specific layouts — without the need for an entirely different design or special URL. Less Framework is, in my opinion, one of the best ways for web developers without lots of experience in designing responsive websites (or media queries in general) to take advantage of this new trend. Knowing the Basics Guides and Templates Less-Ready Themes
csswizardry/CSS-Guidelines CSS Layout Generator About the CSS Layout Generator The CSS Layout Generator was first released by Tony Aslett in October 2003, since then over 871,000 layouts have been generated. Updated in November 2010, HTML5 doctype can now be selected and a simple HTML5 template with appropriate tags will be created. Other HTML and XHTML doctypes are still available. The generator helps you create the structure of your website template using valid HTML and CSS. You can create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. The generator requires a modern DOM capable browser with JavaScript enabled. Instructions To create your layout select the structural elements your site requires (header, footer, columns). Info popups are available where you see InfoMore info example :) icon, just hover over it for more information. Join the CSS Forum to suggest changes or ask for help where needed. Author: Tony Aslett
Home - Scalable and Modular Architecture for CSS HTML and CSS Table Border Style Wizard Compatibility Notes If you are using Internet Explorer 6, you should be able to use this wizard with only minor limitations. This page does not work with Opera 8 or IE 5 on Mac. Internet Explorer 6 does not support the border-spacing CSS2 table property. It also does not support any Netscape-specific CSS properties that are prefixed with -moz, and has limited support for the cursor property. This means you will not see all the effects in this wizard unless you use a browser like Firefox. Table Border Style Wizard Welcome to the totally revamped HTML and CSS border style wizard! The style sheet code generated by this wizard shows the easy way to apply a style to a table. The above example doesn't show it, but you can also efficiently alternate the row colors in an HTML table by using inheritance. The -moz-border-radius style tag will be rendered in browsers based on the Gecko Runtime Engine. HTML Toggle Buttons This is a lot of work to do something fairly simple. Get Firefox Now! Links