background preloader

HTML5 Reset Stylesheet

HTML5 Reset Stylesheet
Related:  HTML5 Templates and DesignCSS

CSS Masks WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image. Here is a snapshot of the Speed Racer movie trailer clipped to the Safari compass icon. This is in fact a mask applied to the <video> element. We have introduced new properties to provide Web designers with a lot of control over these masks and how they are applied. -webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image) Use of a mask results in a stacking context being created (similar to how opacity and transforms work). Here are two sample images. The result looks like this:

Activating Browser Modes with Doctype In order to deal both with content written according to Web standards and with content written according to legacy practices that were prevalent in the late 1990s, today’s Web browsers implement various engine modes. This document explains what those modes are and how they are triggered. Summary for the Impatient The main conclusion to draw from this article is that you should start all your HTML documents (i.e. anything that gets served as text/html) with <!DOCTYPE html> as the first thing in the source. If you want to take extra care to make sure that users of IE8, IE9 or IE10 cannot press a button that makes your site regress as if it was being viewed in IE7, either configure your server to send the HTTP header X-UA-Compatible: IE=Edge for text/html or put <meta http-equiv="X-UA-Compatible" content="IE=Edge"> in the head of your HTML documents (before any scripts). The Scope of This Document The Modes Here are the various modes: Common Modes for text/html Content Quirks Mode Standards Mode

CSS Properties Reference - CSS: Cascading Style Sheets Common CSS Properties Reference The following is a basic list of the most common CSS properties with the equivalent of the DOM notation which is usually accessed from JavaScript: Document Tags and Contributors Contributors to this page:mdnwebdocs-bot, chrisdavidmills, mfuji09, LouisLazaris, bekahmcdonald, Sheppy, wbamberg, hendryl, Justdave, velvel53, ernestd Dive Into HTML5 Four Sided PNG Drop Shadows [revised and improved] Are complex CSS issues making your programmers crazy? I've provided advanced CSS consulting for Milo and many other big sites. Hire me to help you too. Big John's CSS Webinars! Let Big John (yours truly) teach you about CSS in a setting where you can actually ask questions. Besides upcoming webinar dates, you can also download recorded versions of previous webinars (some free, some for sale). Return to ArticlesReturn to p.i.e. This article has been revised as of May 2009 to add improvements to the method which make it possible to have only a single drop shadow image, rather than the three that were required in the original version. This new simplified version of the method was inspired by a question from Antonio Vong, who asked if it was possible to make it work with only one big shadow image. Special Notice: I've written a tutorial for making drop shadows, using the free Gimp graphics editor. On the Web: Go see how Scott Schiller achieved this same four-sides PNG effect. Browser Disclaimer

HTML Standard 10 Web workers 10.1 Introduction 10.1.1 Scope This section is non-normative. This specification defines an API for running scripts in the background independently of any user interface scripts. This allows for long-running scripts that are not interrupted by scripts that respond to clicks or other user interactions, and allows long tasks to be executed without yielding to keep the page responsive. Workers (as these background scripts are called herein) are relatively heavy-weight, and are not intended to be used in large numbers. Generally, workers are expected to be long-lived, have a high start-up performance cost, and a high per-instance memory cost. 10.1.2 Examples There are a variety of uses that workers can be put to. A background number-crunching worker The simplest use of workers is for performing a computationally expensive task without interrupting the user interface. The main page is as follows: <! The worker itself is as follows: View this example online. Here is the HTML page:

Atomic CSS HTML5 Boilerplate - A rock-solid default template for HTML5 awesome. CSS display: inline-block: why it rocks, and why it sucks Usually when you want a horizontal list, you need to use float in the CSS code to make it work, with all its drawbacks. However, there is an alternative with display: inline-block. Problems with float The problem when you have float in your CSS code is that you need to take some precaution to make the surrounding element to encompass the floated elements, and also to avoid following elements in the code to sneak up next to it. Another problem is that if you have a floated list that will take up several rows (visually speaking) and the content is of varying height, you are in for a world of hurt. Enter display: inline-block This is where the magic value inline-block for the display property comes into play. 01. 02. ul#display-inline-block-example, 03. ul#display-inline-block-example li { 04. /* Setting a common base */ 05. margin: 0; 06. padding: 0; 09. ul#display-inline-block-example li { 10. display: inline-block; 11. width: 100px; 12. min-height: 100px; 13. background: #ccc; 15. 17. 18. 19. 20. 21. 1.

The 5 Building Blocks of Visual Hierarchy in Web Design Jerry Cao is a UX content strategist at UXPin — the wireframing and prototyping app. To learn more about how to create visually digestible interfaces, download the free e-book Web UI Design for the Human Eye: Colors, Space, Contrast. Visual hierarchy is the difference between a site that strategically influences user flow and decisions, and a site that just “looks nice.” An interface’s visual hierarchy relies on the same principles of aesthetics used by the Renaissance masters, but on top of that (or rather beneath it) there’s the subtext of secondary goals – promoting specific content, encouraging user signups and call-to-actions, and generally improving the overall experience so users enjoy their visit beyond just accomplishing their goals. Source: ShareFaith Seems like the Renaissance masters got off easy. In basic terms, visual hierarchy describes which elements dominate your user’s attention and draw their eyes most. 1. Bigger is more noticeable, but not always better. Source: Teye 2.

An Introduction To Object Oriented CSS (OOCSS) Advertisement We explore how to craft flexible front-end design patterns and making future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now → Have you ever heard the phrase “Content is King”? From a Web developer’s perspective, however, some may argue that speed is king1. Unfortunately, CSS seems to get somewhat overlooked in this area while many developers (for good reason) focus largely on JavaScript performance and other areas5. In this post, I’ll deal with this often overlooked area by introducing you to the concept of object oriented CSS and how it can help improve both the performance and maintainability of your Web pages. The Principles Of OOCSS Link As with any object-based coding method, the purpose of OOCSS is to encourage code reuse and, ultimately, faster and more efficient stylesheets that are easier to add to and maintain. As described on the OOCSS GitHub repo’s Wiki page6, OOCSS is based on two main principles. Faster Websites Link