Circle bubble with CSS and HTML5 – part 001.

Posted on by

This is a simple example of circle bubble with CSS and HTML 5.
It is a circle with a blue color that raise similar to where on the surface of a liquid.
The visual effect is very pleasant and the source code is simple.
You need to create a index.html file with this source code:

Haskell
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="animation">
        <div class="round round-circle"></div>
    </div>
</body>
</html>

The next step is to make a style.css file in same folder with the HTML 5 file.
The source code of this file is this:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
body {background:#000;}
 
.animation {position:absolute;top:0;left:0;width:500px;height:500px;background-size:4px;}
 
.round {position:absolute;width:200px;height:200px;border-radius:100px;border:2px solid #00CCFF;
animation:shock-wave 1s ease 0s infinite;transform:translateX(-50%) translateY(-50%);}
.round-circle {top:200px;left:200px;animation-delay:0.0s;animation-duration:1.0s;}
 
@keyframes shock-wave {
    0%   {width:0;height:0;opacity:1;}
    60%  {opacity:1;}
    100% {width:200px;height:200px;opacity:0;}
}

The result of this example can be see on my codepen example here .

How to build and improve our web pages.

Posted on by

An important element in building and improving our web pages is the content to be added.
The basic element is the language we use, which at the end is transformed into HTML, CSS and scripting.
The average user wants to be attracted by improving content.
So the administrator, designer and content writer – the author has to attract visitors, so adding content is strictly necessary on time unit.
The basic issue of the three people is basically content participation and methods of changing the web page.
Another problem occurs when the one who makes changes will have to store vast knowledge about these methods.
Today I will show you a simpler way of modifying web content by using so-called cheatsheets.
You will need to see these two links: htmlcheatsheet.com and html-css-js.com – icons.
Navigating through the two links will provide you with important help for web page building, as well as an important database for future content editing.
Let’s see one example with icons:
🍎🍏📗📚📈📉📊📋
The math signs with icons:
∇ ∫ ∬ ∭ ∮
Another example with some geometric icons:
▦▧▨▩