background preloader

Using CSS animations - Web developer guide

Using CSS animations - Web developer guide
CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints along the way. There are three key advantages to CSS animations over traditional script-driven animation techniques: They're easy to use for simple animations; you can create them without even having to know JavaScript. Configuring the animation To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties. The sub-properties of the animation property are: animation-delay Configures the delay between the time the element is loaded and the beginning of the animation sequence. animation-direction animation-duration Configures the length of time that an animation should take to complete one cycle. animation-iteration-count Examples Related:  Mozilla Developers

CSS you can get excited about in 2015 CSS is a constantly evolving language, and as the new year begins it’s a great time to take a look at some of the emerging features that we can start to experiment with. In this article I’ll take a look at some newer modules and individual CSS features that are gaining browser support. Not all of these are features you’ll be able to use in production immediately, and some are only available behind experimental flags. However you’ll find plenty of things here that you can begin to play with — even if only during a prototyping stage of development. CSS Selectors level 4 The level 3 selectors specification is well implemented in browsers and brought us useful selectors such as nth-child. The negation pseudo-class :not The negation pseudo-class selector :not appears in level 3 but gets an upgrade in level 4. In level 4 of the specification you can pass in a comma separated list of selectors. The relational pseudo-class :has The matches-any pseudo-class :matches CSS Blend Modes Using mix-blend-mode

CSS media queries A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself. Syntax Media queries consist of a media type and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Unless you use the not or only operators, the media type is optional and the all type will be implied. Logical operators and @media (min-width: 700px) { ... } comma-separated lists not only

Rendera - Online HTML5 Editor Using CSS transforms By modifying the coordinate space, CSS transforms change the position and shape of the affected content without disrupting the normal document flow. This guide provides an introduction to using transforms. CSS transforms are implemented using a set of CSS properties that let you apply affine linear transformations to HTML elements. These transformations include rotation, skewing, scaling, and translation both in the plane and in the 3D space. CSS transforms properties Two major properties are used to define CSS transforms: transform and transform-origin transform-origin Specifies the position of the origin. transform Specifies the transforms to apply to the element. Examples Example: Rotating This example creates an iframe that lets you use Google's home page, rotated 90 degrees about its bottom-left corner. View live example View screenshot of example Example: Skewing and translating View live example View screenshot of example 3D specific CSS properties Setting up a perspective See also

Using CSS gradients CSS gradients are new types of <image> added in the CSS3 Image Module. Using CSS gradients lets you display smooth transitions between two or more specified colors. This lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout much more flexibly. Browsers support two types of gradients: linear, defined with the linear-gradient() function, and radial, defined with radial-gradient(). Linear gradients To create a linear gradient, you set a starting point and a direction (specified as an angle) along which the gradient effect is applied. Simple linear gradients Here's a linear gradient that starts at the center (horizontally) and top (vertically), and starts blue, transitioning to white. background: -prefix-linear-gradient(top, blue, white); background: linear-gradient(to bottom, blue, white); Using angles Size

AJAX Asynchronous JavaScript + XML, while not a technology in itself, is a term coined in 2005 by Jesse James Garrett, that describes a "new" approach to using a number of existing technologies together, including: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, and most importantly the XMLHttpRequest object. When these technologies are combined in the Ajax model, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. This makes the application faster and more responsive to user actions. Although X in Ajax stands for XML, JSON is used more than XML nowadays because of its many advantages such as being lighter and a part of JavaScript. Documentation Getting Started This article guides you through the Ajax basics and gives you two simple hands-on examples to get you started. Using the XMLHttpRequest API The XMLHttpRequest API is the core of Ajax. Fetch API Server-sent events XPath See also

WebSockets WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply. See also Browser compatibility Gecko notes WebSockets support in Firefox is continuing to track the evolving WebSocket specification. Gecko 6.0 Prior to Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), there was, incorrectly, a WebSocket object that some sites were thinking implied that WebSocket services were not prefixed; this object has been renamed to MozWebSocket. Gecko 7.0 Starting in Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4), the network.websocket.max-connections preference is used to determine the maximum number of WebSocket connections that can be open at a time. Gecko 8.0 Gecko 11.0 Prior to Gecko 11.0, both incoming and outgoing messages were limited to 16 MB in size.

