background preloader

Css Zen Garden Resources

Css Zen Garden Resources
Skip to: Navigation | Content | Sidebar | Footer mezzoblue CSS Zen Garden Resource Guide This page used to contain a list of links to various CSS-related resources. Because of many changes to basic CSS techniques and methods since it was first built in 2003, the former list has been retired. Zen Garden Coding & Design Process Write–ups In the words of the designers themselves, how certain Zen Garden designs came to be. Douglas Bowman — Design A design process revealed… Douglas Bowman — Coding …and the coding process that followed. Bobby van der Sluis — Design & coding Behind the scenes of Garden Party Return to the CSS Zen Garden | mezzoblue Home RSS Feeds For automatic notification when the css Zen Garden updates, there are two RSS feeds available: Official Designs News Updates The Zen of CSS Design Dave Shea & Molly Holzschlag New Riders, 2005 Book Link List Tired of typing in all the links we reference in the book? Get it: CA | DE | FR | PL | RU | UK | US Related:  CSS

CSS Zen Garden: The Beauty in CSS Design So What is This About? There is a continuing need to show the power of CSS . The Zen Garden aims to excite, inspire, and encourage participation. CSS allows complete and total control over the style of a hypertext document. Participation Strong visual design has always been our focus. You may modify the style sheet in any way you wish, but not the HTML . Download the sample HTML and CSS to work on a copy locally. Benefits Why participate? Requirements Where possible, we would like to see mostly CSS 1 & 2 usage. Luckily, designing this way shows how well various browsers have implemented CSS by now. We ask that you submit original artwork. This is a learning exercise as well as a demonstration. Bandwidth graciously donated by mediatemple .

CSS Zen Garden: The Beauty of CSS Design Creating an Executive Summary Word includes a special tool that creates automatic summaries of your documents for you. This tool is called AutoSummarize, appropriately enough. The summary can be any length you specify, and you can save it to a new document, add it to the beginning of your document, or simply highlighted it in place. This feature allows you to quickly create a starting point for an executive summary. Notice that I said AutoSummarize creates a "starting point." This is because the summary is based on what Word can figure out about your document. To use the AutoSummarize feature, follow these steps: Load and display the document you want to summarize.Choose AutoSummarize from the Tools menu. Figure 1. In the Type of Summary area, specify which of the four summary types you want to create.In the Length of Summary area, indicate by using the Percent of Original drop-down list exactly how long you want the summary to be.Click on the OK button. Do More in Less Time! Comments for this tip: -Allen Thanks,-Ross

CSS reference Use this CSS reference to browse an alphabetical index of all the standard CSS properties, pseudo-classes, pseudo-elements, data types, and at-rules. You can also browse a list of all the CSS selectors organized by type and a list of key CSS concepts. Also included is a brief DOM-CSS / CSSOM reference. Basic rule syntax Style rule syntax Style rule examples For a beginner-level introduction to the syntax of CSS selectors, please see this tutorial. At-rule syntax As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one you want. Keyword index Note: The property names in this index do not include the JavaScript names where they differ from the CSS standard names. Selectors Simple selectors Combinators Pseudo-classes Pseudo-elements Concepts Syntax and semantics Values Layout Major object types Important methods See also Mozilla CSS extensions (prefixed with -moz-) WebKit CSS extensions (mostly prefixed with -webkit-) Microsoft CSS extensions (prefixed with -ms-)

Accessibility Specification These are DRAFT specifications that are being authored by a joint Open University (IET-OCI-VLE) working group. The document specifies improvements to the accessibility of the Moodle course management system for version 1.7. Please post comments in the RFC - Moodle Accessibility Specification forum discussion. People Working group members: Chetz Colwell, Accessibility in Educational Media (AEM), Institute of Educational Technology. Other interested people: Stephen Bradley, LTS – Media, OCI. Diary Initial meeting, Thursday 8 June, afternoon. Moodle Accessibility Specification Introduction This accessibility specification has been developed by accessibility experts and Moodle developers at the Open University (OU), UK. There are well established design principles for accessibility in software design and electronic content. Scope The intended scope of this document is to set out an accessibility specification that applies to all elements of Moodle. Modules: Resource page, quiz, forum.

Beginner Concepts: How CSS Selectors Work Share this: helps you manage your projects. Are you new to CSS? In the examples below, the CSS would be in a file called something like style.css that is referenced from an HTML document called something like index.html. Here's what that HTML file would be like: <! And the CSS file would contain just the selector blocks like you'll see below. #ID selector #happy-cake { } <! #Leveling Up ID selectors are the most powerful type of selector in terms of CSS specificity. #Class Selector .module { } <! #Leveling Up Class selectors are your friend. #Tag Selector h2 { } <! #Leveling Up Tag selectors are at their most useful when changing properties that are unique to that HTML element. Don't rely on them too much though. #Attribute Selector [data-modal="open"] { } <! #Leveling Up You might argue that attribute selectors are even more useful than classes because they have the same specificity value, but can be any attribute not just class, plus they can have a value you can select by. :nth-child(2) { }

Accessibility Websites built with accessibility in mind are flexible in meeting different user needs, preferences and situations. Though these methods can increase usability for everyone who uses the Web they are often legally required to be implemented in a specific effort to prevent discrimination against people with disabilities. Starting points These are some readable introductions to accessibility that cover; what accessibility is, why it is important, as well as practical advice. Moodle-related accessibility coding guidelines Use CSS, but still use headings, strong and emphasis It is generally a good idea to separate a document's content HTML from how it is presented using CSS. Avoid using background images for important information Users of non-visual browsers cannot see images. Image alt and title attributes An alt attribute is required (even if empty) on all images. Links and buttons should be selectable and easily click-able Support dynamic interaction with ARIA attributes Use labels with inputs

align-content The align-content property is a sub-property of the Flexible Box Layout module. It helps aligning a flex container's lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect when the flexbox has only a single line. The align-content property accepts 6 different values: flex-start: lines packed to the start of the containerflex-end: lines packed to the end of the containercenter: lines packed to the center of the containerspace-between: lines evenly distributed; the first line is at the start of the container while the last one is at the endspace-around: lines evenly distributed with equal space between themstretch (default): lines stretch to take up the remaining space The following figure helps understand how the lines are stacked up in a flex container depending on the align-content value: Syntax Demo Related Properties Other Resources Browser Support