Etymologie, Etimología, Étymologie, Etimologia, Etymology, (griech.) etymología, (lat.) etymologia, (esper.) etimologio
US Vereinigte Staaten von Amerika, Estados Unidos de América, États-Unis d'Amérique, Stati Uniti d'America, United States of America, (esper.) Unuigintaj Statoj de Ameriko
Homepage, Home page, Page d'accueil, Pagina Elettronica, Homepage, (esper.) hejmpago

"§"
1001fonts.com
Fonts

Your favorite site for free fonts.

Font Categories

• General: Serif · Sans-Serif · Italic · Letterbats · Initials · Small Caps
• Size: Poster · Display · Headlines · Text · Small Text · Captions
• Weight: Hairline · Thin · Light · Regular · Medium · Bold · Heavy · Black · Fat
• Width: Monospaced · Ultra Narrow · Extra Narrow · Narrow · Wide · Extra Wide · Ultra Wide
• Occasion: Weddings · Baby Showers · Birthdays · Parties · Tattoos
• Holidays: Christmas · Hanukkah · Valentine's Day · St. Patrick's Day · Easter · Halloween · …
• Decade: 1990s · 1980s · 1970s · 1960s · 1950s · 1940s · 1930s · 1920s · 1910s · 1900s · 1890s · …
• Foreign Imitation: African · Alien · Arabic · Asian · Greek · Mexican · Runic · Russian · …
• Yesteryear: Retro · Vintage · Typewriter · Art Deco · Antique · Art Nouveau · Medieval · Blackletter · Old English
• Modern: Techno · Futuristic · Science-Fiction · Digital · LCD · Blocky · Geometric · Stenciled · Neon · Hard to Read
• Style: 3d · Chunky · Comic · Calligraphy · Cute · Decorative · Fancy · Distorted · Grungy · Eroded · Outlined · Contoured · Multi-linear · Filled · Pixel · Warped
• Mood: Quirky · Girly · Scary · Romantic · Groovy · Funky · Hot · Cold
• Handwriting: Cursive · Script · Feminine · Masculine · Formal · Informal · Messy · Neat · Scribbled · Brushed · Graffiti · …
• Theme: Famous · Brandname · Army · Wild West · Circus · TV · Movies · Music · Athletics · Varsity · Sports
• Dingbats: Icons · Borders · Frames · Animals · People · Flowers · Hearts · Food · …
• Special: Free Fonts for Commercial Use · New & Fresh Fonts · Most Popular Fonts · Alphabetic Fonts · Largest Font Families · Trending Fonts

"§"
about.com
Javascript Tutorials

Browse Topic

• Javascript Tutorials
• Problem Solving
• JavaScript Testing
• Controls and Widgets
• Validating Forms
• Regular Expressions
• Animation & Effects
• Windows and Frames
• Fun with Images
• Ajax
• Bookmarklets & User Scripts
• Script Makers
• Script Library
• Reference

"§"
alistapart
For People who make Websites
WebDesign

A List Apart Magazine (ISSN: 1534-0295) explores the design, development, and meaning of web content, with a special focus on techniques and benefits of designing with web standards.

Topics: Code | Content | Culture | Design | Process | User Science

Topics

Code (338 articles)

Markup, style, scripting, and server-side techniques in the service of user-centric interfaces and tools. Cross-browser XHTML, CSS, and JavaScript. Roll your own X using scripting or markup language Y. Producing clearer, saner, more secure code that plays well with others. The love/hate relationship between layout and markup. Workarounds for that irritating bug and why (or why not) to use them.
Includes: Browsers, CSS, Flash, HTML and XHTML, Scripting, Server Side, XML.

Content (60 articles)
Better writing and more effective communication on the web. Working with, and in some cases, building your own content management systems. Writing for the medium. Designing for readers. The “what”? and “why”? of audio, video, and animated content. Web narratives and design as content. Crafting content-focused digital products and brands.
Includes: Brand Arts, Community, Writing.

Culture (117 articles)
This web life: emerging ideas, thoughtful topics, insights and provocations. Legal and social issues of web creation and publishing. Innovations and abuses, freedom and constraints. Patents and copyright. Trends versus tipping points. All the messy stuff that happens outside of your projects.
Includes: Industry, Politics and Money, State of the Web.

Design (150 articles)
Visual communication, art direction. Designing systems or interfaces to help users achieve goals. Graphic design, interface design, user experience design, typography, illustration, photography, artwork. Creative and technical techniques for crafting great interfaces. Developing an appropriate look and feel. How web users respond to design. Identity systems and brand development. Visual styles, influences, and trends.
Includes: Graphic Design, User Interface Design, Typography, Layout.

Process (100 articles)
The business of business. Workflow, project management, keeping projects on target, brainstorming, scope creep, building and working with teams. The creative process. Ideas and inspiration. All the messy stuff that happens inside of your projects. Communicating with clients and colleagues. Selling. Listening. Listening, listening, listening!
Includes: Creativity, Business, Project Management and Workflow.

User Science (124 articles)
What does a user want? Designing for needs. Putting the user first. Making web content accessible to more people and more kinds of internet devices. Designing and testing usable interfaces. Use-case models and model users. Scenario development, wireframes. Usability testing on the cheap. And on the not so cheap. How to spec a site people will want (and be able) to use.
Includes: Accessibility, Information Architecture, Usability.

"§"
alvarotrigo.com
CSS Shadow Gradients

...
What is a shadow gradient?

A "shadow gradient" is a shadow that contains a transition between two or more colors. The use of gradients is a very popular trend in web design nowadays. They are usually used as a way to grab the attention of the visitor or to create a modern kind of look. They are used in logos, apps, web design, and practically anywhere nowadays. Traditionally gradients have been used mainly on backgrounds due to technical restrictions. But nowadays there are workarounds to bring gradients into shadows too.
...

"§"
benjaminbenben.com
CSS Rules behind a page
CSS Rules of a page

Enter a url to see how the css rules interact with that page

"§"
blindtextgenerator
Blindtext Generator

This handy tool helps you create dummy text for all your layout needs.

We are gradually adding new functionality and we welcome your suggestions and feedback.

Please feel free to send us any additional dummy texts.

Dummy Text | Cicero | Cicero (en) | Li Europan lingues | Li Europan lingues (en) | Far far away | Werther | Kafka | Pangram | a-z A-Z 123

"§"
blooberry
The Advanced HTML Reference

• Element Index
• Element Tree
• Generic Attributes
• Character Entities

• HTML Support History
• HTML Spec History
• Browser History

• More About The Site...
• Downloads
• Mirrors

• What Tags To Use?
• Miscellaneous HTML Topics
• Authoring FAQs

• a: a href | a name | abbr | acronym | address | applet | area
• b: b | base | basefont | bdo | bgsound | big | blink | blockquote | body | br | button
• c: caption | center | char. entities | cite | code | col | colgroup | comment
• d: dd | del | dfn | dir | div | dl | dt
• e: em | embed
• f: fieldset | font | form | frame | frameset
• h: head | hr | html | hx
• i: i | iframe | ilayer | img | inlineinput | ins | isindex
• input type= button | checkbox | file | hidden | image | password | radio | readonly | reset | submit | text
• k: kbd | keygen
• l: label | layer | legend | li | link | listing
• m: map | marquee | menu | meta | multicol
• n: nextid | nobr | noembed | noframes | nolayer | noscript
• o: object | ol | optgroup | option
• p: p | param | plaintext | pre
• q: q
• r: rt | ruby
• s: s | samp | script | select | small | sound | spacer | span | spell | strike | strong | style | sub | sup
• t: table | tbody | td | textarea | tfoot | th | thead | title | tr | tt
• u: u | ul
• v: var
• w: wbr
• x: xml | xmp
• !: <!doctype> | <!-- --> | <!--[downlevel-hidden]> | <![downlevel-revealed]>

"§"
bravenet.com
Webmaster Resource Center

Counter

Jump Menu

Select a page Kontakt Security

Vote Caster

"§"
caniuse.com
CSS - Compatibility tables

Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

CSS

| @font-face Web fonts | calc() as CSS unit value | 2.1 selectors | Counters | Feature Queries | Filter Effects | Generated content | Gradients | Grid Layout | Hyphenation | inline-block | Masks | min/max-width/height | outline | position:fixed | Regions | Repeating Gradients | resize property | Table display | 3D Transforms | Animation | Background-image options | Border images | Border-radius (rounded corners) | Box-shadow | Box-sizing | Colors | Media Queries | Multiple backgrounds | Multiple column layout | object-fit/object-position | Opacity | Overflow-wrap | selectors | Text-overflow | Text-shadow | Transforms | Transitions | word-break | Flexible Box Layout Module | Font feature settings | rem (root em) units | TTF/OTF - TrueType and OpenType font support | Viewport units: vw, vh, vmin | Canvas Drawings | Reflections | text-stroke | pointer-events (for HTML) | All CSS features

HTML5

| Audio element | Canvas (basic support) | Color input type | contenteditable attribute (basic support) | Datalist element | dataset & data-* attributes | Date/time input types | Details & Summary elements | Download attribute | Drag and Drop | Form validation | HTML5 form features | input placeholder attribute | New semantic elements | Number input type | Offline web applications | Progress & Meter | Range input type | Ruby annotation | sandbox attribute for iframes | Session history management | Text API for Canvas | Toolbar/context menu | Video element | WebGL - 3D Canvas graphics | All HTML5 features

JS API

| Blob URLs | Cross-document messaging | Cross-Origin Resource Sharing | Device Orientation events | File API | FileReader API | Filesystem & FileWriter API | Full Screen API | Geolocation | getUserMedia/Stream API | Hashchange event | IndexedDB | JSON parsing | matches() DOM method | matchMedia | Navigation Timing API | PageVisibility | requestAnimationFrame | Server-sent DOM events | Shared Web Workers | Typed Arrays | Web Audio API | Web Notifications | Web Sockets | Web Storage - name/value pairs | Web Workers | Web SQL Database | All JS API features

SVG

| Inline SVG in HTML5 | SVG (basic support) | SVG effects for HTML | SVG filters | SVG fonts | SVG fragment identifiers | SVG in CSS backgrounds | SVG in HTML img element | SVG SMIL animation | All SVG features

Other

| async attribute for external scripts | classList (DOMTokenList ) | Content Security Policy | Data URIs | defer attribute for external scripts | ECMAScript 5 Strict Mode | getComputedStyle | getElementsByClassName | MathML | MPEG-4/H.264 video format | Ogg/Theora video format | PNG alpha transparency | querySelector/querySelectorAll | Strict Transport Security | Touch events | WAI-ARIA Accessibility features | WebM/VP8 video format | WOFF - Web Open Font Format | XHTML served as application/xhtml+xml | XMLHttpRequest 2 | Animated PNG (APNG) | EOT - Embedded OpenType fonts | SPDY networking protocol | XHTML+SMIL animation | All Other features

"§"
chromeexperiments
HTML5-Demos

"§"
coolarchive
Icons zum Download
Logo-Generator

"§"
criticue
Homepage-Kritik auf Gegenseitigkeit

Your website.
Peer reviewed.
One for one feedback exchange.
No signup required.
Submit your website.
Review one other design.
Get feedback about your design.
Enjoy it. Repeat.

"§"
CSS (W3)

Topics: Code: CSS

Using "Cascading Style Sheets" ("CSS") as part of standards-based web design. Separating presentation from structure and behavior. CSS layout techniques, tips, and tricks. Crafting a print style sheet. Spruced-up site maps, CSS drop-downs, zoom layouts, cross-column pull-outs. Emulating print design, Flash, PDF, and table layouts. Style sheet switching for user customization, accessibility, and creative purposes. Pocket-sized design: taking your website to the small screen. Faux backgrounds, sliding doors, CSS sprites. CSS support; browser bugs and workarounds. Showing and hiding elements, replacing text with images. Fixed and liquid layouts. See also typography. (102 articles)

• Creating Intrinsic Ratios for Video - by Thierry Koblentz - Issue 284 May 26, 2009
• Return of the Mobile Stylesheet - by Dominique Hazaël-Massieux - Issue 275 January 6, 2009
• Fluid Grids - by Ethan Marcotte - Issue 279 March 3, 2009
• Progressive Enhancement with CSS - by Aaron Gustafson - Issue 270 October 21, 2008
• Understanding Progressive Enhancement - by Aaron Gustafson - Issue 269 October 7, 2008
• CSS Sprites2 - It’s JavaScript Time - by Dave Shea - Issue 266 August 26, 2008
• Faux Absolute Positioning - by Eric Sol - Issue 261 June 17, 2008
• Accessible Data Visualization with Web Standards - by Wilson Miner - Issue 256 April 8, 2008
• Version Targeting: Threat or Menace? - by Jeffrey Zeldman - Issue 253 February 19, 2008
• Keeping Your Elements’ Kids in Line with Offspring - by Alex Bischoff - Issue 252 February 5, 2008
• Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8 - by Aaron Gustafson - Issue 251 January 21, 2008
• How to Size Text in CSS - by Richard Rutter - Issue 249 November 20, 2007
• Put Your Content in My Pocket - by Craig Hockenberry - Issue 244 August 28, 2007
• CSS @ Ten: The Next Big Thing - by Håkon Wium Lie - Issue 244 August 28, 2007
• Conflicting Absolute Positions - by Rob Swan - Issue 241 July 13, 2007
• Frameworks for Designers - by Jeff Croft - Issue 239 June 12, 2007
• Multi-Column Layouts Climb Out of the Box - by Alan Pearce - Issue 232 February 6, 2007
• How to Grok Web Standards - by Craig Cook - Issue 230 January 9, 2007
• Super-Easy Blendy Backgrounds - by Matthew O'Neill - Issue 227 November 13, 2006
• 12 Lessons for Those Afraid of CSS and Standards - by Ben Henick - Issue 224 September 26, 2006
• Sliced and Diced Sandbags - by Rob Swan - Issue 222 August 22, 2006
• Automatic Magazine Layout - by Harvey Kane - Issue 219 July 11, 2006
• Prettier Accessible Forms - by Nick Rigby - Issue 218 June 20, 2006
• A More Accessible Map - by Seth Duffey - Issue 215 April 18, 2006
• In Search of the Holy Grail - by Matthew Levine - Issue 211 January 30, 2006
• Thinking Outside the Grid - by Molly E. Holzschlag - Issue 209 December 19, 2005
• Printing a Book with CSS: Boom! - by Håkon Wium Lie, Bert Bos - Issue 208 November 28, 2005
• CSS Swag: Multi-Column Lists - by Paul Novitski - Issue 204 September 26, 2005
• ALA’s New Print Styles - by Eric Meyer - Issue 203 September 19, 2005
• Introducing the CSS3 Multi-Column Module - by Cédric Savarese - Issue 204 September 26, 2005
• High-Resolution Image Printing - by Ross Howard - Issue 202 September 5, 2005
• A List Apart 4.0 - by Jeffrey Zeldman - Issue 201 August 22, 2005
• Complex Dynamic Lists: Your Order Please - by Christian Heilmann - Issue 200 May 24, 2005
• Spruced-Up Site Maps - by Kim Siever - Issue 197 March 30, 2005
• Hybrid CSS Dropdowns - by Eric Shepherd - Issue 197 March 30, 2005
• Bulleted Lists: Multi-Layered Fudge - by Nandini Doreswamy - Issue 195 February 16, 2005
• The Way It’s Supposed to Work - by Erin Kissane - Issue 192 January 18, 2005
• Cross-Column Pull-Out Part Two: Custom Silhouettes - by Daniel M. Frommelt - Issue 191 January 11, 2005
• Big, Stark & Chunky - by Joe Clark - Issue 191 January 11, 2005
• Cross-Column Pull-Outs - by Daniel M. Frommelt - Issue 190 December 21, 2004
• Invasion of the Body Switchers - by Andy Clarke, James Edwards - Issue 189 November 19, 2004
• Pocket-Sized Design: Taking Your Website to the Small Screen - by Elika Etemad, Jorunn D. Newth - Issue 187 August 31, 2004
• Drop-Down Menus, Horizontal Style - by Nick Rigby - Issue 184 June 29, 2004
• Creating Liquid Layouts with Negative Margins - by Ryan Brill - Issue 183 June 15, 2004
• Dynamically Conjuring Drop-Down Navigation - by Christian Heilmann - Issue 183 June 15, 2004
• Dynamic Text Replacement - by Stewart Rosenberger - Issue 183 June 15, 2004
• Print It Your Way - by Derek Featherstone - Issue 182 May 21, 2004
• Onion Skinned Drop Shadows - by Brian Williams - Issue 182 May 21, 2004
• Separation: The Web Designer’s Dilemma - by Michael Cohen - Issue 181 May 14, 2004
• Mountaintop Corners - by Dan Cederholm - Issue 179 April 30, 2004
• CSS Drop Shadows II: Fuzzy Shadows - by Sergio Villarreal - Issue 178 April 23, 2004
• Power To The People: Relative Font Sizes - by Bojan Mihelac - Issue 176 April 9, 2004
• CSS and Email, Kissing in a Tree - by Mark Wyner - Issue 175 March 26, 2004
• The Table Ruler - by Christian Heilmann - Issue 175 March 26, 2004
• Zebra Tables - by David F. Miller - Issue 173 March 5, 2004
• CSS Sprites: Image Slicing’s Kiss of Death - by Dave Shea - Issue 173 March 5, 2004
• CSS Design: Creating Custom Corners & Borders Part II - by Søren Madsen - Issue 172 February 27, 2004
• CSS Drop Shadows - by Sergio Villarreal - Issue 172 February 27, 2004
• Designing for Context with CSS - by Joshua Porter - Issue 171 February 20, 2004
• CSS Design: Custom Underlines - by Stuart Robertson - Issue 169 February 2, 2004
• Improving Link Display for Print - by Aaron Gustafson - Issue 203 September 19, 2005
• Elastic Design - by Patrick Griffiths - Issue 167 January 9, 2004
• Faux Columns - by Dan Cederholm - Issue 167 January 9, 2004
• Night of the Image Map - by Stuart Robertson - Issue 166 December 12, 2003
• Retooling Slashdot with Web Standards Part II - by Daniel M. Frommelt - Issue 165 December 4, 2003
• JavaScript Image Replacement - by Christian Heilmann - Issue 164 November 21, 2003
• Retooling Slashdot with Web Standards - by Daniel M. Frommelt - Issue 164 November 21, 2003
• Suckerfish Dropdowns - by Patrick Griffiths, Dan Webb - Issue 162 November 7, 2003
• Sliding Doors of CSS, Part II - by Douglas Bowman - Issue 161 October 30, 2003
• Sliding Doors of CSS - by Douglas Bowman - Issue 160 October 20, 2003
• Facts and Opinion About Fahrner Image Replacement - by Joe Clark - Issue 160 October 20, 2003
• Using XHTML/CSS for an Effective SEO Campaign - by Brandon Olejniczak - Issue 159 September 1, 2003
• Accesskeys: Unlocking Hidden Navigation - by Stuart Robertson - Issue 158 June 16, 2003
• Flexible Layouts with CSS Positioning - by Dug Falby - Issue 155 November 15, 2002
• CSS Design: Taming Lists - by Mark Newhouse - Issue 151 September 27, 2002
• CSS Design: Going to Print - by Eric Meyer - Issue 144 May 10, 2002
• Fix Your Site With the Right DOCTYPE! - by Jeffrey Zeldman - Issue 142 April 12, 2002
• CSS Design: Mo’ Betta Rollovers - by Tim Murtaugh - Issue 140 March 8, 2002
• Better Living Through XHTML - by Jeffrey Zeldman - Issue 137 February 15, 2002
• A Backward Compatible Style Switcher - by Daniel Ludwin - Issue 136 February 8, 2002
• Why Don’t You Code for Netscape? - by Jeffrey Zeldman - Issue 129 December 7, 2001
• Alternative Style: Working With Alternate Style Sheets - by Paul Sowden - Issue 126 November 2, 2001
• How to Read W3C Specs - by J. David Eisenberg - Issue 121 September 28, 2001
• Practical CSS Layout Tips, Tricks, & Techniques - by Mark Newhouse - Issue 119 August 17, 2001
• CSS Talking Points: Selling Clients on Web Standards - by Greg Kise - Issue 116 July 6, 2001
• CSS Design: Size Matters - by Todd Fahrner - Issue 109 May 11, 2001
• From Table Hacks to CSS Layout: A Web Designer’s Journey - by Jeffrey Zeldman - Issue 99 February 16, 2001
• This HTML Kills: Thoughts on Web Accessibility - by Jim Byrne - Issue 98 February 9, 2001
• Separation Anxiety: The Myth of the Separation of Style from Content - by Bob Stein - Issue 89 November 17, 2000
• Daemon Skins: Separating Presentation from Content - by Mark Newhouse - Issue 87 November 3, 2000
• DOM Design Tricks II - by J. David Eisenberg - Issue 73 July 21, 2000
• Meet the DOM - by J. David Eisenberg - Issue 60 April 21, 2000
• A Dao of Web Design - by John Allsopp - Issue 58 April 7, 2000
• Fear of Style Sheets - by Jeffrey Zeldman - Issue 8 March 12, 1999

CSS

• Colors & Backgrounds
• Box Model Properties
• Fonts & Text
• Visual Formatting
• Tables & Lists
• User Interface
• Color Codes
• Special Characters

CSS Portal

• CSS Resources: CSS Books | CSS Hacks | CSS News | CSS Properties | CSS Software | CSS Snippets | CSS Templates | CSS Tutorials
• CSS Tools: CSS Validator | Format CSS Code | Optimize CSS Code | Online CSS Editor | Visual Style Editor
• CSS Examples: CSS3 Preview | Graphics | Hyperlinks | Form Elements | Horizontal Menus | Vertical Menus
• Online Generators: Button Maker | Layout Generator | CSS Menu Generator | Rounded Corners (CSS) | CSS3 Rounded Corners

"§"
css3clickchart.com
CSS3 Click Chart

common stuff

• box sizing
• hsla colors
• text shadow
• word wrap
• rgba colors
• translate
• border radius
• multiple backgrounds
• keyframe animations
• transform origin
• background size
• reflections *
• rotate
• opacity
• skew
• scale
• resize
• @font-face
• box shadow
• linear gradients
• border images
• text stroke *
• media queries
• background clip
• multiple columns
• radial gradients
• selection color *
• space and round
• transitions
• background origin

cutting-edge

• calc()
• regions
• flexbox
• masks *
• tab size
• toggle()
• paged media
• 3d transforms
• grid layout
• pointer events
• text overflow
• @supports
• @namespace
• new cursors
• hyphenation
• exclusions
• currentColor
• box alignment
• filters
• cssom
• marquee
• rem units
• @viewport
• variables
• overflow wrap
• blending modes
• canvas backgrounds *
• template layout
• bg-attachment: local
• object-fit/position

"§"
css3generator
CSS3 Generator

Choose Something

• Border Radius
• Box Shadow
• Text Shadow
• RGBA
• @Font Face
• Multiple Columns
• Box Resize
• Box Sizing
• Outline
• Transitions
• Transform
• Selectors
• Gradients

"§"
css3maker
CSS 3.0 Maker

• Border Radius
• Gradient
• CSS Transform
• CSS Animation
• CSS Transition
• RGBA
• Text Shadow
• Box Shadow
• Text Rotation
• @Font Face

"§"
cssmatic.com
The ultimate CSS tools for web designers

• Gradient Generator - Use multiple colors and opacity stops to get amazing gradients. By using the gradient tool you can create gradients with smooth color changing effects and subtle transparencies. - Such images can be used as background images of banners, wallpapers, buttons or tables and in many other applications.
• Border Radius - Super easy to use and a super time saver. Change all the borders selected at the same time.
• Noise Texture - Create subtle background patterns with dirty pixels and noise, changing the color and values and previewing the results in real time.
• Box Shadow - Blur radius changes, color changes, shadow size… Everything that you need to create great drop shadows in a single place.