Using HTML5 audio and video HTML5 introduces built-in media support via the <audio> and <video> elements, offering the ability to easily embed media into HTML documents. Embedding media in your HTML document is trivial: <video src=" controls> Your browser does not support the <code>video</code> element. </video> This example plays a sample video, with playback controls, from the Theora web site. Here is an example for embedding audio into your HTML document <audio src="/test/audio.ogg"><p>Your browser does not support the <code>audio</code> element. The src attribute can be a URL of the audio file or the path to the file on the local system. <audio src="audio.ogg" controls autoplay loop><p>Your browser does not support the <code>audio</code> element </p></audio> This code example uses attributes of the <audio> element: The preload attribute is used in the audio element for buffering large files. This plays the Ogg video file in browsers supporting the Ogg format. Using Flash

Document Object Model (DOM) The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document as a tree. The DOM defines methods that allow access to the tree, so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects, possessing various properties and methods. Nodes can also have event handlers attached to them, and once an event is triggered, the event handlers get executed. Although the DOM is often accessed using JavaScript, it is not a part of the JavaScript language. An introduction to the DOM is available. DOM interfaces Obsolete DOM interfaces The Document Object Model has been highly simplified. HTML interfaces A document containing HTML is described using the HTMLDocument interface. HTML element interfaces Other interfaces Obsolete HTML interfaces SVG interfaces SVG element interfaces SVG data type interfaces Static type See also

Using Application Cache - MDN Docs Introduction HTML5 provides an application caching mechanism that lets web-based applications run offline. Developers can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline. Using an application cache gives an application the following benefits: Offline browsing: users can navigate a site even when they are offline. How the application cache works Enabling the application cache To enable the application cache for an application, you must include the manifest attribute in the <html> element in your application's pages, as shown in the following example: <html manifest="example.appcache"> ... The manifest attribute references a cache manifest file, which is a text file that lists resources (files) that the browser should cache for your application. Loading documents The cache manifest file Blank line

DOM Storage Summary DOM Storage is the name given to the set of storage-related features first introduced in the Web Applications 1.0 specification, and now split off into its own W3C Web Storage specification. DOM Storage is designed to provide a larger, more secure, and easier-to-use alternative to storing information in cookies. It was first introduced with Firefox 2 and Safari 4. Note: DOM Storage is not the same as mozStorage (Mozilla's XPCOM interfaces to SQLite) or the Session store API (an XPCOM storage utility for use by extensions). Note: This article will soon be getting refactored substantially to split up its contents into the various storage APIs, instead of having them all here in one page. Description The DOM Storage mechanism is a means through which string key/value pairs can be securely stored and later retrieved for use. DOM Storage is useful because no good browser-only methods exist for persisting reasonable amounts of data for any period of time. Reference Storage interface Storage

JavaScript JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. This section is dedicated to the JavaScript language itself, and not the parts that are specific to Web pages or other host environments. The standard for JavaScript is ECMAScript. Tutorials Learn how to program in JavaScript with guides and tutorials. For complete beginners Head over to the Learning Area JavaScript topic if you want to learn JavaScript but have no previous experience of JavaScript or programming. JavaScript first steps Answers some fundamental questions such as "what is JavaScript?" JavaScript building blocks JavaScript guide Closures

IndexedDB IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data. While Web Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution. This is the main landing page for MDN's IndexedDB coverage — here we provide links to the full API reference and usage guides, browser support details, and some explanation of key concepts. Note: IndexedDB API is powerful, but may seem too complicated for simple cases. Key concepts and usage IndexedDB is a transactional database system, like an SQL-based RDBMS. Read more about the Concepts behind IndexedDB. Note: Like most web storage solutions, IndexedDB follows a same-origin policy. Synchronous and asynchronous Operations performed using IndexedDB are done asynchronously, so as not to block applications. Storage limits and eviction criteria

Drag and drop Firefox and other Mozilla applications support a number of features for handling drag and drop. This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there. A translucent representation of what is being dragged will follow the mouse pointer during the drag operation. The drop location may be a different application. This section covers drag and drop in Firefox 3.5 (Gecko 1.9.1) and later. Drag and drop basics When a drag begins, a number of pieces of information may be provided: the data to be dragged, which may be of a number of different formats. Mozilla and Firefox support a number of features not in the standard drag and drop model. For a list of common data types used for drag and drop, see Recommended Drag Types. A quick reference is available for the best practice for dragging the following kinds of items: See DataTransfer for a reference to the DataTransfer object. Drag events drag