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.
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
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:
Visual formatting model
9.1 Introduction to the visual formatting model This chapter and the next describe the visual formatting model: how user agents process the document tree for visual media. In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by: box dimensions and type. positioning scheme (normal flow, float, and absolute positioning). relationships between elements in the document tree.external information (e.g., viewport size, intrinsic dimensions of images, etc.). The properties defined in this chapter and the next apply to both continuous media and paged media. The visual formatting model does not specify all aspects of formatting (e.g., it does not specify a letter-spacing algorithm). 9.1.1 The viewport User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document. 9.1.2 Containing blocks containing block . <! An
15 Excellent jQuery Navigation Techniques and Solutions | Web Design Ledger
87 shares 18 Seriously Helpful Cheat Sheets for Easier Coding A few weeks ago, I showed you the best cheat sheets for web designers. Following that post, many of you showed interest in having cheat sheets to help you write code. Read More 93 shares 11 Excellent Solutions for Creating Tooltips Tooltips in web design are becoming more and more commonplace.
