Old School Mac - Pure CSS

Developer
Tyler Fry
Size
3,329 Kb
Views
50,600
  1. Old School Mac - Pure CSS Previews
  2. Old School Mac - Pure CSS HTML Codes
  3. Old School Mac - Pure CSS CSS Codes

How do I make an old school mac - pure css?

Just for fun. Found this desktop background here http://simpledesktops.com/browse/desktops/2011/sep/22/mac-and-back-to-basic/ . What is a old school mac - pure css? How do you make a old school mac - pure css? This script and codes were developed by Tyler Fry on 16 July 2022, Saturday.

Old School Mac - Pure CSS Previews
IQ Test

Old School Mac - Pure CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Old School Mac - Pure CSS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.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! */ body { background: #a1997e;
}
.mac { position: fixed; top: 50%; left: 50%;
}
.mac_sreen { background: #3f3f41; border: 20px solid #c9c0a3; width: 180px; height: 130px; display: block; margin: -125px -100px; position: relative;
}
.mac_sreen:before { content: ''; position: absolute; bottom: -25px; left: 50%; width: 120px; height: 5px; background: #d8d1b7; margin-left: -60px;
}
.mac_sreen:after { content: ''; position: absolute; bottom: -90px; left: 50%; width: 180px; height: 65px; background: #f1ebdf; margin-left: -90px;
}
.mac_tower { width: 70px; height: 25px; background: #a19378; display: block; z-index: 2; position: absolute; bottom: -95px; left: 10px;
}
.mac_tower:before { content: ''; width: 40px; height: 3px; background: #000; position: absolute; left: -55px; top: 11px;
}
.mac_tower:after { content: ''; display: block; width: 30px; height: 10px; background: #c3b79d; border-radius: 50%; z-index: -1; position: absolute; left: -50px; top: 8px;
}
.mac_keyboard { width: 260px; height: 0; position: absolute; z-index: 4; left: 50%; bottom: -115px; margin-left: -130px; border-top: 5px dashed #d8d1b7; box-shadow: 0 4px 0 #c9c0a3, 0 8px 0 #fff, 0 12px 0 #c9c0a3, 0 14px 0 #c9c0a3, 0 16px 0 #c9c0a3;
}
.mac_shadow { display: block; width: 270px; height: 30px; background: rgba(135, 128, 104, 0.2); position: absolute; bottom: -155px; left: 50%; margin-left: -135px; z-index: -1; transform: perspective(200px) rotateX(45deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="mac"> <i class="mac_sreen"></i> <i class="mac_tower"></i> <i class="mac_keyboard"></i> <i class="mac_shadow"></i>
</div>
</body>
</html>

Old School Mac - Pure CSS - Script Codes CSS Codes

body { background: #a1997e;
}
.mac { position: fixed; top: 50%; left: 50%;
}
.mac_sreen { background: #3f3f41; border: 20px solid #c9c0a3; width: 180px; height: 130px; display: block; margin: -125px -100px; position: relative;
}
.mac_sreen:before { content: ''; position: absolute; bottom: -25px; left: 50%; width: 120px; height: 5px; background: #d8d1b7; margin-left: -60px;
}
.mac_sreen:after { content: ''; position: absolute; bottom: -90px; left: 50%; width: 180px; height: 65px; background: #f1ebdf; margin-left: -90px;
}
.mac_tower { width: 70px; height: 25px; background: #a19378; display: block; z-index: 2; position: absolute; bottom: -95px; left: 10px;
}
.mac_tower:before { content: ''; width: 40px; height: 3px; background: #000; position: absolute; left: -55px; top: 11px;
}
.mac_tower:after { content: ''; display: block; width: 30px; height: 10px; background: #c3b79d; border-radius: 50%; z-index: -1; position: absolute; left: -50px; top: 8px;
}
.mac_keyboard { width: 260px; height: 0; position: absolute; z-index: 4; left: 50%; bottom: -115px; margin-left: -130px; border-top: 5px dashed #d8d1b7; box-shadow: 0 4px 0 #c9c0a3, 0 8px 0 #fff, 0 12px 0 #c9c0a3, 0 14px 0 #c9c0a3, 0 16px 0 #c9c0a3;
}
.mac_shadow { display: block; width: 270px; height: 30px; background: rgba(135, 128, 104, 0.2); position: absolute; bottom: -155px; left: 50%; margin-left: -135px; z-index: -1; transform: perspective(200px) rotateX(45deg);
}
Old School Mac - Pure CSS - Script Codes
Old School Mac - Pure CSS - Script Codes
Home Page Home
Developer Tyler Fry
Username frytyler
Uploaded July 16, 2022
Rating 3.5
Size 3,329 Kb
Views 50,600
Do you need developer help for Old School Mac - Pure CSS?

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!

Tyler Fry (frytyler) Script Codes
Name
To Do Task Widget
Twitter Profile Rebound
Flat Instagram Logo
Flat UI Kit - Dribbble Rebound
HTML5 Video Player UI
Pure CSS Space Shuttle
Email UI - Dribbble Rebound
Flat Icons CSS - Dribbble Remake
Ridiculously good-looking input fields
Check
Create amazing blog posts 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!