Step by step CSS float tutorial Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts. General info Tutorial 1. Floating an image to the right Float an image to the right of a block of text and apply a border to the image. Tutorial 2. Float an image and caption to the right of a block of text and apply borders using Descendant Selectors. Tutorial 3. Float a series of images down the right side of the page, with content flowing beside them. Tutorial 4. Float a series of thumbnail images and captions to achieve an image gallery. Tutorial 5. Float a simple list into rollover "back" and next "buttons". Tutorial 6. Float a simple list, converting it into a horizontal navigation bar. Tutorial 7. Float a scaleable drop cap to the left, resize it and adjust line-heights to suit your needs. Tutorial 8. Float a left nav to achieve a two column layout with header and footer. Tutorial 9.
Evil Mad Scientist Laboratories - How to make the simplest elect We’re pleased to announce the availability of the Egg-Bot Electro-Kistka: An electric hot wax pen designed to be used with the EggBot. A kistka is the wax tool used in the traditional wax-resist and dye (batik) method to produce colorful eggs in the same fashion as Ukranian pysanky. We would like to acknowledge that this is not by any means the first time that anyone has strapped a kistka to an EggBot— We wrote about Ann’s DIY version a few months ago, and we’ve seen other versions (both manually heated and electric) in YouTube videos dating back several years. Hardware The Electro-Kistka consists of two main parts, connected by a cable: A heater assembly that gets mounted to the EggBot’s pen arm (in place of the usual pen holder), and a power control board that sits behind the EggBot. The power control board is relatively simple: it accepts input from a plug-in power supply, and has an adjustment pot so that you can set the power level of the kistka. Process: two-tone
CSS Grid Builder - ZURB Playground - ZURB.com CSS Code Product Design Training from the Experts at ZURB This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS. This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Your ZURB ID explained You’ll use your ZURB ID to log in to all of ZURB’s properties — University, Products and Foundation. University Product design resources, courses and training. Design Apps Prototype, iterate and collect feedback on your products. Foundation The most advanced front-end framework in the world.
susanaramon.com Dive Into HTML5 Math in HTML (and CSS) - presenting mathematical expressions on Web pages Typesetting math: 100% How to present mathematical expressions using a language that has so little markup for them? Web authors often need resort to images, but there are more flexible approaches, like MathJax. Moreover, if you need just some special symbols or simple expressions, a lot can be done in HTML, assisted with style sheets (CSS). This document mainly discusses relatively simple mathematical expressions rendered one-dimensionally (inline), though possibly with superscripts or subscripts. The word “mathematical” is used in a rather broad sense here, covering different formalisms and symbols, including the symbols of physics, formal logic, etc. What? You may have wondered why web sites, such as Wikipedia, use images for presenting mathematical formulas, even in simple cases like ∇²φ = 0. Although HTML markup exists in the sample case, mathematical formulas are usually much more complicated. Alternative approaches – formats other than HTML Formulas as images Assignment 42.
paper cd case css Zen Garden: The Beauty in CSS Design Hierarchical Menus with the Underrated style.display Object One of the most common DHTML requests I get is for a Windows Explorer-style hierarchical menu, where there's a list of topics or "folders" that a user can click on to reveal subtopics, or "files," within that folder. It's a common desktop metaphor that seems ever more necessary on the Web, especially as we see navigation bars incorporating larger and more complex content while still trying to fit on the screen. Hierarchical menus are a solution to the common problem of having too many links in too small a space. But, I figured, there are several Web sites where you can find large, complex scripts to create large, complex hierarchical menus. Instead, I'll show you how to make your own menus, of any length or complexity, with the use of an extremely useful and widely unknown DOM CSS property, style.display.visibility. When you set an element to visibility="hidden", it simply disappears while still taking up space on the page, almost as if it were transparent. Houdini with an index
CSS Gradient Text Effect Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how. View Demos Download Demo ZIP Benefits This is pure CSS trick, no Javascript or Flash. How does this work? The trick is very simple. The HTML markups <h1><span></span>CSS Gradient Text</h1> The CSS That's it! Make it work on IE6 Since IE6 doesn't render PNG-24 properly, the following hack is required in order to display the transparent PNG (add anywhere in between the <head> tag): This is why we hate IE 6! jQuery prepend version (for semantic lovers) More samples Want to make Web 2.0 glossy text? Pattern / Texture
12 sided calendar Download a 12 sided calendar Download a dodecahedral calendar. You may choose between PostScript and PDF format. *) Week numbering follows ISO 8601 **) PostScript software is available from Calendar on a regular dodecahedron Once upon a time I made a PostScript program to print templates for generic polyhedra called polyeder.ps. I've made a few changes to Andrew Rogers' deskcal, and wrapped it into a script to make it more available for people without knowledge in PostScript. Hints for calendar on a regular dodecahedron Regular printer paper (80 g/m²) will be fine, but heavier paper (100-120 g/m²) will result in a more robust calendar. Calendar on a rhombic dodecahedron I have reused Andrew Rogers' calendar generator, so you can get calendars on Nick Robinson's rhombic A4 units, and make a rhombic dodecahedron calendar. Hints for calendar on a rhombic dodecahedron Print the calendar on regular A4 paper (80 g/m²).
Learning in Networks of Knowledge | Applications for a paradigm shift in online learning --- Matthew Allen, ALTC Teaching Fellow CSS for Accessibility W3C Note 6 November 2000 This version: (plain text, PostScript, PDF, gzip tar file of HTML, zip archive of HTML) Latest version: Previous version: Editors: Wendy Chisholm, W3C; Gregg Vanderheiden, Trace R & D Center, University of Wisconsin -- Madison; Ian Jacobs, W3C Copyright ©1999 - 2000 W3C® (MIT, INRIA, Keio), All Rights Reserved. Abstract This document describes techniques for authoring accessible Cascading Style Sheets (CSS). This document is part of a series of documents about techniques for authoring accessible Web content. Note: This document contains a number of examples that illustrate accessible solutions in CSS but also deprecated examples that illustrate what content developers should not do. Status of this document This version has been published to correct some broken links in the previous version. 2 User override of styles