"§"
css-tricks.com
CSS-Tricks

• “Stitched” Look
• A Complete Guide to Flexbox
• Absolute Center (Vertical & Horizontal) an Image
• Accessibility/SEO Friendly CSS Hiding
• All Stylesheet Media Types
• Basic Link Rollover as CSS Sprite
• Basics of Google Font API
• Better Helvetica
• Blurry Text
• Bouncy Animated Loading Animation
• Browser Specific Hacks
• Center DIV with Dynamic Height
• Centering a Website
• Change Text Selection Color
• Comments in CSS
• Common Unicode Icons
• Compress CSS with PHP
• Corner Ribbon
• Cross Browser Inline-Block
• Cross Browser Opacity
• Cross-Browser hr Styling
• Cross-Browser Min Height
• CSS Box Shadow
• CSS Diagnostics
• CSS Font Families
• CSS Hacks Targeting Firefox
• CSS Only Image Preloading
• CSS Text Shadow
• CSS Triangle
• CSS3 Zebra Striping a Table
• Custom Checkboxes and Radio Buttons
• Custom File Input Styling in WebKit/Blink
• Custom Radio Buttons
• Diagonal Graph Paper Gradient
• Drop Caps
• End Articles with Ivy Leaf
• Exactly Center an Image/Div Horizontally and Vertically
• Expanding Boxes Navigation
• Fixed Footer
• Fixed Positioning in IE 6
• Flip an Image
• Font Shorthand
• Font Stacks
• Force Element To Self-Clear its Children
• Force File Upload Input Button To Right Side In WebKit
• Force Vertical Scrollbar
• Forcing Grayscale Printing
• Give Clickable Elements a Pointer Cursor
• Glowing Blue Input Highlights
• Gradient Text
• Gradient Underlines
• Hexagon With Shadow
• Internationalization Language CSS
• iPad Orientation CSS
• iPad-Specific CSS
• Keyframe Animation Syntax
• Layered Paper
• Link Pseudo-Classes (In Order)
• Make “Pre” Text Wrap
• Make Non-Password Inputs Use Bullets (or Bullet Alternatives)
• Media Queries for Standard Devices
• Meyer Reset
• Mixins for Rem Font Sizing
• Momentum Scrolling on iOS Overflow Elements
• Multiple Backgrounds Syntax
• Multiple Borders
• Multiple Columns
• Named Colors and Hex Equivalents
• Nested & Expandable Folders
• Noise Data URI Image
• Non-Form Fieldset Look
• Not-Terrible Image Resizing in IE
• Page Curl Shadows
• Perfect CSS Sprite / Sliding Doors Button
• Picross Style Buttons
• PNG Hack/Fix for IE 6
• Prevent Bounce Scroll in Lion
• Prevent Long URL’s From Breaking Out of Container
• Prevent Superscripts and Subscripts from Affecting Line-Height
• Print URL After Links
• Quality Abbreviations
• Remove Button Text in IE7
• Remove Dotted Link Borders
• Remove Gray Highlight When Tapping Links in Mobile Safari
• Remove Margins for First/Last Elements
• Remove Scrollbar from Textarea in IE
• Removing Dotted Outline
• Retina Display Media Query
• Reversing Text
• Ribbon
• Rounded Corners
• Scale on Hover with Webkit Transition
• Signify “PDF Bombs”
• Simple and Nice Blockquote Styling
• Slide In Image Boxes
• Smiley Slider
• Solarized Theme for CodeMirror and Prettify
• Spinny Leaf Menu
• Stack of Paper
• Standard CSS Image Replacement
• Sticky Footer
• Style Links Depending on Destination
• Style Override Technique
• Style Placeholder Text
• Text Dripping Blood
• Text Rotation
• Top Shadow
• Transparent Background Images
• Transparent Inside Border
• Triangular List Bullets
• Truncate String with Ellipsis
• Tucked Corners
• Turn Off Number Input Spinners
• Two-Color Three-Dimensional Blocks and Text
• Useful CSS3 LESS Mixins
• Using @font-face

"§"
csszengarden
CSS Zen Garden
Design mit CSS

A demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page.

Download the sample html file and css file

So What is This About?

There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.

CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.
...

• 221 Mid Century Modern - Andrew Lohman, United States
• 220 Garments - Dan Mall, United States
• 219 Steel - Steffen Knoeller, Germany
• 218 Apothecary - Trent Walton, United States
• 217 Handcrafted - Elliot Jay Stocks, United Kingdom
• 216 Fountain Kiss - Jeremy Carlson, United States
• 215 A Robot Named Jimmy - meltmedia, United States
• 214 Verde Moderna - Dave Shea, Canada
• 213 Under the Sea! - Eric Stoltz, United States
• 212 Make ’em Proud! - Michael McAghon and Scotty Reifsnyder, United States
• 211 Orchid Beauty - Kevin Addison, United States
• 210 Oceanscape - Justin Gray, Australia
• 209 CSS Co., Ltd. - Benjamin Klemm, Germany
• 208 Sakura - Tatsuya Uchida, Japan
• 207 Kyoto Forest - John Politowski, United States
• 206 A Walk in the Garden - Simon Van Hauwermeiren, Belgium
• 205 spring360 - Rene Hornig, Germany
• 204 Withering Beauty - William Duffy, United Kingdom
• 203 Tiny Blue - Timo Virtanen, Finland
• 202 Retro Theater - Eric Rogé, France
• 201 Lily Pond - Rose Thorogood, Australia
• 200 Icicle Outback - Timo Virtanen, Finland
• 199 CSS ZEN ARMY - Carl Desmond, United States
• 198 The Original - Joachim Shotter, United Kingdom
• 197 Floral Touch - Jadas Jimmy, France
• 196 Elegance in Simplicity - Mani Sheriar, United States
• 195 Dazzling Beauty - Deny Sri Supriyono, Indonesia
• 194 Dark Rose - Rose Fu, United States
• 193 Leggo My Ego - Jon Tan, United Kingdom
• 192 LuGoZee - Viallon Pierre-Antoine, France
• 191 The Diary - Alexander Shabuniewicz, Russia
• 190 Lonely Flower - Mitja Ribic, Slovenia
• 189 Mozart - Andrew Brundle, United Kingdom
• 188 Organica Creativa - Eduardo Cesario, Argentina
• 187 Wilderness - Aadesh Mistry, India
• 186 Faded Flowers - Mani Sheriar, United States
• 185 Manhattan Edition - José Tomás Tocino García, Spain
• 184 Peace Of Mind - Carlos Varela, Chile
• 182 45 RPM - Thomas Michaud, United States
• 181 Pretty in Pink - Jordi Romkema, Netherlands
• 180 Vertigo - Antonio Cella, Italy
• 179 Vin Rouge - Thorsten Bopp, Germany
• 178 Pinups - Emiliano Pennisi, Italy
• 177 Zen City Morning - Ray Henry, United States
• 176 Kelmscott - Bronwen Hodgkinson, United States
• 175 Business Style - Gunta Klavina, Latvia
• 174 Simple - Shawn Chin, United States
• 173 Red Stars - Shafiq Rizwan, Malaysia
• 172 blackcomb*75 - Bryan Carichner, United States
• 171 Shaolin Yokobue - Javier Cabrera, Argentina
• 170 Love Is In The Air - Nele Goetz, Germany
• 169 Greece Remembrance - Pierre-Leo Bourbonnais, Canada
• 168 Hengarden - Mr. Khmerang, Finland
• 167 Hoops - Tournament Edition - David Marshall Jr., United States
• 166 Obsequience - Pierce Gleeson, Ireland
• 165 Red Paper - Rob Soule, United States
• 164 Chien - Alex Miller, United States
• 163 Like the Sea - Lars Daum, Germany
• 162 Angelus - Vladimir Lukic, Canada
• 161 Zenfandel - Nicholas Rougeux, United States
• 160 Daruma - Stuart Cruickshank, Australia
• 159 Berry Flavour - Maren Becker, Germany
• 158 a Simple Sunrise - Rob Soule, United States
• 157 Bugs - Zohar Arad, Israel
• 156 Table Layout Assassination! - Marko Krsul & Marko Dugonjic, Croatia
• 155 November - Alen Grakalic, Croatia
• 154 Butterfly Effect - Kevin Linkous, United States
• 153 Moss - Mani Sheriar, United States
• 152 Subway Dream - Pablo Caro, Colombia
• 151 Contempo Finery - Ro London, United States
• 150 By The Pier - Peter Ong, Singapore
• 149 Uncultivated - Mario Carboni, Italy
• 148 Museum - Samuel Marin, Belgium
• 147 Attitude - Stephane Moens, Belgium
• 146 Urban - Matt Kim & Nicole, Canada
• 145 Paravion - Emiliano Pennisi, Italy
• 144 Verdure - Lim Yuan Qing, Singapore
• 143 Pixelisation - Lim Yuan Qing, Singapore
• 142 Invasion of the Body Switchers - Andy Clarke, United Kingdom
• 141 Golden Cut - Petr Stanicek, Czech Republic
• 140 The Hall - Michael Simmons, United States
• 139 Neat & Tidy - Oli Dale, United Kingdom
• 138 Cube Garden - Masanori Kawachi, Japan
• 137 DJ Style - Ramon Bispo, Brazil
• 136 The Final Ending - Ray Henry, United States
• 135 contemporary nouveau - David Hellsing, Sweden
• 134 El Collar de Tomas - Maria Stultz, Colombia
• 133 OrderedZen - Steve Smith, United States
• 131 Type Thing - Michal Mokrzycki, Poland
• 130 Pseudo Sahara - John Barrick, United States
• 128 Dragen - Matthew Buchanan, New Zealand
• 127 Vivacity - Sofiane Toudji, France
• 126 C-Note - Brian Williams, United States
• 125 Beccah - Chris Morrell, United States
• 124 Teatime - Michaela Maria Sampl, Austria
• 123 Skyroots - Axel Hebenstreit, Germany
• 122 Centerfold - John Oxton, United Kingdom
• 121 60’s Lifestyle - Emiliano Pennisi, Italy
• 120 Medioevo - Emiliano Pennisi, Italy
• 119 Pleasant Day - Kyle Jones, United States
• 118 Some Leafs - Michael Tupy, Austria
• 117 Brushwood - Katrin Zieger, Germany
• 116 Ragged - Jose Florido, Spain
• 115 Burnt Offering - Jonny Blair, United Kingdom
• 114 Salvage Yard - Justin Peters, United States
• 113 Switch On - Michael Fasani, United Kingdom
• 112 Mountain Resort - Jordi Romkema, Netherlands
• 111 Grüener Entwurf - Hannah F. Liesong, Germany
• 110 Perfume de Gardenias - Armando Sosa, Mexico
• 109 Pneuma - Adam Polselli, United States
• 107 Defiance - James Ehly, United States
• 106 Mediterranean - John Whittet, United States
• 105 Austrian’s Darker Side - Rene Grassegger, Austria
• 104 Invitation - Brad Daily, United States
• 103 Odyssey - Terrence Conley, United States
• 102 Revolution! - David Hellsing, Sweden
• 101 Punkass - Mikhel Proulx, Canada
• 100 15 Petals - Eric Meyer & Dave Shea, United States
• 99 Wiggles the Wonderworm - Joseph Pearson, Australia
• 98 Edo and Tokyo - Daisuke Sato, Japan
• 97 No Frontiers! - Michal Mokrzycki, Poland
• 96 Japanese Garden - Masanori Kawachi, Japan
• 95 Corporate ZenWorks - Derek Hansen, United States
• 94 Deco - Marc Trudel, Canada
• 93 South of the Border - Rob Shields, United Kingdom
• 92 Port of Call - Jessica Dunn, United States
• 91 webZine - Vincent Valentin, France
• 90 Open Window - Ray Henry, United States
• 89 Dark Industrial - Ray Henry, United States
• 87 Maya - Bernd Willenberg, Germany
• 86 RedFrog - Bernd Willenberg, Germany
• 85 Oceans Apart - Ryan Sims, United States
• 84 Start Listening! - Liz Lubowitz, Canada
• 83 Springtime - Boér Attila, Hungary
• 82 Miracle Cure - Joseph Pearson, Australia
• 81 seashore - Christine Kirchmeier, Germany
• 80 Zen Pool - Clinton Barth, United States
• 79 Green Tea - Amy Rae Som, United States
• 78 Muto Verde - Alex Taylor, Canada
• 77 Hop - Guillaume Lahalle, France
• 76 Lotus - Chika, Japan
• 75 Lost HighWay - Julien Roumagnac, France
• 74 Egyptian Dawn - James Abbott, United Kingdom
• 73 Emmakade - Alexander Christiaan Jacob (ACJ), Netherlands
• 72 Outburst - Chris Vincent, United States
• 71 Garden Party - Bobby van der Sluis, Netherlands
• 70 CS(S) Monk - Cedric Savarese, France
• 68 Ballade - Charlotte Lambert, France
• 67 A Silent Strength - Ray Henry, United States
• 66 Focus & Shoot - Colectivo YTW, Spain
• 65 New Groove - Martin Neumann, Germany
• 64 Night Drive - Dave Shea, Canada
• 63 Elastic Lawn - Patrick Grifiths, United Kingdom
• 62 Gemination - Egor Kloos, Netherlands
• 61 Sky - Stefan Petre, Romania
• 60 Extreme Limits - Richard Chatfield, United States
• 59 Dune Temple - Greg Reimer, United States
• 58 Radio Zen - Marc LA van den Heuvel, Netherlands
• 57 This is Cereal - Shaun Inman, United States
• 56 Elevation - Nigel Goodfellow, Canada
• 55 zenlightenment - Lance Leonard, United States
• 54 Gecko’s Eye - Sandra Greco, Italy
• 53 Self-Growth - Ray Henry, United States
• 52 Postage Paid - Mike Stenhouse, United Kingdom
• 51 Commercial Drive - Wendy Foster, Canada
• 50 First Summary - Cornelia Lange, Germany
• 49 Buddha - Daniel Leroux, Canada
• 48 HoriZental - Clément ‘fastclemmy’ Hardouin, France
• 47 dusk - Jon Hicks, United Kingdom
• 46 sub:lime - Andy Budd, United Kingdom
• 45 I Dream in Colour - Jeff Bilen, Canada
• 44 si6 - Shaun Inman, United States
• 43 Burning - Kevin & Ethel Davis, United States
• 42 Stone Washed - Andrew Hayward, United Kingdom
• 41 door to my garden - Patrick H. Lauke, Germany
• 40 The Question Why - Diane Clayton, Canada
• 39 Erratic Blue - Ian Main, Australia
• 38 Creepy Crawly - Luke Redpath, United Kingdom
• 37 prêt-á-porter - Minz Meyer, Germany
• 36 White Lily - Jens Kristensen, Denmark
• 35 Release One - Didier Hilhorst, Netherlands
• 34 zengrounds - Andrea Piernock, United States
• 33 Fleur-de-lys - Claire Campbell, United Kingdom
• 32 Crab Apple - Jai Brinkofski, United States
• 31 Hedges - Kev Mears, United Kingdom
• 29 Backyard - Ray Henry, United States
• 27 Gothica - Patrick H. Lauke, Germany
• 26 Zunflower - Radu Darvas, Germany
• 25 mnemonic - Dave Shea, Canada
• 24 Not So Minimal - Dan Rubin, United States
• 23 fleur de l’avant-garde - Michael Switzer, United States
• 22 viridity - Laura MacArthur, United States
• 21 Calm & Smooth - Cornelia Lange, Germany
• 20 Friendly Beaches - Sophie G, France
• 19 What Lies Beneath - Michael Pick, United States
• 18 Wrapped in Burlap - John Simons, United States
• 17 Golden Mean - Douglas Bowman, United States
• 16 The Garden Beneath - Minz Meyer, Germany
• 15 Boddhidarma - Michael Angeles, United States
• 14 Samuraai - Minz Meyer, Germany
• 13 Coastal Breeze - Dave Shea, Canada
• 12 TechnOhm - Josh Ambrutis, United States
• 11 meliorism - Brett J. Gilbert, United Kingdom
• 10 A Garden Apart - Dan Cederholm, United States
• 9 Dead or Alive - Michael Pick, United States
• 8 RPM - Bruno Cunha, United States
• 7 deep thoughts - Jason Estes, United States
• 6 Wicked Grove - D. Keith Robinson, United States
• 5 Blood Lust - Dave Shea, Canada
• 4 arch4.20 - Dave Shea, Canada
• 3 Stormweather - Dave Shea, Canada
• 2 Salmon Cream Cheese - Dave Shea, Canada
• 1 tranquille - Dave Shea, Canada

daneden.me
animate.css
CSS-Animationen

"§"
dailydropcap.com
Alphabet in 12 Varianten

"Daily Drop Cap" is a project by designer & illustrator Jessica Hische. Since September of 2009, an illustrative initial cap has been posted daily (or at least regularly), to prettify the internet and beautify your blog posts. Individuals are welcome to use the drop caps on personal (non-commercial) sites within blog posts by following the instructions below each letter. The project will end after the twelfth alphabet is complete, but the site will remain up for your use and inspiration. Enjoy!

"§"
degraeve.com
Favicon Generator

"§"
digital.com
HTML Cheat Sheet

"HTML" ("Hypertext Markup Language") has come a long way since Tim Berners-Lee invented it in 1991. "HTML5" is the latest version supported by modern web browsers. Our "HTML cheat sheet" has a full list of all HTML elements, including descriptions, code examples and live previews. Scroll down to browse all HTML tags alphabetically or by their category, or download it as a PDF.
...

"§"
diveintohtml5.info
Dive into HTML5
Mark Pilgrim

Table of Contents

• Introduction: Five Things You Should Know About HTML5 0
• A Quite Biased History of HTML5 1
• Detecting HTML5 Features: It’s Elementary, My Dear Watson 2
• What Does It All Mean? 3
• Let’s Call It a Draw(ing Surface) 4
• Video in a Flash (Without That Other Thing) 5
• You Are Here (And So Is Everybody Else) 6
• A Place To Put Your Stuff 7
• Let’s Take This Offline 8
• A Form of Madness 9
• “Distributed,” “Extensibility,” And Other Fancy Words 10
• Manipulating History for Fun & Profit 11
• The All-In-One Almost-Alphabetical Guide to Detecting Everything A
• HTML5 Peeks, Pokes and Pointers B

"§"
DOCTYPE (W2)

"§"
eclipse.org
Entwicklungsumgebung Eclipse

Eclipse 4.3 - Download

Die offene Entwicklungsumgebung Eclipse lässt sich für Java, C++ und andere Programmiersprachen nutzen. Eclipse unterstützt die professionelle Software-Entwicklung und ist mittels Plug-ins erweiterbar. Für die Entwicklung mit C/C++ ist zum Beispiel MinGW erforderlich.
...

Eclipse (von englisch "eclipse" "Sonnenfinsternis", "Finsternis", "Verdunkelung") ist ein quelloffenes Programmierwerkzeug zur Entwicklung von Software verschiedenster Art. Ursprünglich wurde Eclipse als "integrierte Entwicklungsumgebung" ("IDE") für die Programmiersprache Java genutzt, aber mittlerweile wird es wegen seiner Erweiterbarkeit auch für viele andere Entwicklungsaufgaben eingesetzt. Für Eclipse gibt es eine Vielzahl sowohl quelloffener als auch kommerzieller Erweiterungen.
...
Projektnamen

Die Projektnamen waren bisher nach den Jupitermonden ("Callisto", "Europa" und "Ganymede"), der Sonde ("Helios") und der Raumsonde "Galileo", die Version 3.7 nach der für Eclipse typischen Farbe "Indigo" benannt. Die Anfangsbuchstaben der Projektnamen werden seit Version 3.5 in alphabetischer Reihenfolge vergeben. Die Version 3.8 erschien gleichzeitig mit der Version 4.2.
...

"§"
effectgenerator
Effectgenerator

"§"
Favicon (W2)

Hier gibt es alle Informationen zu den kleinen Bildchen, die in der Adresszeile vieler Browser oder auch an anderen Stellen auftauchen. Neben einer Anleitung bietet diese Website auch die Antworten zu den meistgestellten Favicon-Fragen, Informationen zu Software für die Icon-Erstellung und weiterführende Links sowie das obligatorische Impressum.

• What is a favicon?
• What is Favicon.com?
• Where and when will our Favicon be seen?
• What is the quickest way to get a Favicon?
• How do I have my Favicon professionally made?
• What if I wish to make my Favicon on my own?
• **** VOICE YOUR SUPPORT FOR FAVICONS TODAY! *****
• I'm seeing favicon.ico requests in my web site's error_log. What does this mean?
• What are the security/privacy concerns related to favicon.ico files?
• I'm using a Web Site Hosting Service that does not support ICO files. What should I do?
• What is an ico file?
• Isn't an ICO file just a renamed BMP?
• What other sites should I consider looking at?
• I am having trouble getting favicons to work with https (secure http). Is there anything we can do?
• Show me some reviews!
• Who is the current Favicon.com sponsor?
• I have some suggestions/updates for your site. What should I do?
• What if my ISP does not support favicons?

• Akten Kartei (65): Aktenschrank, Endlospapier, Karteikasten ...
• Buche Block Mappen Notizen (65): Block, Buch, Buchwurm ...
• Buttons (89): Button Spirale, Buttons Geometrie, Buttons Serie 01 ...
• Computer (2198): Abfalleimer, Anwendungsprogramme, Bandlaufwerk ...
• Diagramme (85): Flussdiagramm, Kuchendiagramm, Liniendiagramm ...
• Essen Nahrung Getränke (501): Brot, Burger, Butter ...
• Fahrzeuge Transport (166): Ampel, Auto, Ballon ...
• Feiertage Feste (95): Geburtstag, Ostern, Verschiedenes ...
• Flaggen Karten (97): Flaggen, Flaggen mit Mast, Flaggen mit Umrissen ...
• Gebäude Orte (54): Bohrturm, Brücke, Brunnen ...
• Geld Kreditkarten Münzen (58): Diamant, Geldsack, Geldscheine ...
• Geschäft Büro (82): Ablagefächer, Heftklammer, Kalender ...
• Haushalt (128): Abfalleimer, Badezimmer, Blumentopf ...
• Lustige Figuren (32):
• Menschen Anatomie (267): Auge, Becken, Beine Knie ...
• Musik (67): Gitarre, Lautsprecher, Schallplatte ...
• Pfeile (100): Buttons mit Pfeilen, Cursor, Pfeile im Kreis ...
• Pflanzen (198): Blätter, Blumen, Früchte ...
• Schilder Figuren (103): Figuren, Hacken ...
• Schreiben Malen Zeichnen (154): Kopieren, Lineale, Logos ...
• Schule (137): Chemie, Geometrie ...
• Sport (194):
• Telefon (53): Fax, Funkgerät, Handy ...
• Themen (1565): Cartoons, Dungeon, Krieg ...
• Tiere (389): Bär, Bieber, Dinosaurier ...
• Uhren Kalender (35): Kalender, Sanduhr, Uhren
• Verschiedene Symbole Kinder (75):
• Verschiedenes (215): Bomben, Feuer, Feuerwehr ...
• Video Optik (91): Brille, Fernglas, Fernrohr ...
• Weltraum (58): Ausserirdische, Erde, Funkstation ...
• Werkzeug Behälter (40): Hammer, Kiste, Messer ...
• Wetter (46): Gewitter, Globus, Regen ...

"§"
fontshop.com

Schriften:

• Alle Schriften
• Handverlesene Schriften
• Bestseller
• Neue Schriften
• Webfonts
• Kostenlose Schriften

