Created
May 24, 2017 22:32
-
-
Save dave-4k/f23a97aeaf76f737e025943ccddff088 to your computer and use it in GitHub Desktop.
Front End Day 93 - MacOS Dock with CSS!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Front End Day 93 - MacOS Dock with CSS! | |
*/ | |
html, body { padding: 0px; margin: 0px; background: #222; font-family: 'Ubuntu', sans-serif; color: #FFF; height: 100%;}body { background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/545665/bg_mountainroad.jpg"); background-size: cover; background-position: center;}.dockposition { position: absolute; height: 100px; width: 100%; bottom: 0px;}.dockposition .content { width: 680px; margin: auto; height: 100%; background: rgba(255, 255, 255, 0.5); border-radius: 4px 4px 0px 0px; position: relative;}.dockposition .content .back { position: absolute; height: 100%; width: 100%; left: 0px; overflow: hidden;}.dockposition .content .back:after { content: ''; background: rgba(255, 255, 255, 0.25); width: 100%; height: 100%; top: 0px; left: 0px; position: absolute; -webkit-filter: blur(10px); filter: blur(10px);}.dockposition .icons { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex;}.dockposition .icons > .icon { margin: auto; display: inline-block; box-sizing: border-box; width: 70px; height: 70px; border-radius: 10px; background: rgba(255, 255, 255, 0.75); border: 0px solid rgba(0, 0, 0, 0.75); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform-style: flat; transform-style: flat; outline: none; cursor: pointer;}.dockposition .icons > .icon:focus:not(#downloads) { background: rgba(255, 255, 255, 0.5); -webkit-animation: bounce 1s; animation: bounce 1s;}.dockposition .icons > .icon i { margin: auto; color: rgba(0, 0, 0, 0.75); font-size: 36px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}.dockposition .icons > .icon .title { z-index: 2; position: absolute; top: -110%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: rgba(0, 0, 0, 0.75); padding: 10px 15px; border-radius: 4px; opacity: 0; -webkit-transition: all 0.25s; transition: all 0.25s;}.dockposition .icons > .icon .title:after { content: ''; position: absolute; border: 10px solid transparent; border-top: 10px solid rgba(0, 0, 0, 0.75); bottom: -20px; left: 50%; -webkit-transform: translateX(-50%) translateY(0px); transform: translateX(-50%) translateY(0px);}.dockposition .icons > .icon:hover .title { opacity: 1;}.dockposition .icons > .icon#downloads { margin-left: 40px;}.dockposition .icons > .icon#downloads:before { content: ''; height: 100%; position: absolute; left: -26px; border-left: 1px solid rgba(0, 0, 0, 0.5);}.dockposition .icons > .icon#downloads:after { position: absolute; content: '6'; width: 30px; height: 30px; font-size: 14px; background: #f22; opacity: 0.8; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); border-radius: 100%; line-height: 30px; left: 70%; top: -6px;}.dockposition .icons > .icon#downloads:focus, .dockposition .icons > .icon#downloads.demo { pointer-events: none;}.dockposition .icons > .icon#downloads:focus .download, .dockposition .icons > .icon#downloads.demo .download { opacity: 1;}.dockposition .icons > .icon#downloads:focus .download:nth-of-type(1), .dockposition .icons > .icon#downloads.demo .download:nth-of-type(1) { -webkit-transform: translateY(0%) rotateZ(0deg) translateX(0px); transform: translateY(0%) rotateZ(0deg) translateX(0px);}.dockposition .icons > .icon#downloads:focus .download:nth-of-type(2), .dockposition .icons > .icon#downloads.demo .download:nth-of-type(2) { -webkit-transform: translateY(-105%) rotateZ(2deg) translateX(2.5px); transform: translateY(-105%) rotateZ(2deg) translateX(2.5px);}.dockposition .icons > .icon#downloads:focus .download:nth-of-type(3), .dockposition .icons > .icon#downloads.demo .download:nth-of-type(3) { -webkit-transform: translateY(-210%) rotateZ(4deg) translateX(5px); transform: translateY(-210%) rotateZ(4deg) translateX(5px);}.dockposition .icons > .icon#downloads:focus .download:nth-of-type(4), .dockposition .icons > .icon#downloads.demo .download:nth-of-type(4) { -webkit-transform: translateY(-315%) rotateZ(6deg) translateX(7.5px); transform: translateY(-315%) rotateZ(6deg) translateX(7.5px);}.dockposition .icons > .icon#downloads:focus .download:nth-of-type(5), .dockposition .icons > .icon#downloads.demo .download:nth-of-type(5) { -webkit-transform: translateY(-420%) rotateZ(8deg) translateX(10px); transform: translateY(-420%) rotateZ(8deg) translateX(10px);}.dockposition .icons > .icon#downloads:focus .download:nth-of-type(6), .dockposition .icons > .icon#downloads.demo .download:nth-of-type(6) { -webkit-transform: translateY(-525%) rotateZ(10deg) translateX(12.5px); transform: translateY(-525%) rotateZ(10deg) translateX(12.5px);}.dockposition .icons > .icon#downloads:focus .download:nth-of-type(7), .dockposition .icons > .icon#downloads.demo .download:nth-of-type(7) { -webkit-transform: translateY(-630%) rotateZ(12deg) translateX(15px); transform: translateY(-630%) rotateZ(12deg) translateX(15px);}.dockposition .icons > .icon#downloads:focus .open, .dockposition .icons > .icon#downloads.demo .open { opacity: 0;}.dockposition .icons > .icon#downloads:focus .close, .dockposition .icons > .icon#downloads.demo .close { opacity: 1;}.dockposition .icons > .icon#downloads .open, .dockposition .icons > .icon#downloads .close { position: absolute; opacity: 1; -webkit-transition: all 0.5s; transition: all 0.5s; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); opacity: 1;}.dockposition .icons > .icon#downloads .close { opacity: 0;}.dockposition .icons > .icon#downloads .download { position: absolute; top: -120%; right: 8%; width: 350px; opacity: 0; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; z-index: 1; text-align: right;}.dockposition .icons > .icon#downloads .download .text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: inline-block; text-align: right; margin: auto; padding: 5px 10px; background: rgba(0, 0, 0, 0.75); border-radius: 4px; vertical-align: top; margin-top: 14px;}.dockposition .icons > .icon#downloads .download .icon { display: inline-block; width: 60px; text-align: right; vertical-align: top;}.dockposition .icons > .icon#downloads .download .icon i { color: #FFF; font-size: 60px;}@-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0px) translateX(0.1px); transform: translateY(0px) translateX(0.1px); } 25% { -webkit-transform: translateY(-40px) translateX(0.1px); transform: translateY(-40px) translateX(0.1px); } 50% { -webkit-transform: translateY(0px) translateX(0.1px); transform: translateY(0px) translateX(0.1px); } 75% { -webkit-transform: translateY(-20px) translateX(0.1px); transform: translateY(-20px) translateX(0.1px); } 100% { -webkit-transform: translateY(0px) translateX(0.1px); transform: translateY(0px) translateX(0.1px); }}@keyframes bounce { 0% { -webkit-transform: translateY(0px) translateX(0.1px); transform: translateY(0px) translateX(0.1px); } 25% { -webkit-transform: translateY(-40px) translateX(0.1px); transform: translateY(-40px) translateX(0.1px); } 50% { -webkit-transform: translateY(0px) translateX(0.1px); transform: translateY(0px) translateX(0.1px); } 75% { -webkit-transform: translateY(-20px) translateX(0.1px); transform: translateY(-20px) translateX(0.1px); } 100% { -webkit-transform: translateY(0px) translateX(0.1px); transform: translateY(0px) translateX(0.1px); }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="dockposition"> <div class="content"> <div class="back"></div> <div class="icons"> <div class="icon" tabindex="1"><i class="material-icons">apps</i> <div class="title">Apps</div> </div> <div class="icon" tabindex="1"><i class="material-icons">folder_open</i> <div class="title">Finder</div> </div> <div class="icon" tabindex="1"><i class="material-icons">settings_brightness</i> <div class="title">Brightness</div> </div> <div class="icon" tabindex="1"><i class="material-icons">settings_voice</i> <div class="title">Voice</div> </div> <div class="icon" tabindex="1"><i class="material-icons">settings</i> <div class="title">Settings</div> </div> <div class="icon" tabindex="1"><i class="material-icons">tune</i> <div class="title">Sliders</div> </div> <div class="icon" id="downloads" tabindex="1"><i class="material-icons open">open_in_browser</i><i class="material-icons close">system_update_alt</i> <div class="title">Downloads</div> <div class="downloads"> <div class="download"> <div class="text">Sublime Text Build 3126.dmg</div> <div class="icon"><i class="material-icons">description</i></div> </div> <div class="download"> <div class="text">googlechrome.dmg</div> <div class="icon"><i class="material-icons">description</i></div> </div> <div class="download"> <div class="text">mode-v7.90-x64.dmg</div> <div class="icon"><i class="material-icons">description</i></div> </div> <div class="download"> <div class="text">VirtualBox-5.1.22-115126.zip</div> <div class="icon"><i class="material-icons">unarchive</i></div> </div> <div class="download"> <div class="text">snapshot-03-31-2017-36MP.jpg</div> <div class="icon"><i class="material-icons">insert_photo</i></div> </div> <div class="download"> <div class="text">Open in Finder</div> <div class="icon"><i class="material-icons">open_in_new</i></div> </div> </div> </div> </div> </div></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
setTimeout(function(){document.getElementById('downloads').classList.add('demo')}, 1000)document.body.addEventListener('click', function(){ document.getElementById('downloads').classList.remove('demo')}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split-vertical","fontsize":"100","seethrough":"","codespector_bootstrap":"","codespector_jquery":"","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment