LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.osx-login {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 184px;
  height: 184px;
  padding: 30px 35px;
  margin: -122px -127px;
  text-align: left;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  background: #efefef;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y0ZjVmNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2UyZTNlNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f4f5f6), color-stop(100%, #e2e3e5));
  background: -moz-linear-gradient(#f4f5f6, #e2e3e5);
  background: -webkit-linear-gradient(#f4f5f6, #e2e3e5);
  background: linear-gradient(#f4f5f6, #e2e3e5);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: rgba(255, 255, 255, 0.5) 0 0 0 1px inset, rgba(0, 0, 0, 0.35) 0 2px 5px 1px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.5) 0 0 0 1px inset, rgba(0, 0, 0, 0.35) 0 2px 5px 1px;
  box-shadow: rgba(255, 255, 255, 0.5) 0 0 0 1px inset, rgba(0, 0, 0, 0.35) 0 2px 5px 1px;
}

.osx-login .avatar {
  width: 88px;
  height: 88px;
  position: relative;
  margin: auto auto;
  background: #fff;
  -moz-border-radius: 44px;
  -webkit-border-radius: 44px;
  border-radius: 44px;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkZmJmZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M3YzdjNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fdfbfe), color-stop(100%, #c7c7c7));
  background: -moz-linear-gradient(#fdfbfe, #c7c7c7);
  background: -webkit-linear-gradient(#fdfbfe, #c7c7c7);
  background: linear-gradient(#fdfbfe, #c7c7c7);
  -moz-box-shadow: rgba(0, 0, 0, 0.35) 0 0 0 1px inset, rgba(0, 0, 0, 0.05) 0 1px 1px 1px, rgba(0, 0, 0, 0.1) 0 0 4px 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0 0 0 1px inset, rgba(0, 0, 0, 0.05) 0 1px 1px 1px, rgba(0, 0, 0, 0.1) 0 0 4px 0;
  box-shadow: rgba(0, 0, 0, 0.35) 0 0 0 1px inset, rgba(0, 0, 0, 0.05) 0 1px 1px 1px, rgba(0, 0, 0, 0.1) 0 0 4px 0;
}
.osx-login .avatar:before {
  content: '';
  width: 80px;
  height: 80px;
  top: 4px;
  left: 4px;
  background: url("http://0.gravatar.com/avatar/bc13eedc2642303b1a2251a4da7f157e?s=200") center;
  position: absolute;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 2px inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 2px inset;
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 2px inset;
}
.osx-login .avatar:after {
  content: '';
  width: 38px;
  height: 76px;
  position: absolute;
  left: 12px;
  top: -7px;
  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjMiLz48c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(25%, rgba(255, 255, 255, 0.1)), color-stop(100%, rgba(255, 255, 255, 0)));
  background: -moz-linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0));
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0));
  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1) 25%, rgba(255, 255, 255, 0));
  -moz-border-radius-topleft: 38px;
  -webkit-border-top-left-radius: 38px;
  border-top-left-radius: 38px;
  -moz-border-radius-bottomleft: 38px;
  -webkit-border-bottom-left-radius: 38px;
  border-bottom-left-radius: 38px;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.osx-login .name {
  width: 100%;
  text-align: center;
  font-size: 0.82em;
  margin-top: 13px;
}

.osx-login .password {
  width: 100%;
  font-size: 0.8em;
  margin-top: 15px;
  padding: 5px 2px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 2px 0 inset, rgba(255, 255, 255, 0.3) 0 1px 0 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 1px 2px 0 inset, rgba(255, 255, 255, 0.3) 0 1px 0 0;
  box-shadow: rgba(0, 0, 0, 0.15) 0 1px 2px 0 inset, rgba(255, 255, 255, 0.3) 0 1px 0 0;
}
.osx-login .password:focus {
  outline: 0;
  border: 1px solid #77a7c0;
  -moz-box-shadow: rgba(20, 113, 184, 0.5) 0 0 3px 1px, rgba(20, 113, 184, 0.5) 0 0 2px 1px inset;
  -webkit-box-shadow: rgba(20, 113, 184, 0.5) 0 0 3px 1px, rgba(20, 113, 184, 0.5) 0 0 2px 1px inset;
  box-shadow: rgba(20, 113, 184, 0.5) 0 0 3px 1px, rgba(20, 113, 184, 0.5) 0 0 2px 1px inset;
}
.osx-login .password::-webkit-input-placeholder {
  color: rgba(51, 51, 51, 0.5);
}
.osx-login .password:-moz-placeholder {
  color: rgba(51, 51, 51, 0.5);
}
.osx-login .password::-moz-placeholder {
  color: rgba(51, 51, 51, 0.5);
}
.osx-login .password:-ms-input-placeholder {
  color: rgba(51, 51, 51, 0.5);
}

body {
  text-align: center;
  background: url("https://f.cl.ly/items/0m1s041Z2e0E1J2v2I3M/Galaxy_dark2.jpg") no-repeat center center fixed;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
}
Host Instantly Drag and Drop Website Builder

 

Description

Just for fun :) A pure-css version of the OSx login screen (lock screen).
Term
Wed, 11/29/2017 - 11:21

Related Codes

Pen ID
Pen ID
Pen ID