/* Custom Audional Multimedia Player CSS Guide
Welcome to the Custom Audional Player CSS! This guide aims to offer clarity on using additional utility classes
and demonstrate how you can craft a unique Audional multimedia player interface.
Introduction:
Harness the potential of this stylesheet to give HTML developers the flexibility
and tools needed for creating dynamic and visually stunning Audional multimedia player interfaces with ease.
Below, find a walkthrough of the classes and features at your disposal, enabling customisation to suit your creative vision.
Quick Start:
* Download the CSS: Fetch the custom-music-player.css file from this repository.
* Integrate the CSS: Embed the downloaded CSS file in your HTML's section:htmlCopy code
Base Styles:
Lay a strong groundwork for your music player interface using the following:
* body: Colours the background and vertically and horizontally aligns content.
* #main-container: Caps the music player's width.
* #a: Offers a container that adjusts responsively.
Scrolling Text Animation:
Craft captivating scrolling text animations with:
* #scrolling-text: Positions and designs the scrolling text's container.
* #scrolling-text-content: Encases the scrolling text while introducing the animation.
Play & Stop Button Styling:
Empower user interaction with these classes:
* .playButton: Spruces up the play button.
* .stopButton: Designs the stop button.
Text Positioning:
Personalise text elements with:
* .centered: Text centralised within the player interface.
* .top-text: Stylises and positions the top's text.
Additional Classes:
* .bottom-text: Styles and positions the bottom's text.
* .full-width: Constructs containers stretching the full width for your content.
Utility Classes At A Glance:
Text Styling:
* Colored Text: .text-red, .text-green, .text-blue, .text-yellow
* Font Size: .small-text, .large-text
* Text Alignment: .center-text, .right-text
* Letter Spacing: .letter-spacing
Backgrounds & Shadows:
* Background Colours: .bg-red, .bg-green, .bg-blue, .bg-yellow
* Image Styling: .img-border, .img-shadow, .img-responsive
* Text Shadows: .shadow-sm, .shadow-md, .shadow-lg
Interactivity & Layouts:
* Hover Effects: .hover-red:hover, .hover-green:hover, .hover-blue:hover, .hover-yellow:hover
* Gradients: .gradient-bg
* Layouts: .flex-row, .flex-col, .grid-layout
* Interactive Elements: .btn, .link
* Dynamic Color Themes: .theme-primary, .theme-secondary
Crafting Your Player:
To customise your music player, infuse the provided classes into your HTML components. Here's a basic music player exemplar:
Custom Music Player
My Music Player
Play
Stop
Now Playing: Song Title
Feel empowered to mix, match, and innovate to attain your envisioned design!
Harness the Custom Music Player CSS for crafting riveting and interactive music player interfaces.
Delve into the classes and play around with combinations, designing memorable user experiences.
Additionally, feel free to modify the code to mirror your project's specific criteria.
Embark on your coding journey and revel in sculpting custom Audional players! */
@keyframes scrollText{0%,1%{transform:translateX(0%)}100%{transform:translateX(-100%)}}@keyframes pulsate{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}body{background-color:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;margin:0;color:#fff;overflow:hidden;position:relative;font-family:Georgia,serif;font-style:italic;font-weight:700}#main-container{position:relative;width:800px}#a{width:100%;max-width:800px}#d{display:none}#scrolling-text{font-family:monospace;font-size:18px;font-style:italic;font-weight:700;color:#ee0c0c;position:absolute;top:60%;left:50.3%;transform:translate(-50%,150px);white-space:nowrap;overflow:hidden;width:26.5vw;z-index:3;opacity:1}#scrolling-text-content{display:inline-block;animation:scrollText 150s linear infinite;animation-delay:3s;white-space:nowrap}.playButton,.stopButton{position:absolute;top:50%;width:74px;height:122px;background-color:#000;border:none;font-size:50px;cursor:pointer}
.playButton{left:32.7%;color:#0f0}.stopButton{left:59.1%;color:#fff}.centered{position:absolute;left:50%;transform:translateX(-50%);z-index:10;text-align:center;font:italic bold 700 Georgia,serif}.top-text{top:183px;font-size:30px;line-height:1.5;color:#ababab}.bottom-text{top:470px;left:50.3%;font-size:20px;font-weight:bolder;line-height:1;color:#303030}.full-width{position:relative;width:100%}.text-red{color:red}.text-green{color:green}.text-blue{color:blue}.text-yellow{color:#ff0}.bg-red{background-color:red}.bg-green{background-color:green}.bg-blue{background-color:blue}.bg-yellow{background-color:#ff0}.shadow-sm{text-shadow:1px 1px 2px #000}.shadow-md{text-shadow:2px 2px 4px #000}.shadow-lg{text-shadow:3px 3px 6px #000}.hover-red:hover{color:red}.hover-green:hover{color:green}.hover-blue:hover{color:blue}.hover-yellow:hover{color:#ff0}.gradient-bg{background:linear-gradient(to right,red,#ff0,green,blue)}.box-shadow{box-shadow:0 4px 6px rgba(0,0,0,.1)}.rounded{border-radius:8px}.transition{transition:all .3s ease-in-out}
.audio-loud .loud-effect{transform:scale(1.1)}.audio-quiet .quiet-effect{opacity:.5}.audio-beat .beat-effect{animation:pulsate .5s ease infinite}.fade-in{animation:fadeIn 1s forwards}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.slide-in-right{animation:slideInRight 1s forwards}@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}.hover-grow:hover{transform:scale(1.1)}.hover-shrink:hover{transform:scale(.9)}.hover-fade:hover{opacity:.7}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.m-0{margin:0}.mt-5{margin-top:5px}.p-10{padding:10px}.px-10{padding-left:10px;padding-right:10px}.small-text{font-size:14px}.large-text{font-size:24px}.center-text{text-align:center}.right-text{text-align:right}.letter-spacing{letter-spacing:1px}.img-border{border:1px solid #ccc}.img-shadow{box-shadow:0 2px 4px rgba(0,0,0,.2)}.img-responsive{max-width:100%;height:auto}.flex-row{display:flex;flex-direction:row}.flex-col{display:flex;flex-direction:column}.grid-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.btn{padding:10px 20px;background-color:#333;color:#fff;border:none;cursor:pointer}.link{text-decoration:underline;color:#00f}.theme-primary{color:var(--primary-color)}.theme-secondary{color:var(--secondary-color)}.t1{color:#ff00e1;position:relative;font-size:40px;top:-40px;text-shadow:2px 2px 4px rgba(187,0,255,.5);animation-name:colorPulseT2;animation-timing-function:ease-out,ease-out,linear;animation-duration:73s,73s;margin-top:0;z-index:3}.t2{color:#b1b1b1;position:relative;top:-20px;text-shadow:1px 1px 2px rgba(0,0,0,.5);animation:fadeIn 146s forwards;z-index:2}.t3{color:#f48301;font-size:40px;transform-origin:center;text-shadow:2px 2px 4px rgba(19,19,19,.5);animation:fadeIn 73s,colorPulseT2 73s ease-in-out reverse;z-index:1}.t2,.t3{opacity:100}.t3 .left{display:inline-block;animation:moveLeftApart 75s ease-in-out infinite}.t3 .right{display:inline-block;animation:moveRightApart 75s ease-in-out infinite}@keyframes fadeIn{0%,20%{opacity:0}100%{opacity:1}}@keyframes colorPulseT2{0%{color:#fcfca6;text-shadow:0 0 10px #fcfc83,0 0 20px #fcfc83,0 0 30px #fcfc83,0 0 40px #fcfc83}
20%{color:#a5fdc4;text-shadow:0 0 10px #82fcad,0 0 20px #82fcad,0 0 30px #82fcad,0 0 40px #82fcad}40%{color:#a5e3fd;text-shadow:0 0 10px #82d8fc,0 0 20px #82d8fc,0 0 30px #82d8fc,0 0 40px #82d8fc}60%{color:#ccfc9c;text-shadow:0 0 10px #bffc83,0 0 20px #bffc83,0 0 30px #bffc83,0 0 40px #bffc83}70%{color:#83fb83;text-shadow:0 0 10px #83fc83,0 0 20px #83fc83,0 0 30px #83fc83,0 0 40px #83fc83}75%{color:#ffab57;text-shadow:0 0 10px #f93,0 0 20px #f93,0 0 30px #f93,0 0 40px #f93}80%{color:#ff8000;text-shadow:0 0 10px #c60,0 0 20px #c60,0 0 30px #c60,0 0 40px #c60}85%{color:#ff0;text-shadow:0 0 10px #b3b300,0 0 20px #b3b300,0 0 30px #b3b300,0 0 40px #b3b300}90%{color:#24ffb6;text-shadow:0 0 10px #0fa,0 0 20px #0fa,0 0 30px #0fa,0 0 40px #0fa}95%{color:#fcfca6;text-shadow:0 0 10px #fcfc83,0 0 20px #fcfc83,0 0 30px #fcfc83,0 0 40px #fcfc83}100%{color:#ff8000;text-shadow:0 0 10px #ffaa00,0 0 20px #ffc766,0 0 30px #fbe7bb,0 0 40px #fcfc83}
20%{color:#fff;text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #fff}}@keyframes colorPulseT3{0%,100%{color:#606060;text-shadow:2px 2px 4px rgba(111,111,111,.5)}
50%{color:#909090;text-shadow:2px 2px 4px rgba(144,144,144,.5)}}@keyframes growAndShrink{0%,100%{transform:scale(.5)}50%{transform:scale(5)}}@keyframes moveLeftApart{0%,100%{transform:translateX(0)}50%{transform:translateX(-100px)}}@keyframes moveRightApart{0%,100%{transform:translateX(0)}50%{transform:translateX(100px)}}