CSS3 Experiments

Developer
Manoz
Size
5,485 Kb
Views
44,528
  1. CSS3 Experiments Previews
  2. CSS3 Experiments HTML Codes
  3. CSS3 Experiments CSS Codes
  4. CSS3 Experiments JS Codes

How do I make an css3 experiments?

A small lab with some css3 experiments. What is a css3 experiments? How do you make a css3 experiments? This script and codes were developed by Manoz on 14 June 2022, Tuesday.

CSS3 Experiments Previews
IQ Test

CSS3 Experiments - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Experiments</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* * Have fun and remember to share what you learn :)
*/
/* -------------------------------------------------- =Default css to make the demo more pretty
----------------------------------------------------- */
@import 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600';
body { margin: 0 auto; padding: 20px; max-width: 1200px; overflow-y: scroll; font-family: 'Open Sans',sans-serif; font-weight: 400; color: #777; background-color: #f7f7f7; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
}
.toggle-trigger { position: relative; margin: 10px 0 0; padding: 12px 0 12px 34px; background-color: #e7e7e7; background-color: rgba(0,0,0,0.06); cursor: pointer;
}
.toggle-trigger h3 { margin: 0; padding: 0;
}
.toggle-trigger .plus { position: absolute; top: 7px; left: 0;
}
.open { box-shadow: 0 1px 0 rgba(0,0,0,.1), 0 2px 0 rgba(255,255,255,.9);
}
.toggle-content { display: none; padding: 15px; overflow: hidden; background-color: #e7e7e7; background-color: rgba(0,0,0,.06);
}
h1 { padding-bottom: 15px; border-bottom: 1px solid #d8d8d8; font-weight: 600;
}
h1 span {font-family: monospace,serif;}
p { margin: 0; padding: 10px 0; color: #777;
}
footer {text-align: center;}
.coffee {margin-bottom: -4px;}
footer p { display: inline-block; zoom: 1; font-size: 14px; vertical-align: baseline;
}
.clear {clear:both;}
@keyframes wiggle { 0% {transform:rotate(3deg);} 50% {transform:rotate(-3deg);} 100% {transform:rotate(3deg);}
}
.wiggle:hover { display: inline-block; animation: wiggle .4s infinite;
}
/* -------------------------------------------------- =Funny box
----------------------------------------------------- */
.funny-section { position: relative; width: 80%; height: 350px; margin: 0 auto; border-radius: 5px; background-color: #d8d8d8;
}
.funny-btn { position: absolute; bottom: 20px; left: 390px; padding: 10px 50px; border: none; border-radius: 2px; text-align: center; color: #fff; background-color: #f5634a; box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.box { position: absolute; top: 20px; left: 280px; width: 400px; height: 250px; border-radius: 3px; background-color: #4b9cdb; transition: all .3s ease-in-out;
}
.p1, .p2, .p3, .p4,
.p5, .p6, .p7, .p8, .p9 { position: absolute; top: 118px; left: 440px; width: 80px; height: 83px; border-radius: 2px; background-color: #5A7DB9; transition: all .8s cubic-bezier(.5,-0.5,.5,1.6); transform: translate3d(0,0,0);
}
.color-change { background-color: #f5634a;
}
.p1 {transition-delay: .1s;}
.p2 {transition-delay: .2s;}
.p3 {transition-delay: .3s;}
.p4 {transition-delay: .4s;}
.p5 {transition-delay: .5s;}
.p6 {transition-delay: .6s;}
.p7 {transition-delay: .7s;}
.p8 {transition-delay: .8s;}
.p9 {transition-delay: 1s;}
.active .p1 { width: 160px; border-radius: 2px 0 0 2px; transform: translate(-160px,-98px);
}
.active .p2 { width: 160px; border-radius: 0; transform: translate(0,-98px);
}
.active .p3 { height: 83px; border-radius: 0 2px 0 0; transform: translate(160px,-98px);
}
.active .p4 { height: 90px; border-radius: 0; transform: translate(160px,-15px);
}
.active .p5 { border-radius: 0 0 2px 0; transform: translate(160px,72px);
}
.active .p6 { width: 160px; border-radius: 0; transform: translate(0,72px);
}
.active .p7 { width: 160px; border-radius: 0 0 0 2px; transform: translate(-160px,72px);
}
.active .p8 { height: 90px; border-radius: 0; transform: translate(-160px,-18px);
}
.active .p9 { padding: 2px 80px; border-radius: 0; transform: translate(-80px,-15px);
}
/* -------------------------------------------------- =CSS3 Loading animations
----------------------------------------------------- */
.load-wrapp { float: left; width: 100px; height: 100px; margin-right: 10px; padding: 20px 20px 20px; border-radius: 5px; text-align: center; background-color: #d8d8d8;
}
.load p {padding: 0 0 20px;}
.load:last-child {margin-right: 0;}
.line { display: inline-block; width: 15px; height: 15px; border-radius: 15px; background-color: #4b9cdb;
}
.circle { width: 10px; height: 10px; margin: 0 auto; padding: 10px; border: 7px dashed #4b9cdb; border-radius: 100%;
}
.load-1:hover .line:nth-last-child(1) {animation: loadingA 1.5s 1s infinite;}
.load-1:hover .line:nth-last-child(2) {animation: loadingA 1.5s .5s infinite;}
.load-1:hover .line:nth-last-child(3) {animation: loadingA 1.5s 0s infinite;}
.load-2:hover .line:nth-last-child(1) {animation: loadingB 1.5s 1s infinite;}
.load-2:hover .line:nth-last-child(2) {animation: loadingB 1.5s .5s infinite;}
.load-2:hover .line:nth-last-child(3) {animation: loadingB 1.5s 0s infinite;}
.load-3:hover .line:nth-last-child(1) {animation: loadingC .6s .1s linear infinite;}
.load-3:hover .line:nth-last-child(2) {animation: loadingC .6s .2s linear infinite;}
.load-3:hover .line:nth-last-child(3) {animation: loadingC .6s .3s linear infinite;}
.load-4:hover .circle {animation: loadingD 1.5s .3s cubic-bezier(.17,.37,.43,.67) infinite;}
@keyframes loadingA { 0 {height: 15px;} 50% {height: 35px;} 100% {height: 15px;}
}
@keyframes loadingB { 0 {width: 15px;} 50% {width: 35px;} 100% {width: 15px;}
}
@keyframes loadingC { 0 {transform: translate(0,0);} 50% {transform: translate(0,15px);} 100% {transform: translate(0,0);}
}
@keyframes loadingD { 0 {transform: rotate(0deg);} 50% {transform: rotate(180deg);} 100% {transform: rotate(360deg);}
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body> <header> <h1>Welcome to my small lab with some <span class="wiggle">css</span> experiments :)</h1> </header> <p>I add things quite regularly so don't hesitate to come back =)</p> <section> <div class="toggle-trigger"> <img class="plus" src="http://lab.mwanoz.fr/funny-things/img/plus.svg" alt="" > <h3>Funny box</h3> </div> <div class="toggle-content"> <p>I don't know what to do with this, but it's funny :)</p> <div class="funny-section"> <div class="box"></div> <div class="p1"></div> <div class="p2"></div> <div class="p3"></div> <div class="p4"></div> <div class="p5"></div> <div class="p6"></div> <div class="p7"></div> <div class="p8"></div> <div class="p9"></div> <button class="funny-btn">Hover me :)</button> </div> <p>Remember to add prefixes. In this demo, I use "prefixfree.js" which makes the job for me.</p> </div> </section> <section> <div class="toggle-trigger"> <img class="plus" src="http://lab.mwanoz.fr/funny-things/img/plus.svg" alt="" > <h3>CSS3 loading animations</h3> </div> <div class="toggle-content"> <p>Hover a block to activate</p> <div class="load-wrapp"> <div class="load-1"> <p>Loading 1</p> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <div class="load-wrapp"> <div class="load-2"> <p>Loading 2</p> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <div class="load-wrapp"> <div class="load-3"> <p>Loading 3</p> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </div> <div class="load-wrapp"> <div class="load-4"> <p>Loading 4</p> <div class="circle"></div> </div> </div> </div> <div class="clear"></div> </section>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS3 Experiments - Script Codes CSS Codes

