Search This Blog

Showing posts with label css3. Show all posts
Showing posts with label css3. Show all posts

Tuesday, 27 December 2011

CSS3 technology in action: Design examples


CSS3 technology in action: Design examples
Takeaway: Highlights of 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.

10 beautiful examples of CSS3 design

CSS3 Analog Clock by Paul Hayes is his quick project and experiment that works in Safari and Google Chrome. Essentially the working analog clock is a series of four images, and using CSS3 to overlay, transform, and transition the hands’ movement, the time is obtained from a short JavaScript.

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. The snow flakes are called by a short script which controls the number of flakes, how fast they fall, and the duration of the snow fall. The animation is best viewed in Google Chrome.

Figure B

Matrix Effect by Girlie Mac embeds a Katakana font with CSS3 keyframes, transform, and animations using webkit prefixes to create this demonstration, again, best viewed in Google Chrome.

Figure C

Pure CSS Speech Bubbles by Nicolas Gallagher demonstrates the use of CSS3 backgrounds, linear gradients, border radius, and transform translate to create stunning speech bubbles in a selection of variants.

Figure D

Embossed Text Effect by Analog, a company of friends who make websites, uses a subtle 1px CSS3 text-shadow effect for their h2, h3, p, and li text, creating an embossed text effect.

Figure E

Polaroid’s with CSS3 by Zurb is a gallery display using CSS3 transform and rotate to turn images into a set of randomly selected Polaroid pictures.

Figure F

CSS3 Transitions Gallery by AlexandtheWeb demonstrates CSS3 transitions, transform, rotate, border radius, and masking to create this stunning example.

Figure G

CSS3 3D Butterfly by eletriq demonstrates the use of CSS3 perspective, transform-origin, and transform-style to create a 3D butterfly object in flight. Display is available in Safari only.

Figure H

3D geometry with 3D CSS3 transforms by Joe Lambert uses rotateX(deg), rotateY(deg) axis, transitions, and transformVector to create this 3D cube with rotation controls (displayed in Safari).

Figure I

CSS3 Time Machine by Joe Critchley utilizes CSS3 perspective, transform, and translate to create this image slide show similar to Apple’s Time Machine interface (displayed in Safari).

Figure J

Wednesday, 13 July 2011

HTML5: The next generation of web design

HTML5: The next generation of web design


The most recent HTML language specification classified by the W3C is available for review as the HTML5 Working Draft, and HTML5 Editor’s Draft, which stipulates a number of exciting updates and changes for  HTML coding practices. If you are not inclined to reading the lengthy official specifications, there is an alternative edition provided by the Web Hypertext Application Technology Working Group (WHATWG) entitled HTML5 - A technical specification for web developers, and is shown in Figure A.


Figure A

The evolution of HTML into the HTML5 specification started with initial W3C workshops in 2004. It wasn’t until 2006 that the W3C announced interest in pursuing development, and then in 2007, the WHATWG began its involvement making contributions to the specifications, and at the current rate of development, it is not expected to be completed until sometime around 2020 or 2022. To address several inconsistencies of standards and implementations with respect to XHTML, the WHATWG was formed to work on the HTML5 specification. The collaborative efforts of the WHATWG include individuals from Apple, Mozilla Foundation, and Opera Software, and it is the unofficial alliance of web browser manufacturers focused on achieving a single web standard.


The WHATWG concentrates on these four themes when developing the HTML5 specifications:
  1. Technology needs to be backward-compatible.
  2. When implementing any new technologies that are proven to work then it must become a standard.
  3. Specifications need to be detailed without reverse engineering.
  4. The Document Object Model (DOM) must work with the standards.

Though the finished specification is yet to be completed, it does include some features that can be implemented today. As the fifth major revision of the core language for the Word Wide Web, what it really signifies is a simple approach for web developers to mark up code. The improvement comprises meaningful semantic elements for specifying doctype, character set, page structure, multimedia including audio and video, gradient displays, and the added ability to create some elegant forms, and much more. Along with HTML5 is CSS3, which changes the way style sheets are coded and implemented as well. The only differences between the W3C and the WHATWG specifications are mostly editorial in nature; the text in each is identical for the most part.
Tim Burners-Lee, October 2006, on reinventing HTML:
“Some things are clearer with hindsight of several years. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn’t work.”
Adoption rates among web developers seems to be picking up some steam now that the HTML5 specification has matured a bit within the last several years, but challenges still exist that preclude others from making the switch, in particular due to the notion that vendors cannot agree on all aspects of the standards and implementations in a consistent manner across all platforms. The WHATWG is hoping their efforts will speed up the adoption rate for the HTML5 standard and implementation.


Browser wars again?
Maybe not, but most browsers today are now focused on HTML5 and CSS3 support, and many are moving toward a better compliance ratio. According to HTML5 accessibility, leading the pack in browser-rendering compliance of the HTML5 feature support is Google Chrome, and then in a close second comes Mozilla Firefox, followed by Internet Explorer 9, then Safari, and Opera, and then all previous versions of Internet Explorer are bringing up the rear. According to the HTML5 accessibility report, as the browsers shift toward HTML5 compliant rendering most are not graded too high at all with the highest rating of “Poor +” for Chrome.


However, HTML5 & CSS3 Readiness shows that Google Chrome is also leading the pack with HTML5 feature support when compared with seven other browsers across twenty-eight features. Their ranking differs slightly from the HTML5 accessibility with Safari 5 in second place, Opera 11 next, then Firefox 4.0 and 3.6, followed by IE 9, then IE 8, and lastly IE 7. A screenshot of the info graphic from the readiness website is displayed in Figure B below.


Figure B


When can I use… is another useful resource for determining support and compatibility of HTML5, CSS3, SVG, and more in desktop and mobile browsers. The resource provides compatibility tables, browser comparisons, and an index which includes feature support matrixes for CSS, HTML5, SVG, JS API, and others. Each table comparison shows how each browser stands with respect to supporting, not supporting, partially supporting, or the support is unknown for each element or feature; an example of the element Canvas (basic support) table is displayed in Figure C.


Figure C


What does HTML5 change?
As I briefly mentioned, there are major changes in the doctype declaration, the character set declaration, language values declaration, the way HTML documents are structured and sectioned, how scripts are called, and much more. The move toward semantic markup means that generally the use of IDs is recommended and the use of classes and Divs is now outdated and unnecessary. That’s right; I said Divs are now a thing of the past! With the structural and sectional elements available in HTML5, the use of Divs should only be added to HTML code as a last resort, and when all other element options have been exhausted. In essence HTML5 cures the cases of Div-itis and Class-itis.


How does the HTML5 specification affect me?
Why wait until 2020 or even 2022 as some speculate, when the specification is expected to be completed, when today many of the feature elements are already being adopted by browsers and user agents? This means that web developers can start using several elements of HTML5 and CSS3 even though the entire specification has not been completed.


*******************************
Related Posts Plugin for WordPress, Blogger...