HTML/CSS
Standards
to merge from bits of design. aaand break out. and generally sort.
- W3C Standards for the Open Web Platform
- W3C standards and drafts | W3C - W3C publishes a range of technical reports (Standards and supporting Notes) which help move the web forward.
- http://en.wikipedia.org/wiki/Open_Web_Platform - OWP, a collection of Web technologies developed by the World Wide Web Consortium and other Web standardization bodies such as the Unicode Consortium, the Internet Engineering Task Force, and Ecma International. It is the umbrella term introduced by the World Wide Web Consortium, and in 2011 it was defined as "a platform for innovation, consolidation and cost efficiencies" by W3C CEO Jeff Jaffe. The standards of the Open Web Platform are at different maturity levels, and the development of most standards is still in progress.
OWP covers Web standards such as HTML5, CSS 2.1, CSS3 (including the Selectors, Media Queries, Text, Backgrounds and Borders, Colors, 2D Transformations, 3D Transformations, Transitions, Animations, and Multi-Columns modules), CSS Namespaces, SVG 1.1, MathML 3, WAI-ARIA 1.0, ECMAScript 5, 2D Context, WebGL, Web Storage, Indexed Database API, Web Workers, WebSocket Protocol/API, Geolocation API, Server-Sent Events, Element Traversal, DOM Level 3 Events, Media Fragments, XMLHttpRequest, Selectors API, CSSOM View Module, Cross-Origin Resource Sharing, File API, RDFa, WOFF, HTTP 1.1 (part 1-7), TLS 1.2, and IRI.
- web-platform-tests dashboard - displays results for the web-platform-tests, or WPT, which are a group of test suites for many web platform specifications. If the web platform as a whole were an engineering project, it'd be crazy not to have a test suite that's run regularly. The goal of the WPT Dashboard is to promote viewing the web platform as one entity and to make identifying and fixing interoperability issues as easy as possible. The WPT Dashboard project is comprised of two parts: Running: currently the goal is to run WPT in Chrome, Edge, Firefox, and Safari daily, Serving: this site, wpt.fyi, displaying test results.
- http://en.wikipedia.org/wiki/Web_service - more direct API access
See also Data
- W3C TAG Ethical Web Principles - This document is intended to guide thoughtful development of web platform technologies, for standards developers and website authors alike. In particular, the purpose of this document is to inform wide review of new charters, new specifications, and candidate additions to published recommendations, as well as to support work on other horizontal review documents, such as the Web Platform Design Principles, Self-Review Questionnaire: Security and Privacy, or other similar checklists and sets of principles.
HTML
- HTML Living Standard - browser company base standard
- HTML5: A technical specification for Web developers
- HTML: The Markup Language
- HTML5: Edition for Web Authors - omits UA aspects
- HTML5: Editor's Draft - bleeding edge w3c
- HTML5.1
- https://news.ycombinator.com/item?id=12848419
- On the WHATWG HTML Living Standard process - Feb 25, 2012
- Update on the relationship between the WHATWG HTML living standard and the W3C HTML5 specification - 19th Jul, 2012
- HTML 5 gets forked up - 23rd July, 2012 [3]
CSS
- W3C: CSS (2010 snapshot)
- 30 Seconds of CSS - A curated collection of useful CSS snippets you can understand in 30 seconds or less. [7]
Editing software
See Editors, IDE, Vim, SSH, Web platforms, Static sites
- https://en.wikipedia.org/wiki/HTML_editor - a program used for editing HTML, the markup of a web page. Although the HTML markup in a web page can be controlled with any text editor, specialized HTML editors can offer convenience, added functionality, and organisation. For example, many HTML editors handle not only HTML, but also related technologies such as CSS, XML and JavaScript or ECMAScript. In some cases they also manage communication with remote web servers via FTP and WebDAV, and version control systems such as Subversion or Git. Many word processing, graphic design and page layout programs that are not dedicated to web design, such as Microsoft Word or Quark XPress, also have the ability to function as HTML editors. There are two main varieties of HTML editors: text and WYSIWYG (what you see is what you get, editors.
Docs, guides, etc.
Basics
- A Beginner’s Guide to HTML & CSS is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development.
- Dive Into HTML5 by Mark Pilgrim
- HTML5 tag cheatsheets
- Webmaker — a Mozilla project dedicated to helping you create something amazing on the web. Our tools, events and teaching guides allow webmakers to not only create the content that makes the web great, but — perhaps more importantly — understand how the web works.
- Mozilla Developer Network
- Web Platform - Apple, Adobe, Facebook, Google, HP, Microsoft, Mozilla, Nokia, and Opera
- Introduction to The Web Standards Curriculum - Opera
- Web Education Community Group Wiki - w3c
- CSS Structure and Rules - htmlhelp.com
Resources
- HTML5 Tutorials for Keeping Your Design Skills Tight - Jul 23, 2012
- HTML5 Rocks: Resources
- The Evolution of the Web
- W3Techs - World Wide Web Technology Surveys
Articles
- About HTML semantics and front-end architecture
- HTML5 id/class name cheatsheet - Or, “The mapping of HTML5 structural elements to id and class names for use with divs”
- Principles of writing consistent, idiomatic CSS
- Scalable and Modular Architecture for CSS (SMACSS)- A flexible guide to developing sites small and large.
- http://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard
- http://engineering.appfolio.com/2012/11/16/css-architecture/
Project basics
Favicon
Articles
Tools
- Favicon Generator
- http://realfavicongenerator.net/
- Collabyrinth
- png2ico - PNG to icon converter - doesn't preserve alpha
- X-Icon Editor - nice
- AllTheFavIcons - does it all
- http://faviconist.com - no quick small fonts
- http://antifavicon.com/ - small fonts, double line only
- http://www.favicon.cc/
JavaScript
Resets, normalize, etc.
See also WebDev#Templates and Frameworks
Different browsers have different defaults. You can either reset them to zero, or normalise with cross-browser sensible defaults.
- https://github.com/neiesc/awesome-minimalist - A curated list of awesome minimalist frameworks (simple and lightweight).
- https://www.w3.org/StyleSheets/Core - old
- W3C Core Styles - old
- Eric Meyer's CSS Tools: Reset CSS - a classic reset
- normalize.css - A modern, HTML5-ready alternative to CSS resets
- HTML5 Reset - A simple set of templates for any project
- stackoverflow: What is the difference between Normalize.css and Reset CSS?
- Wing - A beautiful CSS framework designed for minimalists.
- Element CSS - a CSS design / framework that only requires simple HTML elements for building a site. In contrast to most design frameworks that use a lot of nested elements and inline classes, Element does away with that, making it quicker and easier to create decent-looking static web sites from scratch that are easy to edit and manage with just a text editor.Think of it as a "Markdown for HTML", or "saner defaults for HTML elements".
- tacit - a CSS framework for dummies, who want their web services to look attractive but have almost zero skills in graphic design
- Water.css - a just-add-css collection of styles to make simple websites like this just a little bit nicer. Get it already!Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you. [18]
- sakura - a minimal classless css framework / theme.
- https://github.com/ajusa/lit - a ridiculously small responsive css framework.
- Water.css - a drop-in collection of CSS styles to make simple websites like this just a little bit nicer. Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.
Polyfills, shim/shivs
For fixing the lack of HTML5/CSS3 support in older browsers.
- Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.]
- Custom download - Use the Development version to develop with and learn from. Then, when you’re ready for production, use the build tool to pick only the tests you need.
- Documentation
- https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
- http://yepnopejs.com/ - used in modernizer
- http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
- http://ecsstender.org/
- http://selectivizr.com/
Filters
Elements and structure
- WhatWG: Headings and sections
- MDN: Sections and Outlines of an HTML5 Document
- Dive into HTML5: semantics
Outline
- The HTML5 Document Outline - 28 October, 2013
<body> <h1>heading text</h1> <section><h2>heading text... <section><h3>heading text... <section><h4>heading text... <section><h5>heading text... <section><h6>heading text...
- HTML5 Doctor: Document Outlines - July 12th, 2011
hrm;
- http://demosthenes.info/blog/522/HTML5-Best-Practices-For-header-section-and-primary-navigation
- http://www.sitepoint.com/forums/showthread.php?847136-HTML5-Section-vs-Article-elements
- http://www.netmagazine.com/features/truth-about-structuring-html5-page - ouch! hrrmm.
Doctype
Meta
Style
Script
<script type="text/javascript" src="http://use.typekit.com/rwc5tlm.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
Sections
- sections;
- body, main, section, nav, article, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address
main
Grouping
- p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption, div
div
Lists
- MDN: Lists
list-style: disc | circle | square
From Wikipedia;
list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAANAQMAAABb8jbLAAAABlBMVEX///8AUow5QSOjAAAAAXRSTlMAQObYZgAAABNJREFUCB1jYEABBQw/wLCAgQEAGpIDyT0IVcsAAAAASUVORK5CYII=);
Horizontal list;
#navlist li { display: inline; list-style-type: none; padding-right: 20px; }
text level
- a, em, strong, small, s, cite, q, dfn, abbr, data, time, code, var, samp, kbd, sub/sup, i, b, u, mark, ruby, rt, rp, bdi, bdo, span, br, wbr
a
Using target="_blank" will instruct the browser to create a new browser tab or window when the user clicks on the link.
span
Comments
<!-- this is a multiline comment -->
Images
See Graphics
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture - contains zero or more elements and one element to offer alternative versions of an image for different display/device scenarios. The browser will consider each child element and choose the best match among them. If no matches are found—or the browser doesn't support the element—the URL of the element's src attribute is selected. The selected image is then presented in the space occupied by the element.
Quote
Forms and input
- HN: Don't Be Lazy, Use HTML Labels Correctly
- http://www.tripwiremagazine.com/2010/05/submit-button-enhancements.html
Commands
Video
attribute float playbackRate;
Tab order
Pseudo-elements
- 5.10 Pseudo-elements and pseudo-classes
- css-tricks: A Whole Bunch of Amazing Stuff Pseudo Elements Can Do - Jun 13 2011
q::before { content: "»" } q::after { content: '«' }
Was just one colon, but CSS3 added another to distinguish from pseudo-classes.
content: ""; needed to display
- What's the Difference Between ":before" and "::before"? - Jan 13 2011
- The Lowdown on :Before and :After in CSS - 13 Jan 2012
element { position: relative; background: black; } element:before, element:after { content: ""; position: absolute; background: black; /* Match the background */ top: 0; bottom: 0; width: 9999px; /* some huge width */ } element:before { right: 100%; } element:after { left: 100%; }
html, body { overflow-x: hidden; }
To the left;
element:after { display: none; }
To the right;
element:before { width: 20px; }
Step it up, step it up, it's alright.
Tables
Not bad for tabular data, styling has advantages and disadvantages..
<table border="1"> <tr> <th colspan="2">Table header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> </table>
- https://developer.mozilla.org/en-US/docs/CSS/border-collapse
- https://developer.mozilla.org/en-US/docs/CSS/border-spacing
Units
- CSS Values and Units Module Level 3 - W3C Working Draft 8 March 2012
- CSS Values and Units Module Level 3 - Editor's Draft 19 July 2012
- 1em - element font size (affected by element nesting depth)
- 1rem - root element font size
- 1em = 16px (by default anyway)
- 1px (css pixel) = 1/96in
- 1vp = 1% viewport width
- 1in (inch) = 2.539954cm
- 1pt (point) = 1/72in
- 1pc (pica) = 12pt
- vw - Equal to 1% of the width of the initial containing block.
- vh - Equal to 1% of the height of the initial containing block.
- vmin - Equal to the smaller of ‘vw’ or ‘vh’.
- vmax - Equal to the larger of ‘vw’ or ‘vh’.
These new properties allow you to scale font sizes according to the viewport dimensions, i.e.
1vw is 1% of the viewport width 1vh is 1% of the viewport height 1vmin is the smallest of 1vw and 1vh
For example, assume your browser viewport is set to 1,000 x 1,200 pixels:
1.5vw = 15px font size 1.5vh = 18px font size 1.5vmin = min(1.5vw, 1.5vh) = 15px font size
- https://github.com/loooltooot/css-px-converter - simple Android app converter from px to vw & vh (default 1920x1080)
rem
- http://coderwall.com/p/1v6gfq
- ROOT EM! Using CSS3 "rem" Units for "Elastic Pixels"
- http://tetsubo.org/2012/01/developing-with-rem-based-layouts/
- http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/
- https://github.com/ry5n/rem - sass mixin
v*
100vw == window.width
examples
color
- CSS Color Module Level 3 - W3C Recommendation 07 June 2011
The color CSS property sets the foreground color of an element's text content, and its decorations. It doesn't affect any other characteristic of the element; it should really be called text-color and would have been named so, save for historical reasons and its appearance in CSS Level 1. Note that, the color value must be a uniform color, eventually not completely opaque, and can't be a <gradient> which is a <image> in CSS.
color: red; // A CSS Level 1 color color: orange; // The only color added in CSS Level 2 (Revision 1) color: antiquewhite; // A CSS Level 3 color, sometimes called a SVG or X11 color. color: #0f0; // The color 'lime' defined using the 3-character dash notation. color: #00ff00 // The color 'lime' defined using the 6-character dash notation. color: rgba( 34, 12, 64, 0.3); // A color defined using of the available functional notations. color: currentColor; // The special keyword representing the color's value of its direct ancestor
color: inherit
#bada55, etc.
- Stackoverflow: Why does HTML think “chucknorris” is a color?
Selectors
- Selectors API Level 1 - W3C Recommendation 21 February 2013
- Selectors API Level 2 - W3C Working Draft 28 June 2012
- Selectors Level 3 - W3C Recommendation 29 September 2011
- Selectors Level 4 - W3C Working Draft 2 May 2013. Implemented in Sass.
- http://www.w3.org/community/webed/wiki/CSS/Selectors
- http://learn.shayhowe.com/advanced-html-css/complex-selectors
- http://twostepmedia.co.uk/cssselectors/
- http://csswizardry.com/2011/09/writing-efficient-css-selectors/
- http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
- http://csswizardry.com/2012/07/shoot-to-kill-css-selector-intent/
h1 > h2 child combinator just matching first order descendant elements
- CSS Selectors: A Visual Guide & Reference - a visual guide to the most popular CSS selectors. [24]
Specificity
HN: 256 CSS Classes Can Override an #id
!important
Attribute selectors
img[src*="hideme"] { display: none; }
Pseudo-classes
- MDN Pseudo-classes
From Pseudo Class Selectors;
:root Selects the element that is at the root of the document. Almost certainly will select the <html> element, unless you are specifically working in some weird environment that somehow also allows CSS. Perhaps XML. :first-child Selects the first element of its type within a parent. :last-child Selects the last element of its type within a parent.
:nth-child(N) Selects elements based on a simple provided algebraic expression (e.g. "2n" or "4n-1"). Has the ability to do things like select even/odd elements, "every third", "the first five", and things like that. Covered in more detail here with a tester tool. :nth-of-type(N) Works like :nth-child, but used in places where the elements at the same level are of different types. Like if inside a div you had a number of paragraphs and a number of images. You wanted to select all the odd images. :nth-child won't work there, you'd use div img:nth-of-type(odd). Particularly useful when working with definition lists and their alternating -dt- and -dd- elements. :first-of-type Selects the first element of this type within any parent. So if you have two divs, each had within it a paragraph, image, paragraph, image. Then div img:first-of-type would select the first image inside the first div and the first image inside the second div. :last-of-type Same as above, only would select the last image inside the first div and the last image inside the second div. :nth-last-of-type(N) Works like :nth-of-type, but it counts up from the bottom instead of the top. :nth-last-child(N) Works like :nth-child, but it counts up from the bottom instead of the top. :only-of-type Selects only if the element is the only one of its kind within the current parent.
- selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.
- lang
Parent
CSS Selectors 4 Spec
Layout
width
display
display: block - default 100% width, flows vertically display: inline - consumes width of content, flows horizontally display: inline-block display: table-cell - vertical align method [25] http://www.quirksmode.org/css/display.html
float
float - floats element next to containing box or other floated element
clear
position
position: absolute - out of flow position: fixed
- https://github.com/andreasbovens/understanding-viewport
- http://www.brainjar.com/css/positioning/default.asp
sticky
- http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
- https://air.mozilla.org/intern-presentation-ford/ [27]
vertical align
- http://phrogz.net/css/vertical-align/index.html
- http://blog.themeforest.net/tutorials/vertical-centering-with-css/ [28]
- http://css-tricks.com/what-is-vertical-align/
- http://www.barelyfitz.com/screencast/html-training/css/positioning/
margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
.element { position: relative; top: 50%; transform: translateY(-50%); }
overflow
prevent scrollbars
- https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
- https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x
- https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
z-index
z-index works only on absolute or relative positioned elements.
- https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index
- http://en.wikipedia.org/wiki/Z-index
- http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
via js;
object.style.zIndex="1"
Flexbox
- YouTube: Learn Flexbox in 15 Minutes
CSS Grid
- https://github.com/danielabar/cssgrid-course - Learning CSS Grid with Wes Bos
box-sizing
- https://developer.mozilla.org/en-US/docs/CSS/box-sizing
- http://docs.webplatform.org/wiki/css/selectors/box-sizing
- http://paulirish.com/2012/box-sizing-border-box-ftw/ [33]
- http://stackoverflow.com/questions/2429819/why-is-the-w3c-box-model-considered-better
clip
Tips
- http://css-tricks.com/float-center/
- http://stackoverflow.com/questions/963636/why-cant-i-center-with-margin-0-auto
css is stoopid
Text
See also Typography
- http://stackoverflow.com/questions/471510/hide-text-using-css
- http://www.sitepoint.com/css3-starwars-scrolling-text/
- https://news.ycombinator.com/item?id=6714693
- http://codepen.io/lbebber/pen/BzoHi
font-weight
font-weight: normal; font-weight: bold; /* Relative to the parent */ font-weight: lighter; font-weight: bolder; font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900; font-weight: inherit;
font-style
font-style: normal; font-style: italic; font-style: oblique;
font-style: inherit;
font-variant-numeric
- font-variant-numeric - CSS: Cascading Style Sheets | MDN - The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
font-variant-numeric: oldstyle-nums;
text-align
text-align [ start | end | left | right | center ] || <string> ] | justify | match-parent | start end
text-rendering
text-rendering auto | optimizeSpeed | optimizeLegibility | geometricPrecision
"Basically, setting the value of “optimizeLegibility” for the “text-rendering” property lets you enable things like ligatures and more accurate kerning (the spacing between letters), which, as the name of the value implies, leads to improved legibility and an overall better appearance of the text as unnecessary spaces are eliminated where possible."
"There are actually significant, effectively fatal performance problems (such as 30-second loading delays, or longer) on mobile devices when using optimizeLegibility for long pages."
text-transform
text-transform: none | capitalize | uppercase | lowercase | full-width
text-shadow
- https://developer.mozilla.org/en-US/docs/CSS/text-shadow
- http://www.w3.org/Style/Examples/007/text-shadow.en.html
- http://www.wordpressthemeshock.com/css-text-shadow/
text-shadow: 0 1px 0 rgba(255,255,255,.1);
color: #fff; text-shadow: 0 0 40px rgba(255,255,255,.25);
See also Style#Shadows
text-stroke
Webkit only.
- http://www.westciv.com/tools/textStroke/ - generator
- strokeText.js is an unobtrusive javascript library working in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. The library provides cross API text stroking capability for Canvas and VML. The (built in) sans-serif font is also adapted for SVG to ensure an identical representation.
text-overflow
text-overflow [ clip | ellipsis | <string> ] determines how overflowed content that is not displayed is signaled to the users.
or with gradient; http://xion.org.pl/2011/12/26/text-ellipsis-with-gradient-fade-in-pure-css/
word-wrap
mask-image
- http://trentwalton.com/2011/05/19/mask-image-text/ - font texture
- http://trentwalton.com/bgclip/ - with transition
Other
Properties
background
- background transparent || none || repeat || scroll || 0% 0%
background: #f00; background: url('http://example.com/image.png'); background: url(bgimage.jpg) no-repeat;
- http://www.tizag.com/cssT/background.php
- http://www.vanseodesign.com/css/background-properties - w/ css3
.multi_bg_example { background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png), linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); background-repeat: no-repeat, no-repeat, repeat; background-position: bottom right, left, right; }
- https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multiple_backgrounds
- http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/ - older
background-color
background-color: white;
background-image
background-image: url('file.png')
- http://jsfiddle.net/estelle/SJjJb/ - SVG at a data URI for background images...
background-repeat
background-repeat: no-repeat; stops the image repeating (tiling)
background-position
background-position: 0% 0% background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; background-position: 25% 75%; background-position: 0px 0px, center;
background-attachment
background-attachment: scroll / fixed / local;
- http://people.opera.com/pepelsbey/experiments/bga/
- http://lea.verou.me/2012/04/background-attachment-local/
background-size
background-size: 100%; make background exactly fit element background-size: 50% 50%;
background-clip
background-clip: border-box / padding-box / content-box; specifies whether an element's background, either the color or image, extends underneath its border.
background-clip: text; works well with text-fill-color: transparent;
border
border: <border-width> || <border-style> || <color>
element { border: dashed } /* dashed border of medium thickness, the same color as the text */ element { border: dotted 1.5em } /* dotted, 1.5em thick border, the same color as the text */ element { border: solid red } /* solid, red border of medium thickness */ element { border: solid blue 10px } /* solid, blue border of 10px thickness */
border-radius
broder-radius [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
gradients
- http://24ways.org/2010/everything-you-wanted-to-know-about-gradients/
- http://lea.verou.me/css3-gradients/
- http://nicolahibbert.com/css3-alpha-transparent-gradients/
linear
linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0));
- 00ffffff colour breaks Sass (argb hex)
radial
Tools
gradient borders
mask
No IE or FF [35]. FF SVG hack.
box-shadow
box-shadow: inset? <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>?, .etc box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6); box-shadow: inset 0 0.3em 10px -8px black;
- http://creativejuiz.fr/trytotry/css3-box-shadow-after-before/
- http://playground.genelocklin.com/depth/
- http://theamazingweb.net/2012/09/20/special-box-shadow-with-css/
See also Style#Shadows
- https://jsfiddle.net/MadLittleMods/r32rL/ - bevel example
white-space
- https://developer.mozilla.org/en-US/docs/CSS/white-space
- http://www.quirksmode.org/css/whitespace.html - view source for examples
outline
- http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines
- http://htmldog.com/reference/cssproperties/outline/
opacity
transform
- https://developer.mozilla.org/en-US/docs/CSS/transform
- https://developer.mozilla.org/En/CSS/Using_CSS_transforms
- CSS3Warp is a small (<8kb minified unzipped) javascript library for warping any HTML text around an arbitrary path. Text will look as if it were created with Illustrator's attach-to-path tool. Anyway it is pure HTML text that can be styled with CSS, copied and crawled. csswarp works standalone and does not rely on jQuery or another library (a jQuery plugin is in the works though). csswarp.js offers an extensive number of settings to adjust text warping. Right now it will work in every modern browser that supports css3 transforms. Support for IE versions <9 is planned for a future release.
- http://css-tricks.com/snippets/css/flip-an-image/
- http://www.dzyngiri.com/index.php/beautiful-thumbnail-hover-effect-using-css3/
transition
- https://developer.mozilla.org/en-US/docs/CSS/transition
- https://developer.mozilla.org/En/CSS/CSS_transitions
- http://oli.jp/2010/css-animatable-properties/
- https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions
- http://www.onextrapixel.com/2011/10/17/animating-colors-using-css3-transitions-with-jquery-fallback/
- http://www.dzyngiri.com/index.php/beautiful-thumbnail-hover-effect-using-css3/
- http://codepen.io/html5web/pen/EFyzB
body { transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -webkit-transition:all .5s ease-in-out; }
transition: color 1s ease; transition: background 1s ease; transition: background-color 1s ease;
- https://developer.mozilla.org/en-US/docs/CSS/transition-timing-function
- http://www.the-art-of-web.com/css/timing-function/
- http://www.tangledindesign.com/blog/css3-transitions-the-transition-timing-function-property-explained/
transition-timing-function: ease transition-timing-function: ease-in transition-timing-function: ease-out transition-timing-function: ease-in-out transition-timing-function: linear transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1) transition-timing-function: step-start transition-timing-function: step-stop transition-timing-function: steps(4, end) transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1)
wrap
filter
- http://bennettfeely.com/image-effects/ - background-blend-mode, mix-blend-mode, or filter [40]
cursor
color
- Mother-effing hsla() - HSL(a) is the jam. It's a piece of cake to do mentally, too. Hue is like this: ROY G BIV is 0 to 300, and then back to red again at 360. Saturation % is from grey to intense color; lightness % and alpha 0-1 are easy 'nuff. read more on hsl awesomeness. Another HSL colorspace mnemonic: our friends RGB are at 0, 120, and 240. And yellow, cyan, magenta (from CMYK) are split between those ones at 60, 180, and 300. Naice!
scroll-padding-*
Custom properties
- Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN - sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);). Complex websites have very large amounts of CSS, often with a lot of repeated values. For example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. Custom properties allow a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic identifiers. For example, --main-text-color is easier to understand than #00ff00, especially if this same color is also used in other contexts.
- Open Props - CSS custom properties to help accelerate adaptive and consistent design.
CSS forms
Shapes
- http://razvancaliman.com/writing/css-shapes-editor-chrome/ [42]
- https://www.behance.net/collection/25035325/Shapes
Shapes (old)
- http://cssdeck.com/labs/rounded-corners-with-css3-border-radius
- http://css-tricks.com/almanac/properties/b/border-radius/
- http://tympanus.net/Tutorials/CircleHoverEffects/
- http://cssdeck.com/labs/eclectic-circle-in-css3-animation
- http://philarcher.org/diary/2012/csscircles/
- http://tympanus.net/Tutorials/BasicReadyToUseCSSStyles/ - various ideas
- http://codepen.io/noahblon/pen/GKflw - animated warp stars
Buttons
- Zocial button set with CSS. Entirely vector-based social buttons.
- Buttonize - The Instant Button Companion v3.1
Icons
See also Typography#Webfont icons, Graphics#Icons
- CSS3 Monochrome Icon Set - A set of 85+ icons / glyphs created purely in CSS3 that you can use in your projects freely.
Shapes
- http://codepen.io/ansac/pen/BHtkE - hegaxon
- http://cssdeck.com/labs/double-ring - animated circles
- http://blog.tsoots.fi/2009/02/preparing-document-for-printer-cmyk-pdf.html - circular tooltip
- http://hop.ie/blog/balls/ - spheres
- http://codepen.io/milkmiruku/pen/VLvQXj - flower/seed of life
Patterns
- http://codepen.io/collection/Ilnuh/ - optical illusions
Tooltips
- Hint.css is a tooltip library written in SASS which uses only HTML/CSS to create simple tooltips.
Forms
Animations
Other
Sprites
ls 1.png 2.gif dot.png phoney.gif tw.gif convert *png *gif -append result/result-sprite.png
- Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.
- http://spriteme.org/ - bookmarklet that makes sprite images and code from existing pages
- http://yostudios.github.com/Spritemapper/ - python
Canvas
Text
- CanvasText is a library written in JavasScript that lets you write styled text easier and with a similar HTML & CSS syntax.
Images
Screenshots
Polyfill
Extensions
- Canvas Editor for Chrome
Other
- Ejecta - A Fast, Open Source JavaScript, Canvas & Audio Implementation for iOS
Animation
- http://www.w3.org/TR/css3-animations/
- https://developer.mozilla.org/en/CSS/CSS_animations
- http://www.jasondavies.com/animated-bezier/
- http://daneden.me/animate/
- http://davidwalsh.name/css-flip
- http://www.the-art-of-web.com/css/css-animation/
- http://tutorialzine.com/2009/12/colorful-clock-jquery-css/
- http://davidwalsh.name/demo/css-zoom.php
- http://jsdo.it/ksk1015/cLLl
- http://lea.verou.me/2012/02/simpler-css-typing-animation-with-the-ch-unit/
- http://labs.mitgux.com/smooth-scroll-to-top-using-css3-animations/
- Effeckt.css - Performant Transitions & Animations [44]
- http://geelen.github.io/x-gif/#/http://i.imgur.com/iKXH4E2.gif = animated gifs
Tools
Examples
- http://codepen.io/lbebber/pen/ypgql - text glitch
3D
- Tridiv is a web-based editor for creating 3D shapes in CSS. webkit only
Javascript
Menus
Filters
only chrome has native support as of nov 2012.
- http://jsfiddle.net/6PSVU/ - bottom: 0;
Tabs
Iframes
Full screen
Scrollbars
See also JS
Printing
CSS libraries
Data URI
- DataURL.net is home to some open source tools for creating and working with Data URLs (RFC 2397).
- http://dopiaza.org/tools/datauri/index.php
<img src="data:image/gifbase64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="transparent placeholder" />
Data Attributes
- http://html5doctor.com/html5-custom-data-attributes/
- http://archive.plugins.jquery.com/project/customdata
article[data-columns='3']{ width: 400px; } article[data-columns='4']{ width: 600px; }
Microdata
See also Semantic web, Data
- https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop - used to add properties to an item. Every HTML element can have an itemprop attribute specified, and an itemprop consists of a name-value pair. Each name-value pair is called a property, and a group of one or more properties forms an item. Property values are either a string or a URL and can be associated with a very wide range of elements including <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source> , <track>, and <video>.
IndexedDB
webstorage
- Storage interface
- sessionStorage attribute
- localStorage attribute
- storage event
- etc.
- dustbin - A slim wrapper around localStorage and sessionStorage that allows for NoSQL style access. It's basically a JSON-backed object database for your web browser.
- SASStore - Simple binary string data store for local storage in the browser.
Media
See JS libs#Media
SMIL
- W3C Synchronized Multimedia Home page - The Synchronized Multimedia Integration Language (SMIL, pronounced "smile") enables simple authoring of interactive audiovisual presentations. SMIL is typically used for "rich media"/multimedia presentations which integrate streaming audio and video with images, text or any other media type. SMIL is an easy-to-learn HTML-like language, and many SMIL presentations are written using a simple text-editor. For a more detailed description of the goals of the SMIL language, see the W3C Activity Statement on Synchronized Multimedia; a regularly updated report to W3C members that is also available to the public. The public is invited to send comments and information requests about SMIL to the public mailing list www-smil@w3.org (public archives). The SYMM WG is closed since 01 April 2012. You may find related topics in the following Working Groups: HTMLWG (for example HTML5 video element); CSS WG (for example CSS Transitions Module Level 3 ); Media fragments WG (for example the syntax for constructing media fragment URIs ) Following the closure of the SYMM WG, the current Synchronized Multimedia Home page is not maintained anymore. If you encounter broken links, these are du change of URI by the publisher without convinient forward to the new URI.
- Synchronized Multimedia Integration Language (SMIL 3.0) - This document specifies the third version of the Synchronized Multimedia Integration Language (SMIL, pronounced "smile"). SMIL 3.0 has the following design goals: Define an XML-based language that allows authors to write interactive multimedia presentations. Using SMIL, an author may describe the temporal behaviour of a multimedia presentation, associate hyperlinks with media objects and describe the layout of the presentation on a screen. Allow reusing of SMIL syntax and semantics in other XML-based languages, in particular those who need to represent timing and synchronization. For example, SMIL components are used for integrating timing into XHTML [XHTML10] and into SVG [SVG]. Extend the functionalities contained in the SMIL 2.1 [SMIL21] into new or revised SMIL 3.0 modules. Define new SMIL 3.0 Profiles incorporating features useful within the industry.
- https://en.wikipedia.org/wiki/Synchronized_Multimedia_Integration_Language - a World Wide Web Consortium recommended Extensible Markup Language (XML) markup language to describe multimedia presentations. It defines markup for timing, layout, animations, visual transitions, and media embedding, among other things. SMIL allows presenting media items such as text, images, video, audio, links to other SMIL presentations, and files from multiple web servers. SMIL markup is written in XML, and has similarities to HTML. Members of the World Wide Web Consortium (also known as the "W3C") created SMIL for streaming media presentations, and published SMIL 1.0 in June 1998. Many of these W3C members helped author several versions of SMIL specifications between 1996 (when the first multimedia workshops were hosted by the W3C) and 2008 (when SMIL 3.0 was published). SMIL is an XML-based application, and is a part of many Multimedia Messaging Service (MMS) applications. SMIL can be combined with other XML-based specifications such as with SVG (as has been done with SVG animation) and with XHTML (as done with HTML+TIME).
- https://github.com/sagiadinos/garlic-creator - an easy to use programm to create SMIL indexes. They can be export or transfered via network (Rest-API) to SMIL compatible media player) This is suitable for simple digital signage use cases.
- Garlic Digital Signage Apps
- https://github.com/sagiadinos/garlic-player - Digital Signage Player based on SMIL
- A-SMIL.org - an "Advocacy for SMIL" (hence A-SMIL) as an open standard for digital signage. Thank you for all your support. We are on Google's page 1 for search on SMIL.
- What is a Digital Signage Player? | unlike other media players - In this article, you will learn in detail what is the difference between a digital signage player and conventional playback programs like the VLC player, QuickTime player or MPlayer. Furthermore, I will introduce you to a standard called SMIL, which gives you a lot of freedom.
Web Components
- Polymer - a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers. A set of polyfills (Shadow DOM, Custom Elements, HTML Imports), and a next-generation web application framework built upon these core technologies called the Polymer.
- MDN: Web Components - a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
Shadow DOM
- What the Heck is Shadow DOM? - Jan 14, 2011
- A Short Simple Video Explaining the Shadow DOM and Web Components - March 22, 2012
- The Basics of the Shadow DOM - Aug 1, 2012
Custom Elements
- X-Tag is a small JavaScript library, created and supported by Mozilla, that brings Web Components Custom Element capabilities to all modern browsers.
- Brick - UI Components for Modern Web Apps
- Custom Elements - a web components gallery for modern web apps
Accessibility
- https://en.wikipedia.org/wiki/Web_accessibility - or eAccessibility, is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed. When sites are correctly designed, developed and edited, more users have equal access to information and functionality.
For example, when a site is coded with semantically meaningful HTML, with textual equivalents provided for images and with links named meaningfully, this helps blind users using text-to-speech software and/or text-to-Braille hardware. When text and images are large and/or enlargeable, it is easier for users with poor sight to read and understand the content. When links are underlined (or otherwise differentiated) as well as colored, this ensures that color blind users will be able to notice them. When clickable links and areas are large, this helps users who cannot control a mouse with precision. When pages are not coded in a way that hinders navigation by means of the keyboard alone, or a single switch access device alone, this helps users who cannot use a mouse or even a standard keyboard. When videos are closed captioned, chaptered, or a sign language version is available, deaf and hard-of-hearing users can understand the video. When flashing effects are avoided or made optional, users prone to seizures caused by these effects are not put at risk. And when content is written in plain language and illustrated with instructional diagrams and animations, users with dyslexia and learning difficulties are better able to understand the content. When sites are correctly built and maintained, all of these users can be accommodated without decreasing the usability of the site for non-disabled users.
- https://github.com/nfreear/diveintoaccessibility - free book, "30 days to a more accessible web site"
- https://github.com/Heydon/readabilityCheckerCLI - A node CLI for checking how readable content is. Accepts a URL or HTML file.
- https://knowbility.org/about - a nonprofit organization based in Austin, Texas and an award-winning leader in accessible information technology. Our mission is to create an inclusive digital world for people with disabilities.
W3C
- https://en.wikipedia.org/wiki/Web_Accessibility_Initiative - an effort to improve the accessibility of the World Wide Web for people with disabilities. People with disabilities encounter difficulties when using computers generally, but also on the Web. Since they often require non-standard devices and browsers, making websites more accessible also benefits a wide range of user agents and devices, including mobile devices, which have limited resources. According to a US government study, 71% of website visitors with disabilities will leave a website that is not accessible.
The W3C launched the Web Accessibility Initiative in 1997 with endorsement by The White House and W3C members. It has several working groups and interest groups that work on guidelines, technical reports, educational materials and other documents that relate to the several different components of web accessibility. These components include web content, web browsers and media players, authoring tools, and evaluation tools.
WCAG
- Web Content Accessibility Guidelines (WCAG) 2.0
- https://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines - are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the main international standards organization for the Internet. They are a set of recommendations for making Web content more accessible, primarily for people with disabilities—but also for all user agents, including highly limited devices, such as mobile phones. WCAG 2.0, were published in December 2008 and became an ISO standard, ISO/IEC 40500:2012 in October 2012. WCAG 2.1 became a W3C Recommendation in June 2018.
ARIA
- https://en.wikipedia.org/wiki/WAI-ARIA - Accessible Rich Internet Applications (WAI-ARIA) is a technical specification published by the World Wide Web Consortium (W3C) that specifies how to increase the accessibility of web pages, in particular, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. In the 15 September 2008 working draft, SVG 1.2 Tiny added support for WAI-ARIA. On 20 March 2014, WAI-ARIA 1.0 became a completed W3C Recommendation. 14 December 2017 saw the release of WAI-ARIA 1.1.
Web developers increasingly use client-side scripts to create user interface controls that cannot be created with HTML alone. They also use client-side scripts to update sections of a page without requesting a completely new page from a web server. Such techniques on websites are called rich Internet applications. These user interface controls and content updates are often not accessible to users with disabilities, especially screen reader users and users who cannot use a mouse or other pointing device. WAI-ARIA allows web pages (or portions of pages) to declare themselves as applications rather than as static documents, by adding role, property, and state information to dynamic web applications. ARIA is intended for use by developers of web applications, web browsers, assistive technologies, and accessibility evaluation tools.
WAI-ARIA describes how to add semantics and other metadata to HTML content in order to make user interface controls and dynamic content more accessible. For example, with WAI-ARIA it is possible to identify a list of links as a navigation menu and to state whether it is expanded or collapsed. Although originally developed to address accessibility issues in HTML, the use of WAI-ARIA is not limited to HTML: in principle, it can also be used in other markup languages such as Scalable Vector Graphics (SVG).
Specs
- WAVE Web Accessibility Evaluation Tools - a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content. Our philosophy is to focus on issues that we know impact end users, facilitate human evaluation, and to educate about web accessibility.
BS 8878, Web accessibility - Code of Practice, is consistent with the Equality Act 2010 and is referenced in the UK government’s e-Accessibility Action Plan
Headings should not be removed using display:none, because it removes the headings from assistive technology. Instead headings can be made invisible to sighted users using CSS class="element-invisible". [56]
Colour blindness
Screen readers
Web Annotations
Misc
- http://davatron5000.github.com/deCSS3/ - bookmarklet to test pre css3 browsers
- http://www.youtube.com/watch?v=a2_6bGNZ7bA Faster HTML and CSS: Layout Engine Internals for Web Developers
Compatibility
Various methods and polyfills.
robots.txt
Other
- https://news.ycombinator.com/item?id=8562005 - 3d w/ css
Tools
- https://github.com/mgdm/htmlq - Like jq, but for HTML. Uses CSS selectors to extract bits of content from HTML files.
- http://www.layerstyles.org/ - box shadow, etc.
- http://www.css3d.net/ribbon-generator/
- Ceaser - CSS Easing Animation Tool
- http://easings.net/
- http://www.patternify.com/ - CSS Pattern Generator