/* * Have fun and remember to share what you learn :)
*/
/* -------------------------------------------------- =Default css to make the demo more pretty
----------------------------------------------------- */
@import 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600';
body { margin: 0 auto; padding: 20px; max-width: 1200px; overflow-y: scroll; font-family: 'Open Sans',sans-serif; font-weight: 400; color: #777; background-color: #f7f7f7; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
}
.toggle-trigger { position: relative; margin: 10px 0 0; padding: 12px 0 12px 34px; background-color: #e7e7e7; background-color: rgba(0,0,0,0.06); cursor: pointer;
}
.toggle-trigger h3 { margin: 0; padding: 0;
}
.toggle-trigger .plus { position: absolute; top: 7px; left: 0;
}
.open { box-shadow: 0 1px 0 rgba(0,0,0,.1), 0 2px 0 rgba(255,255,255,.9);
}
.toggle-content { display: none; padding: 15px; overflow: hidden; background-color: #e7e7e7; background-color: rgba(0,0,0,.06);
}
h1 { padding-bottom: 15px; border-bottom: 1px solid #d8d8d8; font-weight: 600;
}
h1 span {font-family: monospace,serif;}
p { margin: 0; padding: 10px 0; color: #777;
}
footer {text-align: center;}
.coffee {margin-bottom: -4px;}
footer p { display: inline-block; zoom: 1; font-size: 14px; vertical-align: baseline;
}
.clear {clear:both;}
@keyframes wiggle { 0% {transform:rotate(3deg);} 50% {transform:rotate(-3deg);} 100% {transform:rotate(3deg);}
}
.wiggle:hover { display: inline-block; animation: wiggle .4s infinite;
}
/* -------------------------------------------------- =Funny box
----------------------------------------------------- */
.funny-section { position: relative; width: 80%; height: 350px; margin: 0 auto; border-radius: 5px; background-color: #d8d8d8;
}
.funny-btn { position: absolute; bottom: 20px; left: 390px; padding: 10px 50px; border: none; border-radius: 2px; text-align: center; color: #fff; background-color: #f5634a; box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.box { position: absolute; top: 20px; left: 280px; width: 400px; height: 250px; border-radius: 3px; background-color: #4b9cdb; transition: all .3s ease-in-out;
}
.p1, .p2, .p3, .p4,
.p5, .p6, .p7, .p8, .p9 { position: absolute; top: 118px; left: 440px; width: 80px; height: 83px; border-radius: 2px; background-color: #5A7DB9; transition: all .8s cubic-bezier(.5,-0.5,.5,1.6); transform: translate3d(0,0,0);
}
.color-change { background-color: #f5634a;
}
.p1 {transition-delay: .1s;}
.p2 {transition-delay: .2s;}
.p3 {transition-delay: .3s;}
.p4 {transition-delay: .4s;}
.p5 {transition-delay: .5s;}
.p6 {transition-delay: .6s;}
.p7 {transition-delay: .7s;}
.p8 {transition-delay: .8s;}
.p9 {transition-delay: 1s;}
.active .p1 { width: 160px; border-radius: 2px 0 0 2px; transform: translate(-160px,-98px);
}
.active .p2 { width: 160px; border-radius: 0; transform: translate(0,-98px);
}
.active .p3 { height: 83px; border-radius: 0 2px 0 0; transform: translate(160px,-98px);
}
.active .p4 { height: 90px; border-radius: 0; transform: translate(160px,-15px);
}
.active .p5 { border-radius: 0 0 2px 0; transform: translate(160px,72px);
}
.active .p6 { width: 160px; border-radius: 0; transform: translate(0,72px);
}
.active .p7 { width: 160px; border-radius: 0 0 0 2px; transform: translate(-160px,72px);
}
.active .p8 { height: 90px; border-radius: 0; transform: translate(-160px,-18px);
}
.active .p9 { padding: 2px 80px; border-radius: 0; transform: translate(-80px,-15px);
}
/* -------------------------------------------------- =CSS3 Loading animations
----------------------------------------------------- */
.load-wrapp { float: left; width: 100px; height: 100px; margin-right: 10px; padding: 20px 20px 20px; border-radius: 5px; text-align: center; background-color: #d8d8d8;
}
.load p {padding: 0 0 20px;}
.load:last-child {margin-right: 0;}
.line { display: inline-block; width: 15px; height: 15px; border-radius: 15px; background-color: #4b9cdb;
}
.circle { width: 10px; height: 10px; margin: 0 auto; padding: 10px; border: 7px dashed #4b9cdb; border-radius: 100%;
}
.load-1:hover .line:nth-last-child(1) {animation: loadingA 1.5s 1s infinite;}
.load-1:hover .line:nth-last-child(2) {animation: loadingA 1.5s .5s infinite;}
.load-1:hover .line:nth-last-child(3) {animation: loadingA 1.5s 0s infinite;}
.load-2:hover .line:nth-last-child(1) {animation: loadingB 1.5s 1s infinite;}
.load-2:hover .line:nth-last-child(2) {animation: loadingB 1.5s .5s infinite;}
.load-2:hover .line:nth-last-child(3) {animation: loadingB 1.5s 0s infinite;}
.load-3:hover .line:nth-last-child(1) {animation: loadingC .6s .1s linear infinite;}
.load-3:hover .line:nth-last-child(2) {animation: loadingC .6s .2s linear infinite;}
.load-3:hover .line:nth-last-child(3) {animation: loadingC .6s .3s linear infinite;}
.load-4:hover .circle {animation: loadingD 1.5s .3s cubic-bezier(.17,.37,.43,.67) infinite;}
@keyframes loadingA { 0 {height: 15px;} 50% {height: 35px;} 100% {height: 15px;}
}
@keyframes loadingB { 0 {width: 15px;} 50% {width: 35px;} 100% {width: 15px;}
}
@keyframes loadingC { 0 {transform: translate(0,0);} 50% {transform: translate(0,15px);} 100% {transform: translate(0,0);}
}
@keyframes loadingD { 0 {transform: rotate(0deg);} 50% {transform: rotate(180deg);} 100% {transform: rotate(360deg);}
}

