Clip fixed element test

Developer
Acemir Sousa Mendes
Size
2,091 Kb
Views
50,600
  1. Clip fixed element test Previews
  2. Clip fixed element test HTML Codes
  3. Clip fixed element test CSS Codes

How do I make an clip fixed element test?

What is a clip fixed element test? How do you make a clip fixed element test? This script and codes were developed by Acemir Sousa Mendes on 10 August 2022, Wednesday.

Clip fixed element test Previews
IQ Test

Clip fixed element test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Clip fixed element test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="sec sec-1"> <div class="sec-parent"> <div class="sec-fixed"> <div class="word"><span class="y">&#9651;</span><span class="b">&#8413;</span><span class="a">&#10005;</span><span class="x">&#9633;</span></div> </div> </div>
</div>
<div class="sec sec-2"> <div class="sec-parent"> <div class="sec-fixed"> <div class="word"><span class="y">&#9651;</span><span class="b">&#8413;</span><span class="a">&#10005;</span><span class="x">&#9633;</span></div> </div> </div>
</div>
<div class="sec sec-3"> <div class="sec-parent"> <div class="sec-fixed"> <div class="word"><span class="y">&#9651;</span><span class="b">&#8413;</span><span class="a">&#10005;</span><span class="x">&#9633;</span></div> </div> </div>
</div>
<div class="sec sec-4"> <div class="sec-parent"> <div class="sec-fixed"> <div class="word"><span class="y">&#9651;</span><span class="b">&#8413;</span><span class="a">&#10005;</span><span class="x">&#9633;</span></div> </div> </div>
</div>
<div class="sec sec-5"> <div class="sec-parent"> <div class="sec-fixed"> <div class="word"><span class="y">&#9651;</span><span class="b">&#8413;</span><span class="a">&#10005;</span><span class="x">&#9633;</span></div> </div> </div>
</div>
<div class="sec sec-6"> <div class="sec-parent"> <div class="sec-fixed"> <div class="word"><span class="y">&#9651;</span><span class="b">&#8413;</span><span class="a">&#10005;</span><span class="x">&#9633;</span></div> </div> </div>
</div>
</body>
</html>

Clip fixed element test - Script Codes CSS Codes

html, body {height:100%;}
body {margin:0;}
.sec { position: relative; height: 8%;
}
.sec-parent { position: absolute; width: 100%; height: 100%; clip: rect(0, auto, auto, 0); color: #000;
}
.sec-fixed { position: fixed; display: table; width: 100%; height: 100%; font-size: 1440%; font-size: 27.5vmin; line-height: 1; top: 0; left: 0; right: 0; text-align: center;
}
.sec-fixed .word { display: table-cell; vertical-align: middle; white-space: nowrap;
}
.sec-fixed span { display: inline-block; letter-spacing: -.2em;;
}
.sec-fixed span:hover { color: yellow;
}
.sec-1 .y, .sec-6 .y {color:#17e363;}
.sec-1 .b, .sec-6 .b {color:#fe4444;}
.sec-1 .a, .sec-6 .a {color:#436bff;}
.sec-1 .x, .sec-6 .x {color:#ff499d;}
.sec-1, .sec-6 {height: 100%;}
.sec-2 .sec-parent {background: #17e363;}
.sec-2 .y {color:#fff;}
.sec-3 .sec-parent {background: #fe4444;}
.sec-3 .b {color:#fff;}
.sec-4 .sec-parent {background: #436bff;}
.sec-4 .a {color:#fff;}
.sec-5 .sec-parent {background: #ff499d;}
.sec-5 .x {color:#fff;}
.y { font-size: 1.25em; line-height: .825em;
}
.b { vertical-align: top;
}
.x { font-size: 1.515em; line-height: .475em; margin-left: .04em;
}
Clip fixed element test - Script Codes
Clip fixed element test - Script Codes
Home Page Home
Developer Acemir Sousa Mendes
Username acemir
Uploaded August 10, 2022
Rating 3
Size 2,091 Kb
Views 50,600
Do you need developer help for Clip fixed element test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Acemir Sousa Mendes (acemir) Script Codes
Name
Fading trail test with pixijs
CSS animation syntax tests
A Pen by Acemir Sousa Mendes
Atom
CSS Gradient hover buttons
Shrinking Triangles
Visual Identity Exercise
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!