Schriften Kategorien:

• Sans
• Serif
• Slab
• Script
• Display
• Gebrochene Schriften
• Symbole & Icons

Designer:

• Alle Designer
• Handverlesene Designer

Schriftenhäuser:

• Alle Schriftenhäuser
• Handverlesene Schriftenhäuser

Fontlisten:

• Alle Fontlisten
• Handverlesene Fontlisten

...

In diesem Glossar oder unter den FAQs finden Sie Antworten zu typografischen Fragen.

"§"
generateit
Website Tools

• Main Navigation: Home | Contact Us | Contributors | Privacy Policy | Suggest New Generator
• Image Generators: Button Generator | Email to Image Generator | Gradient Generator | Reflection Generator | Rounded Corner Generator
• Website Tools: Color Scheme Generator | Cron Job Generator | Error Page Generator | Favicon Generator | Mod Rewrite Generator | Password Generator | RSS to JavaScript Generator
• CSS Generators: CSS Code Optimizer | CSS Grid Generator | CSS Rounded Corner Generator | CSS Layout Generator | CSS Menu Generator

"§"
GIF (W3)

"§"
hipsteripsum
Lorem Ipsum Variante

Artisanal filler text for your site or project.

"§"
hostingfacts.com
Web Development & Design

...
I’d dedicate a whole page for teaching website development in general (including UX, UI and design), not only HTML.

It can be found here: https://hostingfacts.com/web-development-101/

If you have some time, feel free to have a look at it :). If you find it useful or helpful to your audience, don’t hesitate to mention it as an additional resource to learn web development and design.

Cheers and let me know if you’ve any questions/concerns, John

John Stevens, CEO @ HostingFacts

Introduction to web development & design - 8 chapters
...
What’s covered in this guide?

• Chapter 1: Planning (Your website idea, domain & web hosting)
• Chapter 2: Designing and Wireframing (with pen & paper)
• Chapter 3: UX and UI princibles
• Chapter 4: Putting it all together - WordPress, HTML, Templates or something else?
• Chapter 5: Quick intro to HTML, CSS & Javascript
• Chapter 6: Website Building Platforms for Beginners
• Chapter 7: Keeping it mobile friendly
• Chapter 8: Bringing it all together

...
If you want to learn basic web development and design, this guide is for you. Whatever your motivation might be.
...
Here are the three principles of the least resistance approach:

• We’re not breaking things down on a molecular level. I.e. we’re not going to get to the bottom of how programming languages work, or how a web server works.
• We’re not reinventing the wheel. I.e. if someone has already solved a given problem and made the solution available, we’re going to use it.
• We’re making a simple solution awesome, rather than a complicated and seemingly more functional solution buggy and not understandable.

...

"§"
hotscripts
HotScripts

• Ajax (452)
• ASP (3,235)
• ASP.NET (1,822)
• C and C++ (511)
• CFML (285)
• CGI and Perl (3,825)
• Flash (6,192)
• HTML5 (77)
• Java (1,869)
• JavaScript (3,580)
• PHP (19,453)
• Remotely Hosted (2,604)
• Ruby on Rails (97)
• Tools and Utilities (4,943)
• Web Hosting
• XML (275)

General Description
Hot Scripts is a comprehensive Web directory of more than 41,000 web development and programming-related resources. Hot Scripts serves webmasters, developers, business owners, marketers, coders and programmers, who are looking to build, enhance or improve their Web sites and intranets.

Hot Scripts is filled with dynamic development tools, tons of programming scripts for more than 16 programming languages as well as informational resources including books and tutorials. With hundreds of thousands of Web development and programming resources available today, Hot Scripts' mission is to provide you with a single destination to get the highest quality and hottest performing programming resources.

"§"
HTML (W3)

HTML for Beginners - Ultimate Guide

Contents

• 1. HTML Basics
• 2. HTML Elements and Tags
• 3. Textual HTML
• 4. Structural HTML
• 5. HTML Tables
• 6. HTML Forms
• 7. Expanded HTML
• Intro and HTML5 Media
• Web Applications
• 8. Semantic HTML
• Introduction to Semantic Markup
• Plain Old Semantic HTML
• Search and Social Enhancement
• Other Formats and Conclusions

"§"
HTML5 (W3)

HTML5 und Sicherheit
Browser in Gefahr?
08.09.2012
Birgt die jüngste Version von HTML eine besondere Gefahr für Internetnutzer, oder ist das alles nur eine große Panikmache? Wir haben uns die wichtigsten Neuerungen einmal angeschaut und mit den etablierten Techniken verglichen. Trotz allgemein guter Kritiken am Internet Explorer 9 von Microsoft: Auch dieser Browser unterstützt bisher nur zirka 40 Prozent der Neuerungen von HTML5.
...
Beim Design von HTML5 gab es drei Hauptziele:

• Kompatibles Verhalten aktueller Browser
• Fehlerbehandlung
• Weiterentwicklung der Sprache zur Vereinfachung des Web-Authorings

Da die Spezifikation ausgedruckt zirka 900 Seiten umfasst, möchten wir an dieser Stelle nicht näher auf HTML5 als solches eingehen. Wer sich für die verschiedenen Features interessiert, findet mehr Informationen in unseren HTML5 FAQ. Wir beschränken uns hier auf die relevanten Änderungen, die sich auf die Sicherheit beziehen.
...

Welche neuen Elemente bietet HTML5 und welche alten fallen weg?

HTML5 - Was geht heute schon, was geht nicht? Der große Überblick.

...
Abstract

HTML is the core language of the World Wide Web. The W3C publishes HTML5, which is the fifth major revision of HTML. The WHATWG publishes HTML, which is a rough superset of HTML5. "HTML5 differences from HTML4" describes the differences of these documents from HTML4, and calls out cases where HTML is different from HTML5. This document may not provide accurate information as the specifications are still actively in development. When in doubt, always check the specifications themselves.
...

HTML5 is The New HTML Standard
...
Browser Support for HTML5

HTML5 is not yet an official standard, and no browsers have full HTML5 support.

But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.

HTML Tutorial

• HTML HOME
• HTML Introduction
• HTML Editors
• HTML Basic
• HTML Elements
• HTML Attributes
• HTML Headings
• HTML Paragraphs
• HTML Styles
• HTML Formatting
• HTML Quotations
• HTML Computercode
• HTML Comments
• HTML CSS
• HTML Links
• HTML Images
• HTML Tables
• HTML Lists
• HTML Blocks
• HTML Classes
• HTML Layout
• HTML Responsive
• HTML Iframes
• HTML Color Names
• HTML Color Values
• HTML Color Groups
• HTML Color Shades
• HTML JavaScript
• HTML Head
• HTML Entities
• HTML Symbols
• HTML Charset
• HTML URL Encode
• HTML XHTML

HTML Forms

• HTML Forms
• HTML Form Elements
• HTML Input Types
• HTML Input Attributes

HTML5

• HTML5 Intro
• HTML5 Support
• HTML5 Elements
• HTML5 Semantics
• HTML5 Migration
• HTML5 Style Guide

HTML Graphics

• HTML Canvas
• HTML SVG

HTML Media

• HTML Media
• HTML Video
• HTML Audio
• HTML Plug-ins
• HTML YouTube

HTML APIs

• HTML Geolocation
• HTML Drag/Drop
• HTML Local Storage
• HTML App Cache
• HTML Web Workers
• HTML SSE

HTML Examples

• HTML Examples
• HTML Quiz
• HTML5 Quiz
• HTML Certificate
• HTML5 Certificate
• HTML Summary

HTML References

• HTML Tag List
• HTML Attributes
• HTML Events
• HTML Canvas
• HTML Audio/Video
• HTML Doctypes
• HTML Colornames
• HTML Colorgroups
• HTML Colorpicker
• HTML Colormixer
• HTML Character Sets
• HTML URL Encode
• HTML Lang Codes
• HTTP Messages
• HTTP Methods
• PX to EM Converter
• Keyboard Shortcuts

...
The term "HTML5" is widely used as a buzzword to refer to modern Web technologies, many of which (though by no means all) are developed at the WHATWG, in some cases in conjunction with the W3C and IETF.
...

"§"
htmlgoodies
HTML Goodies

It was around 1992, when the World Wide Web was still something most people had never heard about. A new browser called Netscape 1.0 had come out, and with it came the seeds that would eventually become HTML Goodies.

• Introduction: home | about | non-technical introduction | newsletter archive
• HTML 5: html5 development center | html5 website gallery
• Primers: html | social media and html | ad banners | perl & cgi | asp | javascript | database - sql
• HTML & Graphics Tutorials: getting started | backgrounds | buttons | browser specific | colors | forms | frames | html 4.01 tags | html 4.01 ref | image maps | tables | web graphics
• Beyond HTML: asp | cascading style sheets | css keyword ref | cgi scripting | dhtml/layers | dot net | java applets | javascript | javascript frameworks | javascript keyword ref | javascript script tips | mobile web development | open source cms | php | security | SEO | vb script keyword ref | webmaster tips | webmaster projects | webmaster toolbox | video | xml | general reference pieces | the master list
• Need Help?: discussion boards | mentors | technology jobs
• Web Development: earthwebdeveloper.com | javascripts.com

"§"
htmlgoodies.com
CSS - columns3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu augue orci. Morbi tristique a felis et varius. Sed augue nunc, cursus sed congue sit amet, mollis sed risus. Aliquam sit amet fringilla nisl. Vivamus ullamcorper odio magna, ut sagittis justo accumsan at. Donec turpis turpis, sagittis vel nisl eget, sodales ullamcorper eros. Etiam ut velit non sapien tincidunt ultrices in et nisi. Phasellus fringilla quam rutrum, semper neque pretium, fermentum justo. Suspendisse convallis, purus vitae mollis semper, est justo pretium neque, sit amet convallis nisi justo vel justo. Integer vestibulum, felis vel ultricies ornare, diam risus viverra odio, at tempus elit tellus quis purus. Sed porta, eros vel vehicula sollicitudin, nisi orci maximus magna, vitae commodo dui magna nec libero.

"§"
htmlhelp.com
HTML-Dokumentation
Cascading Style Sheets
CSS Guide
doctype-Tipps

• Font Properties: Font Family | Font Style | Font Variant | Font Weight | Font Size | Font
• Color and Background Properties: Color | Background Color | Background Image | Background Repeat | Background Attachment | Background Position | Background
• Text Properties: Word Spacing | Letter Spacing | Text Decoration | Vertical Alignment | Text Transformation | Text Alignment | Text Indentation | Line Height
• Box Properties: Top Margin | Right Margin | Bottom Margin | Left Margin | Margin | Top Padding | Right Padding | Bottom Padding | Left Padding | Padding | Top Border Width | Right Border Width | Bottom Border Width | Left Border Width | Border Width | Border Color | Border Style | Top Border | Right Border | Bottom Border | Left Border | Border | Width | Height | Float | Clear
• Classification Properties: Display | Whitespace | List Style Type | List Style Image | List Style Position | List Style
• Units: Length Units | Percentage Units | Color Units | URLs

"§"
Hypertext (W3)

Zum Begriff und Thema "Hypertext"
"Hyper" ist eine griechische Vorsilbe und bedeutet eigentlich "viel zu viel". Ist "Hypertext" also einfach "viel zu viel Text"?
...

"§"
javascriptsource - CF
Crossfader

bad_neuenahr

Rose Bad Neuenahr

berleburg_bluete

Rose Berleburg

big_purple

Rose Big Purple

"§"
javascriptsource - FF
Fisheye-Function

Move your mouse over the text and watch it change. It's implemented using JavaScript and CSS.

The Geek's Raven
[An excerpt, with thanks to Marcus Bales]

Once upon a midnight dreary,
fingers cramped and vision bleary,
System manuals piled high and wasted paper on the floor,
Longing for the warmth of bedsheets,
Still I sat there, doing spreadsheets:
Having reached the bottom line,
I took a floppy from the drawer.
Typing with a steady hand, I then invoked the SAVE command
But got instead a reprimand: it read "Abort, Retry, Ignore".

Free JavaScripts provided
by The JavaScript Source

"§"
javascriptsource - OIG
OnMouseOver Image Gallery

Author: Robert Daniel Jr.
Web Site: http://javascript.slirple.com
Description: When the mouse moves over one of the thumbnails, the larger-sized picture area changes to the larger-sized picture that corresponds to that thumbnail. Easy to implement.



Alte Variante mit sichtbarem weißen Rand:

"§"
javascriptsource.com
JavaScript Source
JavaScript Portal

The JavaScript Source is an excellent JavaScript resource with tons of "cut and paste" JavaScript examples for your Web pages. All for free!

Categories

• Alphabetical Listing
• Tutorials
• Ajax Tutorials
• Ajax
• Buttons
• Cookies
• CSS
• Forms
• Games
• Generators
• Image Effects
• Math Related
• Miscellaneous
• Multimedia
• Navigation
• Page Details
• Password
• Snippets
• Text Effects
• Time & Date
• User Details

Alphabetical Listing

"§"
JPEG, JPG (W3)

"§"
letterheadfonts.com
Fonts

Fonts

• 36 Sales
• 62 Ands
• 62 Thes
• 62 More Ands
• 62 More Thes
• Advertisers Square
• Alarm Block
• Aledo
• Aloha Script
• Alpine Script
• Amarillo 2NEW!
• Ambrosia
• American Sans
• Americana Ornaments
• Americana Panels
• Americana Ribbons
• AmethystNEW!
• Angel
• Anna Banana 2
• Antique Half Block 2
• Antique Shop
• Aristocrat
• Ascribe
• Asylum
• Ataboy 165
• Athletic Club
• Avalanche
• Ballpark Script
• Bandit
• Bandolier
• Bank Note
• Basher
• Beatnik Cowboy
• Becker Classic
• Becker No 45
• Bella Vista
• Bell Boy
• Bergling Panels
• Betterbilt
• Big Bob
• Big Dog
• Big Top
• Billhead
• Birgitta
• Black Rose Script
• Blacksmith
• Blackstone 1
• Blackstone 2
• Boot Camp
• Bootcut
• Booth
• Borges Catchwords 1
• Borges Catchwords 2
• Boston Ballpark
• Boston Truckstyle
• Bounce Script
• Branding Iron
• Brianna
• Broadway Elements
• Broadway Panels 1
• Broadway Panels 2
• Broadway Panels 3
• Broadway Panels 4
• Brooklyn
• Brough Superior
• Brushwork
• Bulldog
• Burbank
• Cafe Corina
• Californian
• Calileo
• Cameo
• Carnivàle
• Cartoon Cowboy
• Casablanca
• Castlerock
• CavaleroUPDATED
• Cedar Creek
• Centennial Banker
• Centennial Panels 1
• Centennial Panels 2
• Centennial Panels 3
• Centennial Panels 4
• Chapman
• Chateau
• Chesham Sans
• Chicago Script
• Chromeliner
• Chunky Block
• Cincinnati Poster
• Claretian
• Classic Caps
• Classic Panels 1
• Classic Panels 2
• Classic Roman 2
• Coffee Shop
• Colonial Roman
• Comic Caps 2
• Conclave
• Confection
• Confection Essentials
• Conservatory
• Convecta
• Cool Blue 2
• Cornbread Casual
• Corner Specimens 1
• Corner Specimens 2
• Corner Specimens 3
• Corrie
• Cosmic Cursive
• Country Road
• Dark Horse
• David Design
• Desire
• Desire Rough & Ragged
• Dickinson
• Diploma
• Distressed Block
• Divine
• Dixon ScriptUPDATED
• Doc Terwilligers
• Dreadnought
• Dublin
• Duetta
• Durango
• Egyptian
• Elixir
• Emporium
• Enchanted
• Encore
• English Rose
• Engravers Ornaments
• Ephemera
• Equinox
• Esoteric 3
• Essendine 2
• Euphoria 2
• Factory
• Fairground
• Fancy Full Round
• Farango
• Fast Slant
• Fat Cat
• Fat Daddy
• Fine Cut
• Fine Line Roman
• Firehouse
• Five & Dime
• Flamingo Script
• Flash ScriptUPDATED
• Flathead
• Folklore
• Full Block
• Garner
• General Store
• Gilmore
• Gloria
• Golden Era Art Elements
• Goldsmith Script
• Grants Antique
• Grindle
• Gunslinger
• Gypsy
• Hambone
• Hamilton Nailhead
• Hamilton Ornate
• Handyman
• Happy Fun Ball
• Hastings Gold
• Havana
• Hazel
• Heller's Script
• Henderson
• Hensler 2
• Heritage
• Hertford
• Hexagon Modern
• Hick Sticks
• Hindlewood
• Hudson
• Indian Script 2
• Inkling
• Ironhorse
• Iron Knight
• Iron Lace
• Jalopy Joe
• Jeff Marshall Script
• Jewelo
• King Edward
• Kips Bay
• Kiwi Casual
• Kodiak
• Kona Bold
• Kung Faux
• Lakeside
• Larcher Roman
• Light Face Roman
• Lincoln
• Logomotive
• Lonerider
• Mackinlay
• Magnum44
• Main Street Ornaments
• Main Street Panels
• Majestic
• Marie Script
• Mastercraft
• Matthews Modern
• Matthews Thin
• Melissa
• Menace
• Mercantile
• Metro 39
• Mikes Block
• Milkman
• Mister Kooky 2
• Mister Muster
• Mocha Script
• Monogram Circle
• Monogram Diamond
• Monogram Oval
• Mystery Font
• Naylorville
• New English
• New Modern Classic
• No Fishin
• Novela
• Nugget
• Old Abe
• Old Block
• Old Flame
• Old Iron
• Old Stock
• Old Tom
• Opening Night
• Orange Grove
• Orchard
• Ortlieb
• Packard Script
• Palace Bold
• Pandora
• PhantomUPDATED
• Pickle Barrel
• Pierre
• Pipeline
• Piranha Script
• Prentice
• Preston
• Prince
• Pullman Train
• Quadrex
• Quaker
• Quantum
• Ragged Brad
• Ransom
• Raven
• Rawson & Evans
• Red Sable Script
• Retro Cafe
• Retro Ricky
• Ridgecrest
• Ringer
• Riverboat
• Roebuck
• Roper
• Ross 1929 Roman
• Ross Antique Roman
• Royal Crimson
• Royal Script
• Saddleback
• Sadey Ann
• Safire
• Sanborn Thin
• Sarah Script
• Saratoga Ornaments
• Saratoga Panels 1
• Saratoga Panels 2
• Saratoga Panels 3
• Saratoga Panels 4
• Scriptana
• Sedona
• Seranoa
• Shelsey
• Sheridan Script
• Shocard Rodeo
• Shogun
• Shopfront
• Signature
• Signkit Script
• Signmaker 2
• Signwriter Roman
• Silent Movie
• Sinclair
• Smalts
• Sofia Script
• Spaz
• Speakeasy
• Speedstyle
• Spencer
• Spirit Script
• Splash
• Springfield
• Spurred Egyptian
• Square Block
• Squeezebox
• Stanford Script
• State Fair
• State Street
• Stetson
• Stevens Percepta
• Stonecutter
• Story Book
• Stove Pipe Thin
• Stratford
• Stunt Roman
• Sugargirl
• Tallington
• The Bat
• Thick & Thin
• Tideway Script
• Timberlodge 2
• Tonic
• Towne Hall
• Tributary
• Triumph
• Trolley
• Understudy
• Union Thug
• United Trade
• Unlovable
• Valencia
• Vaudeville
• Verdi
• VersatileNEW!
• Victoria
• Vienna
• Wade Dynamic
• Wade Grotesque
• Waterloo
• Welo Thin
• Western Rose
• Whistler
• Winchester 73
• Woodmere
• Workhorse
• Yuma
• Zenith

Styles

• 3D
• 30's and 40's
• 50's and 60's
• Art Deco
• Art Nouveau
• Bold
• Calligraphic
• Cartoon
• Casual
• Circus
• Condensed
• Convex
• Corners
• Decorative
• Distressed
• Early 1900's
• Extended
• Fire Truck
• Formal
• Gothic
• Graffiti
• Inline
• Late 1800's
• Layered
• Light
• Modern
• Multi-Part
• Old English
• Ornaments
• Panels
• Prismatic
• Racing
• Railroad
• Ribbons
• Roman
• Sanborn Map Co.
• Sans Serif
• Scripts
• Scrollwork
• Shadow
• Swashes
• Victorian
• Western
• Word Art

"§"
matthewlein.com
CSS easing animation tool

Ceaser is an interactive CSS easing animation tool. It lets you build any kind of ease you want, and comes with many of the Penner Easing Equations.

"§"
meettheipsums.com
Lorem Ipsum Variante

Meet the Ipsums