CSS3 Experiments - Script Codes JS Codes

/* -------------------------------------------------- =Toggles
----------------------------------------------------- */
jQuery(function($) { $( ".toggle-trigger" ).click(function() { $(this).toggleClass( "open" ).next().slideToggle( "fast" ); return false; });
});
/* -------------------------------------------------- =Funny box
----------------------------------------------------- */
jQuery(function($) { var point = '.p1, .p2, .p3, .p4, .p5, .p6, .p7, .p8, .p9'; $( ".funny-btn" ).hover( function() { $( point ).addClass( "color-change" ); $( ".funny-section" ).addClass( "active" ); }, function() { $( point ).removeClass( "color-change" ); $( ".funny-section" ).removeClass( "active" ); } );
});
CSS3 Experiments - Script Codes
CSS3 Experiments - Script Codes
Home Page Home
Developer Manoz
Username Manoz
Uploaded June 14, 2022
Rating 3
Size 5,485 Kb
Views 44,528
Do you need developer help for CSS3 Experiments?

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!

Manoz (Manoz) Script Codes
Name
Simple and easy Grid
Advanced css3 transition delays
Timeline visualizer for GSAP Timelines
Wild title
Toggle button in pure CSS
CSS3 Loading animations
Share Widget UI
Stunning CSS box-shadow
Lovel 14
Pure css social buttons box
Create amazing art & images 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!