HTML, CSS & JS Knowledge

Coded on Andriod version Oreo 8.1
Samsung S4
SoloLearn APK Version 2.2.4

Vincent Berger

Highlighted text with webkit animation that moves from right to left.

How I gave shadow to the boxes in this page

Pop-up box in pure CSS

Shapes

Shapes with an animation effect

Highlighted text Highlighted text Highlighted text

The hightlighted text is created with -webkit-animation and @-webkit-keyframes.
You can set with
-webkit-animstion-name the name that you assign to
@-webkey-frames to make the animstion work.

This is how I gave shadow to these boxes in this page.
box-shadow: 5px 5px 5px 5px #FFFFFF

The first 5px is the Horizontal line
The second 5px is the Vertical line
The third 5px is the Blur
The fourth 5px is the Spread
At last is the Color code

Pop-up in pure CSS

nav {
width:50px;
height:50px;
background-color:grey;
}

Create ':hover' to make a clickable pop-up box for Android and IOS.

nav:hover {
width:300px;
height:230px;
background-color:white;
}

This is the code of how I drawn A cricle.
.circle {
border-radius:50px;
width:100px;
height:100px;
margin-top:10px;
margin-left:10px;
text-align:center;
background-color:red;
color:black;
box-shadow:2px 2px 1px 2px darkred;
opacity:0.85;
}

Square
.square {
width:100px;
height:100px;
margin-top:-60px;
margin-left:80px;
text-align:center;
background-color:blue;
color:black;
box-shadow:2px 2px 1px 2px darkblue;
opacity:0.85;
}

Square with border-raduis.
.triangle {
width:100px;
height:100px;
border-radius:24px;
margin-top:-170px;
margin-left:150px;
text-align:center;
background-color:green;
color:black;
box-shadow:2px 2px 1px 2px darkgreen;
opacity:0.85;
}

Triangle
.shape {
width: 0;
height: 0; border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid yellow;
margin-top:-60px;
margin-left:200px;
text-align:center;
color:black;
opacity:0.85;
}

Oval
.oval {
width:80px;
height:130px;
border-radius:50%;
margin-top:-170px;
margin-left:260px;
text-align:center;
background-color:white;
color:black;
box-shadow:2px 2px 1px 2px #F5F5CD;
opacity:0.85;
}

Here you can see the same shapes but with an animated effect.
The Code is to long to view in this box, inspect the code from line 299 to 497 in the CSS tab.

U at 30%

Web - Coded on android