An analogue clock using only CSS Having read the blurb around Safari’s CSS transitions I opted to familiarize myself with a quick project — the aim of which was to create a functional, CSS only, analogue clock. Result Experiment: CSS Analogue Clock Experiment works in Safari 4 Beta and Google Chrome. Experiment updated. How To Before getting into the nitty gritty I created four images, a clock face and three transparent PNG hands (seconds, minutes and hours), ensuring that each of these were the same size so that when overlayed their centres would align. The magic that rotates the clock’s hands comes via two WebKit specific CSS properties, -webkit-transition (documentation) and -webkit-transform (documentation). The transition property creates an animation of a specified property between two values when triggered, for instance fading the opacity on a DIV element from 1 to 0 — triggered using the :hover pseudo class. Grab the current time
Silk Icons “Silk” is a smooth, free icon set, containing over 700 16-by-16 pixel icons in strokably-soft PNG format. Containing a large variety of icons, you're sure to find something that tickles your fancy. And all for a low low price of $0.00. You can't say fairer than that. Current version: 1.3. View all icons (.png file, 1Mb) Download License I also love to hear of my work being used, feel encouraged to send an email with a link or screenshot of the icons in their new home to mjames at gmail dot com. The icons can also be used under Creative Commons Attribution 3.0 License (Hi Debian folks!) As an author, I would appreciate a reference to my authorship of the Silk icon set contents within a readme file or equivalent documentation for the software which includes the set or a subset of the icons contained within. Sightings Do you use this set? Donate People have expressed a wish to donate a little money.
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
Animatable: One property, two values, endless possiblities box-shadow From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou psdchest - PSDChest – Free resources for web designers Tables in HTML documents 11.1 Introduction to tables The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells. Each table may have an associated caption (see the CAPTION element) that provides a short description of the table's purpose. A longer description may also be provided (via the summary attribute) for the benefit of people using speech or Braille-based user agents. Table rows may be grouped into a head, foot, and body sections, (via the THEAD , TFOOT and TBODY elements, respectively). Authors may also group columns to provide additional structural information that may be exploited by user agents. Table cells may either contain "header" information (see the TH element) or "data" (see the TD element). Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. might be rendered something like this on a tty device: than:
Let Your Content Do the Talking: Fullscreen API Most browsers have the ability to enter a fullscreen or kiosk mode for a while now. Basically, the browser's chrome UI gets out of the way, and the content takes over. For apps installed from the Chrome Web Store, it's even been possible for users to manually configure an app to run fullscreen when it's opened from the New Tab Page. The Fullscreen API allows web apps to programmatically tell any content on the page to enter the browser's fullscreen viewing mode, from JavaScript. If you want to skip the details, here's a demo: So how does the API work? div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); div.mozRequestFullScreen(); div.msRequestFullscreen(); div.requestFullscreen(); // standard Then to exit fullscreen, the document exposes a method for that: document.webkitExitFullscreen(); document.mozCancelFullscreen(); document.msExitFullscreen(); document.exitFullscreen(); Note: the exitFullscreen() is the spec version. Updated 2012-10-11: to be inline with spec changes.
Front End Development Guidelines Accessibility What's Up, DOCTYPE? The absence of a DOCTYPE is a crime punishable by death. Ideally, the HTML5 DOCTYPE should be used. Write Valid Semantic Markup Writing websites with clean, semantic HTML is something we wish we could always do. Headings should be heirarchically created from <h2>onwards, paragraphs should always be in <p> tags and so on and so forth. Which do you think looks cleaner, this? <span class="sectionHeading">A Heading</span><br /><br /> Lorem ipsum dolor sit amet. ... Or this? <h2>A Heading</h2><p> Lorem ipsum dolor sit amet. ... Fallbacks for Middle Mouse Clicks One of the most frustrating accessibility and usability flaws of the modern web stems from the remapping of hyperlink click functions. A modern example of a popular website that is contributing to this problem is the Twitter web app. Another alternative is the use of "hashbangs", that remap normal URLs to hash links and fetch pages via AJAX. Use Microformats Images Need ‘Alt’ Text JavaScript Character Spacing
jhollingworth/bootstrap-wysihtml5 Responsive Web Design The English architect Christopher Wren once quipped that his chosen field “aims for Eternity,” and there’s something appealing about that formula: Unlike the web, which often feels like aiming for next week, architecture is a discipline very much defined by its permanence. Article Continues Below A building’s foundation defines its footprint, which defines its frame, which shapes the facade. Each phase of the architectural process is more immutable, more unchanging than the last. Working on the web, however, is a wholly different matter. But the landscape is shifting, perhaps more quickly than we might like. In recent years, I’ve been meeting with more companies that request “an iPhone website” as part of their project. A flexible foundation#section1 Let’s consider an example design. But no design, fixed or fluid, scales seamlessly beyond the context for which it was originally intended. Becoming responsive#section2 Recently, an emergent discipline called “ responsive architecture .
When can I use... Support tables for HTML5, CSS3, etc - Recommendation * Usage stats: Global Support: Partial support: Total: Method of displaying basic Vector Graphics features using the embed or object elements Show all versions Firefox Chrome Safari Opera iOS Safari Opera Mini Android Browser Blackberry Browser Current Near future Farther future Notes Known issues (0) Resources (6) Feedback - Working Draft Method of displaying SVG images in HTML using <img> Known issues (2) Resources (3) Partial support in Safari 3.2 refers to buggy behavior with certain SVG images. - Candidate Recommendation Method of using SVG images as CSS backgrounds Resources (2) Partial support in iOS Safari refers to buggy behavior. Method of using SVG tags directly in HTML documents. Method of using SVG transforms, filters, etc on HTML elements using either CSS or the foreignObject element Resources (4) Partial support refers to lack of filter support or buggy result from effects. No known issues Method of using animation elements to animate SVG images Known issues (1) Parent feature: