Gary Edwards's Library tagged CSS3 →  View Popular

his article presents 7 New CSS3 techniques that every web designer and developer should be aware of. CSS3 for sure will leads to greater flexibility and make effects that was previously complex and difficult to create much easier. Unfortunately it is not currently all the leading browsers that support CSS3. In some cases other techniques are available making our life easier while waiting for CSS3 to break through and these will be briefly covered as well.

www.tripwiremagazine.com/...css-3-techniques-revealed.html - Preview

css3

HTML 5 Reset Stylesheet
We’ve had a number of people asking about templates, boilerplates and styling for HTML 5 so to give you all a helping hand and continue on from those basic building blocks that Remy talked about last week I’ve created a HTML 5 reset stylesheet for you to take away and use, edit, amend and update in your projects.

Based on Eric Meyers CSS reset, I’ve made a few adjustments from Erics work that we’ll get to later but first here’s the file in full and we’ll then break it down step by step.

html5doctor.com/html-5-reset-stylesheet - Preview

html5 richard-clark eric-meyers css3

Modernizr is a new library that detects various HTML5 and CSS3 features and lets you know so you can use them: Enables the writing of conditional CSS and conditional JavaScript! The JS tools just keep coming.

ajaxian.com/...rnizr-html5-and-css3-detection - Preview

JavaScript HTML5 CSS3 HTML+ Modernizr JS-Libs

Construct is a visual layout editor based on Blueprint & jQuery! This is version 0.5, last updated on April 27, 2008. This project was built by Christian Montoya, and exists both as a useful tool for CSS designers and as proof that a visual layout editor is possible to acheive with clean CSS & semantic HTML.

constructyourcss.com - Preview

christian-montoya css css3 css-framework css-wysiwg jQuery

Interesting use of a CSS Framework for "Flow" Web documents and pages:

Emastic is a CSS Framework, it's continuing mission: to explore a strange new world, to seek out new life and new web spaces, to boldly go where no CSS Framework has gone before.

Why should you use emastic?

.... Lightweight (compressed weight less then 4kb)
..... Personalized width of the page in (em,px,%)
....... Use of fixed and fluid columns in the grid.
.......... Elastic Layout with "em"s

code.google.com/emastic - Preview

emastic css-framework css3

CSS3 tutorial

www.smashingmagazine.com/...gn-to-the-next-level-with-css3 - Preview

CSS3 tutorial css

Michael Hickens has been writing about Google Wave and how it will forever change the Web. In a recent article he took on the incredible WebKit - HTML+ phenomenon, tying in the surge of WebKit marketshare at the edge of the Web with dramatic changes taking place across greater Web.
<br>

From Michaels article: .... "I recently described how Google's Wave, a collaboration tool based on the new HTML 5 standard, demonstrated the potential for Web applications to unglue Microsoft's hold on customers. My post quoted Gary Edwards, the former president of the Open Document Foundation, a first-hand witness to the failed attempt by Massachusetts to dump Microsoft and as experienced a hand at Microsoft-tilting as anyone I know......"
<br>
The year 1998 marked the end of the browser wars, the end of Netscape, and the beginning of Microsoft's anti-trust woes. It also marked the beginning of XML, and the end of HTML, with the W3C leaving HTML, CSS and SVG to rot. What a year.

<br>
Today we find the landscape considerably changed. Instead of a browser war between Netscape and Microsoft, ending with the triumph of an IE monopoly, today we have a browser race. And IE isn't a contender, having been pretty much abandoned by Microsoft once they had Netscape in the dirt.

<b>
The introduction of XML 1.0 in 1998 ushered in a new era of customized XML schema's for all kinds of data exchanges. The Web came alive with data flows from disparate databases and transaction systems that were never designed to talk to each other. The noise across the Web, private and public, was deafening.

<br>
There was however a few notable attempts to encode document based content in XML, with OpenOffice ODF and MSOffice OOXML taking center stage. Unlike the excitement and extraordinary Web capabilities that surrounded XML data schema work, XML documents veered away from the Web. By design, ODF and OOXML are incompatible with the language of the Web. But given the legacy of client/server dominance powerful "end-user-facing" desktop office

industry.bnet.com/...-fight-starts-with-smartphones - Preview

openweb michael-hickens webkit ge HTML5 HTML+ CSS3 JavaScript google-wave iphone android

Good article from Glynn Moody explaining the OpenDocument Foundation's decision to drop OpenOffice ODF for HTML+. That date of this article is November 13th, 2007. The Foundations announcement comes after ISO members vote down OpenXML as an ISO standard. Microsoft however does not give up. They come back to ISO by responding in detail to every objection, pushing for a February 2008 BRM. Following the BRM, and contingent on Microsoft's promise to fix OpenXML, join the OASIS OpenOffice ODF work, and, support ODF 1.1 in MSOffice using a plug-in, ISO votes again. In March of 2008, ISO approves OpenXML.

In May of 2009, Microsoft releases an MSOffice plug-in fully compliant with ODF 1.1 (ISO 26300). Although conforming to and in full compliance with ODF 1.1, the world is shocked to learn that the interop between MSOffice ODF and OpenOffice ODF is worthless. Which is exactly what the Foundation had been arguing for years. ODF "compatibility, interop and compliance" had to be fixed prior to Microsoft's expected implementation!!!!! Otherwise, ODF would be shredded.

