CSS Decorative Gallery
Did you like my previous CSS tutorial on how to create gradient text effects? I'm using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. View Demo Gallery Download Demo ZIP What Are The Benefits Of This CSS Trick? Saves Time — You don't have to manually create the decorative template in Photoshop and export the individual image. Basic Concept (see demo) You need to insert an extra <span> tag within the <div> tag, with which we'll apply a background image to create the overlaying effect. Then in the CSS, the key point you have to remember is: specify the div element to position:relative and the span element to position:absolute. IE PNG Hack To make the transparent PNG image work on IE6, I use this wonderful iepngfix.htc hack. Look and Feel The jQuery Solution (see demo) #1. #1b. #2. #2b. #3. #4. #4b. #5. #5b.
Stunning CSS3: A Project-based Guide to the Latest in CSS | A book by Zoe Mickley Gillenwater
DD_roundies: Code-only rounded HTML boxes
2011/4/8: It is high time I update the documentation here. This plugin got as far as supporting IE8 Release Candidate 1. That was a while ago. I spent some time away from the project before IE8 final was released. Foolishly, I never wrote anything to this effect because I'd hoped to give it a new college try at some point. Turns out I like riding my bicycle during my free time more than maintaining this project. That said, IE9 is supposedly offering itself as an update. This was a neat experiment, but note that I never took the version numbers out of "alpha" mode. If I were truly sore on this subject, I would take this page down; I will leave it up for posterity instead. This is a Javascript library that makes creation of rounded-corner HTML boxes easier, with a focus on Internet Explorer. IE is supported through use of VML. Since Opera doesn't currently (time of writing: 2009-01-01) support border-radius, this library doesn't do anything in Opera. Table of Contents Quick summary:
Web Browser CSS Support
This document is a section of the web browser standards support document. It includes detailed information about CSS support in major web browsers. About Up CSS is the primary language for adding presentation elements to a webpage. View this page without CSS CSS 2.1 features CSS 2.1 Units The following are units that are used in CSS properties. CSS 2.1 Importance Importance gives dominance to CSS rules that would normally be overridden by rules of greater specificity or latter appearance. CSS 2.1 At-rules At-rules provide special operations and selection mechanisms for the CSS document. CSS 2.1 Basic selectors Selectors specify where CSS rules are applied on the document. CSS 2.1 Pseudo-classes Pseudo-classes select elements in certain special states. CSS 2.1 Pseudo-elements Pseudo-elements are styled portions of the displayed page that were created by one of the following selectors. CSS 2.1 Basic properties CSS 2.1 Print properties CSS 2.1 Conformance CSS 3 features CSS 3 Units CSS 3 At-rules
DD_belatedPNG: Medicine for your IE6/PNG headache!
2011/4/8: This is no longer an actively maintained project. I apologize, I must move on with current events. This is a Javascript library that sandwiches PNG image support into IE6 without much fuss. You can use PNGs as the SRC of an <IMG/> element or as a background-image property in CSS. If you attempt the latter, you will find that, unlike with vanilla usage of AlphaImageLoader, background-position and background-repeat work as intended. As a bonus, "fixed" elements will respond to a commonly used set of Javascript style assignments, as well as the A:hover pseudo-class. Table of Contents Long story short, this uses Microsoft's implementation of VML instead of Microsoft's AlphaImageLoader filter. The intended implementation is pretty easy: Download a copy of the DD_belatedPNG Javascript file - please do not hotlink mine, I am on a shared host. Due to popular demand, here is some documentation for how to "fix" elements on a pick-and-choose basis. (Based on the normal usage approach)
5 Techniques to Acquaint You With CSS 3
CSS is a well-known, widely used language to style websites. With version three in the works, many time-saving features will be implemented. Although only the most modern browsers currently support these effects, it's still fun to see what's around the corner! 1: The Basic Markup Before we start with this tutorial, let's create the basic markup that we will be working with throughout the tutorial. For our xHTML, we'll need the following div elements: #round, to apply rounded corner CSS3 code on. For this, our xHTML will be: In our HTML document, we've created some div elements, with the IDs stated above. As you can see, we've given all div tags a width and height of 300px each. 2: Rounded Corners It can be a hassle to create rounded corners. This problem can be easily solved with CSS3, with the property called “border-radius”. We do this like so: Once you've created the div, refresh the page. Refresh your HTML document and you'll see a rounded div - nice and smooth. We do it like this:
CSS Template Layout Module
Abstract A grid with four slots defined by ‘display: "aaaaaaa" "bccccdd"’. CSS is a simple, declarative language for creating style sheets that specify the rendering of HTML and other structured documents. A layout grid or “template” defines one or more “slots” that an element's content can flow into. A ‘::slot’ selector allows elements to be styled differently based on which slot they appear in. Status of this document This section describes the status of this document at the time of its publication. Publication as a Working Draft does not imply endorsement by the W3C Membership. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. The section on “CR exit criteria” lists some conditions for this specification to become a W3C Recommendation. 1. 2. resp
