CSS3 only Aperture Science Retro Logo

Developer
Kevin Gimbel
Size
4,115 Kb
Views
64,768
  1. CSS3 only Aperture Science Retro Logo Previews
  2. CSS3 only Aperture Science Retro Logo HTML Codes
  3. CSS3 only Aperture Science Retro Logo CSS Codes
  4. CSS3 only Aperture Science Retro Logo JS Codes

How do I make an css3 only aperture science retro logo?

I love Aperture Science, I love Portal and Portal 2 and I love CSS.. What is a css3 only aperture science retro logo? How do you make a css3 only aperture science retro logo? This script and codes were developed by Kevin Gimbel on 11 August 2022, Thursday.

CSS3 only Aperture Science Retro Logo Previews
IQ Test

CSS3 only Aperture Science Retro Logo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 only Aperture Science Retro Logo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<!--	01010100 01101000 01100101 00100000	01100011 01100001 01101011 01100101	00100000 01101001 01110011 00100000	01100001 00100000 01101100 01101001	01100101 00101110	-->	<div class="wrapper">	<div class="aperture-logo">	<li></li>	<li></li>	<li></li>	<li></li>	<span></span>	<span></span>	<span></span>	<span></span>	<ul></ul>	<ul></ul>	<ul></ul>	<ul></ul>	<ul></ul>	<ul></ul>	<ul></ul>	<ul></ul>	</div> <!-- /aperture-logo -->	<div class="aperture-fonts">	<h1>APERTURE</h1>	<h4>SCIENCE INNOVATORS</h4>	<p>"We do what we must because we can."</p>	</div>	</div> <div class="credit"> <p>2013 by <a href="http://twitter.com/_kevinatari">Kevin Gimbel</a>. Feel free to create new things based on it or optimize my work. <br /> Permalink: <a href="http://aperture.kevingimbel.de">aperture.kevingimbel.de</a> </p>
</div> <!-- credit --> <script src="js/index.js"></script>
</body>
</html>

CSS3 only Aperture Science Retro Logo - Script Codes CSS Codes

/* Codepen.io credits */
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300);
.credit { width: 500px; margin: 20px auto; padding: 10px 20px; background: #f1f1f1; color: #000000; font-size: 0.7em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.6);
}
a { color: #227799; text-decoration: none;
}
a:hover { color: #222222; border: none;
}
/* Basic CSS */
* { margin: 0px; padding: 0px; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { background: #222222; background-size: cover; font-family: "Roboto Condensed", sans-serif; font-weight: lighter;
}
.wrapper { width: 620px; height: auto; margin: 50px auto;
}
.aperture-logo { display: block; width: 220px; height: 220px; padding: 70px; border: 15px solid #fff; border-radius: 360px;
}
.aperture-logo li { width: 180px; height: 80px; position: absolute; top: 55px; left: 5px; list-style-type: none; border-radius: 180px / 80px;
}
.aperture-logo li:nth-child(1) { border: 5px solid #ffffff; z-index: 9999;
}
.aperture-logo li:nth-child(2) { border: 5px solid #ffffff; -webkit-transform: rotate(55deg); -moz-transform: rotate(55deg); z-index: 9999;
}
.aperture-logo li:nth-child(3) { border: 5px solid #ffffff; -webkit-transform: rotate(-55deg); -moz-transform: rotate(-55deg); z-index: 9999;
}
.aperture-logo li:nth-child(4) { width: 10px; height: 10px; background: #ffffff; position: absolute; left: 50%; top: 50%; margin-top: -5px; margin-left: -5px; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; z-index: 9999;
}
.aperture-logo span { width: 240px; height: 4px; background: #222222; display: block; border-radius: 0px; position: absolute; top: 55px; left: 5px; margin-top: 40px; margin-left: -30px; /* Decoration for border */
}
.aperture-logo span:nth-child(6) { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg);
}
.aperture-logo span:nth-child(7) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);
}
.aperture-logo span:nth-child(8) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);
}
.aperture-logo ul { width: 78px; height: 2px; background: #222222; display: block; border-radius: 0px; position: absolute;
}
.aperture-logo ul:nth-child(9) { top: 61px; left: -34px; -webkit-transform: rotate(-59deg); -moz-transform: rotate(-59deg);
}
.aperture-logo ul:nth-child(10) { top: 181px; right: 12px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-6deg);
}
.aperture-logo ul:nth-child(11) { top: 184px; left: 23px; -webkit-transform: rotate(32deg); -moz-transform: rotate(32deg);
}
.aperture-logo ul:nth-child(12) { top: 133px; left: -29px; -webkit-transform: rotate(83deg); -moz-transform: rotate(83deg);
}
.aperture-logo ul:nth-child(13) { top: 7px; left: 17px; -webkit-transform: rotate(-14deg); -moz-transform: rotate(-14deg);
}
.aperture-logo ul:nth-child(14) { top: 5px; left: 91px; -webkit-transform: rotate(32deg); -moz-transform: rotate(34deg);
}
.aperture-logo ul:nth-child(15) { top: 58px; left: 143px; -webkit-transform: rotate(83deg); -moz-transform: rotate(83deg);
}
.aperture-logo ul:nth-child(16) { top: 131px; left: 143px; -webkit-transform: rotate(123deg); -moz-transform: rotate(123deg);
}
.aperture-fonts { position: absolute; top: 20px; right: 0px; color: #ffffff;
}
.aperture-fonts h1 { font-size: 5.7em; line-height: 65px;
}
.aperture-fonts h4 { font-size: 2.2em; letter-spacing: 0.1em;
}
.aperture-fonts p { font-size: 1em;
}
.aperture-fonts h1, .aperture-fonts h4, .aperture-fonts p { text-shadow: 1px 3px 4px #000000;
}

CSS3 only Aperture Science Retro Logo - Script Codes JS Codes

// Handmade Retro Aperture Science Logo
// (In case you don't know Aperture Science, play Portal!)
CSS3 only Aperture Science Retro Logo - Script Codes
CSS3 only Aperture Science Retro Logo - Script Codes
Home Page Home
Developer Kevin Gimbel
Username kevingimbel
Uploaded August 11, 2022
Rating 4
Size 4,115 Kb
Views 64,768
Do you need developer help for CSS3 only Aperture Science Retro Logo?

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!

Kevin Gimbel (kevingimbel) Script Codes
Name
An Object-Oriented ToDo-List
CSS Pre-Block Overflow example
Pinterest Thumb
Felixble Product Flags
CSS3 only Turret from Portal
Pure CSS3 single element Link from TLOZ
.LANG
Chat UI - WIP
LazyLoad.js Example
CSS3 only Vault-Tec Logo
Create amazing video scripts 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!