Told you so!

lwn.net/258232 - Preview

cdf foundation glyn moody odf ooxml opendocument sharepoint html+ html5 css3 interoperability

A visual layout model for CSS 2.1 and CSS 3. W3C specification candidate

www.w3.org/visuren.html - Preview

CSS3 W3C layout

Since tables were co-opted for layout purposes, columns have become key to many Web design layouts, and this thinking continued when CSS took over from tables (at least in the minds of savvy designers) for Web-page presentation. However, other fields of layout design don’t think in arbitrary columns, they work with grids, and these form the basis for the structure of page designs. This article will provide the lowdown on grid design for Web pages.

Thinking modular
Grids are a template, a framework within which creativity can flourish. Too many designers spend time looking at a blank canvas, trying to figure out where elements should be positioned, but, if you have a flexible underlying grid, many such problems are already solved for you. It becomes obvious where and how elements should and can be positioned, thereby leaving you, the designer, with more time to work on graphic design and other page components.

dev.opera.com/...gn-basics-grids-for-web-page-l - Preview

css3 opera modular-grids

Start Learning CSS3
Well if I haven’t gotten you interested in CSS3 at this point, maybe some examples of what it can really do will get you excited:

http://www.exforsys.com/tutorials/css3.html
http://24ways.org/2006/rounded-corner-boxes-the-css3-way
http://www.mandarindesign.com/opacity.html
http://dev.opera.com/articles/view/css-text-shadows-and-background-sizing
http://www.w3.org/International/articles/css3-text

webitect.net/...all-about-the-new-css3.php - Preview

tutorials webkit css3

Everything you need to know about CSS3, including tutorials.

www.css3.info/preview - Preview

css3

S5 with CSS Slide Transitions in WebKit: Very cool use of WebKit - CSS transitions and animations to create a browser ready presentation. The presentation plays perfectly in Google Chrome! Once again proving the value of the widely deployed WebKit layout engine.

www.frozen-o.com/...ide-transitions-in-webkit.html - Preview

webkit chrome html-css css-transitions css3

Terra Informatica services include: HTMLayout, WYSIWYG HTML Word Processor, and TIScript compiler-vm.

www.terrainformatica.com/...main.whtm - Preview

HTML-CSS CSS3 florian wiki-WORD webkit

CSS is a simple, declarative language for creating style sheets that specify the rendering of HTML and other structured documents. This specification is part of level 3 of CSS (“CSS3”) and contains features to describe layouts at a high level, meant for tasks such as the positioning and alignment of “widgets” in a graphical user interface or the layout grid for a page or a window, in particular when the desired visual order is different from the order of the elements in the source document. Other CSS3 modules contain properties to specify fonts, colors, text alignment, list numbering, tables, etc.
The features in this module are described together for easier reading, but are usually not implemented as a group. CSS3 modules often depend on other modules or contain features for several media types. Implementers should look at the various “profiles” of CSS, which list consistent sets of features for each type of media.

www.w3.org/css3-layout - Preview

css3 HTML-CSS w3c

When building out a site designed specifically for the iPhone, your hands are no longer tied with the typical browser constraints (<cough>IE</cough>). Mobile Safari -- the browser used by the iPhone -- supports CSS3, 24-bit tranparent PNGs, and custom CSS animations.

www.viget.com/...vigetcom-gets-iphone-ized - Preview

webkit javascript html-css-svg CSS3 iphone

summary of best web sites for "Web Design"

sixrevisions.com/...rs_pick_websites_for_webdesign - Preview

webkit web-design css3 javascript tutorials html5 ajax

HTML 5 represents the biggest leap forward in web standards in almost a decade. Unlike the specifications that came before it, HTML 5 is not merely intended to present content to a web browser. Its goal is to bring the web into maturity as a full-fledged application platform — a level playing field where video, sound, images, animations, and full interactivity with your computer are all standardized. And it may be a long way off still, but elements of HTML 5 are already reshaping the way we use the web.

www.webmonkey.com/..._5_Is_Already_Changing_the_Web - Preview

webkit html5 css3

"...some browsers and plug-ins were adopting storage-related API’s that are a part of the new HTML5 draft specification. While Gears, Opera and Webkit have implemented structured storage API’s, the remainder of the HTML5 spec currently remains mostly unimplemented and also in a state of flux. HTML5 is a super-sized effort to bring all the browsers under a single, standard markup language and set of API’s - but with Microsoft, Adobe and others racing ahead with their own next-gen web technologies, will we ever see a real HTML5 standard?"

This article was posted in August of 2008, before the surprise release of the WebKit based "Google Chrome" .... the WebKit RiA alternative to Adobe AiR and Microsoft Silverlight

www.techcrunch.com/...ll-we-ever-see-a-real-standard - Preview

webkit html5 css3 javascript silverlight air ria

Excellent "quick" explanation of basic Web technologies like HTML, XHTML, CSS, SVG PNG, etc.

www.infiniteexpanse.net/...web-dev-faq - Preview

tutorial open-web css3 html5