• Lorem ipsum - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
• Coffee ipsum - Irish skinny, grinder affogato, dark, sweet carajillo, flavour seasonal aroma single origin cream. Percolator, foam, arabica, decaffeinated bar brewed aromatic.
• Cat ipsum - Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
• Bluth ipsum - I'm gonna build me an airport, put my name on it. Why, Michael? So you can fly away from your feelings? I don't care if it takes from now till the end of Shrimpfest.
• Veggie ipsum - Celery seakale desert raisin taro wakame pea sprouts. Broccoli rabe courgette rock melon cress epazote bell pepper water spinach spring onion salsify arugula black-eyed pea.
• Corporate ipsum - Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.
• TV ipsum - Here's the story of a man named Brady who was busy with three boys of his own., Michael Knight a young loner on a crusade to champion the cause of the innocent.
• Zombie ipsum - De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.
• Hipster ipsum - Neutra flexitarian farm-to-table, mlkshk leggings retro thundercats shoreditch blue bottle tattooed street art. Twee plaid Banksy, Cosby sweater meggings messenger bag sriracha keytar.
• Pommie ipsum - Bugger bag egg's old boy willy jolly scrote munta skive pillock, bloody shambles nose rag blummin' scrote narky ever so, lass fork out flabbergasted sod's law penny-dreadful ever so lovely.
• Cheese ipsum - Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.
• Gangsta ipsum - Lorizzle ipsizzle dolizzle pizzle go to hizzle, fo shizzle my nizzle boofron. Fo shizzle my nizzle sapien velizzle, away volutpat, suscipit quizzle, gravida vizzle eget for sure.
• Samuel L ipsum - Do you see any Teletubbies in here? The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Your bones don't break, mine do.
• Hairy ipsum - Boogie nights robot moustache got milk prince barin beefeater cigars, boogie nights gentleman cigars robot moustache et sodales cum got milk beefeater prince barin mustachioed cigars?
• Cupcake ipsum - Jelly-o cheesecake gummi bears chocolate. Fruitcake sesame snaps cheesecake fruitcake. Apple pie dessert powder pie tart topping. Dessert pastry toffee dessert bonbon bonbon sugar plum donut sweet.
• Sagan ipsum - Trillion a very small stage in a vast cosmic arena. Cosmic ocean, courage of our questions intelligent beings Flatland consciousness citizens of distant epochs? Decipherment.
• Bacon ipsum - Bacon swine leberkas, ham hock flank beef venison pork belly. Tongue capicola pork chop strip steak ribeye. Sausage short ribs ribeye kielbasa fatback jerky swine corned beef venison.
• Skate ipsum - Drop in axle roll-in rail slide noseblunt slide Steve Severin impossible. Darkslide street mute-air bail Independent goofy footed opposite footed. Steps sick lien air hanger.
• Pirate ipsum - Nipperkin run a rig ballast chase Shiver me timbers Spanish Main driver lass six pounders clipper. Nipperkin yawl Spanish Main crimp Cat o'nine tails jib keelhaul topmast.
• Beer ipsum - Cask length filter pub, conditioning tank. Length crystal malt brew squares additive abbey craft beer biere de garde. Priming mouthfeel krausen wort cold filter bacterial.
• Gag ipsum - I Lied on scumbag sandwich friend kitchen woman in nerd angry birds. Unsave face aww yeah geek in class bra if you know what i mean haters gonna hate painfull dad.
• Tuna ipsum - European minnow priapumfish mosshead warbonnet shrimpfish bigscale. Cutlassfish porbeagle shark ricefish walking catfish glassfish Black swallower.
• Dungeons and Dragons ipsum - Ability check ability score attack roll catching on fire checked comatose concealment confused eladrin subtype ethereal fear effect free action full normal hit.
• Bogan ipsum - Trent from punchy booze bus with lets throw a amber fluid. As cross as a vb how we're going christmas. As cunning as a sunnies how as stands out like dunny rat.
• Sheen ipsum - Clearly, someone who believes he is above the law. Well, you've been warned, dude. Bring it. I am every character in between, save for that little weirdo with his guts strapped in.
• Riker ipsum - I'll be sure to note that in my log. And blowing into maximum warp speed, you appeared for an instant to be in two places at once. How long can two people talk about nothing?
• Baby ipsum - Da yaya dada laa laa yaya poo-poo yaya ga laa wuv. Doo gaa doo doo ya doodoo gaagaa doo. Ga goo laa gaagaa goo ya yaya gaagaa. Ga dada ga laa laa laa dada dada doo.
• Pahu ipsum - Ko te moemoea a Maui kia haere ngatahi ai ratou ko ona tuakana ki te hii ika. I te hokinga mai o ona tuakana ki tatahi, ka kii atu a Maui. Engari, ko te whakautu o ona tuakana ki a ia ano.
• Halloumi ipsum - Maecenas blandit odio eget massa feugiat vel pulvinar ante fried. Vivamus sollicitudin, mi quis salty dignissim, elit tortor cursus nunc, nec pulvinar neque ante vitae sapien.
• Melbourne ipsum - North melbourne shinboners the city loop, avalon is so not melb trams formula one grand prix footy south of the river, flemington racecourse world's most liveable city.
• Picksum ipsum - When a naked man's chasing a woman through an alley with a butcher knife and a hard-on, i figure he's not out collecting for the red cross.
• Alien ipsum - Ancient religions pyramids DNA manipulation flying vessels space time Mahabharata, inter-dimensional mercury Machu Picchu mystery King Soloman, ancient alien worm hole.
• Ed balls ipsum - Ed balls ed balls ed balls ed balls ed balls. Ed balls, ed balls ed balls ed balls ed balls ed balls.Ed balls ed balls, ed balls ed balls ed balls ed balls ed balls.
• Metaphor ipsum - A writer is an eerie plastic. Some assert that they were lost without the unpriced dentist that composed their french. A sailboat is a twelvefold visitor.
• Jony ipsum - Mavericks reality distortion gradients attenuation. Thought through and through notifications transparency game center multitasking aluminum advanced desktop operating system genius bar.
• Cajun ipsum - Fishing cayenne bisque cayenne viens ci red beans & rice ca c'est bon merci beaucoup. Boudreaux sauce piquante etoufee yams crawfish po-boy.
• Whitman ipsum - Where the yellow-crowned heron comes to the edge of the marsh at night and feeds upon small crabs; Prodigal! you have given me love!
• Batman ipsum - Breathe in your fears. Face them. To conquer fear, you must become fear. You must bask in the fear of other men. And men fear most what they cannot see. You have to become a terrible thought.

"§"
mozilla
HTML5-Demos

"§"
mozilla.org
CSS-Referenz

"Cascading Style Sheets", most of the time abbreviated in "CSS", is a stylesheet language used to describe the presentation of a document written in HTML or XML (including various XML languages like SVG or XHTML). "CSS" describes how the structured element must be rendered on screen, on paper, in speech, or on other media.

CSS is one of the core languages of the open web and has a standardized W3C specification. Developed in levels, CSS1 is now obsolete, CSS2.1 a recommendation and CSS3, now split into smaller modules, is progressing on the standard track. The first early drafts of CSS4 modules are being written.

• CSS Reference - An exhaustive reference for seasoned Web developers describing every property and concept of CSS.
• CSS Tutorial - A step-by-step introduction to help complete beginners get started. It presents all the needed fundamentals.
• CSS3 Demos - A collection of demos showing the latest CSS technologies in action: a boost for the creativity.

"§"
nngroup
Nielsen Norman Group
Jakob Nielsen's Alertbox articles about
Interface Usability and Website Design

Topics

• Accessibility (6)
• Advertising (9)
• Agile (2)
• Applications (31)
• Audience Types (22)
• B2B Websites (4)
• Content Strategy (22)
• Corporate Websites (6)
• Credibility & Persuasion (8)
• Design Mistakes (16)
• Email (13)
• Eyetracking (14)
• Heuristic Evaluation (7)
• Human Computer Interaction (36)
• Information Architecture (11)
• Interaction Design (3)
• Internet and Society (11)
• Intranets (30)
• Management (20)
• Mobile & Tablet (40)
• Navigation (31)
• New to User Experience (1)
• Non-Profit Websites (3)
• Predictions & Milestones (35)
• Prototyping (4)
• Research Methods (37)
• Search (9)
• Social UX (6)
• Standards (12)
• Strategy (29)
• Technology (46)
• Transitioning From Another Speciality (1)
• Trip Reports (19)
• User Behavior (23)
• User Testing (45)
• Visual Design (11)
• Web Usability (50)
• Writing for the Web (41)

"§"
PHP (W3)

• Build a PHP Switcher - by Chris Clark - Issue 152 October 13, 2002
• Manage Your Content With PHP - by Christopher Robbins - Issue 148 August 9, 2002

PHP | PHP3 | PHP4 | PHP5 | PHPR | PHPS | PHPT | PHPW

Are you wondering what all the talk is about? Wanting to learn to use PHP? Read on!

Welcome to the HTML Goodies PHP Tutorials! This series is a new series that is in development right now. This tutorial series is a little more advanced than our HTML tutorials. The assumption is made that you already have an understanding of HTML and basic web design. For this reason this is not a good starting point for the new designer, but is instead a place for one with a little experience to spread their wings and expand heir design horizons. Check back here often to see the progress of the series. We'll have you writing PHP code very soon! The following sections are available now:

...

...
The first version of PHP was named Personal Home Page Tools (PHP Tools) when it was released by Rasmus Lerdorf in 1995. "PHP 1" can still be downloaded today from "museum.php.net". Weighing in at only 26 kilobytes in size, php-108.tar.gz is diminutive by today's standards, yet it was capable of allowing users to implement guestbooks and other form-processing applications.

"PHP 2" introduced built-in support for accessing databases, cookie handling, and user-defined functions. It was released in 1997, and by the following year, around 1% of sites on the internet were using PHP.

However, "PHP 3" was the first release to closely resemble today's incarnation of PHP. A rewrite of the underlying parser by Andi Gutmans and Zeev Suraski led to what was arguably a different language; accordingly, it was renamed to simply "PHP", which was a recursive acronym for "PHP: Hypertext Preprocessor". This was released in 1998 and the ease of extending the language played a large part in its tremendous success, as this aspect attracted dozens of developers to submit a variety of modules.

Andi Gutmans and Zeev Suraski continued to rewrite PHP's core, primarily to improve performance and increase the modularity of the codebase. This led to the creation of the Zend Engine, which was used by "PHP 4" when it was released in 2000. As well as offering better performance, "PHP 4" could be used with more web servers, supported HTTP sessions, output buffering and several new language constructs.

By September 2001, Netcraft's Web Server Survey found 1.8M sites running PHP.

"PHP 5" was released in 2004, and remains the most recent major version release today ("PHP 5.4.11" was released on 17 January 2013). Zend Engine 2.0 forms the core of this release.

By January 2013, PHP was being used by a remarkable 244M sites, meaning that 39% of sites in Netcraft's Web Server Survey were running PHP. Of sites that run PHP, 78% are served from Linux computers, followed by 8% on FreeBSD. Precompiled Windows binaries can also be downloaded from windows.php.net, which has helped Windows account for over 7% of PHP sites.
...

• •Array functions
• •Calendar functions
• •Date functions
• •Directory functions
• •Error functions
• •Filesystem functions
• •Filter functions
• •FTP functions
• •HTTP functions
• •LibXML functions
• •Mail functions
• •Math functions
• •Misc functions
• •MySQL functions
• •SimpleXML functions
• •String functions
• •XML Parser functions
• •Zip functions

Originally called "Personal Home Page Tools" by creator Rasmus Lerdorf, it was rewritten by developers Zeev Suraski and Andi Gutmans who gave it the recursive name "PHP Hypertext Preprocessor". Lerdorf currently insists the name should not be thought of as standing for anything, for he selected "Personal Home Page" as the name when he did not foresee PHP evolving into a general-purpose programming language.

"§"
PNG (W3)

"§"
printwhatyoulike
Print what you like

PrintWhatYouLike lets you print the good parts of any web page while skipping ads and other junk.

PageZipper - Life's too short to spend clicking "Next"

Ever read one of those top ten lists or photo galleries where every item is on a different page? You spend more time clicking "Next" and waiting than actually reading anything. PageZipper is a free bookmarklet which automatically merges all the "Next" pages into one, so you can skip directly to the stuff you want.

What It Does

• As you scroll to the bottom of a page, PageZipper automatically adds the next page to the bottom of the page you're on.
• Clicking the arrow in the toolbar will skip you directly to the top of the next page.
• On image galleries, clicking the arrow will skip you directly to the next image in the gallery.
• PageZipper automatically resizes images in photo galleries to fit your browser window. So you always see the entire image without having to scroll

How It Works

PageZipper automatically searches through the page for a "Next" link. You don't need to tell it anything.

Here are a few good places to test drive PageZipper. Remember to click the PageZipper button in your toolbar to activate it.

• Time 50 Best Websites of 2008 - as you scroll down the next page will load
• Lolcats - press cnrl-down to skip through the images

"§"
Radio Button (W2)

"§"
scriptsearch
Script-Search

• ASP (646)
• Flash (192)
• Java (781)
• JavaScript (856)
• Perl (1476)
• Remotely Hosted (338)
• Tools and Utilities (255)
• XML (52)

"§"
searchfreefonts.com
Fonts

One of the Largest Free Font Selections on the web - over 13,000 Free Fonts

A unique font can help your document stand out and attract attention. A perfectly suited font can help to make a design attractive and successful. Finding these high quality fonts is a task made easier with SearchFreeFonts.com. New SearchFreeFonts.com collection contains over 13,000 free fonts and over 91,000 commercial fonts.

Free Fonts by Category

• 3D fonts (280)
• Antiques fonts (289)
• Broken fonts (331)
• Calligraphy fonts (217)
• Capitals fonts (1625)
• Christmas (Xmas) fonts (97)
• Classic fonts (127)
• Comic fonts (340)
• Cool fonts (1011)
• Cyrillic fonts (38)
• Decorative fonts (3312)
• Distorted fonts (682)
• Dotted fonts (238)
• Elegant fonts (217)
• Formal fonts (564)
• Fun fonts (1018)
• Futuristic fonts (1604)
• Gothic fonts (342)
• Graffiti fonts (262)
• Halloween fonts (465)
• Handwritten fonts (1463)
• Images & Symbols fonts (1644)
• Initials fonts (61)
• Kids fonts (1583)
• Logos fonts (66)
• Scientific fonts (18)
• Medieval fonts (103)
• Military fonts (621)
• Monospaced fonts (24)
• Non-Latin fonts (120)
• Outline fonts (1395)
• Pixel fonts (364)
• Quirky fonts (1137)
• Retro fonts (231)
• Sans Serif fonts (677)
• Script fonts (541)
• Serif fonts (395)
• Slab Serif fonts (30)
• Sport fonts (153)
• Stencil fonts (176)
• Symbol fonts (35)
• Technical fonts (81)
• Transitional Serif fonts (21)
• Typewriter fonts (814)
• Western fonts (59)
• Art Deco fonts (126)
• Art Nouveau fonts (64)
• Brush fonts (187)
• Chiseled fonts (38)
• Condensed fonts (131)
• Formal Script fonts (83)
• Geometric Sans fonts (105)
• Grotesque Sans fonts (98)
• Humanistic Sans fonts (38)
• Inline fonts (78)
• Multiple Master fonts (19)
• Modern Serif fonts (45)
• Old Style Serif fonts (52)
• Ornaments fonts (61)
• Small Caps fonts (111)
• Square Sans fonts (268)
• Woodcut fonts (16)

"§"
slipsum
Lorem Ipsum Variante

Change The Ipsum?

"§"
stateofwebtype.com
The State of Web Type

Up-to-date data on support for type and typographic features on the web.

a

• Alternative Fractions (afrc)

c

• Capital Spacing (cpsp)
• Case-Sensitive Forms (case)
• CBDT/CBLC
• Color fonts
• COLR/CPAL
• Contextual Alternates (calt)
• Contextual Ligatures (clig)
• Contextual Swash (cswh)
• CORS
• CSS Font Loading

d

• Denominators (dnom)
• Discretionary Ligatures (dlig)

e

• EOT

f

• font-face
• font-family (font-face)
• font-feature-settings
• font-feature-settings (font-face)
• font-kerning
• font-size-adjust
• font-stretch (font-face)
• font-style (font-face)
• font-synthesis
• font-variant
• font-variant (font-face)
• font-variant-alternates
• font-variant-caps
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-weight (font-face)
• Fractions (frac)

h

• Historical Forms (hist)
• Historical Ligatures (hlig)
• hyphenate-character
• hyphenate-limit-chars
• hyphenate-limit-lines
• hyphenate-limit-zone
• hyphens

i

• Initial Forms (init)
• Isolated Forms (isol)

k

• Kerning (kern)

l

• Lining Numbers (lnum)
• Localized Forms (locl)

m

• Medial Forms (medi)

n

• Numerators (numr)

o

• Oldstyle Numerals (onum)
• OpenType-SVG
• Ordinals (ordn)
• Ornaments (ornm)

p

• Petite Capitals (pcap)
• Proportional Numbers (pnum)

r

• Required Ligatures (rlig)

s

• sbix
• Scientific Inferiors (sinf)
• Slashed Zero (zero)
• Small Capitals (smcp)
• Small Capitals From Capitals (c2sc)
• src
• Standard Ligatures (liga)
• Stylistic Alternates (salt)
• Stylistic Sets (ssxx)
• Subscript (subs)
• Superscript (sups)
• SVG fonts
• Swashes (swsh)

t

• Tabular Numbers (tnum)
• Terminal Forms (fina)
• Titling (titl)
• TTF/OTF

u

• Unicase (unic)
• unicode-range

w

• WOFF
• WOFF2

"§"
Styleguide (W3)

Style Guide

Corporate Design der Bundesregierung

• Print-Medien
• Online-Medien

Corporate Design Dokumentation
Die Bundesregierung wird durch ihr Corporate Design mit einer eigenständigen Identität sichtbar: Es bestimmt ihr charakteristisches visuelles Profil und schafft damit eine einheitliche Basis für eine erfolgreiche Kommunikation.

Das Corporate Design der Bundesregierung basiert auf dem Beschluss des Bundeskabinetts vom 2. Juni 1999 und wird laufend fortentwickelt. Die Entscheidung über den Einsatz für den nachgeordneten Bereich der Ministerien unterliegt der Ressortverantwortlichkeit. Im Falle der Zustimmung gelten die verbindlichen Grundlagen über das einheitliche Corporate Design der Bundesregierung.

Caltech Style Guide

• General Guidelines
• Caltech Web Templates
• Caltech Page Banners
• The Caltech Logo
• The Caltech Wordmark
• Caltech Colors
• Graphics and Images
• Website Navigation
• Page Layout
• Fonts, Text and Sizing

Caltech Web Style Guide
...
These web publishing guidelines are intended to help web developers to:

• Represent Caltech on the web in a manner that is professional and visually consistent with the Institute's established web presence, as dictated by the Institute homepage;
• Increase design and usability of web pages through good web practices;
• Suggest standard colors and fonts, and offer downloadable logos, banners and other standard graphics, with tips as to their best usage;
• Make web publishers aware of campus web resources.

Corporate-Design-Manuals / Styleguides

Styleguides: Von den Einen verhasst, von Anderen zu einer Art Bibel stilisiert, die man unter Androhung von Höllenqualen tunlichst zu befolgen hat. Irgendwo dazwischen liegt wohl die Wahrheit. Das Arbeiten mit Corporate-Design-Manuals gehört zum täglichen Geschäft eines Kreativen. CD-Manuals dokumentieren die visuellen Eckpfeiler einer Unternehmensidentität. Gestaltungsrichtlinien sorgen, sofern sie denn auch angewandt werden, für ein möglichst einheitliches Erscheinungsbild.

Ein Corporate-Design-Handbuch ist im Rahmen eines CD-Projektes ein unverzichtbares Dokument. Die zahlreichen Ausprägungen des Erscheinungsbildes finden sich darin so aufbereitet, dass sowohl die eigenen Mitarbeiter bei der Erstellung von Kommunikationsmitteln unterstützt werden, wie auch jederzeit reproduzierbar sind.

Die meisten CD-Manuals liegen im PDF-Format vor. Einige Styleguides sind in der Online-Version aufgeführt.

Corporate-Design-Handbücher / Styleguides von A bis Z

Name / Bezeichnung Format MB Agentur

• 1 und 1, CD-Richtlinien PDF 2.5
• AFC, Champions League, Event Identity Guidelines PDF 4.3
• Allgäu Dachmarke, Erscheinungsbild PDF 4.9 MS&P Creative Consultants
• ARD, Corporate Design HTML
• Allianz, Basics Styleguide PDF 8.6
• Bauhaus Universität Weimar, Markenauftritt PDF 4.4
• Bad Bevensen, CD-Manual PDF 5.7 Stockwerk2
• Bären Elektro AG, Corporate Design PDF 9.1 tatort.be
• Bayerisches Staatsministerium für Arbeit und Sozialordung, Familie und Frauen, CD-Handbuch PDF 2.3 worm und linke
• Be Berlin Kampagne, Richtlinien für die Berliner Verwaltung PDF 6.4 Fuenfwerken Design AG
• Bergwacht Bayern, Erscheinungsbild PDF 5.5
• Bern Stadt, Design Manual PDF 0.5 Grünig & Dreier
• Bertelsmann, Corporate Design (englisch) PDF 1.9
• Bitburger, Corporate Design-Handbuch PDF 19.3
• BKK Niedersachsen/Bremen, Handbuch der Gestaltung PDF 3.9 2form
• Braunschweig Stadt, Corporate Design-Handbuch PDF 1.4 wir design
• Bremen Stadt, Design-Manual PDF 2
• Bündnis 90/Die Grünen, CI-Manual PDF 4,7
• Bündnis 90/Die Grünen, Corporate Design-Leitfaden 2006 (verworfen) PDF 1.4
• Bundeswehr, Online-Styleguide HTML
• Bundesregierung, Styleguide HTML
• Carl von Ossietzky Universität Oldenburg, Markenkonzeption Corporate Design PDF 0.7 hanke multimediahaus
• CDU, Corporate Design der Union, Juni 2010 PDF 8.38
• CDU, Die CI der CDU, 2007 PPT 15
• CDU, Gestaltungsrichtlinien PDF 0.2
• Comdirect, Corporate Design PDF 2.2 KW43
• CVJM, Corporate Design Manual PDF 2.5
• Davos Klosters, CD-Manual PDF 2.9
• DEG Deutsche Elektro Gruppe, Brand Book PDF 19.2
• DFG Deutsche Forschungsgemeinschaft, Corporate Design Handbuch PDF 2.5 besscom
• Deutsche Kinder- und Jugendstiftung, Corporate Design Richtlinien PDF 2.9 Schindler, Parent & Cie
• Deutsche Sporthochschule Köln, Corporate Design-Manual PDF 2 loewentreu
• Deutsche Privatvorsorge AG, Basis CD-Manual PDF 1
• DKi Deutsches Kupferinstitut, Corporate Design Manual PDF 1.2 Solarpraxis Supernova
• DTB Deutscher Turnerbund, Design Manual PDF 1.5
• Die Linke, Umgang mit der Marke PDF 0.2 DiG
• DLRG Deutsche Lebens-Rettungs-Gesellschaft, Corporate Design Handbuch PDF 3.4 lemonblue
• EinsLive, Corporate Design-Manual 2007 PDF 1.7
• Enercity, Corporate Design Manual PDF 20.7 Sunderdiek
• Engandin St.Moritz, Corporate Design Hauptmanual PDF 2.3
• Evangelische Kirche Westfalen, Corporate Design Manual PDF 0.5
• FDP - Die Liberalen, CD-Manual PDF 1.1
• Fachhochschule Frankfurt, Erscheinungsbild PDF 1.3
• Fachhochschule Hannover, Corporate Design PDF 2.6 Frank Heymann
• Fachhochschule Südwestfalen, Corporate Design-Manual PDF 3.2 o+m design
• Fachhochschule fürr Wirtschaft Berlin, Corporate Design-Manual PDF 3.6 am-com.com
• FIAT, Das neue Erscheinungsbild PDF 2.7
• Freie Universität Bozen, Corporate Design-Manual PDF 5 Gruppe Gut
• Friedrich-Alexander-Universität, Corporate Design-Manual PDF 3.2 zur.gestaltung
• GFU, Corporate Design-Manual PDF 0.5 better communication
• Graz, Logo-Manual PDF 2.8 dmc-vie.co.at
• Goch, CD-Handbuch PDF 9.1 Christoph Raffelt
• Graubünden, Corporate Design Manual PDF 14.8 Interbrand Zintzmeyer & Lux
• Grüne Schweiz, CD-Manual PDF 6.9 id-k.com
• Goethe Institut, Corporate Design Handbuch PDF 3.4
• Hamburg Tourismus, Corporate Design PDF 5.1
• Hamburger Hafen, Corporate Design-Manual PDF 5.5
• HdM Stuttgart, Corporate Design-Styleguide PDF 0.8 Isabell Pfahlsberger
• Hennef Stadt, Corporate Design Handbuch PDF 22 absolut Designhaus
• Henkel, Corporate Identity PDF 0.7 Jaspert Grafik
• HSE24, Design Manual PDF 0.8
• Hochschule RheinMain, Design Manual PDF 4 Novamondo
• Hochschule Wismar, Corporate Design-Handbuch PDF 4.1
• Hohnstein, Corporate Design-Handbuch PDF 3.9 detect
• Holzland, Corporate Design PDF 2.4
• Humboldt Universität zu Berlin, Leitfaden Corporate Design PDF 2.9 atelier doppelpunkt
• Interlaken, CD Manual PDF 0.7
• Johannes Gutenberg Universität Mainz, CD Manual PDF 10.1 Thomas Design
• Jungfrau (Schweiz), CD-Manual HTML
• Jusos in der SPD, Corporate Design PDF 6.2 Contur
• Kanton Bern, Grundlagen visuelles Erscheinungsbild PDF 0.5
• Kanton Zug, Richtlinien Erscheinungsbild PDF 2 ciprogramm.ch
• Langenscheidt, Corporate Design-Manual PDF 4
• Luzern Stadt, Corporate Design-Manual PDF 6
• Ludwig-Maximilians-Universität München LMU, Corporate Design-Manual PDF 5.2 Haak Nakat
• Mainz, Erscheinungsbild der Stadt PDF 6.1 Vatter-Balzar
• Mainzelmänchen, Styleguide PDF 3.1
• Malteser, Corporate Design Manual PDF 2.6
• Mecklenburg Vorpommern Tourismusverband, CD-Manual PDF 1.6
• MDR, Short-Styleguide PDF 2.7
• Messe Dresden, Styleguide PDF 0.7 Agentur Seidel
• Messe Stuttgart, Designvorgaben PDF 2.9 mausner & apel
• Nassfeld/Hermagor, Corporate Design Manual PDF 1.7 impalawolfmitbiss
• Otto Dix Stadt Gera, CD-Manual PDF 2
• Otto von Guericke Universität Magdeburg, Corporate Design-Richtlinien PDF 5.2 Ö-Konzept
• ÖBB, Basiselemente Corporate Design PDF 7.9 CI & M
• Österreichische Nationalbibliothek, Corporate Design-Richtlinien PDF 0.3
• OMV, Corporate Design Guide PDF 2
• Österreichisches Rotes Kreuz (ÖRK), Corporate Design-Manual PDF 1.8 fischer enterprises
• Ötztal/Sölden, Corporate Design Kurzversion PDF 6.6
• Piraten Partei, Design-Wiki HTML
• Sauerland, Design-Manual PDF 2.5 WIRKSTOFFGRUPPE
• Ruhr-Universität Bochum, Corporate Design-Manual PDF 7.9 oktober.de
• Salzburg (Land), Corporate Design-Manual PDF 1.1
• Schladming-Dachstein, Corporate Design-Manual PDF 4.1
• Schleswig-Holstein is(s)t lecker, Designmanual PDF 12 Bogya.Meyer-Bogya
• Switzerland, Corporate Identity-Manual (englisch) PDF 4.1
• Schwarzwald, Corporate Design Handbuch, Auszug PDF 1.1
• Schweizerische Bundesverwaltung, CD Bund (Online-Styleguide) HMTL
• SPD, Corporate Design PDF 0.8
• SPD Niedersachsen, Gestaltungsbeispiele zur Kommunalwahl 2006 PDF 1.4 Anette Gilke
• SP Sozialdemokratische Partei der Schweiz, Manual PDF 6.2 Walker
• Steiermark, CD-Manual PDF 3.5 Kufferath
• Telekom Austria, CI-Manual Richtlinien PDF 15.7
• Thurgau, Das Erscheinungsbild PDF 1.1 CI Programm
• Thurbo (schweizer Regionalbahn), Corporate Design Handbuch PDF 2.6
• Tirol Land, CD-Manual PDF 4.2
• Torgau, Gestaltungsrichtlinien PDF 6.5 simons & schreiber
• TU Clausthal, Corporate Design Handbuch PDF 6.7 afkg.de
• TU Darmstadt, Corporate Design Handbuch PDF 5.4
• TU Dresden, Das Corporate Design PDF 1.3 Schmidt & Schumann
• TU Kaiserslautern, CD-Handbuch PDF 2.1 Hedeler.Design
• UNI Augsburg, Corporate Design-Richtlinien PDF 2.5 ottmann und poeltl
• Universität Bonn, Leitfaden Corporate Design (Teil 1) PDF 7.8
• Universität Bonn, Leitfaden Corporate Design (Teil 2) PDF 5.9
• UNI Freiburg, CD-Manual PDF 19 qu-int.com
• Universität Graz, CD-Manual PDF 0.8
• Universität Hamburg, Manual PDF 1.7 Peter Schmidt Studios
• UniversitätsKlinikum Heidelberg, Handbuch PDF 1.7 Sukop Scheller
• UNI Oldenburg, Corporate Design-Manual PDF 0.6 hanke multimediahaus
• Universität St.Gallen, Corporate Design PDF 4.2
• UNI Siegen, CD-Manual PDF 1.7 zett b
• Universität Paderborn, Corporate Design-Handbuch PDF 2.3 KOMMA
• Universität Ulm, Mini-Styleguide PDF 4.8
• Universität Wien, Corporate Design-Richtlinien PDF 4.8 Dunkl
• Universität Zürich UZH, CD-Manual PDF 25.9 TBS Identity
• VDEK Verband der Ersatzkassen, Corporate Design-Manual PDF 3 via roeper
• Viersen Stadt, Gestaltungsrichtlinien PDF 3.4 28 LIMITED BRAND
• Welterbe Oberes Mittelrheintal, Handbuch Corporate Design PDF 3.9
• WDR, Corporate Design Manual Grundlagen PDF 5.4 IdeenMacht
• WDR TV, Corporate Design Manual Fernsehen PDF 1.1 IdeenMacht
• Wilkhahn, Erscheinungsbild PDF 1.7 design.net AG
• WWU Westfälische Wilhelms-Universität Münster, Corporate Design Manual PDF 1.1 goldmarie design
• ZDF, Corporate Design Styleguide PDF 0.4
• Zillertal, Corporate Design-Manual PDF 3.9
• Zwickau, Corporate Design der Stadt PDF 8.9 Ö-Konzept

