Windows 7 Aero Glass V2

Tags: windows, frutiger, aero, frutigeraero, live, windows7, windowsvista

Description:

This is a heavily optimized and modified version of my old Windows 7 layout, it now has animations, easier customization, more realism and even a PFP border.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by IPTVman (https://layouts.spacehey.com/layout?id=34300) -->

<style>

@keyframes windowOpen {
	0% {
		opacity: 0.3;
		transform: perspective(600px) rotateX(-13deg) translateY(-5px) scale(0.85);
	}
	100% {
		opacity: 1;
		transform: perspective(600px) rotateX(0deg) rotateY(0deg) translateY(0px)
			scale(1);
	}
}

@font-face {
	font-family: 'Segoe UI';
	src: url('./fonts/normal/segoeui.eot');
	src: local("Segoe UI"),
		 local("Segoe"),
		 local("Segoe WP"),
		 url('https://win7.nota-robot.com/fonts/normal/segoeui.eot?#iefix') format('embedded-opentype'),
		 url('https://win7.nota-robot.com/fonts/normal/segoeui.woff') format('woff'),
		 url('https://win7.nota-robot.com/fonts/normal/segoeui.svg#SegoeUI') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Segoe UI Semibold';
	src: url('./fonts/semibold/seguisb.eot');
	src: local("Segoe Semibold"),
		 local("Segoe WP Semibold"),
		 url('https://win7.nota-robot.com/fonts/semibold/seguisb.eot?#iefix') format('embedded-opentype'),
		 url('https://win7.nota-robot.com/fonts/semibold/seguisb.woff') format('woff'),
		 url('https://win7.nota-robot.com/fonts/semibold/seguisb.svg#SegoeUISemibold') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Segoe UI Bold';
	src: url('https://win7.nota-robot.com/fonts/bold/segoeuib.eot');
	src: local("Segoe Bold"),
		 local("Segoe WP Bold"),
		 url('https://win7.nota-robot.com/fonts/bold/segoeuib.eot?#iefix') format('embedded-opentype'),
		 url('https://win7.nota-robot.com/fonts/bold/segoeuib.woff') format('woff'),
		 url('https://win7.nota-robot.com/fonts/bold/segoeuib.svg#SegoeUI') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Segoe UI Light';
	src: url('https://win7.nota-robot.com/fonts/light/segoeuil.eot');
	src: local("Segoe UI Light"),
		 local("Segoe WP Light"),
		 url('https://win7.nota-robot.com/fonts/light/segoeuil.eot?#iefix') format('embedded-opentype'),
		 url('https://win7.nota-robot.com/fonts/light/segoeuil.woff') format('woff'),
		 url('https://win7.nota-robot.com/fonts/light/segoeuil.svg#SegoeUI') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
  background-image: url(https://external-media.spacehey.net/media/sdn7meUeWIXeenMOhhumZzbGHheMZe_rUscErpxXb7zw=/https://static.miraheze.org/windowswallpaperwiki/5/50/Img0_%28Windows_7%29.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

nav .top {
  background: none;
}
main {
  background: none;
}
nav .links {
  background: none;
}
nav .links a {
  text-shadow: 0px 0px 16px #ffffff,0px 0px 16px #ffffff,0px 0px 16px #ffffff,0px 0px 16px #ffffff !important;
}
* {
  font-size: 9pt !important;
  font-family: Segoe UI,sans-serif !important;
  color: black !important;
  text-decoration: none !important;
  cursor: context-menu !important;
  font-weight: normal !important;
  text-shadow: 0px 0px 16px #ffffff,0px 0px 16px #ffffff,0px 0px 16px #ffffff,0px 0px 16px #ffffff !important;
}
.container:before {
  border-radius: 6px;
  height: 100%;
  left: 0;
  top: 0;
  box-shadow: 0px 0px 15px 2px #000000c3, inset 0px 0px 0px 1px var(--aero-black), inset 0px 0px 0px 2px #d9e2eb;
  background: linear-gradient(#fff0 20%,hsla(0,0%,100%,.7) 29%,transparent 29.3%);
}
.container {
  animation:.5s windowOpen cubic-bezier(.19,1,.22,1);
  box-shadow: 0 0 15px 2px #000000c3,inset 0 0 0 1px var(--aero-black),inset 0 0 0 2px #d9e2eb;
  background: linear-gradient(-139deg,rgba(135,173,190,.47) 0%,rgba(0,0,0,0) 25%),var(--aero-accent);
  border-radius: 6px;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 8px;
}

:root {
	--accent: #74B8FC;
	--aero-white: #ffffff7a;
	--aero-black: #000000bd;
	--saturation: 100%;
	--brightness: 100%;
	--intensity: 80%;
	--aero-color: rgba( 116, 184, 252, calc(.7 * var(--intensity)) );
	--aero-accent: color-mix( in srgb, #000, color-mix(in srgb, var(--aero-color) var(--saturation), transparent) var(--brightness) );
}

footer {
	background: none !important;;
}

.container {
	background-image: url("https://i.imgur.com/O8DqcaX.png");
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}

.logout-btn {
	color: black;
}

.logout-btn, .blog-entry .kudos-btn {
 color: black !important;
 font-size: 9pt;
 outline:none;
 border:solid thin #707070 !important;
 border-radius:3px;
 min-width:60px;
 padding:2px 12px;
 box-shadow:inset 0 0 0 1px var #ffffff7a !important;
 background:linear-gradient(180deg,rgba(242,242,242,1) 0%,rgba(235,235,235,1) 40%,rgba(221,221,221,1) 40%,rgba(207,207,207,1) 100%) !important;
 position:relative;
 z-index:1;
 transition:opacity .35s linear;
 text-decoration: none !important;
}

button {
 outline:none;
 border:solid thin #707070 !important;
 border-radius:3px;
 min-width:60px;
 padding:2px 12px;
 box-shadow:inset 0 0 0 1px var #ffffff7a !important;
 background:linear-gradient(180deg,rgba(242,242,242,1) 0%,rgba(235,235,235,1) 40%,rgba(221,221,221,1) 40%,rgba(207,207,207,1) 100%) !important;
 position:relative;
 z-index:1;
 transition:opacity .35s linear;
 cursor: context-menu !important;
}

button:hover {
 border:solid thin #3c7fb1 !important
}
button:before {
 position:absolute;
 content:"";
 top:0;
 right:0;
 bottom:0;
 left:0;
 background:linear-gradient(180deg,rgba(234,246,253,1) 0%,rgba(217,240,252,1) 40%,rgba(190,230,253,1) 40%,rgba(167,217,245,1) 100%) !important;
 z-index:-1;
 transition:opacity .35s linear;
 opacity:0;
 border-radius:3px
}
button:hover:before {
 opacity:1
}
button:after {
 box-shadow:inset 0 0 0 1px #95ade474 !important;
 position:absolute;
 content:"";
 top:0;
 right:0;
 bottom:0;
 left:0;
 background:linear-gradient(180deg,rgba(229,244,252,1) 0%,rgba(196,229,246,1) 40%,rgba(152,209,239,1) 40%,rgba(104,179,219,1) 100%) !important;
 z-index:-1;
 transition:opacity .1s linear;
 opacity:0;
 border-radius:3px
}
button:active:after {
 opacity:1
}

button {
	height: 22px;
	font-size: 9pt;
}

h1 {
	font-size: 15pt !important;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
  border: none !important;
}


.heading {
  background: none !important;
}
h4 {
  font-size: 11pt !important;
  padding-bottom: 2px;
}

input[type="text"] {
	border-top: solid thin #abadb3;
	border-left: solid thin #e2e3ea;
	border-bottom: solid thin #e3e9ef;
	border-right: solid thin #dbdfe6;
	outline: none;
	box-shadow: inset 0 0 0 1px var(--aero-white);
}
td {
  border-top: solid thin #abadb3;
  border-left: solid thin #e2e3ea;
  border-bottom: solid thin #e3e9ef;
  border-right: solid thin #dbdfe6;
  outline: none;
  box-shadow: inset 0 0 0 1px #ffffff57;
  background: #ffffffba !important;
  border-radius: 2px;
}
.icon {
}
td:before {
  opacity: ;
}
.general-about .profile-pic img {
  background-image: url("https://i.imgur.com/Nx0acPU.png");
  max-height: 149px;
  width: 144px;
  max-width: 100%;
  border: 0px solid rgba(.0,.0,.0,.0);
  padding: 25px;
  padding-top: 19px;
  border-radius: 2px;
}
.general-about .profile-pic {
  height: 138px;
}

.logo {
	content: url(https://i.imgur.com/pTl3Hkq.png);
	filter: drop-shadow(0px 0px 15px #fff) drop-shadow(0px 0px 15px #fff) !important;
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 67 comments ( View all | Add Comment )

Your Stereotypical Nerd	1744428397 Using Report Comment
jade	1743725914 using Report Comment
Nexus_Stryker	1743012520 USING! LONG LIVE FRUTIGER AERO AND AERO GLASS!!! =D Report Comment
george	1741749059 stunning. Report Comment
insomniac 🇧🇷 (experiencing the horrors)	1741311306 using!!!!! i'm removing the blur effect tho because for some reason it glitches my corner gifs Report Comment
pUrty_P0pp3r	1741063547 usinggggg Report Comment
Kappפ✶	1740676250 Using Report Comment
SP3NCER	1740547861 i think this needs some fixing !! /nm Report Comment
Sir Blorpis III	1739068705 this is hella laggy btw Report Comment
lolz	1739011440 using Report Comment
FraceXD	1738169056 using Report Comment
✩࿐࿔ EOYX >__< (Autoplay!)	1737295438 Using on blogs Report Comment
Wesley L.	1737143686 Using this layout for my profile right now. Thank you for designing this! Report Comment
theredlumas2	1736098864 using but its really buggy. trying to use the CD case pfp thing as well Report Comment
Spaghetti-Gardener	1735982987 A truly wonderful layout. I am using this layout! :3 Report Comment
Kimo	1733573549 using Report Comment
Catherine	1733570917 using!! Report Comment
mikey	1731876637 using Report Comment
itsd3n1zz	1730481414 usingg Report Comment
fentcel⁶	1729621262 usin Report Comment