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.Show
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 gradients can make nice backgrounds and with help of
animation property, it is possible to bring backgrounds to life
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.
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.
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".Show
Math 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.
If you find this topic interesting, then look for some tutorial and have fun ;)
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
CSS3 brings many possibilities with 3D environment. With features like
Control SVG path with 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')
animation-timing-function: steps(num), which changes numbers in display.