The Guardian, Observer and guardian.co.uk style guide

TMN (The Morning News) House Style Guide

University of Pennsylvania Web Style Guide

This style guide applies only to official University pages. Official University pages are defined as web pages on a University web server that have been created by the University, its schools, departments, or other administrative offices. It does not apply to web pages created by individuals, such as students or faculty members.
...

Web Style Guide Online

• Contents
• Foreword
• Preface
• Acknowledgements
• 1 Process | The site development team | Sidebar: Web teams | Initial planning | A list of reminders | Types of web sites and documents | The site development process | Developing a project charter | General advice about running web projects
• 2 Universal Usability | A basis for universal usability | Sidebar: Universal design principles | Universal usability guidelines | Universal usability in the design process | Sidebar: The development cycle
• 3 Information Architecture | Organizing Your Information | Site Structure | Presenting Information Architecture
• 4 Interface Design | Navigation and wayfinding | Interface design | Information design | The enterprise interface
• 5 Site Structure | Semantic content markup | Site File Structure | Search Engine Optimization
• 6 Page Structure | Site design in context | Page structure and site design | Page templates
• 7 Page Design | Document design | Visual design | Sidebar: Visual design principles | Page frameworks | Page width and line length | Design grids for web pages
• 8 Typography | Characteristics of type on the web | Legibility | Typefaces | Sidebar: Type for comfortable reading | Emphasis | Display typography with graphics | Sidebar: Signal to noise ratio
• 9 Editorial Style | Structuring your prose | Online style | Sidebar: Rhetoric and web design | Test formatting for web documents | Links
• 10 Forms & Applications | Technologies that support interaction | Designing web applications | The design process
• 11 Graphics | Graphics as content | Sidebar: The origins of information graphics | Characteristics of web graphics | Graphics file formats | Imaging strategies | Images on the screen | Graphics markup | Sidebar: Color terminology
• 12 Multimedia | Considerations for multimedia | Web multimedia strategies | Preparing multimedia | Design and multimedia
• References
• Abbreviations

"§"
thecodeplayer.com
Learn HTML5, CSS3, Javascript and more...

Video style walkthroughs showing cool stuff being created from scratch

• Making iOS 7 squircles using CSS3
• Matrix rain animation using HTML5 canvas and javascript
• Custom animated checkbox inputs using CSS and iconfonts
• Animating CSS3 Gradients
• Multi Step Form with Progress Bar using jQuery and CSS3
• HTML5 canvas and javascript fireworks tutorial
• Pure CSS3 breadcrumb navigation - the pixel perfect way
• Vertical accordion menu using jQuery and CSS3
• Make a syntax highlighter for MySQL using JavaScript and Regex
• Make a calculator using Javascript and CSS3
• CSS3 Stamp effect using radial gradients
• Single Element Pure CSS3 Double Fold Ribbon
• Bouncing Squares - a particle system with basic gravity
• Snow Effect using HTML5 Canvas and Javascript
• Make a Jquery and CSS3 powered Lightbox Gallery
• CSS3 Pricing Table
• Cool Ascii Animation using an Image Sprite, Canvas, and Javascript
• Make gauge charts using Canvas and Javascript
• Simple hover effects with CSS(webkit) filters
• Glazing ribbon screensaver effect in HTML5 canvas
• HTML5 Canvas Experiment: A cool flame/fire effect using particles
• Create Binary Trees using Javascript and HTML5 Canvas
• Magnifying glass for image zoom using Jquery and CSS3
• Make a stopwatch using CSS3 without images or javascript
• HTML5 game tutorial - Make a snake game using HTML5 canvas and Jquery
• CSS3 image slider with stylized thumbnails
• Make an accordian style slider in CSS3
• CSS3 Family Tree
• Google Doodle animation in CSS3 without Javascript
• Make a particle system in HTML5 canvas
• HTML5 Features that you must implement right now
• Make a simple cloud in CSS3
• Forrst logo in CSS3
• Windows phone loading animation
• Pure CSS3 animated clouds background
• Simple yet amazing CSS3 border transition effects
• Make a simple navigation with hover transitions
• Boxee CSS3 Logo
• CSS3 Android Logo
• Navigation tabs with rounded out borders using CSS3

"§"
the-echoplex.net
CSS - Flexy Boxes

flexbox playground and code generator

"§"
tympanus.net
CSS3 Tutorials

Tutorials

In this section you will find in-depth how-tos involving common web development and web design techniques.

