Pure CSS game: Tale of the Warrior
Tale of the Warrior is a pure CSS desktop game, where you must save your daughter from deadly dragon Balagil. Try to avoid all obsticles on your way. Foggy forrest is little tricky
Show
Codepen challenges
Check out my October codepen challenges. If you want, you can join these challenges too. Just keep checking codepen.io/challenges every Monday for new one.
CSS riddles
Another fun with CSS. Can you solve all of these riddles?
Show
Voice website
Execute commands with your voice. This is only experimental website.
ShowInfo: Chrome by default, Firefox media.webspeech.recognition.enable flag
Fun with console: Support table
Check browser support of CSS properties, that can be used in the console.
ShowInfo: Edge doesn't support css styles in console
Fun with console: Animations
I am making a presentation about the console object and its methods and I would like to share one part of that presentation. Console.log() can be styled by CSS properties. When you change the properties by timer, you can get nice animations.
ShowInfo: Edge doesn't support css styles in console
CSS book
As I said before, I like Adventure Time so this project is about short version of one book from AT, called ENCHIRIDION. With few lines of LESS you can make a nice book with page effect.
Show
CSS gradient backgrounds
CSS gradients can make nice backgrounds and with help of animation property, it is possible to bring backgrounds to life
Info: IE doesn't play animations right
Show
Rebeccapurple
I found out, that I can use keyword REBECCAPURPLE as a value of CSS color property. So I did little research. REBECCAPURPLE was added to CSS COLOR MODULE LEVEL 4 and its hexadecimal representation is #663399, but there is a sad story behind this name.
Info: Link
PURE CSS - Game
Yes, it's possible to make games in CSS and they don't have to be just clicking games. In this "Adventure time - Rescue of Flame princess" you must beat three levels and save princess from bad "Flame Lord". Principe of project is simple "hover". Use mouse cursor to avoid lava and spikes. Colect coins to unlock new characters.
Have fun
Info: Browser must supports .svg cursor
Show
PURE CSS - Slider
You can build responsive slider with pure css. This slider has 7 effects, arrows and bullets to control slides. You can start autoplay with checkbox "Auto slide".
ShowMath in HTML
You can pass mathematical expressions right in to the HTML structure. This can be done by MathML (mathematical markup language). Just look at example below.
Just nice! But when you look deeper (through inspector), coding expresions like this might be nightmare. So don't be ashamed by using some editor. And there are javascript polyfills for browsers, that doesn't support MathML.
If you find this topic interesting, then look for some tutorial and have fun ;)
Info: Only Firefox and Safari
PURE CSS - Calculator
With some inputs, labels and CSS counters you can build simple calculator. In this project you can substitute and subtract 6-digit numbers. It's wonderful how CSS can be powerful.
Show
PURE CSS - Parallax
CSS3 brings many possibilities with 3D environment. With features like perspective and transform: translateZ(num) you can avoid javascript and build nice parallax effect.
Control SVG path with CSS
If you want manipulating with SVG, you don't always need help from javaScript. Many SVG properties can be changed by CSS.
SVG properties: fill, stroke-width, stroke-dashoffset...
These are well know properties. But -webkit has one advantage, it has access to points of SVG path. You can change points with d: path('M70,30 ... L70,30')
Try hover
Info: Only -webkit
PURE CSS - Stopwatch
This project demonstrate that you can build functional stopwatch without javaScript. Stopwatch has buttons for start, stop and reset time. The main part of this takes CSS animation-timing-function: steps(num), which changes numbers in display.
PURE CSS - Clock
CSS is a powerfull tool, even more when you want build dirty things with combination of label & input. In some case you can replace javascript functionality with some CSS hacks. I will build few projects to demonstrate this kind power. First project is about simple clock with settable time.
Show