Pure CSS Crossword (CSS Grid)

Nice demo of a pure CSS Crossword Puzzle, built using CSS Grid. Be sure to check out the validation rules too, they’re built using the General Sibling Selector (e.g. ~):

#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ #item1-4:valid ~ #item1-5:valid ~ #item1-6:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-1 {
	opacity: 1;
}

UPDATE 2017.06.22: There’s a blogpost available, describing how this pure CSS crossword puzzle was made.

Pure CSS Crossword – CSS Grid →

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.