• Medium-Style Page Transition
• By Brian Gonzalez • October 30, 2013• 52 Comments
• An article on how to achieve Medium’s next page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of ... read more
• Animated Border Menus
• By Mary Lou • September 30, 2013• 56 Comments
• A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash's bounce menu for mobile apps. ...read more
• 3D Shading with Box-Shadows
• By Nick Pettit • August 27, 2013• 47 Comments
• A tutorial about a technique that uses box shadows for creating a realistic shading effect on simple objects. ...read more
• Building a Circular Navigation with CSS Transforms
• CircularNavigation
• By Sara Soueidan • August 9, 2013• 74 Comments
• A tutorial on how to create a circular navigation using CSS transforms. ...read more
• Google Nexus Website Menu
• Google Nexus Menu
• By Mary Lou • July 30, 2013• 74 Comments
• A tutorial on how to re-create the slide out sidebar menu that can be seen on the Google Nexus 7 website. ...read more
• Justified and Vertically Centered Header Elements
• Justified and Vertically Centered Header with Pseudo-Elements
• By Mary Lou • July 14, 2013• 64 Comments
• A little journey into positioning header elements to be centered vertically and justified with the help of pseudo-elements. ...read more
• Using Custom Data Attributes and Pseudo-Elements
• PseudoElementsImageCaptions
• By Mary Lou • July 5, 2013• 43 Comments
• A tutorial on how to (ab)use custom data attributes and pseudo-elements for creating image captions. ...read more
• Expanding Search Bar Deconstructed
• ExpandingSearchBar
• By Mary Lou • June 26, 2013• 56 Comments
• A tutorial on how to create a mobile-friendly and responsive expanding search bar. ...read more
• Caption Hover Effects
• Caption Hover Effects
• By Mary Lou • June 18, 2013• 91 Comments
• A tutorial on how to create some subtle and modern caption hover effects. ...read more
• Web Audio Stylophone
• Web Audio Stylophone
• By Stuart Memo • June 10, 2013• 13 Comments
• Get started with the Web Audio API by learning how to recreate the classic miniature synthesizer. ...read more
• Natural Language Form with Custom Input Elements
• Natural Language Form
• By Mary Lou • May 21, 2013• 42 Comments
• An experimental form that uses natural language instead of the usual form display. Values are entered using custom input elements. ...read more
• Responsive Retina-Ready Menu
• ResponsiveRetinaFriendlyMenu
• By Stéphanie Walter • May 8, 2013• 93 Comments
• A responsive, touch-friendly and Retina-ready menu with three layouts for different browser sizes. ...read more
• Automatic Figure Numbering with CSS Counters
• Automatic-Figure-Numbering-with-CSS-Counters
• By Hugo Giraudel • May 2, 2013• 21 Comments
• Learn about CSS counters, the figure element and how to combine both for automatically numbering figures in a web page. ...read more
• Simple YouTube Menu Effect
• Simple YouTube Menu Effect
• By Mary Lou • April 25, 2013• 29 Comments
• A tutorial on how to recreate the effect of YouTube's little left side menu. The idea is to slide a little menu icon to the right side while revealing some menu item ...read more
• App Showcase with Grid Overlay
• App Showcase with Grid Overlay
• By Mary Lou • April 1, 2013• 29 Comments
• A tutorial about creating a simple grid overlay with subtle transitions for an app showcase. ...read more
• Thumbnail Grid with Expanding Preview
• Thumbnail Grid with Expanding Preview
• By Mary Lou • March 19, 2013• 376 Comments
• A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images. ...read more
• HexaFlip: A Flexible 3D Cube Plugin
• HexaFlip: A Flexible 3D Cube Plugin
• By Dan Motzenbecker • March 7, 2013• 50 Comments
• HexaFlip is a JavaScript UI plugin that let's you use 3D cubes as interface elements. Dive into the process of creating the plugin and learn some best practices rega ...read more
• Interactive Infographic with SVG and CSS Animations
• Interactive Infographic with SVG and CSS Animations
• By Adam Coulombe • February 6, 2013• 57 Comments
• Learn how to build an interactive animated infographic using SVG, CSS and JavaScript. ...read more
• Creating Nestable Dynamic Grids
• Dynamic Grids
• By Larry Botha • February 4, 2013• 8 Comments
• Learn how to create flexible and fluid grids which make nesting at arbitrary depths easy, while allowing full freedom for how the grid behaves in all viewports. ...read more
• Putting CSS Clip to Work: Expanding Overlay Effect
• Putting CSS Clip to Work: Expanding Overlay Effect
• By Mary Lou • January 17, 2013• 68 Comments
• A tutorial about how to create a simple expanding overlay effect using the CSS clip property and CSS transitions. ...read more
• Understanding the CSS Clip Property
• Understanding the CSS Clip Property
• By Hugo Giraudel • January 16, 2013• 39 Comments
• Learn about the underused and often misunderstood CSS clip property and understand how to apply it for some nifty effects. ...read more
• How to Create a Simple Multi-Item Slider
• How to Create a Simple Multi-Item Slider
• By Mary Lou • December 31, 2012• 104 Comments
• A tutorial on how to create a simple category slider with a minimal design using CSS animations and jQuery. The idea is to slide the items sequentially depending on ...read more
• CSS Click Events
• CSS Click Events
• By Hugo Giraudel • December 17, 2012• 33 Comments
• An article about different experimental approaches of employing click events using CSS only. It summarizes and shows some clever hacks and smart tricks. ...read more
• Fullscreen Pageflip Layout
• Fullscreen Pageflip Layout with BookBlock
• By Mary Lou • December 11, 2012• 135 Comments
• A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu tha ...read more
• Responsive CSS Timeline with 3D Effect
• Responsive CSS Timeline with 3D Effect
• By Mary Lou • November 19, 2012• 44 Comments
• A tutorial about how to create an experimental CSS-only timeline with a 3D effect. The idea is to expand a content area when the associated radio input is selected. ...read more
• Creative CSS Loading Animations
• Creative CSS Loading Animations
• By Hugo Giraudel • November 14, 2012• 22 Comments
• In this tutorial we'll show you how to make some creative css-only loading animations also known as activity indicators. ...read more
• Heading Set Styling with CSS
• Heading Set Styling with CSS
• By Hugo Giraudel • November 2, 2012• 17 Comments
• In this tutorial we will create a couple of heading styles to get your creative juices flowing for your next project. Make heading styles work by applying the right ...read more
• Kick-Start Your Project: A Collection of Handy CSS Snippets
• Kick-Start Your Project: A Collection of Handy CSS Snippets
• By Hugo Giraudel • October 25, 2012• 46 Comments
• Don't start your project with an empty style sheet: there are many great snippets that can make your life easier and speed up web development. We are going to show y ...read more
• Basic Ready-to-Use CSS Styles
• Basic Ready-to-Use CSS Styles
• By Hugo Giraudel • October 23, 2012• 28 Comments
• This is a collection of some basic styles that can come in handy when creating your own style definitions. Learn how to make some useful classes for simple styles an ...read more
• Custom Login Form Styling
• Custom Login Form Styling
• By Hugo Giraudel • October 16, 2012• 43 Comments
• In this tutorial we will create some modern and creative login forms using some interesting CSS techniques and HTML5 goodness. ...read more
• Real-Time Geolocation Service with Node.js
• Real-Time Geolocation Service with Node.js
• By Dmitri Voronianski • October 11, 2012• 41 Comments
• A tutorial about how to create a simple real-time application that shows the locations of visitors on an interactive map using Node.js and the HTML5 Geolocation API. ...read more
• Custom Drop-Down List Styling
• Custom Drop-Down List Styling
• By Hugo Giraudel • October 4, 2012• 145 Comments
• A tutorial on how to create some custom drop-down lists. We'll show you five examples with different looking drop-down menus and lists for various purposes. ...read more
• Vertical Showcase Slider with jQuery and CSS Transitions
• Vertical Showcase Slider with jQuery and CSS Transitions
• By Mary Lou • October 1, 2012• 25 Comments
• A tutorial on how to create a responsive vertical fullscreen slider that moves its sections in opposite directions. We'll be using jQuery, CSS Transitions and media ...read more
• 3D Restaurant Menu Concept
• 3D Restaurant Menu Concept
• By Mary Lou • September 25, 2012• 42 Comments
• A responsive 3D menu concept for a restaurant website. The idea is to show the menu as a folded flyer and unfold it in order to show the menu items. ...read more
• Fullscreen Video Slideshow with BigVideo.js
• Fullscreen Video Slideshow with BigVideo.js
• By John Polacek • September 19, 2012• 82 Comments
• A tutorial about how to create a slideshow-like fullscreen video background using BigVideo.js, a jQuery plugin for big background video. ...read more
• Button Switches with Checkboxes and CSS3 Fanciness
• Button Switches with Checkboxes and CSS3 Fanciness
• By Hugo Giraudel • September 13, 2012• 46 Comments
• In this tutorial we will create some realistic-looking switch buttons using pseudo-elements and checkboxes. ...read more
• Creative Web Typography Styles
• Creative Web Typography Styles
• By Mary Lou • September 12, 2012• 30 Comments
• Let's create some interesting web typography effects with several CSS techniques and the help of lettering.js. ...read more
• Multiple Area Charts with D3.js
• Multiple Area Charts with D3.js
• By Tyler Craft • August 29, 2012• 7 Comments
• In this tutorial we will introduce some basics of D3.js and create an infographic with multiple area charts along with a context tool to zoom and pan the data. ...read more
• Triple Panel Image Slider
• Triple Panel Image Slider
• By Mary Lou • August 16, 2012• 11 Comments
• A tutorial about how to create a triple panel jQuery image slider with a 3D look and swipe-like transitions. ...read more
• Circle Hover Effects with CSS Transitions
• Circle Hover Effects with CSS Transitions
• By Mary Lou • August 8, 2012• 130 Comments
• A tutorial about how to create different interesting hover effects on circles with CSS transitions and 3D rotations. ...read more
• Photo Booth Strips with Lightbox
• Photo Booth Strips with Lightbox
• By Mary Lou • August 1, 2012• 27 Comments
• A tutorial about how to create some neat scrollable photo booth strips and integrate Lightbox 2 and customize it in order to make it responsive and touch-device fr ...read more
• Modern Block Quote Styles
• Modern Block Quote Styles
• By Mary Lou • July 25, 2012• 30 Comments
• Let's create some interesting and modern styles for block quotes. We'll be using different techniques for creating a unique look for six examples. ...read more
• 3D Flipping Circle with CSS3 and jQuery
• 3D Flipping Circle with CSS3 and jQuery
• By Mary Lou • July 20, 2012• 30 Comments
• In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CS ...read more
• Swatch Book with CSS3 and jQuery
• Swatch Book with CSS3 and jQuery
• By Mary Lou • July 2, 2012• 52 Comments
• A tutorial about how to create a swatch book like component that let's you open and rotate the single swatches revealing some details. We will be using CSS transform ...read more
• Timed Notifications with CSS Animations
• Timed Notifications with CSS Animations
• By Mary Lou • June 25, 2012• 38 Comments
• A quick tip on how to create some simple timed notifications with CSS animations. The idea is to show a notification with a progress bar for a specific duration and ...read more
• 3D Thumbnail Hover Effects
• 3d Thumbnail Hover Effects
• By Mary Lou • June 18, 2012• 110 Comments
• A tutorial about how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery. ...read more
• CSS-Only Responsive Layout with Smooth Transitions
• CSS-Only Responsive Layout with Smooth Transitions
• By Mary Lou • June 12, 2012• 91 Comments
• A tutorial on how to create a 100% width and height smooth scrolling layout with CSS only. Using a radio button navigation and sibling combinators we will trigger tr ...read more
• Image Accordion with CSS3
• Image Accordion with CSS3
• By Ring Wang • June 6, 2012• 21 Comments
• In this tutorial we will create an image accordion that will expand an item on click. Using the sibling combinators and a nested structure we can control the opening ...read more
• Fullscreen Slit Slider with jQuery and CSS3
• Fullscreen Slit Slider with jQuery and CSS3
• By Mary Lou • June 5, 2012• 142 Comments
• A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuer ...read more
• Creating an Animated 3D Bouncing Ball with CSS3
• Creating an Animated 3D Bouncing Ball with CSS3
• By Daniel Sternlicht • May 22, 2012• 22 Comments
• In this tutorial we'll create an animated 3D bouncing ball using only CSS3 transitions, animations and shadow effects. ...read more
• Animated 3D Bar Chart with CSS3
• Animated 3D Bar Chart with CSS3
• By Sergey Lukin • May 21, 2012• 20 Comments
• A tutorial on how to create an animated 3d bar chart using CSS only. ...read more
• Annotation Overlay Effect with CSS3
• Annotation Overlay Effect with CSS3
• By Mary Lou • May 14, 2012• 21 Comments
• A tutorial about how to create an overlay effect to show some more details of an item or image. The effect is CSS-only and uses a combination of the :checked pseudo- ...read more
• How to Create a Fast Hover Slideshow with CSS3
• How to Create a Fast Hover Slideshow with CSS3
• By Mary Lou • May 9, 2012• 17 Comments
• A little fast-running image slideshow that plays on hover and pauses when mousing out. The current image will stay visible. ...read more
• Enhance Required Form Fields with CSS3
• Enhance Required Fields with CSS3
• By Mary Lou • May 2, 2012• 18 Comments
• Enhance required fields in a form with this little effect. The idea is to allow better visibility for obligatory fields while de-emphasizing optional ones. ...read more
• Fluid CSS3 Slideshow with Parallax Effect
• Fluid CSS3 Slideshow with Parallax Effect
• By Ring Wang • April 30, 2012• 58 Comments
• In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds whi ...read more
• Rotating Words with CSS Animations
• Rotating Words with CSS Animations
• By Mary Lou • April 17, 2012• 45 Comments
• Using CSS Animations we will change or rotate some parts of a sentence. ...read more
• Animated Content Tabs with CSS3
• CSS3 Content Tabs
• By Ring Wang • April 12, 2012• 79 Comments
• In this tutorial we are going to implement some simple CSS3 content tabs using radio buttons together with the :checked pseudo-class and sibling combinators. ...read more
• Slideshow with jmpress.js
• Slideshow with Jmpress
• By Mary Lou • April 5, 2012• 111 Comments
• Today we will create a slideshow using jmpress.js. The jQuery plugin that is based on impress.js will allow us to use some interesting 3D effects for the slides. ...read more
• Responsive Horizontal Layout
• Responsive Horizontal Layout
• By Mary Lou • April 2, 2012• 67 Comments
• In this tutorial we'll create a horizontal website layout with individually scrollable content panels. We'll change the layout for smaller screens, making it respons ...read more
• Login and Registration Form with HTML5 and CSS3
• Login and Registration Form with CSS3 and HTML5
• By Stéphanie Walter • March 27, 2012• 45 Comments
• A tutorial on how to create a switching login and registration form with HTML5 and CSS3. ...read more
• Responsive Content Navigator with CSS3
• ContentNavigator
• By Mary Lou • March 23, 2012• 53 Comments
• Today we want to show you how to create a responsive, css-only content navigator. ...read more
• Accordion with CSS3
• Accordion with CSS3
• By Mary Lou • February 21, 2012• 74 Comments
• Using hidden inputs and labels, we will create a CSS-only accordion that will animate the content areas on opening and closing. ...read more
• How to create animated tooltips with CSS3
• CSS3Tooltips
• By Mary Lou • February 1, 2012• 53 Comments
• How to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after ...read more
• Page Transitions with CSS3
• CSS3PageTransitions
• By Sergio Camalich • January 30, 2012• 89 Comments
• In the last few years, we've seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I'm g ...read more
• How to spice up your menu with CSS3
• CSS3MenuHoverEffect
• By Mary Lou • January 22, 2012• 52 Comments
• Quick tip on how to spice up your menu with CSS3: add an image to every menu item and slide it out on hover. ...read more
• Sliding Image Panels with CSS3
• SlidingImagePanelsCss3_2
• By Mary Lou • January 17, 2012• 69 Comments
• Today we'll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking o ...read more
• CSS Buttons with Pseudo-elements
• cssbuttons_main
• By Sergio Camalich • January 11, 2012• 80 Comments
• In this tutorial, I'll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS. ...read more
• Animated Web Banners With CSS3
• AnimatedWebBanners
• By Caleb Jacob • January 10, 2012• 45 Comments
• Today we're going to take a look at spicing up our web banners, ads or any content for that matter, with CSS3 animations. ...read more
• Filter Functionality with CSS3
• CSS3FilterFunctionality
• By Mary Lou • January 9, 2012• 66 Comments
• Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial ...read more
• Thumbnail Proximity Effect with jQuery and CSS3
• Thumbnail Proximity Effect
• By Mary Lou • January 4, 2012• 39 Comments
• Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their n ...read more
• Fullscreen Background Image Slideshow with CSS3
• CSS3FullscreenSlideshow
• By Mary Lou • January 2, 2012• 147 Comments
• Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We'll create different image transitions and also make a title appe ...read more
• CSS3 Lightbox
• CSS3Lightbox
• By Mary Lou • December 26, 2011• 63 Comments
• Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respecti ...read more
• Slopy Elements with CSS3
• SlopyElements
• By Mary Lou • December 21, 2011• 19 Comments
• It's always a delight to see some non-straight elements in web design. Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected ...read more
• Item Blur Effect with CSS3 and jQuery
• ItemBlurEffect
• By Mary Lou • December 14, 2011• 34 Comments
• Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once ...read more
• Experiments with background-clip: text
• BackgroundClipText
• By Mary Lou • December 12, 2011• 19 Comments
• With the CSS property "background-clip: text" (which is currently only supported in Webkit browsers), we can add a background image to a text element. Today we will ...read more
• Splash and Coming Soon Page Effects with CSS3
• SplashComingSoon
• By Mary Lou • December 7, 2011• 79 Comments
• CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects using CSS3 animations. We'll experime ...read more
• Lateral On-Scroll Sliding with jQuery
• LateralOnScrollSliding
• By Mary Lou • December 5, 2011• 53 Comments
• After getting the request, we are going to show you how to create a "slide-in on scroll" effect. You've probably seen this cool effect on some websites, like on Nizo ...read more
• Typography Effects with CSS3 and jQuery
• TypographyEffects
• By Mary Lou • November 28, 2011• 52 Comments
• Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions a ...read more
• Hover and Click Trigger for Circular Elements with jQuery
• HoverClickTriggerCircles
• By Mary Lou • November 22, 2011• 33 Comments
• Today we want to share one possible solution to the circle hovering problem. We'll create a plugin that will take care of the 'mouseenter', 'mouseleave' and 'click' ...read more
• Elastic Image Slideshow with Thumbnail Preview
• Elastic Image Slideshow
• By Mary Lou • November 21, 2011• 98 Comments
• Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and ...read more
• Interactive Typography Effects with HTML5
• InteractiveTypographyEffects
• By Tim Holman • November 9, 2011• 36 Comments
• With HTML5 gaining popularity, this tutorial outlines what is really just the tip of the iceberg that is interactive design. In this tutorial I will go over the dev ...read more
• Animated Buttons with CSS3
• AnimatedButtons
• By Mary Lou • November 7, 2011• 77 Comments
• Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different sty ...read more
• Original Hover Effects with CSS3
• OriginalHoverEffects
• By Alessio Atzeni • November 2, 2011• 134 Comments
• The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS ...read more
• Creative CSS3 Animation Menus
• CreativeCSS3Menus
• By Mary Lou • October 24, 2011• 122 Comments
• Being in the mood for experimenting with CSS3, I'd like to show you some creative menu hover effects in today's tutorial. The idea is to have a simple composition of ...read more
• Blur Menu with CSS3 Transitions
• BlurMenuwithCss3
• By Mary Lou • October 19, 2011• 55 Comments
• There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with tex ...read more
• Flexible Slide-to-top Accordion
• FlexibleSlideToTopAccordion
• By Mary Lou • October 12, 2011• 99 Comments
• In today's tutorial we'll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. ...read more
• Circle Navigation Effect with CSS3
• Circle Navigation Effect with CSS3
• By Mary Lou • October 10, 2011• 69 Comments
• Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and ma ...read more
• Draggable Image Boxes Grid
• Draggable Image Boxes Grid
• By Mary Lou • October 7, 2011• 90 Comments
• Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu l ...read more
• Scrollbar Visibility with jScrollPane
• ScrollbarVisibility
• By Mary Lou • September 30, 2011• 43 Comments
• Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in Faceboo ...read more
• Responsive Image Gallery with Thumbnail Carousel
• Responsive Image Gallery
• By Mary Lou • September 20, 2011• 163 Comments
• A tutorial on how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter's "user gallery" and upon a request to show a ...read more
• Portfolio Image Navigation with jQuery
• PortfolioImageNavigation
• By Marcin Dziewulski • August 9, 2011• 53 Comments
• Today we want to create a portfolio image navigation template with jQuery. The idea is to show some portfolio items in a grouped fashion and navigate through them in ...read more
• Animated Text and Icon Menu with jQuery
• AnimatedTextIconMenu
• By Mary Lou • July 12, 2011• 72 Comments
• Today we want to show you how to create a slick menu with a nice animation feature on hover. The idea is to make some elements slide out, change and animate the back ...read more
• Fullscreen Slideshow with HTML5 Audio and jQuery
• fullscreenSlideshowHtml5
• By Jay Salvat • July 5, 2011• 51 Comments
• In today’s tutorial we'll create a fullscreen photo slideshow to illustrate a New York picture series. We will add sounds with the HTML5 audio element in order to ...read more
• Image Wall with jQuery
• Image Wall with jQuery
• By Mary Lou • May 25, 2011• 54 Comments
• Today we want to show you how to create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the p ...read more
• Rotating Image Slider with jQuery
• Rotating Image Slider with jQuery
• By Mary Lou • April 28, 2011• 126 Comments
• In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotat ...read more
• Animated Skills Diagram with Raphaël
• Animated Skills Diagram with Raphaël
• By Marcin Dziewulski • April 22, 2011• 46 Comments
• In this tutorial we will show you how to create a diagram using Raphaël - a small JavaScript library that is great for working with ...read more
• Interactive Google Map using the Twitter API
• Interactive Google Map using the Twitter API
• By Marcin Dziewulski • April 13, 2011• 34 Comments
• Hey! In today’s tutorial we will create an interactive Google map using the geocoding service. Using the Twitter API we will retrieve ...read more
• Moving Boxes Content with jQuery
• Moving Boxes Content with jQuery
• By Mary Lou • March 28, 2011• 76 Comments
• Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at ...read more
• Expanding Image Menu with jQuery
• Expanding Image Menu with jQuery
• By Mary Lou • March 16, 2011• 50 Comments
• In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image sl ...read more
• Animated Content Menu with jQuery
• Animated Content Menu with jQuery
• By Mary Lou • March 9, 2011• 178 Comments
• Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a c ...read more
• Overlay-like Effect with jQuery
• Overlay-like Effect with jQuery
• By Mary Lou • February 15, 2011• 14 Comments
• Today we will create a slick overlay effect with jQuery that does not use an overlay. The idea is to change the opacity or the color of cert ...read more
• Fullscreen Gallery with Thumbnail Flip
• Fullscreen Gallery with Thumbnail Flip
• By Mary Lou • February 9, 2011• 97 Comments
• In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on ...read more
• Thumbnails Preview Slider with jQuery
• Thumbnails Preview Slider with jQuery
• By Mary Lou • January 27, 2011• 29 Comments
• In this tutorial we will show you how to create and use a thumbnails preview slider with jQuery. Since we got a lot of requests to show how ...read more
• Sweet Thumbnails Preview Gallery
• Sweet Thumbnails Preview Gallery
• By Mary Lou • January 19, 2011• 128 Comments
• In this tutorial we will create an image gallery with jQuery that shows a preview of each image as a little thumbnail. The idea is to hover ...read more
• Animated Form Switching with jQuery
• Animated Form Switching with jQuery
• By Mary Lou • January 6, 2011• 40 Comments
• In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user ...read more
• Parallax Slider with jQuery
• Parallax Slider with jQuery
• By Mary Lou • January 3, 2011• 93 Comments
• Happy New Year! We will kick start 2011 with a vibrant image slider tutorial. We will make use of the parallax principle to move different b ...read more
• Portfolio Zoom Slider with jQuery
• Portfolio Zoom Slider with jQuery
• By Mary Lou • December 27, 2010• 41 Comments
• In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and i ...read more
• Bubbleriffic Image Gallery with jQuery
• Bubbleriffic Image Gallery with jQuery
• By Mary Lou • December 10, 2010• 43 Comments
• In this tutorial we will create a bubbly image gallery that shows your images in a unique way. The idea is to show the thumbnails of albums ...read more
• Overlay Effect Menu with jQuery
• Overlay Effect Menu with jQuery
• By Mary Lou • November 25, 2010• 83 Comments
• In this tutorial we are going to create a simple menu that will stand out once we hover over it by covering everything except the menu with ...read more
• Hover Slide Effect with jQuery
• Hover Slide Effect with jQuery
• By Mary Lou • November 16, 2010• 50 Comments
• Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out ...read more
• Animated Portfolio Gallery with jQuery
• Animated Portfolio Gallery with jQuery
• By Mary Lou • November 14, 2010• 64 Comments
• Today we will create an animated portfolio gallery with jQuery. The gallery will contain a scroller for thumbnails and a content area where ...read more
• Pull Out Content Panel with jQuery
• Pull Out Content Panel with jQuery
• By Mary Lou • November 1, 2010• 42 Comments
• In this tutorial we will create a content panel that slides out at a predefined scroll position. It will reveal a teaser with related conten ...read more
• Custom Animation Banner with jQuery
• Custom Animation Banner with jQuery
• By Mary Lou • October 18, 2010• 87 Comments
• In today’s tutorial we will be creating a custom animation banner with jQuery. The idea is to have different elements in a banner that ...read more
• Annotation Overlay Effect with jQuery
• Annotation Overlay Effect with jQuery
• By Mary Lou • October 12, 2010• 28 Comments
• Today we will create a simple overlay effect to display annotations in e.g. portfolio items of a web designers portfolio. We got the idea fr ...read more
• Slider Gallery with jQuery
• Slider Gallery with jQuery
• By Mary Lou • October 7, 2010• 198 Comments
• This tutorial is about creating a creative gallery with a slider for the thumbnails. The idea is to have an expanding thumbnails area which ...read more
• Compact News Previewer with jQuery
• Compact News Previewer with jQuery
• By Mary Lou • October 3, 2010• 62 Comments
• Today we will create a news previewer that let’s you show your latest articles or news in a compact way. The news previewer will show ...read more
• Polaroid Photobar Gallery with jQuery
• Polaroid Photobar Gallery with jQuery
• By Mary Lou • September 28, 2010• 111 Comments
• In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rota ...read more
• Full Page Image Gallery with jQuery
• Full Page Image Gallery with jQuery
• By Mary Lou • September 8, 2010• 102 Comments
• In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The id ...read more
• Collapsing Site Navigation with jQuery
• Collapsing Site Navigation with jQuery
• By Mary Lou • September 6, 2010• 124 Comments
• Today we will create a collapsing menu that contains vertical navigation bars and a slide out content area. When hovering over a menu item, ...read more
• Thumbnails Navigation Gallery with jQuery
• Thumbnails Navigation Gallery with jQuery
• By Mary Lou • July 29, 2010• 249 Comments
• In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going t ...read more
• Related Posts Slide Out Boxes with jQuery and CSS3
• Related Posts Slide Out Boxes with jQuery and CSS3
• By Mary Lou • July 21, 2010• 48 Comments
• The other day we were wondering how we could show our visitors more of our works. It’s normal that in a blog older posts get forgotten ...read more
• Slide Down Box Menu with jQuery and CSS3
• Slide Down Box Menu with jQuery and CSS3
• By Mary Lou • July 16, 2010• 127 Comments
• In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail p ...read more
• Minimalistic Slideshow Gallery with jQuery
• Minimalistic Slideshow Gallery with jQuery
• By Mary Lou • July 5, 2010• 66 Comments
• In today’s tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea i ...read more
• Image Highlighting and Preview with jQuery
• Image Highlighting and Preview with jQuery
• By Mary Lou • July 4, 2010• 11 Comments
• In this tutorial we will show you how to highlight and preview images that are integrated in an article or spread over a page. This is a nic ...read more
• Awesome Cufonized Fly-out Menu with jQuery and CSS3
• Awesome Cufonized Fly-out Menu with jQuery and CSS3
• By Mary Lou • June 28, 2010• 115 Comments
• In today’s tutorial we will create a full page cufonized menu that has two nice features: when hovering over the menu items we will mo ...read more
• Beautiful Photo Stack Gallery with jQuery and CSS3
• Beautiful Photo Stack Gallery with jQuery and CSS3
• By Mary Lou • June 27, 2010• 190 Comments
• In this tutorial we are going to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is cho ...read more
• Latest Post Blogroll Slider with jQuery and PHP
• Latest Post Blogroll Slider with jQuery and PHP
• By Mary Lou • June 17, 2010• 23 Comments
• In this tutorial we are going to create a blogroll slider that shows the latest post of your favorite blogs. We will be using jQuery, PHP an ...read more
• Flickr Photobar Gallery
• Flickr Photobar Gallery
• By Mary Lou • June 10, 2010• 75 Comments
• After we got a lot of great feedback for our image galleries we decided to follow some of the suggestions and create a gallery that uses the ...read more
• Fancy Sliding Form with jQuery
• Fancy Sliding Form with jQuery
• By Mary Lou • June 7, 2010• 183 Comments
• Today we are going to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of ...read more
• Smooth Vertical or Horizontal Page Scrolling with jQuery
• Smooth Vertical or Horizontal Page Scrolling with jQuery
• By Mary Lou • June 2, 2010• 212 Comments
• In this tutorial we will create a simple smooth scrolling effect with jQuery. We will create a horizontal and a vertical website layout to s ...read more
• Sliding Checkbox Actions Menu with jQuery
• Sliding Checkbox Actions Menu with jQuery
• By Mary Lou • May 31, 2010• 21 Comments
• In this tutorial we will create an actions menu with jQuery that appears when checkboxes are selected. This can be a very helpful UI propert ...read more
• Awesome Mobile Image Gallery Web App
• Awesome Mobile Image Gallery Web App
• By Mary Lou • May 27, 2010• 118 Comments
• With more and more users browsing the web with a mobile device, it’s time to begin with mobile web development. In this tutorial we ar ...read more
• Fresh Sliding Thumbnails Gallery with jQuery and PHP
• Fresh Sliding Thumbnails Gallery with jQuery and PHP
• By Mary Lou • May 23, 2010• 142 Comments
• In this tutorial we are going to create another full page image gallery with a nice thumbnail area that scrolls automatically when moving th ...read more
• Little Boxes Menu with jQuery
• Little Boxes Menu with jQuery
• By Mary Lou • May 18, 2010• 32 Comments
• Today we will create a menu out of little boxes that animate randomly when a menu item is clicked. The clicked menu item expands and reveals ...read more
• Sliding Panel Photo Wall Gallery with jQuery
• Sliding Panel Photo Wall Gallery with jQuery
• By Mary Lou • May 14, 2010• 117 Comments
• Today we will create a stunning full page photo wall gallery. The idea is to have a whole page full of thumbs with a nice light effect when ...read more
• Scrollable Thumbs Menu with jQuery
• Scrollable Thumbs Menu with jQuery
• By Mary Lou • May 10, 2010• 23 Comments
• In this tutorial we will create a fixed menu with scrollable thumbs. The idea is to have a menu fixed to the bottom of the page and let a ve ...read more
• Stunning Circular Motion Effect with jQuery
• Stunning Circular Motion Effect with jQuery
• By Mary Lou • May 7, 2010• 47 Comments
• Today we are going to create a stunning circular motion effect with jQuery. We will be using the jQuery.path plugin to animate a circular mo ...read more
• Beautiful Background Image Navigation with jQuery
• Beautiful Background Image Navigation with jQuery
• By Mary Lou • May 5, 2010• 335 Comments
• In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list ...read more
• Pimp Your Tables with CSS3
• Pimp Your Tables with CSS3
• By Mary Lou • May 3, 2010• 36 Comments
• Today I am going to show you how to use some neat CSS3 properties to beautify your tables. With so many new selectors we can address specifi ...read more
• Rocking and Rolling Rounded Menu with jQuery
• Rocking and Rolling Rounded Menu with jQuery
• By Mary Lou • April 30, 2010• 53 Comments
• In this tutorial we are going to make use of the incredibly awesome rotating and scaling jQuery patch from Zachary Johnson that can be found ...read more
• Awesome Bubble Navigation with jQuery
• bubblenav
• By Mary Lou • April 29, 2010• 62 Comments
• In this tutorial we are going to create a bubbly navigation with jQuery. The idea is to have some round navigation icons that release a bubb ...read more
• Pretty Simple Content Slider with jQuery and CSS3
• Pretty Simple Content Slider with jQuery and CSS3
• By Mary Lou • April 28, 2010• 70 Comments
• Today we will create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in the head ...read more
• Elegant Accordion with jQuery and CSS3
• Elegant Accordion with jQuery and CSS3
• By Mary Lou • April 26, 2010• 74 Comments
• Today we will create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering. We wil ...read more
• End of Page Slide Out Box with jQuery
• End of Page Slide Out Box with jQuery
• By Mary Lou • April 13, 2010• 33 Comments
• The other day I was reading an article in the NYTimes and I really liked the box that slides out from the right when you are reading the las ...read more
• Interactive Image Vamp up with jQuery, CSS3 and PHP
• Interactive Image Vamp up with jQuery, CSS3 and PHP
• By Mary Lou • March 22, 2010• 44 Comments
• Today we will show you how to create an online application for giving some funny touches to an image. We will be using jQuery and jQuery UI ...read more
• A Fresh Bottom Slide Out Menu with jQuery
• A Fresh Bottom Slide Out Menu with jQuery
• By Mary Lou • March 9, 2010• 38 Comments
• In this tutorial we will create a unique bottom slide out menu. This large menu will contain some title and a description of the menu item. ...read more
• Photo Zoom Out Effect with jQuery
• Photo Zoom Out Effect with jQuery
• By Mary Lou • March 7, 2010• 32 Comments
• Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially ...read more
• Grungy Random Rotation Menu with jQuery and CSS3
• Grungy Random Rotation Menu with jQuery and CSS3
• By Mary Lou • February 24, 2010• 16 Comments
• In this tutorial we are going to create a great menu with some content area that slides out. We use the grunge style because we want it to l ...read more
• CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation
• CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation
• By Mary Lou • January 17, 2010• 38 Comments
• Today I want to show you, how to create an Apple-style navigation menu with a twist. Although “fancy” and “Apple-styleR ...read more
• Clothesline Social Bookmarks - A CSS-only Social Bookmarking Tutorial
• Clothesline Social Bookmarks - A CSS-only Social Bookmarking Tutorial
• By Mary Lou • January 2, 2010• 7 Comments
• Today we will create a fancy social bookmarking solution which will not require any JavaScript - it is only CSS based. We will hang up some rotated social book ...read more
• Creating a Rotating Billboard System with jQuery and CSS
• Creating a Rotating Billboard System with jQuery and CSS
• By Mary Lou • December 16, 2009• 70 Comments
• Currently we are in the “hey, let’s do that flash thing in jQuery”-mood and so we came up with another idea: a rotating bi ...read more
• Day and Night: Creating a Scenery Animation with jQuery and CSS
• Day and Night: Creating a Scenery Animation with jQuery and CSS
• By Mary Lou • December 14, 2009• 25 Comments
• In today’s tutorial I am going to show you, how to create an amazing animated scenery with just a few lines of jQuery and some absolut ...read more
• Fixed Fade Out Menu: A CSS and jQuery Tutorial
• Fixed Fade Out Menu: A CSS and jQuery Tutorial
• By Mary Lou • December 11, 2009• 44 Comments
• Inspired by David Walsh’s top navigation bar that gets semi-transparent when you scroll down the page, I decided to create a tutorial ...read more
• Beautiful Slide Out Navigation Revised
• Beautiful Slide Out Navigation Revised
• By Mary Lou • December 8, 2009• 126 Comments
• After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Thanks a lot ...read more
• CSS and jQuery Tutorial: Overlay with Slide Out Box
• CSS and jQuery Tutorial: Overlay with Slide Out Box
• By Mary Lou • December 3, 2009• 43 Comments
• The other day I was creating an overlay with a box for Cody’s jTextTranslate jQuery Plugin and I thought, it could be useful to describe the technique in a tut ...read more
• Beautiful Slide Out Navigation: A CSS and jQuery Tutorial
• Beautiful Slide Out Navigation: A CSS and jQuery Tutorial
• By Mary Lou • November 30, 2009• 172 Comments
• Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden - ...read more
• CSS Tutorial: Image with Toolbar and Navigation Overlay
• CSS Tutorial: Image with Toolbar and Navigation Overlay
• By Mary Lou • November 23, 2009• 5 Comments
• In this tutorial I will show you how to create an overlay toolbar and navigation for an image. This type of technique can, for example, be applied in an image galler ...read more
• How To Play Looping Sound In Your iPhone App
• How To Play Looping Sound In Your iPhone App
• By Mary Lou • September 15, 2009• 1 Comment
• Here is a very useful code snippet for playing your own sound file continuously in your iPhone application. The example uses a .caf file and is based on the AVAudioP ...read more
• Checking Network Reachability on the iPhone
• Checking Network Reachability on the iPhone
• By Mary Lou • September 14, 2009• 5 Comments
• In some iPhone apps you need to check if there is a connection to the outside world. If the application depends on a connection to the internet, we will want to warn ...read more
• CSS3: Creating Web Site Banners
• CSS3: Creating Web Site Banners
• By Mary Lou • September 6, 2009• 1 Comment
• Inspired by Tamsin Baker’s beautiful Photoshop brushes “Urban Scrawl” 1 and 2, I was trying to create some shadowed banners using some CSS3 propert ...read more
• 20 fresh and colorful CSS3 buttons
• 20 fresh and colorful CSS3 buttons
• By Mary Lou • September 2, 2009• Comments Off
• Here is the result of an experiment with fonts and css3 properties like text-shadow and box-shadow: Click here to download the ZIP file with the two overlay images: ...read more
• CSS3 big style fieldset registration form
• CSS3 big style fieldset registration form
• By Mary Lou • September 1, 2009• 4 Comments
• Experimenting with CSS3, I created a big style registration form with rounded borders and shadow effects. The only image used is not the button, but the pen that ser ...read more
• CSS button with hover effect
• CSS button with hover effect
• By Mary Lou • August 31, 2009• 1 Comment
• Inspired by the nice download button on the jquery homepage I created this button with a hover effect. It uses opacity options for all browsers. You can see a demo h ...read more
• CSS Gmail style labels
• CSS Gmail style labels
• By Mary Lou • August 29, 2009• 4 Comments
• Ever wondered how to generate some cool gmail labels in css? Here is an attempt to imitate the little labels used in gmail. Three tiny colorless images are used to c ...read more
• Cool CSS-only registration form
• Cool CSS-only registration form
• By Mary Lou • August 28, 2009• 2 Comments
• Here is a very simple and cool registration form. A lot of times I was searching for some registration or login form that is easy to adapt. Here comes my contributio ...read more
• Simple CSS chart for dynamic content
• Simple CSS chart for dynamic content
• By Mary Lou • August 27, 2009• 5 Comments
• This is an example of a very simple CSS + one tiny image chart. The result will look like this: Insert the follwoing style into the head of your html (or add it to y ...read more
• Simple CSS: Update box for category or posts
• Simple CSS: Update box for category or posts
• By Mary Lou • August 26, 2009• 2 Comments
• Let’s create a simple and clean box that shows the updates in a category (or anything you might like it to use for). The result looks like this: Starting with ...read more

"§"
typographica.org
Typographica
Type Reviews, Books, Commentary

Founded in 2002, Typographica is a review of typefaces and type books, with occasional commentary on fonts and typographic design. Edited by Stephen Coles with Caren Litherland and designed by Chris Hamamoto.

Feature

• Typefaces of 2016
• Typefaces of 2015
• Typefaces of 2014
• Typefaces of 2013
• Typefaces of 2012
• Typefaces of 2011
• Typefaces of 2008
• Typefaces of 2007
• Typefaces of 2006

Designer

• Aadarsh Rajan
• Aaron Carámbula
• Akira Kobayashi
• Alan Blackman
• Alan Dague-Greene
• Aldo Novarese
• Alejandro Lo Celso
• Alejandro Paul
• Alessandro Butti
• Alex Sheldon
• Alexander Lubovenko
• Alexandra Korolkova
• Alexandre Saumier Demers
• Alisa Nowak
• André Gürtler
• Andrea Tinnes
• Andreu Balius
• Andy Benedek
• Andy Clymer
• Anton Koovit
• Apple Design
• Ari Hausel
• Artur Schmal
• Axel Pelletanche-Thévenart
• ??Michael Hochleitner
• Étienne Aubert Bonn
• Bahman Eslami
• Barbara Bigosinska
• Ben Jones
• Ben Kiel
• Ben Wittner
• Benoît Santiard
• Berton Hasebe
• Building Paris
• Carl Crossgrove
• Carolina de Bartolo
• César Puertas
• Charles Borges de Oliveira
• Chester Jenkins
• Christian Mengelt
• Christian Schwartz
• Christian Thalmann
• CJ Dunn
• Claus Eggers Sørensen
• Craig Eliason
• Cyrus Highsmith
• Dai Foldes
• Dan Ibarra
• Dan Reynolds
• Dan Rhatigan
• Dan X. Solo
• Daniel Sabino
• Dave Foster
• David Berlow
• David Brezina
• David Cabianca
• David Jonathan Ross
• David Keshavjee
• Diane Ovezea
• Dieter Hofrichter
• Dino dos Santos
• Dino Sanchez
• Divya Kowshik
• Dominik Huber
• Doyald Young
• Dyana Weissman
• Dzianis Serabrakou
• Edgar Walthert
• Eduardo Manso
• Eduardo Tunni
• Elena Albertoni
• Elena Schneider
• Ellmer Stefan
• Emmanuel Labard
• Eric Olson
• Erica Jung
• Erich Gschwind
• Erik Marinovich
• Erik Spiekermann
• Erik van Blokland
• Evgeny Tkhorzhevsky
• Felix Bonge
• Fernando Díaz
• Fernando Mello
• Filip Kraus
• Florian Schick
• Francisco Gálvez
• Francisco Gálvez Pizarro
• Frank Grießhammer
• František Štorm
• Fred Smeijers
• Frode Bo Helland
• G. Marggraff
• Gabriel Martinez Meave
• Gareth Hague
• Gábor Kóthay
• Göran Söderström
• Georg Salden
• Georg Seifert
• George Ryan
• Gerard Unger
• Greg Gazdowicz
• Greg Reid
• Greg Shutters
• Guillaume Grall
• Guille Vizzari
• H&FJ
• Hamish Muir
• Hannes von Döhren
• Hans van Maanen
• Henri Friedlaender
• Henrik Kubel
• Henrique Beier
• Hermann Zapf
• Hitesh “Rocky” Malaviya
• Ian Moore
• Igino Marini
• Ignacio Corbo
• Ilya Ruderman
• Irene Vlachou
• Jack Usine
• Jackson Cavanaugh
• Jacques Le Bailly
• James Goggin
• James T. Edmondson
• James Todd
• Jan Novák
• Jérémie Hornus
• Jérôme Knebusch
• Jean-Baptiste Levée
• Jens Kutílek
• Jeremy Mickel
• Jeremy Tankard
• Jesse Ragan
• Jessica McCarty
• Jim Ford
• Jim Parkinson
• Joachim Vu
• Johannes Lang
• John Baskerville
• John Downer
• John Nahmias
• Jonathan Fabreguettes
• Jonathan Hoefler
• Jonathan Perez
• Jonathan Pierini
• Joost Grootens
• José Scaglione
• Josep Patau
• Josh Finklea
• Joshua Darden
• Jovica Veljovic
• Juan Pablo de Gregorio
• Juan Pablo del Peral
• Julia Sysmäläinen
• Julien Tavelli
• Just van Rossum
• Kai Bernau
• Kamal Mansour
• Karsten Lücke
• Katharina Köhler
• Ken Barber
• Kevin Allan King
• Khajag Apelian
• Kris Sowersby
• Kristyan Sarkis
• Ksenia Belobrova
• Ksenya Samarskaya
• Kunihiko Okano
• Lasko Dzurovski
• Laura Meseguer
• Laura Worthington
• Laurenz Brunner
• Lauri Toikka
• Linda Hintz
• Loïc Sander
• Louis Perrin
• Luc(as) de Groot
• Lucas Sharp
• Luciano Perondi
• Ludovic Balland
• Ludwig Übele
• Luisa Baeta
• Luzi Gantenbein
• Maithili Shingre
• Malou Verlomme
• Manish Minz
• Marc Kappeler
• Marc Schütz
• Marian Bantjes
• Marija Juza
• Mariya V. Pigoulevskaya
• Mark Caneso
• Mark Frömberg
• Mark Jamra
• Mark Simonson
• Mark van Bronkhorst
• Marko Hrastovec
• Martin Wenzel
• Mathieu Chévara
• Matt Willey
• Matthew Butterick
• Matthew Carter
• Matthieu Cortat
• Maurice Göldner
• Mauro Paolozzi
• Max Phillips
• Maximiliano Sproviero
• Mário Feliciano
• Måns Grebäck
• Melle Diete
• Michael Abbink
• Michael Byzewski
• Michael Doret
• Miguel Hernández
• Miguel Reyes
• Miguel Sousa
• Mika Melvas
• Mitja Miklavcic
• Morris Fuller Benton
• Morten Olsen
• Natalia Chuvatin
• Natalia Vasilyeva
• Neil Summerour
• Nick Cooke
• Nick Shinn
• Nicole Dotin
• Nikola Djurek
• Nikola Kostic
• Nils Thomsen
• Nina Stössinger
• Noël Leu
• Noopur Datye
• Octavio Pardo
• Olle Eksell
• Omkar Shende
• Ondrej Jób
• Otakar Karlas
• Pascal Zoghbi
• Patch Hofweber
• Patrick Giasson
• Patrick Griffin
• Paul Barnes
• Paul Carlyle
• Paul D. Hunt
• Paul McNeil
• Pedro Leal
• Peter Bilak
• Peter van Rosmalen
• Philippe Apeloig
• Pieter van Rosmalen
• Radana Lencová
• Rafael Dietzsch
• Rafael Koch
• Ralf Herrmann
• Ralph du Carrois
• Ramiro Espinoza
• Rian Hughes
• Ricardo Marcin
• Ricardo Santos
• Riccardo Olocco
• Richard Lipton
• Richard Miller
• Rob Keller
• Robert E. Smith
• Robert Slimbach
• Robert Strauch
• Robin Nicholas
• Rod McDonald
• Rodrigo Saiani
• Roland Hörmann
• Ross Mills
• Ross Milne
• Roxane Gataud
• Rui Abreu
• Sabrina Mariela Lopez
• Samuel Carnoký
• Sandra Carrera
• Sandrine Nugue
• Sara Soskolne
• Sarang Kulkarni
• Sascha Timplan
• Sergei Egorov
• Shigenobu Fujita
• Shiva Nallaperumal
• Shuchita Grover
• Sibylle Hagmann
• Simon Sweeney
• Sindre Bremnes
• Sláva Jevcinová
• Slávka Pauliková
• Spike Spondike
• Stefan Hübsch
• Stefania Malmsten
• Stephen Rapp
• Steve O’Connell
• Supriya Tembe
• Susana Carvalho
• Swiss Typefaces
• Tal Leming
• Terrance Weinzierl
• Thomas Gabriel
• Thomas Huot-Marchand
• Thomas M. Cleland
• Thomas Thiemich
• Tim Ahrens
• Timo Gaessner
• Titus Nemeth
• Tobias Frere-Jones
• Tom Grace
• Tomáš Brousil
• Toshi Omagari
• Travis Kochel
• Ulrike Rausch
• Veronika Burian
• Vincent Chan
• Volker Küster
• Wael Morcos
• Willem Van Lecker
• Xavier Dupré
• Yanek Iontef
• Yani Arabena
• Yanone
• Yassin Baggar
• Yoann Minet
• Yukiko Uno
• Yury Ostromentsky
• Zuzana Licko
• Lukasz Dziedzic

Foundry

• 256tm
• 29LT
• A is for…
• A2-TYPE
• Aarhaus
• Adobe
• Aesthetic Apparatus
• Alias
• Alphabet Soup
• Anatoletype
• Apple
• Aring Typeface AB
• ATF Collection
• Atipo
• BAT Foundry
• Bold Monday
• Borges Lettering
• Briefcase
• Bureau Brut
• Camelot Typefaces
• Canada Type
• Carnoky Type
• Carrois Apostrophe
• CAST
• Catharsis Fonts
• César Puertas
• CJ Type
• Commercial Type
• Constellation
• Coppers and Brasses
• CSTM Fonts
• Dalton Maag
• Darden Studio
• Device
• DJR
• Dots&Stripes Type
• Doyald Young
• dsgn.by
• DSType
• Ek Type
• Elsner+Flake
• Emigre
• Emtype
• Fatype
• FDI
• Feliciano
• Filmotype
• Font Bureau
• Fontef
• Fontfabric
• FontFont
• Fontpartners
• FontShop AG (Germany)
• Fontsmith
• Fontworks
• Fontyou
• Fountain
• Frere-Jones Type
• Friends of Type
• G-Type
• Gestalten
• Grilli Type
• Hamilton Wood Type
• Harbor Type
• Hoefler & Co.
• Hoftype
• House Industries
• Huerta Tipográfica
• HVD Fonts
• Incubator
• Indian Type Foundry
• Intel
• International Typeface Corp.
• Jeremy Tankard
• JonahFonts
• JTD
• Juliasys
• Just Another Foundry
• Kimera
• Klim
• KLTF
• Kontour
• Kostic Type
• Ksenia Belobrova
• Langustefonts
• Latinotype
• Laura Worthington
• Lazydogs
• Letters from Sweden
• Lián Types
• LiebeFonts
• Lineto
• Linotype
• LongType
• Lost Type Co-op
• LucasFonts
• LudwigType
• Luzi Type
• Magpie Paper Works
• Mark Simonson Studio
• MartinPlusFonts
• Match & Kerosene
• Maximage Société Suisse
• MB Type
• MCKL
• Mika Melvas
• Milieu Grotesque
• Miller
• Monokrom
• Monotype
• Mota Italic
• Mozilla
• MuirMcNeil
• MVB Fonts
• Nonpareille
• Nouvelle Noire
• OH no Type Company
• Okay Type
• Optimo
• OurType
• PampaType
• ParaType
• Parkinson Type Design
• phospho
• Photo-Lettering
• PintassilgoPrints
• Positype
• Primetype
• Process
• Production Type
• PSTL
• PSY/OPS
• R-Typography
• ReType
• Rosetta
• Samarskaya & Partners
• Schick Toikka
• Schwartzco
• Sharp Type
• SMeltery
• Solotype
• Spiekermann Partners
• Stephen Rapp
• Stereotypes
• Storm
• Sudtipos
• Suitcase
• Swiss Typefaces
• T-26
• Teeline
• Terrestrial Design
• The Colour Grey
• The Northern Block
• The Pyte Foundry
• Tiponautas
• TipoType
• Tiro Typeworks
• TK Type
• TPTQ Arabic
• Type Supply
• Type-Ø-Tones
• TypeCulture
• TypeGroup
• Typejockeys
• TypeManufactur
• TypeMates
• Typerepublic
• Typesenses
• Typetanic
• TypeTogether
• Typocalypse
• typographies.fr
• Typonine
• Typotheque
• Umbrella
• Underware
• Urtd
• WhiteCrow

Classification

• Blackletter
• Display
• Non-Latin
• Sans Serif
• Script
• Serif
• Slab Serif
• Symbol/Picture
• System

• Our Favorite Typefaces of 2016 - Stephen Coles
• Our Favorite Typefaces of 2015 - Typographica
• Our Favorite Typefaces of 2014 - Typographica
• Our Favorite Typefaces of 2013 - Typographica
• Our Favorite Typefaces of 2012 - Typographica
• Our Favorite Typefaces of 2011 - Typographica
• Kakadu - Jens Kutílek
• Grifo - Fred Smeijers
• Tsukushi Antique Gothic - Toshi Omagari
• Di Mare - Lila Symons
• Scientia - Sonja Knecht
• Gintronic - Patric King
• Prismaset - Bianca Berning
• The Pyte Foundry - Frank Grießhammer
• Dunbar - Ferdinand Ulrich
• Confettis Braille - Ksenya Samarskaya
• Lubaline - Mark Simonson
• Kufam - Kamal Mansour and Maurice Meilleur
• TwoPlus - Maurice Meilleur
• Bickham Script Pro 3 - John Hudson
• Totentanz - Benedikt Bramböck
• Bely - David Jonathan Ross
• Neue Kabel - Dan Reynolds
• Chap - Patric King
• Operator - Erik van Blokland
• Stratos - Patch Hofweber
• Pathos - Craig Eliason
• Garalda - Mark Jamra
• Baloo - Erin McLaughlin
• 29LT Zarid - Diane Mikhael
• Nordvest - Peiran Tan
• Rosart - Sibylle Hagmann
• Nantes - Elizabeth Carey Smith
• 29LT Kaff - Huda Smitshuijzen AbiFarès
• Triade - Reed Reibstein
• Cut - Maurice Meilleur
• Hobeaux Rococeaux - Tamye Riggs
• Cobalte - Christian Schwartz
• 90 Minutes - Tobias Frere-Jones
• 29LT Baseet Slanted - Salem Al-Qassimi
• Canela - Ben Kiel
• Styrene - Graham Bradley
• Bungee - Eben Sorkin
• Mala - Marina Chaccur
• Diodrum Arabic - Sahar Afshar
• Knif mono - Jean-Baptiste Levée
• Robinson - James Edmondson
• Abelard - Amy Papaelias
• Algebra - María Ramos
• Gimlet - Rob Keller
• Pensum - John D. Berry
• Multi - Yves Peters
• Forma DJR - Nina Stössinger
• Jonesy - Tiffany Wardle de Sousa
• Hatch - Josh Scruggs
• Action Condensed - Ermin Mededovic
• Chercán - Sol Matas
• Equitan - Max Phillips
• Portada - Conor Mangat
• Municipal Cast - Mariko Takagi
• Conglomerate - Liron Lavi Turkenich
• Ocre - Aoife Mooney
• Brother 1816 - Sonja Knecht
• Other Notable Releases of 2016 - Stephen Coles
• The Evolution of Metro & Its Reimagination as Metro Nova - Paul Shaw
• Trianon - Benedikt Bramböck
• Garibaldi - Chris Rugen
• Stolzl Display - Sonja Knecht
• Gloss Drop - Patric King
• Ceremony - Maurice Meilleur
• Aphrosine - Stephen Coles
• BC Mikser - Max Phillips
• Vito - Eben Sorkin
• Kazimir - Ksenya Samarskaya
• Tremolo - Laura Meseguer
• Demos Next - Ferdinand Ulrich
• Mallory - Elizabeth Carey Smith
• Blesk - Victoria Rushton
• Vinter - Tamye Riggs
• San Francisco - David Berlow
• Hobeaux - Nick Sherman
• Today Sans Now - Norman Hathaway
• Libé - Robin Mientjes
• FF Hertz - Frank Grießhammer
• Irrlicht - Sonja Knecht
• Infini - Paul Barnes
• Tripper - Tamye Riggs
• Modak Devanagari - Pooja Saxena
• Obsidian - Marian Bantjes
• Viktor Script - Marina Chaccur
• SangBleu - Jean-Baptiste Levée
• Khang - Nina Stössinger
• Eksell Display - Paul Shaw
• NSW01 - Ricardo Cordoba
• Noe Text - Marta Bernstein
• Chiavettieri - Conor Mangat
• Buendia - Sibylle Hagmann
• ATF Brush - Tal Leming
• Nitti Mostro - Tiffany Wardle de Sousa
• Quantum Devanagari - Erin McLaughlin
• Hadassah Friedlaender - Misha Beletsky
• Bustani - Titus Nemeth
• Neue - Tobias Frere-Jones
• ATF Garamond - Mark Simonson
• Indie - Christian Palino
• Media77 - Dan Reynolds
• Josef K - Jan Middendorp
• Eric Gill Series - Aegir Hallmundur
• Inka - Filip Blažek
• Blend - William Berkson
• FS Brabo - Mariko Takagi
• Greta Mono - Jon Coltz
• Clone - Michael Surtees
• ATF Alternate Gothic - Thomas Phinney
• Greta Arabic - Wael Morcos
• Druk Text, Druk Text Wide - Reed Reibstein
• Tenez - María Ramos
• Quotes - Sol Matas
• Janko FY - Toshi Omagari
• Echo - Aoife Mooney
• Sanomat Sans - Matthew Buchanan
• Beloved - Amy Papaelias
• Sabre - Frode Bo Helland
• Macho - Sonja Knecht
• Double - Tânia Raposo
• Brasílica - Gerry Leonidas
• Quimbly - Lila Symons
• Bligh - Yves Peters
• Frauen - Jürgen Siebert
• Other Notable Font Releases of 2015 - Stephen Coles
• GT Sectra - Patch Hofweber
• Eubie Script - Nick Sherman
• Dala Prisma - Nina Stössinger
• Phoreus Cherokee - Erin McLaughlin
• Woodkit - David Jonathan Ross
• Audimat 3000 - Frank Grießhammer
• TwoPoint, ThreePoint, FourPoint, and TenPoint - Maurice Meilleur
• Pique - Victoria Rushton
• Essay Text - Gerry Leonidas
• Marr Sans - Jean-Baptiste Levée
• Parmigiano - Loïc Sander
• Velo Serif - Indra Kupferschmid
• Neutral - Colin M. Ford
• BC Liguria - Florian Hardwig
• Lichtspiele - Dan Reynolds
• Sutro Deluxe - Zara Vasquez-Evens
• St Croce - Ksenya Samarskaya
• Source Serif - Carl Crossgrove
• Domaine Sans - Mark Simonson
• Proto Grotesk - André Mora
• Fakt Slab Stencil - Maurice Meilleur
• Dia - Robb Ogle
• Minotaur - Frank Grießhammer
• Nitti Grotesk - William Berkson
• Quarto - Matthew Buchanan
• Cardea - Jon Coltz
• Vicomte FY - Mark Jamra
• Skolar Sans - Aegir Hallmundur
• Inknut Antiqua - Shelley Gruendler
• Bouquet - Marian Bantjes
• Workhorse - Paul Shaw
• Dream Script - Marian Bantjes
• Cooper Hewitt: The Typeface - Ferdinand Ulrich
• Diogenes - Ivo Gabrowitsch
• Karol Sans - Aoife Mooney
• Kozei - Toshi Omagari
• Carabelle - Florian Hardwig
• Ecam - Erik Spiekermann
• Cortado Script - Dyana Weissman
• FF Antithesis - Marina Chaccur
• Druk - Tânia Raposo
• Mønster - Hrant Papazian
• Marigny - Bas Jacobs
• Paroli - Chris Rugen
• LiebeDoris - Chris Rugen
• Selfie - Carolina de Bartolo
• Blenny - Catherine Dixon
• Breve - Ermin Mededovic
• Amster - Frode Bo Helland
• Input - Michael Surtees
• Maelstrom - Marian Bantjes
• Marian Text - Christian Palino
• Apres - Robin Rendle
• Quire Sans - Reed Reibstein
• Other Notable Font Releases of 2014 - Stephen Coles
• Noe Display - Eben Sorkin
• Nocturno - Caren Litherland
• Ladislav - Chris Hamamoto
• Pufff - Frank Grießhammer
• Mauritius - Indra Kupferschmid
• Odesta - Dyana Weissman
• Magasin - Tiffany Wardle de Sousa
• Portrait - Stephen Coles
• Erotica - Chris Rugen
• HWT Tuscan Extended - Dan Reynolds
• Carlyle Quaint - Paul Shaw
• MVB Solitaire - Frode Bo Helland
• Dala Moa - Wael Morcos
• Louize - Alice Savoie
• FF Quixo - Rob Saunders
• Domaine - John Boardley
• TXT101 - André Mora
• Line - Jan Middendorp
• Post Grotesk - David Sudweeks
• Apeloig Type Library - Conor Mangat
• Audree - Tânia Raposo
• HWT Gothic Round - Tamye Riggs
• Maestrale - Marian Bantjes
• Eskorte - Florian Hardwig
• Dark Angel - Mark Simonson
• Clear Sans - Michael Surtees
• Duplicate - Ivo Gabrowitsch
• Cadogan - Mark Simonson
• LL Circular - Benjamin Shaykin
• Lava - Claus Eggers Sørensen
• Diversa - Marian Bantjes
• Program - Ellen Lupton
• Daphne Script - Yves Peters
• Brooklyn - Robb Ogle
• Sarre - Indra Kupferschmid
• Arek - Mark Jamra and Hrant Papazian
• Huronia - Ksenya Samarskaya
• Lumin - Christoph Koeberlin
• Fira Sans - Matthew Butterick
• Balto - Colin M. Ford
• Remo - Maurice Meilleur
• Programme - Patric King
• Charcuterie - Thomas Phinney
• Brandon Text - Robin Rendle
• Noodge - Grant Hutchinson
• Brevier Viennese - Dan Reynolds
• Founders Grotesk Text - Christian Palino
• Baton - Nick Shinn
• Capita - Gerry Leonidas
• Rolling Pen - Carolina de Bartolo
• FF Dora - Tim Brown
• Karol - Jan Middendorp
• Braxton - Shelley Gruendler
• Salomé - Dan Mall
• Other Notable Font Releases of 2013 - Stephen Coles
• Marian - Caren Litherland
• Henriette - Jan Middendorp
• Trio Grotesk - Mark Simonson
• Quintet - Shoko Mugikura and Tim Ahrens
• JAF Bernini Sans - Stephen Coles
• Bery Roman, Script, and Tuscan - Sébastien Morlighem
• Trim - Frode Bo Helland
• Stan - Indra Kupferschmid
• Fenland - Hrant Papazian
• Signalist - David Sudweeks
• Timonium - Ben Kiel
• Sodachrome - Frank Grießhammer
• Harriet Series - André Mora
• Axia - Florian Hardwig
• Colfax - Marc Oxborrow
• Krul - Laura Meseguer
• Alegreya ht - Carl Crossgrove
• Aften Screen - Michael Surtees
• Agmena - Mark Jamra and William Berkson
• Eskapade - Matthew Butterick
• Maison Neue - Chris Hamamoto
• Adelle Sans - Nadine Chahine
• Atlas Grotesk - Thierry Blancpain
• Atlas Typewriter - Andrew J. Austin
• Serge - Nicole Dotin
• Balkan Sans - David Brezina
• Tablet Gothic - Ivo Gabrowitsch
• Idlewild - Cameron Moll
• Marais - Grant Hutchinson
• Stanley - Jean François Porchez
• VALUCO - Ricardo Cordoba
• Lust - Corey Holms
• Shift - Robb Ogle
• Tramuntana - Bill Troop
• Tabac Slab - Elliot Jay Stocks
• Karloff - Nick Shinn
• Colvert - Gerry Leonidas
• Classic Grotesque - Gary Munch
• Levato - Aegir Hallmundur
• Wayfinding Sans - Christian Palino
• Turnip - Eben Sorkin
• Worthe Numerals - Tânia Raposo
• Xtreem - Patric King
• Dapifer - Thomas Phinney
• Puncho - John Boardley
• Heron - Christoph Koeberlin
• Macula - Yves Peters
• Source Sans - Chris Rugen
• Pitch - Carolina de Bartolo
• Telefon - Nina Stössinger
• Instant - Göran Söderström
• Mission Script - Tiffany Wardle de Sousa
• Garvis - Dan Reynolds
• Hipster Script - Dyana Weissman
• FF ThreeSix - Catherine Griffiths
• Say Cheese - Frank Grießhammer
• Other Notable Font Releases of 2012 - Typographica
• Hunt Roman - Ferdinand Ulrich
• Zizou - Paul van der Laan
• Cala - Paul Shaw
• Julien - Göran Söderström
• Outsiders - Marian Bantjes
• Supria Sans - Nina Stössinger
• Doko - Tânia Raposo and Frank Grießhammer
• Alda - Frank Grießhammer
• Reina - Ricardo Cordoba
• FF Chartwell - Aegir Hallmundur
• Aria - Laura Meseguer
• Sutturah - Nicole Dotin
• Nouvelle Vague - Indra Kupferschmid
• Mija - Patric King
• Salvo - Indra Kupferschmid
• FB Alix - Jens Kutílek
• A2 Beckett - Mark Simonson
• Neacademia - Florian Hardwig
• Abril - Tim Brown
• Bookmania - Rob Keller
• Calibre - Carolina de Bartolo
• Agile - Jan Middendorp
• Alana - Cheshire Isaacs
• Antwerp - Stefan Hattenbach
• Oban - Stephen Coles
• FF Tundra - Caren Litherland
• Detroit - Chris Hamamoto
• Equity - Jean François Porchez
• Azuro - Aegir Hallmundur
• Cassia - Dan Reynolds
• Siri - Ivo Gabrowitsch
• Smidgen - Dyana Weissman
• Nassim - Thierry Blancpain
• Periódico - Carolina de Bartolo
• Libertine - André Mora
• Capitolium News 2 - Claus Eggers Sørensen
• Ambicase Fatface - Grant Hutchinson
• Acta & Acto - Yves Peters
• FF Spinoza - Tânia Raposo
• Carter Sans - Colin M. Ford
• FS Pimlico - Jon Tan
• Realist - Christoph Koeberlin
• Ideal Sans - Ellen Lupton
• Elena - Jason Santa Maria
• Neue Haas Grotesk - Matthew Butterick
• Dane - Jürgen Siebert
• Swagg - Hrant Papazian
• Naga - Nick Shinn
• Changing - Elliot Jay Stocks
• Apple Color Emoji - Si Daniels
• Other Notable Font Releases of 2011 - Typographica
• Bonesana - Typographica
• Marlene - Aegir Hallmundur
• Archer - David John Earls
• Glosa - Nick Sherman
• Baskerville 10 - Adam Twardoch
• Studio Lettering - Adam Twardoch
• Compendium - Christian Palino
• Stag - Christian Palino
• Carmen - Christian Palino
• FF Pitu - Hrant Papazian
• History - Ellen Lupton
• Filmotype Zanzibar - Jean François Porchez
• Vista Slab - Jean François Porchez
• Rocky - William Berkson
• Dolce & Dyna - Jan Middendorp
• Brioni - Caren Litherland
• Birra Stout - Karsten Luecke
• FP Head - Yves Peters
• Zócalo - Chris Hamamoto
• Mary Read - Joshua Lurie-Terrell
• Lakeside - Dyana Weissman
• Hardys - Duncan Forbes
• Typonine Stencil - Paul Shaw
• Benton Modern Display - Gary Munch
• Mokka - Michael Surtees
• Calgary Script - Cameron Moll
• Expo Serif - Ivo Gabrowitsch
• Eurostile Next - Claudio Piccinini
• Bree - Ricardo Cordoba
• ITC Franklin - Carolina de Bartolo
• Arlt - John Butler
• Memoir - Cheshire Isaacs
• Marat - Eben Sorkin
• Moyenage - John Butler
• Dessau - Jürgen Siebert
• Orbe - John Downer
• Modern Suite - Mark Simonson
• Newzald - John Boardley
• Givry - Dan Reynolds
• FF Trixie HD - Ben Kiel
• Comenia - Florian Hardwig
• Other Notable Font Releases of 2008 - Typographica
• Urbana - Eben Sorkin
• Taz III - Karsten Luecke
• Scriptonah & Casual Brush - John Downer
• Restraint - Corey Holms
• Purista - Ellen Lupton
• National - Duncan Forbes
• Minuscule - Erik Spiekermann
• Los Niches - Anna Malsberger
• Lineare Serif - Tim Ahrens
• Leitura - Christian Palino
• Kinescope - Tiffany Wardle de Sousa
• Graphik - Kris Sowersby
• Greta - Chester Jenkins and William Berkson
• Gloriola - Stephen Coles
• Giorgio - Ben Kiel
• FF Beowolf & BeoSans OT - David Berlow
• Feijoa - Yves Peters
• MVB Sacre Bleu - Joshua Lurie-Terrell
• Malaga - Tiffany Wardle de Sousa
• FF Meta Serif - Aegir Hallmundur
• Arno - Mark Simonson
• Anselm - Paul Hunt
• Burbank - Christian Schwartz
• Blaktur - Tiffany Wardle de Sousa
• Beorcana - Florian Hardwig
• Burgues Script - Christian Palino
• Bistro Script - Nick Sherman
• Dancer - Jan Middendorp
• Olicana - Eben Sorkin
• Fab - Ricardo Cordoba
• Guardian - Carl Crossgrove
• Titling Gothic - Mark Simonson
• Estilo - Chris Rugen
• Exchange - Christian Schwartz
• Darka - Mark Jamra
• FF Milo - Cheshire Isaacs
• Fabiol - Tim Ahrens
• Rumba - Jan Middendorp
• PTL Skopex - Jan Middendorp
• Omnes - Armin Vit
• Paperback - Paul Hunt
• Margie Script - Anna Malsberger
• Eudald News - John Downer
• KLTF Tiptoe - Dan Reynolds
• Odile - Yves Peters
• Palatino Sans - Hrant Papazian
• Freight Big and Display - Dyana Weissman
• Young Finesse - Peter Bruhn
• Esta - Bram Pitoyo
• Luxury - Kris Sowersby
• Confetti - Stephen Coles
• Amalia - Eben Sorkin
• Deutsche Bahn - Richard Kegler

"§"
w3.org
CSS Animations

Table of contents

• 1. Introduction
• 2. Values
• 3. Animations
• 4. Keyframes
• 4.1. Timing functions for keyframes
• 4.2. The ‘animation-name’ Property
• 4.3. The ‘animation-duration’ Property
• 4.4. The ‘animation-timing-function’ Property
• 4.5. The ‘animation-iteration-count’ Property
• 4.6. The ‘animation-direction’ Property
• 4.7. The ‘animation-play-state’ Property
• 4.8. The ‘animation-delay’ Property
• 4.9. The ‘animation-fill-mode’ Property
• 4.10. The ‘animation’ Shorthand Property
• 5. Animation Events
• 5.1. Interface AnimationEvent
• 5.1.1. IDL Definition
• 5.1.2. Attributes
• 5.2. Types of AnimationEvent
• 6. DOM Interfaces
• 6.1. Interface CSSRule
• 6.1.1. IDL Definition
• 6.2. Interface CSSKeyframeRule
• 6.2.1. IDL Definition
• 6.2.2. Attributes
• 6.3. Interface CSSKeyframesRule
• 6.3.1. IDL Definition
• 6.3.2. Attributes
• 6.3.3. The appendRule method
• 6.3.4. The deleteRule method
• 6.3.5. The findRule method
• 7. Acknowledgments
• 8. References
• Normative references
• Other references
• Property index
• Index

"§"
w3.org
CSS Backgrounds and Borders Module Level 3

Table of contents

• 1. Introduction
• 2. Values and Interactions
• 2.1. Module Interactions
• 2.2. Value Types
• 2.3. Animated Values
• 3. Backgrounds
• 3.1. Layering Multiple Background Images
• 3.2. Base Color: the ‘background-color’ property
• 3.3. Image Sources: the ‘background-image’ property
• 3.4. Tiling Images: the ‘background-repeat’ property
• 3.5. Affixing Images: the ‘background-attachment’ property
• 3.6. Positioning Images: the ‘background-position’ property
• 3.7. Painting Area: the ‘background-clip’ property
• 3.8. Positioning Area: the ‘background-origin’ property
• 3.9. Sizing Images: the ‘background-size’ property
• 3.10. Backgrounds Shorthand: the ‘background’ property
• 3.11. Backgrounds of Special Elements
• 4. Borders
• 4.1. Line Colors: the ‘border-color’ properties
• 4.2. Line Patterns: the ‘border-style’ properties
• 4.3. Line Thickness: the ‘border-width’ properties
• 4.4. Border Shorthand Properties
• 5. Rounded Corners
• 5.1. Curve Radii: the ‘border-radius’ properties
• 5.2. Corner Shaping
• 5.3. Corner Clipping
• 5.4. Color and Style Transitions
• 5.5. Overlapping Curves
• 5.6. Effect on Tables
• 6. Border Images
• 6.1. Image Source: the ‘border-image-source’ property
• 6.2. Image Slicing: the ‘border-image-slice’ property
• 6.3. Drawing Areas: the ‘border-image-width’ property
• 6.4. Edge Overhang: the ‘border-image-outset’ property
• 6.5. Image Tiling: the ‘border-image-repeat’ property
• 6.6. Drawing the Border Image
• 6.7. Border Image Shorthand: the ‘border-image’ property
• 6.8. Effect on Tables
• 7. Miscellaneous Effects
• 7.1. Drawing at Breaks: the ‘box-decoration-break’ property
• 7.2. Drop Shadows: the ‘box-shadow’ property
• 8. Definitions
• 8.1. Glossary
• 8.2. Conformance
• 8.3. Levels 8.3.1. Level 1
• 8.3.2. Level 2
• 8.3.3. Level 3
• 8.4. CR Exit Criteria
• 9. Changes
• 9.1. Changes since the 17 April 2012 Candidate Recommendation
• 9.2. Changes since the 14 February 2012 “Last Call” Working Draft
• 9.3. Changes Since the 15 February 2011 Candidate Recommendation
• 9.4. Changes Since the 17 December 2009 Candidate Recommendation
• 10. Acknowledgments
• 11. References
• Normative References
• Other References
• Property Index
• Index

"§"
w3conversions.com
CSS3: spread value and box-shadow on one side only

The spread value

There’s a little talked about value in the box-shadow property called “spread”. That value, when used, comes after the blur value and moves the shadow away from the box equally all the way around. It doesn’t add a blur, it simply spreads out in all directions. You’ll get different effects based on whether the blur value is a greater than the spread value or whether the spread is greater than the blur. The color defined will be solid right next to the box, and then blur for the rest (based on the difference between the two values). Before it gets too confusing, let’s have a look at the property:
...

"§"
w3schools.com
CSS3

• CSS Basic: CSS HOME | CSS Introduction | CSS Syntax | CSS Id & Class | CSS How To | CSS Backgrounds | CSS Text | CSS Fonts | CSS Links | CSS Lists | CSS Tables
• CSS Box Model: CSS Border | CSS Outline | CSS Margin | CSS Padding
• CSS Advanced: CSS Grouping/Nesting | CSS Dimension | CSS Display | CSS Positioning | CSS Floating | CSS Align | CSS Pseudo-class | CSS Pseudo-element | CSS Navigation Bar | CSS Image Gallery | CSS Image Opacity | CSS Image Sprites | CSS Media Types | CSS Attr Selectors
• CSS3 Tutorial: CSS3 Introduction | CSS3 Borders | CSS3 Backgrounds | CSS3 Gradients | CSS3 Text Effects | CSS3 Fonts | CSS3 2D Transforms | CSS3 3D Transforms | CSS3 Transitions | CSS3 Animations | CSS3 Multiple Columns | CSS3 User Interface | CSS Summary
• CSS Examples: CSS Quiz | CSS Certificate
• CSS References: | CSS Reference | CSS Selectors | CSS Reference Aural | CSS Web Safe Fonts | CSS Units | CSS Colors | CSS Color Values | CSS Color Names | CSS Color HEX

"§"
w3schools.com
Web Building Tutorials
Homepage School
HTML Tutorials
CSS Tutorials

THE LARGEST WEB DEVELOPER SITE ON THE NET

Full Web Building Tutorials

HTML CSS XML JAVASCRIPT ASP PHP SQL MORE...

• HTML Tutorials: Learn HTML | XHTML | CSS | TCP/IP
• XML Tutorials: Learn XML | DTD | XML DOM | XSLT | XSL-FO | XPath | XQuery | XLink | XPointer | Schema | XForms | SOAP | WSDL | RDF | RSS | WAP | Web Services
• Browser Scripting: Learn JavaScript | HTML DOM | DHTML | VBScript | AJAX | E4X | WMLScript
• Server Scripting: Learn SQL | ASP | ADO | PHP | ASP.NET | .NET Mobile
• Multimedia: Learn Media | SMIL | SVG | Flash
• Web Building: Web Building | Web Browsers | Web Certification | Web Hosting | Web W3C | Web Quality | Web Semantic
• REFERENCES: HTML 4.01 | XHTML 1.0 | CSS 2.0 | JavaScript | HTML DOM | XML DOM | PHP 5.1 | XSLT 1.0 | XPath 2.0 | XSL-FO | WML 1.1 | HTML Colors
• CHARACTER SETS: HTML Character Sets | HTML ISO-8859-1 | HTML Symbols
• EXAMPLES: HTML Examples | CSS Examples | XML Examples | JavaScript Examples | HTML DOM Examples | XML DOM Examples | DHTML Examples | AJAX Examples | VBScript Examples | ASP Examples | ADO Examples | ASP.NET Examples | SVG Examples | WAP Examples
• STATISTICS: Browser Statistics | Platform Statistics | Display Statistics
• QUIZZES: HTML Quiz | XHTML Quiz | CSS Quiz | XML Quiz | JavaScript Quiz | SQL Quiz | PHP Quiz | ASP Quiz
• CERTIFICATION: HTML Certification | JavaScript Certification | XML Certification | ASP Certification | PHP Certification
• VALIDATION: Validate HTML | Validate CSS | Validate XHTML | Validate XML | Validate WML

• HTML Basic: HTML HOME | HTML Introduction | HTML Get Started | HTML Basic | HTML Elements | HTML Attributes | HTML Headings | HTML Paragraphs | HTML Formatting | HTML Styles | HTML Links | HTML Images | HTML Tables | HTML Lists | HTML Forms | HTML Colors | HTML Colornames | HTML Colorvalues | HTML Quick List
• HTML Advanced: HTML Layout | HTML Frames | HTML Fonts | HTML 4.0 Why | HTML CSS | HTML Entities | HTML Head | HTML Meta | HTML URLs | HTML Scripts | HTML Attributes | HTML Events | HTML URL Encode | HTML Webserver | HTML Summary
• HTML Examples: HTML Examples | HTML Quiz | HTML Certificate
• HTML References: HTML Tag List | HTML Attributes | HTML Events | HTML Colornames | HTML Character Sets | HTML ISO-8859-1 | HTML Symbols | HTML URL Encode | HTML Lang Codes | HTTP Messages

• CSS Basic: CSS HOME | CSS Introduction | CSS Syntax | CSS How To | CSS Background | CSS Text | CSS Font | CSS Box Model | CSS Border | CSS Outline | CSS Margin | CSS Padding | CSS List | CSS Table
• CSS Advanced: CSS Dimension | CSS Display | CSS Positioning | CSS Floating | CSS Align | CSS Pseudo-class | CSS Pseudo-element | CSS Image Gallery | CSS Image Opacity | CSS Media Types | CSS Don't | CSS Summary
• CSS Examples: CSS Examples
• CSS References: CSS Reference | CSS Reference A to Z | CSS Ref Aural | CSS Units | CSS Colors | CSS Colorvalues | CSS Colornames
• CSS Quiz: CSS Quiz

W3Schools An Intervention

Are you using? Abusing? We are here to help.

We are passionate about the web, learning, and craftsmanship. We want you, as web designers and developers, to be successful in your careers. We feel, though, that W3Schools is harming the community with inaccurate information. Like any other authoritative educational resource, W3Schools should both hold itself to, and be held to, the highest standards.

We hope we can illuminate why W3Schools is a troublesome resource, why their faulty information is a detriment to the web, and what you (and they) can do about it.

~ members of the Front-end Dev Community, January 14th, 2011

"§"
web-page-optimization
Web-Page-Optimization

• Optimization Services
• Why Your Should Optimize
• General Guidelines
• Optimizing for Individual Search Engines
• Google Search Engine Optimization
• Inktomi Search Engine Optimization
• Search Engine Spiders
• Submit To Yahoo Tips
• Yahoo Search Engine Optimization
• BOTW Web Directory
• Paid Inclusion vs. Free
• Search Engine Optimization Tools and Resources
• Getting Your Web Pages Listed in Search Engines
• SEO Site Map
• SEO Articles
• SEO Company Directory

"§"
webpagesthatsuck
Webpages that suck

Worst Websites of the Year

• Worst Websites of 2012
• Worst Websites of 2011
• Worst Websites of 2010
• Worst Websites of 2009
• Worst Websites of 2008
• Worst Websites of 2007
• Worst Websites of 2006
• Worst Websites of 2005
• More Worst of the Web

Daily Dose of Bad Design (Daily Sucker)

• Current Examples of Bad Web Design Presented Daily (direct link)

Bad Web Design

• Overview (direct link)
• Mystery Meat Navigation (MMN)
• What is MMN?
• Recent Examples of MMN
• Big Corporation and Classic MMN
• Music, Movie, and Art MMN
• Web Designer MMN
• Coda

• Web Design Mistakes
• Web Design Mistakes Overview (direct link)
• Biggest Mistakes in Web Design 1995-2015
• Videos About Bad Web Design
• Stupid Versions of WPTS Home Page
• Original Version of WPTS Home Page 1996-1998
• Architecture — An Industry With Sucky Websites

Good Web Design

• Examples of Good Web Design
• Links to Articles You Should Read
• Free Books

Web Design Checklists

• The Checklists
• Introduction
• Checklist 1 - Fatal Mistakes
• Checklist 2 - Big Mistakes
• My Site Sucks. What Do I Do Now?
• Top 30 Mistakes From The Checklists

Articles

• Articles on Web Design
• God Hates Fags Is The Future of Web Design
• How to Write Bullshit Article Titles That Sound Profound And Get Readers
• Why You Can't Use Music On Your Site
• Chairs Are For Sitting. PDF Is For Printing.
• Don't Confuse Web Design With Sex.
• Flash Is Evil. Flash Is Good.
• More articles...

Everything Else

• About / Contact / Etc.

"§"
webreference
Image Switch

"§"
websitesetup.org
HTML Beginner's Guide
Step-by-step Introduction to HTML and creating a simple page

The ability to make compelling, beautiful web pages is a useful skill to have. It allows you to present information you care about whilst capturing the attention of those who visit your web page.

If you don’t want to use website platforms (such as WordPress, Drupal and Joomla) to build your website and you want to learn the basics of HTML5, then this is a right guide for you.

And oh, once you have learned the ropes of a HTML5, I highly suggest you to check out my “HTML5 Cheat Sheet” below.
...

"§"
webtypography.net
Webtypography

The Elements of Typographic Style Applied to the Web

A practical guide to web typography

Table of Contents

• Front cover
• Introduction
• 2 Rhythm & Proportion
• 2.1 Horizontal Motion
• 2.1.1 Define the word space to suit the size and natural letterfit of the font
• 2.1.2 Choose a comfortable measure
• 2.1.3 Set ragged if ragged setting suits the text and page
• 2.1.4 Use a single word space between sentences
• 2.1.5 Add little or no space within strings of initials
• 2.1.6 Letterspace all strings of capitals and small caps, and all long strings of digits
• 2.1.7 Don’t letterspace the lower case without a reason
• 2.1.8 Kern consistently and modestly or not at all
• 2.1.9 Don’t alter the widths or shapes of letters without cause
• 2.1.10 Don’t stretch the space until it breaks
• 2.2 Vertical Motion
• 2.2.1 Choose a basic leading that suits the typeface, text and measure
• 2.2.2 Add and delete vertical space in measured intervals
• 2.3 Blocks & Paragraphs
• 2.3.1 Set opening paragraphs flush left
• 2.3.2 In continuous text mark all paragraphs after the first with an indent of at least one en
• 2.3.3 Add extra lead before and after block quotations
• 2.3.4 Indent or center verse quotations
• 2.4 Etiquette of Hyphenation & Pagination
• 2.4.1 At hyphenated line-ends, leave at least two characters behind and take at least three forward
• 2.4.3 Avoid more than three consecutive hyphenated lines
• 2.4.5 Hyphenate according to the conventions of the language
• 2.4.6 Link short numerical and mathematical expressions with hard spaces
• 2.4.8 Never begin a page with the last line of a multi-line paragraph
• 3 Harmony & Counterpoint
• 3.1 Size
• 3.1.1 Don’t compose without a scale
• 3.2 Numerals, Capitals & Small Caps
• 3.2.1 Use titling figures with full caps, and text figures in all other circumstances
• Reference
• Bibliography

"§"
WHATWG (W3)

What is the WHATWG?

The WHATWG is a growing community of people interested in evolving the Web. It focuses primarily on the development of HTML and APIs needed for Web applications.

The WHATWG was founded by individuals of Apple, the Mozilla Foundation, and Opera Software in 2004, after a W3C workshop. Apple, Mozilla and Opera were becoming increasingly concerned about the W3C’s direction with XHTML, lack of interest in HTML and apparent disregard for the needs of real-world authors. So, in response, these organisations set out with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born.
...

"§"
xiconeditor.com
Icon-Editor
Favicon-Editor

X-Icon Editor is an HTML5 application that allows you to create high resolution icons that lets your sites shine with IE9 and above. With X-Icon Editor you can quickly get your site ready with a large icon which will be available for pinned sites and the new tab page. Create your own site icon today!