CSS3 Record Collection

Developer
Jesper Hills
Size
3,602 Kb
Views
20,240
  1. CSS3 Record Collection Previews
  2. CSS3 Record Collection HTML Codes
  3. CSS3 Record Collection CSS Codes
  4. CSS3 Record Collection JS Codes

How do I make an css3 record collection?

What is a css3 record collection? How do you make a css3 record collection? This script and codes were developed by Jesper Hills on 13 October 2022, Thursday.

CSS3 Record Collection Previews
IQ Test

CSS3 Record Collection - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Record Collection</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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! */ /* Base visuals */
body { background: #1c2831; padding: 8em; overflow: hidden; }
h1 { color: #FFF; margin: 0px 0 20px; text-indent: 260px; font: bold 20px/20px Arial; }
/* Image sizes */
img { width: 140px; height: 140px; border-radius: 2px;
}
/* Records */
#records { float: left; position: relative; width: 140px; height: 140px;
}
#records div:nth-child(1){ left: 40px; bottom: 40px; z-index: 1; }
#records div:nth-child(2){ left: 30px; bottom: 30px; z-index: 2; }
#records div:nth-child(3){ left: 20px; bottom: 20px; z-index: 3; }
#records div:nth-child(4){ left: 10px; bottom: 10px; z-index: 4; }
#records div:nth-child(5){ left: 0px; bottom: 0px; z-index: 5; }
#records div:nth-child(6){ left: -10px; bottom: -10px; z-index: 6; }
/* LP Styles */
b { width: 60px; height: 60px; position: absolute; top: 5px; left: 5px; z-index: 1; background: black; border: 30px solid #111; box-shadow: 0 0 0px 2px black; padding: 5px; border-radius: 100%; transition: transform 0.7s, left 0.7s;
}
b img { width: 60px; height: 60px; display: block; border-radius: 100%;
}
b:after { content: ""; display: block; background: #1c2831; overflow: hidden; height: 6px; width: 6px; position: absolute; top: 50%; left: 50%; margin: -3px 0 0 -3px; border-radius: 100%;
}
/* Cover styles */
#records div { display: block; width: 140px; height: 140px; position: absolute; left: 0; box-shadow: 0 0 4px 0px rgba(0,0,0,0.6); transition: all 0.7s; backface-visibility: hidden;
}
#records div > img { display: block; position: relative; z-index: 2;
}
.open {
}
.open b { left: 80px !important; transform: rotate(65deg);
}
.over { margin-bottom: 50px; transform: rotate(-10deg); transform-origin: 0 100%;
}
/* navigation */
#nav { float: left; margin-left: 120px; margin-top: -10px;
}
#nav li { font: 14px/25px "Arial"; cursor: pointer; color: #adbcc6;
}
#nav li:hover { color: #FFF; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Björk</h1>
<section id="records"> <img src="//bit.ly/RtFqSN" alt="Debut (1993)" /> <img src="//bit.ly/Qd74TJ" alt="Post (1995)" /> <img src="//bit.ly/Qd79Xx" alt="Homogenic (1997)" /> <img src="//bit.ly/UPvEL9" alt="Vespertine (2001)" /> <img src="//bit.ly/Rb2Qiv" alt="Medulla (2004)" /> <img src="//bit.ly/UHjA46" alt="Volta (2007)" />
</section> <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 Record Collection - Script Codes CSS Codes

/* Base visuals */
body { background: #1c2831; padding: 8em; overflow: hidden; }
h1 { color: #FFF; margin: 0px 0 20px; text-indent: 260px; font: bold 20px/20px Arial; }
/* Image sizes */
img { width: 140px; height: 140px; border-radius: 2px;
}
/* Records */
#records { float: left; position: relative; width: 140px; height: 140px;
}
#records div:nth-child(1){ left: 40px; bottom: 40px; z-index: 1; }
#records div:nth-child(2){ left: 30px; bottom: 30px; z-index: 2; }
#records div:nth-child(3){ left: 20px; bottom: 20px; z-index: 3; }
#records div:nth-child(4){ left: 10px; bottom: 10px; z-index: 4; }
#records div:nth-child(5){ left: 0px; bottom: 0px; z-index: 5; }
#records div:nth-child(6){ left: -10px; bottom: -10px; z-index: 6; }
/* LP Styles */
b { width: 60px; height: 60px; position: absolute; top: 5px; left: 5px; z-index: 1; background: black; border: 30px solid #111; box-shadow: 0 0 0px 2px black; padding: 5px; border-radius: 100%; transition: transform 0.7s, left 0.7s;
}
b img { width: 60px; height: 60px; display: block; border-radius: 100%;
}
b:after { content: ""; display: block; background: #1c2831; overflow: hidden; height: 6px; width: 6px; position: absolute; top: 50%; left: 50%; margin: -3px 0 0 -3px; border-radius: 100%;
}
/* Cover styles */
#records div { display: block; width: 140px; height: 140px; position: absolute; left: 0; box-shadow: 0 0 4px 0px rgba(0,0,0,0.6); transition: all 0.7s; backface-visibility: hidden;
}
#records div > img { display: block; position: relative; z-index: 2;
}
.open {
}
.open b { left: 80px !important; transform: rotate(65deg);
}
.over { margin-bottom: 50px; transform: rotate(-10deg); transform-origin: 0 100%;
}
/* navigation */
#nav { float: left; margin-left: 120px; margin-top: -10px;
}
#nav li { font: 14px/25px "Arial"; cursor: pointer; color: #adbcc6;
}
#nav li:hover { color: #FFF; }

CSS3 Record Collection - Script Codes JS Codes

// Variables and Nav creation
var records = $("#records"), nav = $('<ul id="nav">').insertAfter(records), cover = records.children();
// Loop through records
for(var i=0; i < cover.length; i++){ // Grab image and title var img = cover[i].outerHTML, txt = cover[i].alt; // Make image a cover cover.eq(i).wrap('<div>'); // Append LP object cover.eq(i).after('<b>'+img+'</b>'); // Append to navigation nav.append('<li>'+txt+'</li>');
}
// List events
$("li", nav).on("click", function(){ // Open this record cover // Close others records.children().eq($(this).index()) .addClass("open") .siblings() .removeClass("open");
})
.on("mouseover", function(){ // Mouse over this record cover records.children().eq($(this).index()) .addClass("over");
})
.on("mouseout", function(){ // Mouse off all covers records.children().eq($(this).index()) .removeClass("over open");
});
CSS3 Record Collection - Script Codes
CSS3 Record Collection - Script Codes
Home Page Home
Developer Jesper Hills
Username nopr
Uploaded October 13, 2022
Rating 4.5
Size 3,602 Kb
Views 20,240
Do you need developer help for CSS3 Record Collection?

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!

Jesper Hills (nopr) Script Codes
Name
CSS Radar, variable speed
Click-activated fluid width slider
CSS3 Text Masking
Hidden Search
Triangular logo, scales to font size
Mouseover carousel with indicator
DRY-BEM with SCSS
CSS 3D Carousel
Smooth click-activated slider
Using label to style File Input
Create amazing Facebook ads 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!