f
If you think, coding isn't fun
You are doing it wrong
Codeing is fun

Hi, my name is Milan "Miňo" Černota. I'm web developer from Slovakia and I like experiment with HTML, CSS, javaScript.

Welcome to my BLOG :)

Skills

Snowman

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.

Show
Zig-zag

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
Zig-zag

CSS gradient backgrounds

CSS gradients can make nice backgrounds and with help of animation property, it is possible to bring backgrounds to life

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.

Adventure TIME

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

Show
Slider

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".

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.

a 5 2 + b = c

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 ;)

Calcu lator

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
Circles

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.

Show

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

Stop watch

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.

Show
Clock

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