Pure CSS Tic Tac Toe
A tutorial on creating a Tic Tac Toe game using only CSS, with hidden checkboxes and pseudo-classes for game logic.
Lea Verou is a web standards expert, developer, and designer with a PhD from MIT in Human-Computer Interaction. She has worked as Product Lead at Font Awesome, helped shape the web as a member of the W3C Technical Architecture Group, and has been part of the CSS Working Group since 2012. Her open-source tools like PrismJS and Color.js are used by millions of developers worldwide. Lea is also the author of a bestselling CSS book, a frequent conference speaker, and an advocate for making technology simpler, more usable, and open for everyone.
210 articles from this blog
A tutorial on creating a Tic Tac Toe game using only CSS, with hidden checkboxes and pseudo-classes for game logic.
A call for contributors to help create a modern, streamlined fork of jQuery that removes legacy browser code and uses native JavaScript.
A web developer shares her experience speaking about CSS3 at two London tech conferences, Web Directions @media and Standards.next.
A guide to correctly extracting URL hash values in JavaScript, addressing common pitfalls and naive approaches.
Learn how to change the URL hash without causing a distracting page jump using the History API and a fallback for older browsers.
Introducing StronglyTyped, a JavaScript library for adding strongly typed properties and constants using ES5 getters/setters.
A CSS technique for conditionally applying styles based on selector support, using invalid selectors to filter unsupported browsers.
A gallery showcasing CSS3 gradient patterns, including a new 'Japanese cubes' design, with browser support details.
A guide to inverting all colors on a webpage using only CSS, with a cross-browser bookmarklet and browser support details.
A guide to creating complex, readable regular expressions in JavaScript by composing them from smaller, reusable sub-patterns.
A script to automatically convert standard CSS gradient syntax to the older, cumbersome -webkit-gradient format for broader browser support.
Learn how to create beveled corners and simulate negative border-radius using pure CSS3 gradients, no images required.
A critical analysis of CSS preprocessors like SASS and LESS, discussing their benefits but highlighting filesize concerns.
Lea Verou changes her Web Directions talk to focus on mastering advanced CSS3 gradients, exploring their power beyond basic use cases.
A guide on using CSS3 pointer-events to create custom-styled <select> dropdowns, including browser compatibility notes.
A guide to creating a checkerboard pattern using CSS3 gradients and multiple background techniques, with browser-specific notes.
A JavaScript library that adds Firebug-style increment/decrement functionality for length values in text fields using keyboard arrows.
A PHP function to fix serialized data after converting from single-byte encoding to Unicode UTF-8 by recounting string lengths.
A CSS technique using :nth-child and :nth-last-child to style elements based on sibling count with improved efficiency.
Lea Verou announces her talk 'CSS3 at the Outer Rim' at the @media Web Directions conference, focusing on advanced CSS3 features.