CodePen: A simple progressbar with CSS.

A simple test with CSS about how to create two simple progress bars. The code source of this example - https://codepen.io/catafest/pen/rNjmdwa show us about the cascading source code in CSS and how this works pe properties in CSS. This difference of the source code in CSS change the speed of the animation:

 animation: animate 6s ease-in-out infinite;
...
 animation: animate 1s ease-in-out infinite;

Some changes to the CSS source code are not allowed because they have no effect on the end result or must be used in order to complete the base code and have the end result. Another good example is flex:

display: flex;

On the parent element also changes how width and height work. CSS codes defines have no effect on a flex container. ... I can tell you that it is not very easy to change a project based on CSS, so the steps of designing and building a website are very important.

See the Pen CSS excample 001 by Cătălin George Feștilă (@catafest) on CodePen.

MAVO : Create webpages with HTML and CSS .

A start intro into MAVO can be found here.
The MAVO is a simple way to create good design and graphics for your website.
The development team tells us: What if I told you, that you can do these things (and more!), just with HTML and CSS? No programming code to write, no servers to manage.
A demo page shows us how good is this system, see here.

New codepen example - modal window.

In user interface design for computer applications, a modal window is a graphical control element subordinate to an application's main window. It creates a mode that disables the main window, but keeps it visible with the modal window as a child window in front of it.
This is my example with a modal window created on codepen website.
The example is very simple.
The html5 source code is created with classes and id's.
The css file make all style for this tags.
The javascript use all of this to open the modal window, use click to close the window.
The Cancel and Add buttons not work with the java script.

News : Online tool for CSS web development.

This is online tool named animista is a tool for web development and you can used to create source code for animation and CSS.
The tool come with beta version but works very well.
You can try this online tool here.

Create a shadow text effect with HTML5 and CSS .

This tutorial is simple because I used HTML5 and CSS.
The CSS source code is simple (see: font-size:13px or you can use any size, colors , background).
I used my jsfiddle account to test and run it.
Create a project into jsfiddle editor and add this source code.
Into HTML5 area the source code can start with your text into div tag and named class font_001.
You can add span tag to have display block CSS style.
Into CSS area the source code is this:

@import url(https://fonts.googleapis.com/css?family=Work+Sans);

body {
  line-height: 2.5;
  margin: 0;
  background: #1F4C6F;
  font-family: 'Work Sans' sans-serif;font-size:13px;
}

.font_001 {
  max-width: 50%;
  margin: 0 auto;
}

h1 {
  color: #fff;
  font-weight: 810;
  padding-top: 4rem;
  margin: 0;
  text-transform: uppercase;
  font-size: 3em;
  line-height: 1.8;
  color: #3C6FB0;
  text-shadow: 20px 5px 30px rgba(0,0,0,.2), -30px 10px 30px rgba(0,0,0,.1), 
-40px 10px 30px rgba(0,0,0,.1), -3px 2px 5px #1F4C6F, 3px -2px 5px #3C6FB0;
}

h1 span {
  display: block;
  
}