CSS3 Only - Semantic Sandwich
How do I make an css3 only - semantic sandwich?
With <cheese>, <tomato> and <ham>!. What is a css3 only - semantic sandwich? How do you make a css3 only - semantic sandwich? This script and codes were developed by Fabrizio Bianchi on 07 August 2022, Sunday.
CSS3 Only - Semantic Sandwich Previews
CSS3 Only - Semantic Sandwich - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Only - Semantic Sandwich</title> <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! */ @import url(http://fonts.googleapis.com/css?family=Lobster|Shadows+Into+Light|PT+Sans);
sandwich *:nth-child(1) { top: -2000px; z-index: 1000; animation: animate0 2s ease-out 2s forwards;
}
@keyframes animate0 { 93% { top: 5px; } 100% { top: 0px; }
}
sandwich *:nth-child(2) { top: -2000px; z-index: 999; animation: animate1 2s ease-out 1.9s forwards;
}
@keyframes animate1 { 93% { top: 15px; } 100% { top: 10px; }
}
sandwich *:nth-child(3) { top: -2000px; z-index: 998; animation: animate2 2s ease-out 1.8s forwards;
}
@keyframes animate2 { 93% { top: 25px; } 100% { top: 20px; }
}
sandwich *:nth-child(4) { top: -2000px; z-index: 997; animation: animate3 2s ease-out 1.7s forwards;
}
@keyframes animate3 { 93% { top: 35px; } 100% { top: 30px; }
}
sandwich *:nth-child(5) { top: -2000px; z-index: 996; animation: animate4 2s ease-out 1.6s forwards;
}
@keyframes animate4 { 93% { top: 45px; } 100% { top: 40px; }
}
sandwich *:nth-child(6) { top: -2000px; z-index: 995; animation: animate5 2s ease-out 1.5s forwards;
}
@keyframes animate5 { 93% { top: 55px; } 100% { top: 50px; }
}
sandwich *:nth-child(7) { top: -2000px; z-index: 994; animation: animate6 2s ease-out 1.4s forwards;
}
@keyframes animate6 { 93% { top: 65px; } 100% { top: 60px; }
}
sandwich *:nth-child(8) { top: -2000px; z-index: 993; animation: animate7 2s ease-out 1.3s forwards;
}
@keyframes animate7 { 93% { top: 75px; } 100% { top: 70px; }
}
sandwich *:nth-child(9) { top: -2000px; z-index: 992; animation: animate8 2s ease-out 1.2s forwards;
}
@keyframes animate8 { 93% { top: 85px; } 100% { top: 80px; }
}
sandwich *:nth-child(10) { top: -2000px; z-index: 991; animation: animate9 2s ease-out 1.1s forwards;
}
@keyframes animate9 { 93% { top: 95px; } 100% { top: 90px; }
}
sandwich *:nth-child(11) { top: -2000px; z-index: 990; animation: animate10 2s ease-out 1s forwards;
}
@keyframes animate10 { 93% { top: 105px; } 100% { top: 100px; }
}
sandwich *:nth-child(12) { top: -2000px; z-index: 989; animation: animate11 2s ease-out 0.9s forwards;
}
@keyframes animate11 { 93% { top: 115px; } 100% { top: 110px; }
}
sandwich *:nth-child(13) { top: -2000px; z-index: 988; animation: animate12 2s ease-out 0.8s forwards;
}
@keyframes animate12 { 93% { top: 125px; } 100% { top: 120px; }
}
sandwich *:nth-child(14) { top: -2000px; z-index: 987; animation: animate13 2s ease-out 0.7s forwards;
}
@keyframes animate13 { 93% { top: 135px; } 100% { top: 130px; }
}
sandwich *:nth-child(15) { top: -2000px; z-index: 986; animation: animate14 2s ease-out 0.6s forwards;
}
@keyframes animate14 { 93% { top: 145px; } 100% { top: 140px; }
}
sandwich *:nth-child(16) { top: -2000px; z-index: 985; animation: animate15 2s ease-out 0.5s forwards;
}
@keyframes animate15 { 93% { top: 155px; } 100% { top: 150px; }
}
sandwich *:nth-child(17) { top: -2000px; z-index: 984; animation: animate16 2s ease-out 0.4s forwards;
}
@keyframes animate16 { 93% { top: 165px; } 100% { top: 160px; }
}
sandwich *:nth-child(18) { top: -2000px; z-index: 983; animation: animate17 2s ease-out 0.3s forwards;
}
@keyframes animate17 { 93% { top: 175px; } 100% { top: 170px; }
}
sandwich *:nth-child(19) { top: -2000px; z-index: 982; animation: animate18 2s ease-out 0.2s forwards;
}
@keyframes animate18 { 93% { top: 185px; } 100% { top: 180px; }
}
sandwich *:nth-child(20) { top: -2000px; z-index: 981; animation: animate19 2s ease-out 0.1s forwards;
}
@keyframes animate19 { 93% { top: 195px; } 100% { top: 190px; }
}
sandwich *:nth-child(21) { top: -2000px; z-index: 980; animation: animate20 2s ease-out 0s forwards;
}
@keyframes animate20 { 93% { top: 205px; } 100% { top: 200px; }
}
sandwich *:nth-child(22) { top: -2000px; z-index: 979; animation: animate21 2s ease-out -0.1s forwards;
}
@keyframes animate21 { 93% { top: 215px; } 100% { top: 210px; }
}
sandwich *:nth-child(23) { top: -2000px; z-index: 978; animation: animate22 2s ease-out -0.2s forwards;
}
@keyframes animate22 { 93% { top: 225px; } 100% { top: 220px; }
}
sandwich *:nth-child(24) { top: -2000px; z-index: 977; animation: animate23 2s ease-out -0.3s forwards;
}
@keyframes animate23 { 93% { top: 235px; } 100% { top: 230px; }
}
sandwich *:nth-child(25) { top: -2000px; z-index: 976; animation: animate24 2s ease-out -0.4s forwards;
}
@keyframes animate24 { 93% { top: 245px; } 100% { top: 240px; }
}
sandwich *:nth-child(26) { top: -2000px; z-index: 975; animation: animate25 2s ease-out -0.5s forwards;
}
@keyframes animate25 { 93% { top: 255px; } 100% { top: 250px; }
}
sandwich *:nth-child(27) { top: -2000px; z-index: 974; animation: animate26 2s ease-out -0.6s forwards;
}
@keyframes animate26 { 93% { top: 265px; } 100% { top: 260px; }
}
sandwich *:nth-child(28) { top: -2000px; z-index: 973; animation: animate27 2s ease-out -0.7s forwards;
}
@keyframes animate27 { 93% { top: 275px; } 100% { top: 270px; }
}
sandwich *:nth-child(29) { top: -2000px; z-index: 972; animation: animate28 2s ease-out -0.8s forwards;
}
@keyframes animate28 { 93% { top: 285px; } 100% { top: 280px; }
}
sandwich *:nth-child(30) { top: -2000px; z-index: 971; animation: animate29 2s ease-out -0.9s forwards;
}
@keyframes animate29 { 93% { top: 295px; } 100% { top: 290px; }
}
sandwich *:nth-child(31) { top: -2000px; z-index: 970; animation: animate30 2s ease-out -1s forwards;
}
@keyframes animate30 { 93% { top: 305px; } 100% { top: 300px; }
}
sandwich *:nth-child(32) { top: -2000px; z-index: 969; animation: animate31 2s ease-out -1.1s forwards;
}
@keyframes animate31 { 93% { top: 315px; } 100% { top: 310px; }
}
sandwich *:nth-child(33) { top: -2000px; z-index: 968; animation: animate32 2s ease-out -1.2s forwards;
}
@keyframes animate32 { 93% { top: 325px; } 100% { top: 320px; }
}
sandwich *:nth-child(34) { top: -2000px; z-index: 967; animation: animate33 2s ease-out -1.3s forwards;
}
@keyframes animate33 { 93% { top: 335px; } 100% { top: 330px; }
}
sandwich *:nth-child(35) { top: -2000px; z-index: 966; animation: animate34 2s ease-out -1.4s forwards;
}
@keyframes animate34 { 93% { top: 345px; } 100% { top: 340px; }
}
sandwich *:nth-child(36) { top: -2000px; z-index: 965; animation: animate35 2s ease-out -1.5s forwards;
}
@keyframes animate35 { 93% { top: 355px; } 100% { top: 350px; }
}
sandwich *:nth-child(37) { top: -2000px; z-index: 964; animation: animate36 2s ease-out -1.6s forwards;
}
@keyframes animate36 { 93% { top: 365px; } 100% { top: 360px; }
}
sandwich *:nth-child(38) { top: -2000px; z-index: 963; animation: animate37 2s ease-out -1.7s forwards;
}
@keyframes animate37 { 93% { top: 375px; } 100% { top: 370px; }
}
sandwich *:nth-child(39) { top: -2000px; z-index: 962; animation: animate38 2s ease-out -1.8s forwards;
}
@keyframes animate38 { 93% { top: 385px; } 100% { top: 380px; }
}
sandwich *:nth-child(40) { top: -2000px; z-index: 961; animation: animate39 2s ease-out -1.9s forwards;
}
@keyframes animate39 { 93% { top: 395px; } 100% { top: 390px; }
}
sandwich *:nth-child(41) { top: -2000px; z-index: 960; animation: animate40 2s ease-out -2s forwards;
}
@keyframes animate40 { 93% { top: 405px; } 100% { top: 400px; }
}
sandwich *:nth-child(42) { top: -2000px; z-index: 959; animation: animate41 2s ease-out -2.1s forwards;
}
@keyframes animate41 { 93% { top: 415px; } 100% { top: 410px; }
}
sandwich *:nth-child(43) { top: -2000px; z-index: 958; animation: animate42 2s ease-out -2.2s forwards;
}
@keyframes animate42 { 93% { top: 425px; } 100% { top: 420px; }
}
sandwich *:nth-child(44) { top: -2000px; z-index: 957; animation: animate43 2s ease-out -2.3s forwards;
}
@keyframes animate43 { 93% { top: 435px; } 100% { top: 430px; }
}
sandwich *:nth-child(45) { top: -2000px; z-index: 956; animation: animate44 2s ease-out -2.4s forwards;
}
@keyframes animate44 { 93% { top: 445px; } 100% { top: 440px; }
}
sandwich *:nth-child(46) { top: -2000px; z-index: 955; animation: animate45 2s ease-out -2.5s forwards;
}
@keyframes animate45 { 93% { top: 455px; } 100% { top: 450px; }
}
sandwich *:nth-child(47) { top: -2000px; z-index: 954; animation: animate46 2s ease-out -2.6s forwards;
}
@keyframes animate46 { 93% { top: 465px; } 100% { top: 460px; }
}
sandwich *:nth-child(48) { top: -2000px; z-index: 953; animation: animate47 2s ease-out -2.7s forwards;
}
@keyframes animate47 { 93% { top: 475px; } 100% { top: 470px; }
}
sandwich *:nth-child(49) { top: -2000px; z-index: 952; animation: animate48 2s ease-out -2.8s forwards;
}
@keyframes animate48 { 93% { top: 485px; } 100% { top: 480px; }
}
sandwich *:nth-child(50) { top: -2000px; z-index: 951; animation: animate49 2s ease-out -2.9s forwards;
}
@keyframes animate49 { 93% { top: 495px; } 100% { top: 490px; }
}
sandwich *:nth-child(51) { top: -2000px; z-index: 950; animation: animate50 2s ease-out -3s forwards;
}
@keyframes animate50 { 93% { top: 505px; } 100% { top: 500px; }
}
sandwich { border-radius: 20px; display: block; height: 300px; width: 300px; perspective: 800px; position: absolute; top: calc(50% - 290px); left: calc(50% - 150px);
}
sandwich * { transform-style: preserve-3d;
}
sandwich bread { background: #F2DAB8; border-radius: 20px; box-shadow: inset #A87A55 0 0 27px 8px, #A56C40 0 4px 0 -1px, #A06A41 0 8px 0 -2px, #A2704A 0 12px 0 -3px, #A3693D 0 16px 0 -4px, #A37049 0 20px 0 -5px, #A86F42 0 24px 0 -6px, #9E6E48 0 28px 0 -7px, #9C663C 0 32px 0 -8px, #946139 0 35px 0 -9px, #8B5D38 0 38px 0 -10px, #8D603D 0 42px 0 -11px, #9C673D 0 45px 0 -12px; display: block; height: 300px; width: 300px; position: absolute; transform: rotateX(71deg);
}
sandwich bread:last-child { box-shadow: inset #A87A55 0 0 27px 8px, #A56C40 0 4px 0 -1px, #A06A41 0 8px 0 -2px, #A2704A 0 12px 0 -3px, #A3693D 0 16px 0 -4px, #A37049 0 20px 0 -5px, #A86F42 0 24px 0 -6px, #9E6E48 0 28px 0 -7px, #9C663C 0 32px 0 -8px, #946139 0 35px 0 -9px, #8B5D38 0 38px 0 -10px, #8D603D 0 42px 0 -11px, #9C673D 0 45px 0 -12px, rgba(3, 20, 31, 0.77) 0px 49px 7px -11px;
}
sandwich cheese { background: #FFD960; border-radius: 20px; display: block; height: 300px; width: 300px; position: absolute;
}
sandwich cheese:nth-child(even) { box-shadow: #E6BE41 2px 3px 0 -1px, #E6BE41 5px 7px 0 -3px; transform: rotateX(71deg) rotateZ(25deg);
}
sandwich cheese:nth-child(odd) { box-shadow: #E6BE41 0 3px 0 -1px, #E6BE41 2px 7px 0 -3px; transform: translate3d(20px, 10px, 0) rotateX(71deg) rotateZ(10deg);
}
sandwich tomato { background: #cc0000; border-radius: 50%; box-shadow: inset #EF2D01 0 0 0 25px, #cc0000 0 14px 0 -2px, #cc0000 0 30px 0 -5px; display: block; height: 200px; width: 200px; position: absolute;
}
sandwich tomato:nth-child(even) { transform: translate3d(10px, 90px, 0) rotateX(71deg);
}
sandwich tomato:nth-child(odd) { transform: translate3d(90px, 90px, 0) rotateX(71deg);
}
sandwich ham { background: #DF786A; border-radius: 10px; display: block; height: 300px; width: 300px; position: absolute;
}
sandwich ham:nth-child(even) { box-shadow: #C35A3A -1px 5px 0 -1px, #C35A3A -2px 11px 0 -3px; transform: rotateX(71deg) rotateZ(-7deg);
}
sandwich ham:nth-child(odd) { box-shadow: #C35A3A 1px 5px 0 -1px, #C35A3A 2px 11px 0 -3px; transform: translate3d(0, 7px, 0) rotateX(71deg) rotateZ(15deg);
}
sandwich salad { background: #64B84A; border-radius: 0; box-shadow: inset #B2DB73 0 0 60px; display: block; height: 300px; width: 110px; position: absolute; transform-style: preserve-3d;
}
sandwich salad:nth-child(even) { transform: translate3d(150px, 20px, 0) rotateX(71deg) rotateZ(-16deg);
}
sandwich salad:nth-child(odd) { transform: translate3d(90px, 20px, 0) rotateX(71deg) rotateZ(25deg);
}
sandwich salad:before { background: #64B84A; border-bottom-right-radius: 30px; border-top-right-radius: 30px; box-shadow: inset #B2DB73 0 0 30px; content: ''; display: block; height: 100%; width: 70px; position: absolute; left: 0; transform: rotateY(-555deg); transform-origin: 0;
}
sandwich salad:after { background: #64B84A; border-bottom-right-radius: 70px; border-top-right-radius: 30px; box-shadow: inset #B2DB73 0 0 30px; content: ''; display: block; height: 100%; width: 55px; position: absolute; left: 100%; transform: rotateY(-23deg); transform-origin: 0;
}
html, body { height: 100%; margin: 0;
}
body { background: #E6F4FF; transform-style: preserve-3d;
}
h1 { font-family: 'Lobster', cursive; font-size: 50px; width: 100%; position: absolute; bottom: 25px; text-align: center;
}
h2 { font-family: 'Shadows Into Light', cursive; width: 100%; position: absolute; bottom: 10px; text-align: center;
}
#price { position: absolute; right: 50px; top: 21px; /* From Chris Coyer CSS Shapes via Alan Johnson */
}
#price #label { font-family: 'Shadows Into Light', cursive; font-size: 24px; text-align: center;
}
#price #amount { color: #fff; font-family: 'PT Sans', sans-serif; font-size: 70px; position: absolute; left: 30px; top: 56px; z-index: 1;
}
#price #currency { font-family: 'PT Sans', sans-serif; line-height: 16px; font-size: 18px; position: absolute; z-index: 1; left: 14px; top: 76px; color: #fff;
}
#price #currency:after { content: ''; height: 55px; width: 0; border-left: 2px solid #fff; position: absolute; top: -5px; left: 4px;
}
#price #burst { background: #DF786A; width: 80px; height: 80px; position: relative; text-align: center; top: 20px;
}
#price #burst:before, #price #burst:after { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: #DF786A;
}
#price #burst:before { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg);
}
#price #burst:after { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg);
}
a { font-family: 'PT Sans', sans-serif; position: absolute; width: 100%; text-align: center; bottom: 10px; color: #000; opacity: .2; text-decoration: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- Move, add or remove ingredients. :) -->
<sandwich> <bread></bread> <cheese></cheese> <salad></salad> <tomato></tomato> <ham></ham> <bread></bread> <tomato></tomato> <salad></salad> <cheese></cheese> <ham></ham> <bread></bread>
</sandwich>
<h1>Semantic Sandwich</h1>
<h2>With <cheese>, <tomato> and <ham>!</h2>
<a href="http://codepen.io/fbrz/pen/nKCsI/" target="_blank">Edit the sandwich →</a>
<div id="price"> <div id="label">Only</div> <div id="amount">3</div> <div id="currency">C<br/>S<br/>S</div> <div id="burst"></div>
</div> <script src='http://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js'></script>
</body>
</html>
CSS3 Only - Semantic Sandwich - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Lobster|Shadows+Into+Light|PT+Sans);
sandwich *:nth-child(1) { top: -2000px; z-index: 1000; animation: animate0 2s ease-out 2s forwards;
}
@keyframes animate0 { 93% { top: 5px; } 100% { top: 0px; }
}
sandwich *:nth-child(2) { top: -2000px; z-index: 999; animation: animate1 2s ease-out 1.9s forwards;
}
@keyframes animate1 { 93% { top: 15px; } 100% { top: 10px; }
}
sandwich *:nth-child(3) { top: -2000px; z-index: 998; animation: animate2 2s ease-out 1.8s forwards;
}
@keyframes animate2 { 93% { top: 25px; } 100% { top: 20px; }
}
sandwich *:nth-child(4) { top: -2000px; z-index: 997; animation: animate3 2s ease-out 1.7s forwards;
}
@keyframes animate3 { 93% { top: 35px; } 100% { top: 30px; }
}
sandwich *:nth-child(5) { top: -2000px; z-index: 996; animation: animate4 2s ease-out 1.6s forwards;
}
@keyframes animate4 { 93% { top: 45px; } 100% { top: 40px; }
}
sandwich *:nth-child(6) { top: -2000px; z-index: 995; animation: animate5 2s ease-out 1.5s forwards;
}
@keyframes animate5 { 93% { top: 55px; } 100% { top: 50px; }
}
sandwich *:nth-child(7) { top: -2000px; z-index: 994; animation: animate6 2s ease-out 1.4s forwards;
}
@keyframes animate6 { 93% { top: 65px; } 100% { top: 60px; }
}
sandwich *:nth-child(8) { top: -2000px; z-index: 993; animation: animate7 2s ease-out 1.3s forwards;
}
@keyframes animate7 { 93% { top: 75px; } 100% { top: 70px; }
}
sandwich *:nth-child(9) { top: -2000px; z-index: 992; animation: animate8 2s ease-out 1.2s forwards;
}
@keyframes animate8 { 93% { top: 85px; } 100% { top: 80px; }
}
sandwich *:nth-child(10) { top: -2000px; z-index: 991; animation: animate9 2s ease-out 1.1s forwards;
}
@keyframes animate9 { 93% { top: 95px; } 100% { top: 90px; }
}
sandwich *:nth-child(11) { top: -2000px; z-index: 990; animation: animate10 2s ease-out 1s forwards;
}
@keyframes animate10 { 93% { top: 105px; } 100% { top: 100px; }
}
sandwich *:nth-child(12) { top: -2000px; z-index: 989; animation: animate11 2s ease-out 0.9s forwards;
}
@keyframes animate11 { 93% { top: 115px; } 100% { top: 110px; }
}
sandwich *:nth-child(13) { top: -2000px; z-index: 988; animation: animate12 2s ease-out 0.8s forwards;
}
@keyframes animate12 { 93% { top: 125px; } 100% { top: 120px; }
}
sandwich *:nth-child(14) { top: -2000px; z-index: 987; animation: animate13 2s ease-out 0.7s forwards;
}
@keyframes animate13 { 93% { top: 135px; } 100% { top: 130px; }
}
sandwich *:nth-child(15) { top: -2000px; z-index: 986; animation: animate14 2s ease-out 0.6s forwards;
}
@keyframes animate14 { 93% { top: 145px; } 100% { top: 140px; }
}
sandwich *:nth-child(16) { top: -2000px; z-index: 985; animation: animate15 2s ease-out 0.5s forwards;
}
@keyframes animate15 { 93% { top: 155px; } 100% { top: 150px; }
}
sandwich *:nth-child(17) { top: -2000px; z-index: 984; animation: animate16 2s ease-out 0.4s forwards;
}
@keyframes animate16 { 93% { top: 165px; } 100% { top: 160px; }
}
sandwich *:nth-child(18) { top: -2000px; z-index: 983; animation: animate17 2s ease-out 0.3s forwards;
}
@keyframes animate17 { 93% { top: 175px; } 100% { top: 170px; }
}
sandwich *:nth-child(19) { top: -2000px; z-index: 982; animation: animate18 2s ease-out 0.2s forwards;
}
@keyframes animate18 { 93% { top: 185px; } 100% { top: 180px; }
}
sandwich *:nth-child(20) { top: -2000px; z-index: 981; animation: animate19 2s ease-out 0.1s forwards;
}
@keyframes animate19 { 93% { top: 195px; } 100% { top: 190px; }
}
sandwich *:nth-child(21) { top: -2000px; z-index: 980; animation: animate20 2s ease-out 0s forwards;
}
@keyframes animate20 { 93% { top: 205px; } 100% { top: 200px; }
}
sandwich *:nth-child(22) { top: -2000px; z-index: 979; animation: animate21 2s ease-out -0.1s forwards;
}
@keyframes animate21 { 93% { top: 215px; } 100% { top: 210px; }
}
sandwich *:nth-child(23) { top: -2000px; z-index: 978; animation: animate22 2s ease-out -0.2s forwards;
}
@keyframes animate22 { 93% { top: 225px; } 100% { top: 220px; }
}
sandwich *:nth-child(24) { top: -2000px; z-index: 977; animation: animate23 2s ease-out -0.3s forwards;
}
@keyframes animate23 { 93% { top: 235px; } 100% { top: 230px; }
}
sandwich *:nth-child(25) { top: -2000px; z-index: 976; animation: animate24 2s ease-out -0.4s forwards;
}
@keyframes animate24 { 93% { top: 245px; } 100% { top: 240px; }
}
sandwich *:nth-child(26) { top: -2000px; z-index: 975; animation: animate25 2s ease-out -0.5s forwards;
}
@keyframes animate25 { 93% { top: 255px; } 100% { top: 250px; }
}
sandwich *:nth-child(27) { top: -2000px; z-index: 974; animation: animate26 2s ease-out -0.6s forwards;
}
@keyframes animate26 { 93% { top: 265px; } 100% { top: 260px; }
}
sandwich *:nth-child(28) { top: -2000px; z-index: 973; animation: animate27 2s ease-out -0.7s forwards;
}
@keyframes animate27 { 93% { top: 275px; } 100% { top: 270px; }
}
sandwich *:nth-child(29) { top: -2000px; z-index: 972; animation: animate28 2s ease-out -0.8s forwards;
}
@keyframes animate28 { 93% { top: 285px; } 100% { top: 280px; }
}
sandwich *:nth-child(30) { top: -2000px; z-index: 971; animation: animate29 2s ease-out -0.9s forwards;
}
@keyframes animate29 { 93% { top: 295px; } 100% { top: 290px; }
}
sandwich *:nth-child(31) { top: -2000px; z-index: 970; animation: animate30 2s ease-out -1s forwards;
}
@keyframes animate30 { 93% { top: 305px; } 100% { top: 300px; }
}
sandwich *:nth-child(32) { top: -2000px; z-index: 969; animation: animate31 2s ease-out -1.1s forwards;
}
@keyframes animate31 { 93% { top: 315px; } 100% { top: 310px; }
}
sandwich *:nth-child(33) { top: -2000px; z-index: 968; animation: animate32 2s ease-out -1.2s forwards;
}
@keyframes animate32 { 93% { top: 325px; } 100% { top: 320px; }
}
sandwich *:nth-child(34) { top: -2000px; z-index: 967; animation: animate33 2s ease-out -1.3s forwards;
}
@keyframes animate33 { 93% { top: 335px; } 100% { top: 330px; }
}
sandwich *:nth-child(35) { top: -2000px; z-index: 966; animation: animate34 2s ease-out -1.4s forwards;
}
@keyframes animate34 { 93% { top: 345px; } 100% { top: 340px; }
}
sandwich *:nth-child(36) { top: -2000px; z-index: 965; animation: animate35 2s ease-out -1.5s forwards;
}
@keyframes animate35 { 93% { top: 355px; } 100% { top: 350px; }
}
sandwich *:nth-child(37) { top: -2000px; z-index: 964; animation: animate36 2s ease-out -1.6s forwards;
}
@keyframes animate36 { 93% { top: 365px; } 100% { top: 360px; }
}
sandwich *:nth-child(38) { top: -2000px; z-index: 963; animation: animate37 2s ease-out -1.7s forwards;
}
@keyframes animate37 { 93% { top: 375px; } 100% { top: 370px; }
}
sandwich *:nth-child(39) { top: -2000px; z-index: 962; animation: animate38 2s ease-out -1.8s forwards;
}
@keyframes animate38 { 93% { top: 385px; } 100% { top: 380px; }
}
sandwich *:nth-child(40) { top: -2000px; z-index: 961; animation: animate39 2s ease-out -1.9s forwards;
}
@keyframes animate39 { 93% { top: 395px; } 100% { top: 390px; }
}
sandwich *:nth-child(41) { top: -2000px; z-index: 960; animation: animate40 2s ease-out -2s forwards;
}
@keyframes animate40 { 93% { top: 405px; } 100% { top: 400px; }
}
sandwich *:nth-child(42) { top: -2000px; z-index: 959; animation: animate41 2s ease-out -2.1s forwards;
}
@keyframes animate41 { 93% { top: 415px; } 100% { top: 410px; }
}
sandwich *:nth-child(43) { top: -2000px; z-index: 958; animation: animate42 2s ease-out -2.2s forwards;
}
@keyframes animate42 { 93% { top: 425px; } 100% { top: 420px; }
}
sandwich *:nth-child(44) { top: -2000px; z-index: 957; animation: animate43 2s ease-out -2.3s forwards;
}
@keyframes animate43 { 93% { top: 435px; } 100% { top: 430px; }
}
sandwich *:nth-child(45) { top: -2000px; z-index: 956; animation: animate44 2s ease-out -2.4s forwards;
}
@keyframes animate44 { 93% { top: 445px; } 100% { top: 440px; }
}
sandwich *:nth-child(46) { top: -2000px; z-index: 955; animation: animate45 2s ease-out -2.5s forwards;
}
@keyframes animate45 { 93% { top: 455px; } 100% { top: 450px; }
}
sandwich *:nth-child(47) { top: -2000px; z-index: 954; animation: animate46 2s ease-out -2.6s forwards;
}
@keyframes animate46 { 93% { top: 465px; } 100% { top: 460px; }
}
sandwich *:nth-child(48) { top: -2000px; z-index: 953; animation: animate47 2s ease-out -2.7s forwards;
}
@keyframes animate47 { 93% { top: 475px; } 100% { top: 470px; }
}
sandwich *:nth-child(49) { top: -2000px; z-index: 952; animation: animate48 2s ease-out -2.8s forwards;
}
@keyframes animate48 { 93% { top: 485px; } 100% { top: 480px; }
}
sandwich *:nth-child(50) { top: -2000px; z-index: 951; animation: animate49 2s ease-out -2.9s forwards;
}
@keyframes animate49 { 93% { top: 495px; } 100% { top: 490px; }
}
sandwich *:nth-child(51) { top: -2000px; z-index: 950; animation: animate50 2s ease-out -3s forwards;
}
@keyframes animate50 { 93% { top: 505px; } 100% { top: 500px; }
}
sandwich { border-radius: 20px; display: block; height: 300px; width: 300px; perspective: 800px; position: absolute; top: calc(50% - 290px); left: calc(50% - 150px);
}
sandwich * { transform-style: preserve-3d;
}
sandwich bread { background: #F2DAB8; border-radius: 20px; box-shadow: inset #A87A55 0 0 27px 8px, #A56C40 0 4px 0 -1px, #A06A41 0 8px 0 -2px, #A2704A 0 12px 0 -3px, #A3693D 0 16px 0 -4px, #A37049 0 20px 0 -5px, #A86F42 0 24px 0 -6px, #9E6E48 0 28px 0 -7px, #9C663C 0 32px 0 -8px, #946139 0 35px 0 -9px, #8B5D38 0 38px 0 -10px, #8D603D 0 42px 0 -11px, #9C673D 0 45px 0 -12px; display: block; height: 300px; width: 300px; position: absolute; transform: rotateX(71deg);
}
sandwich bread:last-child { box-shadow: inset #A87A55 0 0 27px 8px, #A56C40 0 4px 0 -1px, #A06A41 0 8px 0 -2px, #A2704A 0 12px 0 -3px, #A3693D 0 16px 0 -4px, #A37049 0 20px 0 -5px, #A86F42 0 24px 0 -6px, #9E6E48 0 28px 0 -7px, #9C663C 0 32px 0 -8px, #946139 0 35px 0 -9px, #8B5D38 0 38px 0 -10px, #8D603D 0 42px 0 -11px, #9C673D 0 45px 0 -12px, rgba(3, 20, 31, 0.77) 0px 49px 7px -11px;
}
sandwich cheese { background: #FFD960; border-radius: 20px; display: block; height: 300px; width: 300px; position: absolute;
}
sandwich cheese:nth-child(even) { box-shadow: #E6BE41 2px 3px 0 -1px, #E6BE41 5px 7px 0 -3px; transform: rotateX(71deg) rotateZ(25deg);
}
sandwich cheese:nth-child(odd) { box-shadow: #E6BE41 0 3px 0 -1px, #E6BE41 2px 7px 0 -3px; transform: translate3d(20px, 10px, 0) rotateX(71deg) rotateZ(10deg);
}
sandwich tomato { background: #cc0000; border-radius: 50%; box-shadow: inset #EF2D01 0 0 0 25px, #cc0000 0 14px 0 -2px, #cc0000 0 30px 0 -5px; display: block; height: 200px; width: 200px; position: absolute;
}
sandwich tomato:nth-child(even) { transform: translate3d(10px, 90px, 0) rotateX(71deg);
}
sandwich tomato:nth-child(odd) { transform: translate3d(90px, 90px, 0) rotateX(71deg);
}
sandwich ham { background: #DF786A; border-radius: 10px; display: block; height: 300px; width: 300px; position: absolute;
}
sandwich ham:nth-child(even) { box-shadow: #C35A3A -1px 5px 0 -1px, #C35A3A -2px 11px 0 -3px; transform: rotateX(71deg) rotateZ(-7deg);
}
sandwich ham:nth-child(odd) { box-shadow: #C35A3A 1px 5px 0 -1px, #C35A3A 2px 11px 0 -3px; transform: translate3d(0, 7px, 0) rotateX(71deg) rotateZ(15deg);
}
sandwich salad { background: #64B84A; border-radius: 0; box-shadow: inset #B2DB73 0 0 60px; display: block; height: 300px; width: 110px; position: absolute; transform-style: preserve-3d;
}
sandwich salad:nth-child(even) { transform: translate3d(150px, 20px, 0) rotateX(71deg) rotateZ(-16deg);
}
sandwich salad:nth-child(odd) { transform: translate3d(90px, 20px, 0) rotateX(71deg) rotateZ(25deg);
}
sandwich salad:before { background: #64B84A; border-bottom-right-radius: 30px; border-top-right-radius: 30px; box-shadow: inset #B2DB73 0 0 30px; content: ''; display: block; height: 100%; width: 70px; position: absolute; left: 0; transform: rotateY(-555deg); transform-origin: 0;
}
sandwich salad:after { background: #64B84A; border-bottom-right-radius: 70px; border-top-right-radius: 30px; box-shadow: inset #B2DB73 0 0 30px; content: ''; display: block; height: 100%; width: 55px; position: absolute; left: 100%; transform: rotateY(-23deg); transform-origin: 0;
}
html, body { height: 100%; margin: 0;
}
body { background: #E6F4FF; transform-style: preserve-3d;
}
h1 { font-family: 'Lobster', cursive; font-size: 50px; width: 100%; position: absolute; bottom: 25px; text-align: center;
}
h2 { font-family: 'Shadows Into Light', cursive; width: 100%; position: absolute; bottom: 10px; text-align: center;
}
#price { position: absolute; right: 50px; top: 21px; /* From Chris Coyer CSS Shapes via Alan Johnson */
}
#price #label { font-family: 'Shadows Into Light', cursive; font-size: 24px; text-align: center;
}
#price #amount { color: #fff; font-family: 'PT Sans', sans-serif; font-size: 70px; position: absolute; left: 30px; top: 56px; z-index: 1;
}
#price #currency { font-family: 'PT Sans', sans-serif; line-height: 16px; font-size: 18px; position: absolute; z-index: 1; left: 14px; top: 76px; color: #fff;
}
#price #currency:after { content: ''; height: 55px; width: 0; border-left: 2px solid #fff; position: absolute; top: -5px; left: 4px;
}
#price #burst { background: #DF786A; width: 80px; height: 80px; position: relative; text-align: center; top: 20px;
}
#price #burst:before, #price #burst:after { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: #DF786A;
}
#price #burst:before { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg);
}
#price #burst:after { -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg);
}
a { font-family: 'PT Sans', sans-serif; position: absolute; width: 100%; text-align: center; bottom: 10px; color: #000; opacity: .2; text-decoration: none;
}
| Developer | Fabrizio Bianchi |
| Username | fbrz |
| Uploaded | August 07, 2022 |
| Rating | 4.5 |
| Size | 8,525 Kb |
| Views | 38,456 |
Do you need developer help for CSS3 Only - Semantic Sandwich?
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!
Fabrizio Bianchi (fbrz) Script Codes
| Name | Size |
| Coolors Loader | 2,776 Kb |
| Circular Buttons Animation Concept | 2,674 Kb |
| 8 bit spinner | 2,916 Kb |
| 3D Social Buttons Concept | 2,549 Kb |
| Pure CSS One Div Weather Animated Icons | 4,503 Kb |
| Pull Menu - Menu Interaction Concept | 6,675 Kb |
| Simple Responsive Text | 2,282 Kb |
| Mobile App Pages Animation | 66,961 Kb |
| CSS Only iPhone 6 | 5,118 Kb |
| CSS 3D Bending Effect - Page Flip | 3,782 Kb |
Create amazing love letters 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!
Similar Scripts & Codes
| Name | Username | Size |
| A form arranged using automatic placement. | Vikasford | 2,103 Kb |
| Vertical Pan Hammer.js example | Jtangelder | 2,144 Kb |
| Simple DevTools | Deegill | 2,511 Kb |
| Horizontal slider on scroll | Alojzije | 2,672 Kb |
| BabyStore | Pablo-Ai | 3,807 Kb |
| A Pen by Rob Levin | Roblevin | 2,787 Kb |
| Side Sliding Menu CSS | EduardL | 4,388 Kb |
| Polygon Logo in CSS | Kai | 3,412 Kb |
| Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
| Slides-07-1 POSITION | Exhtml | 1,909 Kb |
Do you want hide your ip address?
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!