Traveler CSS
How do I make an traveler css?
Inspiration : http://dribbble.com/shots/1125707-Infographic-Guy. What is a traveler css? How do you make a traveler css? This script and codes were developed by Damien Pereira Morberto on 14 December 2022, Wednesday.
Traveler CSS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Traveler CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="box"> <div id="man"> <div class="top"></div> <div class="hand"> <div class="divider"></div> <div class="divider"></div> <div class="divider"></div> </div> <div class="bottom"></div> <div class="bottom-s"></div> <div class="tong"> <div class="c"> <div></div> </div> </div> </div> <div id="panel"> <div id="bg"> </div> </div> <div id="bag"> <div class="btn"> Click me </div> </div> <div class="bag_hand"></div> <div class="shadow"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Traveler CSS - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light);
body { margin:0; padding:0; background-color:#eaeaea;
}
#box { position:absolute; left:50%; top:50%; width:400px; height:400px; margin:-150px -200px;
}
#bag { position:absolute; top:100px; width:200px; height:120px; border-radius:20px; background-color:#905321; overflow:hidden; transition:all .3s ease-in; -webkit-transition:all .3s ease-in; -moz-transition:all .3s ease-in; -ms-transition:all .3s ease-in; -o-transition:all .3s ease-in; box-shadow:-2px -2px 0px #D88E51; -webkit-transform-origin: 100px 120px; -moz-transform-origin: 100px 120px; -ms-transform-origin: 100px 120px; -o-transform-origin: 100px 120px; transform-origin: 100px 120px; z-index:9;
}
#panel { position:absolute; top:100px; width:200px; height:120px; border-radius:20px; background-color:#905321; box-shadow:-8px -8px 0px #D88E51; overflow:hidden; z-index:9;
}
#bag:before { content: ''; position: absolute; background-color: #B87035; width: 176px; height: 176px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: -28px; left: 12px;
}
.bag_hand { position: absolute; left: 66px; top: 72px; width: 58px; height: 6px; background-color: #B87035; border-radius: 5px;
}
.bag_hand:before, .bag_hand:after { content:''; position:absolute; width:6px; height:25px; background-color: #B87035;
}
.bag_hand:before { border-radius: 5px 0px 0px 0px;
}
.bag_hand:after { right:0px; border-radius: 0px 5px 0px 0px;
}
.shadow { left: 10px; top: 250px; position:absolute; width:180px; height:35px; background-color:rgba(0,0,0,.1); border-radius:50%; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in; -moz-transition:all .3s ease-in; -ms-transition:all .3s ease-in; -o-transition:all .3s ease-in;
}
.btn { background: #e3e3e3; padding: 5px 15px; position: absolute; -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); transform: rotate(-15deg); font:22px 'Shadows Into Light', cursive; border: 3px dotted #B87035; left: 48px; top: 36px; display: inline-block; color: #555; cursor:pointer;
}
#bg { height:100%; border-radius:20px; box-shadow: inset -8px -8px 0px rgba(0,0,0,.3);
}
#box.opened > #bag { -webkit-transform: rotateX(75deg); -moz-transform: rotateX(75deg); -ms-transform: rotateX(75deg); -o-transform: rotateX(75deg); transform: rotateX(75deg);
}
#box.opened > .shadow { height: 60px;
}
#man { display: inline-block; position: absolute; left: -10px;
}
#man .top { width: 90px; height: 50px; background-color: #55a660; position: absolute; left: 45px;
}
#man .top:after { content: ''; position: absolute; width: 30px; height: 82px; background-color: #F7C398; right: 19px;
}
#man .top:before { content: ''; position: absolute; width: 65px; height: 50px; background-color: #98a4a6; left: 10px; bottom: -50px;
}
#man .hand { width: 38px; height: 35px; position:absolute; border-radius:3px; background-color: #F7C398; z-index: 9; top: 50px; left:86px;
}
#man .hand:before { width: 0; height: 0; position: absolute; content: ''; border-top: 22px solid transparent; border-left: 7px solid #F7C398; left: 37px;
}
.divider { width: 2px; height: 25px; background: #ECB98E; margin: 10px 4px 0px; float: left; position: relative;
}
.divider:nth-child(1) { margin-left: 8px;
}
#man .bottom { position: absolute; top: 190px; left: 78px; width: 35px; height: 82px; background-color: #F7C398; z-index: 1; border-radius:5px;
}
#man .bottom:before { content: ''; position: absolute; border-top: 22px solid transparent; border-left: 63px solid #F7C398; top: 58px; left: 30px; width: 0; height: 0;
}
#man .bottom:after { content: ''; position: absolute; background-color: F7C398; width: 20px; height: 6px; border-radius: 5px; left: 68px; top: 72px;
}
.tong { width: 102px; height: 6px; background: #818b8d; position: absolute; top: 268px; left: 70px; z-index: 999; border-radius: 5px;
}
.c { overflow: hidden; height: 15px; position: absolute; top: -15px; left: 42px;
}
.c div { border: 5px solid #818b8d; border-radius: 50%; width: 40px; height: 30px;
}
.bottom-s { position: absolute; background-color: #F7C398; width: 20px; height: 6px; border-radius: 5px; left: 146px; top: 262px; z-index: 9999;
}
Traveler CSS - Script Codes JS Codes
$(function(){ $('.btn').click(function(){ $('#box').hasClass('opened') ? $('#box').removeClass('opened'):$('#box').addClass('opened') })
})
Developer | Damien Pereira Morberto |
Username | damienpm |
Uploaded | December 14, 2022 |
Rating | 3.5 |
Size | 2,909 Kb |
Views | 16,192 |
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!
Name | Size |
One div gear | 1,809 Kb |
Xaoweb Logo | 2,010 Kb |
Captain America CSS | 1,893 Kb |
Flat design color chart | 2,074 Kb |
Flat design iframe | 1,819 Kb |
Batman CSS | 2,095 Kb |
Custom checkboxes | 1,698 Kb |
A Pen by Damien Pereira Morberto | 1,928 Kb |
Flat design camera with CSS animation | 2,913 Kb |
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!
Name | Username | Size |
Ball Physics | Getsetbro | 3,149 Kb |
Christ the Redeemer | Prashantsani | 2,208 Kb |
Jochaho Skeleton | Dhanushbadge | 1,689 Kb |
Snow collision | Wojtek1150 | 3,542 Kb |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
Count up | Alanshortis | 2,391 Kb |
Sort the Knowlege | Eprouver | 3,915 Kb |
Bezier Animation with straight paths | Rhernando | 2,087 Kb |
Toggle menu | Seyedi | 2,279 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!