Skeuomorphic CSS

Recently I was asked to create an app UI in skeuomorphic (neomorphic) style.

So I share with you how to create it not only in Photoshop (there are many UI kits in PSD around the web). But how to code an app in HTML/CSS.

You can see the output at the top of the article.

View it here: http://frontendlove.ru/#/portfolio/skeuomorphic-app-design/

Here is a CSS file:

:root {
  --text-color: #33476B;
  --text-color-light: #8f99a2;
  --radius: 1.2em;
  /* --shadow-color: #BBCCDB;*/
  --shadow-color: #ccdbe8;
  --border-width: -1px;
  --mono-font: monaco;
  --body-font: 'Montserrat', sans-serif;
  --padding-small: .75em;
  --padding-medium: 1.25em;
  --padding-large: 2em;
}
body {
  font-family: var(--body-font);
  color: var(--text-color);
}
h1, h2, h3, h4, h5 {
  font-weight: 200;
  margin: 0;
  padding: 0;
  line-height: 1;
}
h2 {padding-top:10px;}
.content {
  width: 375px;
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem;
      background-image: linear-gradient(to right, #E9F0F8 0%, #DEE7F4 100%);
	  border-radius: 10px;
}
.spacer {
  height: 35px;
}
.flex {
    display: flex;
    justify-content: space-between;
	width: 100%;
}
.protrude, .float {
  border-radius: var(--radius);
}
.small {
  --radius: .75em;
}
.topMargin {
  margin-top: var(--padding-medium);
}
.round {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
}
.inset {
  border-radius: calc(var(--radius) * 0.8);
  background-color: #E4EDF7;
  box-shadow: inset 3px 3px 6px var(--shadow-color),
    inset -3px -3px 6px 1px rgba(255,255,255,0.5);
}
.inset.small {
  box-shadow: inset 2px 2px 4px var(--shadow-color),
    inset -2px -2px 4px rgba(255,255,255,0.5);
}
.protrude {
  background-color: #E4ECF6;
  box-shadow: 5px 5px 10px var(--shadow-color), 1px 1px 2px var(--shadow-color), -6px -6px 15px rgba(255,255,255,0.9), -1px -1px 3px 1px rgba(255,255,255,0.9);
}
.float {
  position: relative;
  box-shadow: 8px 8px 15px #CFDAE7;
  z-index: 1;
}
.float:before {
  content: ' ';
  display: block;
  position: absolute;
  top: var(--border-width);
  left: var(--border-width);
  right: var(--border-width);
  bottom: var(--border-width);
  border-radius: var(--radius);
  background-image: linear-gradient(120deg, #f5fbff 25%, rgba(255,255,255,0) 50%),  linear-gradient(300deg, #ADBAC8 14%, rgba(255,255,255,0) 40%);
  z-index: -1;
}
.float:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius) - 1px);
  background-image: linear-gradient(165deg, #EAF1F8 9%, #DFE8F5 80%);
  z-index: -1;
}
/* Custom */
.inline {
  display: inline-flex;
  align-items: center;
  justify-content:flex-start;
  width: 100%;
}
.inline.start {
  align-items: flex-start;
}
.inline.between {
  justify-content: space-between;
}
.search {
  display: inline-block;
  font-family: var(--mono-font);
  padding: var(--padding-small);
  padding-right: 3em;
  color: var(--text-color-light);
  width: 100%;
}
.logo img {
    width: 40px;
}
.route, .dir {text-transform:uppercase;
font-weight: 600;
font-size:15px;}
.route {color: #8f99a2;}
.dir {color: #1097fd;}
.line {
	padding-top:20px;
border-top:1px solid #c4bbbb;
margin-top:20px;}
.img {
	position: relative;
    box-shadow: 8px 8px 15px #CFDAE7;
    z-index: 1;
    margin-top: -30px;
    background: #fff;
    padding: 5px;
    border-radius: 18px;
    height: 75px;	
}
.pl40 {padding-left: 40px;
}
.img:before {
  content: ' ';
  display: block;
  position: absolute;
  top: var(--border-width);
  left: var(--border-width);
  right: var(--border-width);
  bottom: var(--border-width);
  border-radius: var(--radius);
  background-image: linear-gradient(120deg, #f5fbff 25%, rgba(255,255,255,0) 50%),  linear-gradient(300deg, #ADBAC8 14%, rgba(255,255,255,0) 40%);
  z-index: -1;
}
.img:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius) - 1px);
  background-image: linear-gradient(165deg, #EAF1F8 9%, #DFE8F5 80%);
  z-index: -1;
}
.flexc {display:flex;
        flex-direction:column;
}
.button {
  display: inline-block;
  padding: calc(var(--padding-small) - .15em);
  margin-left: var(--padding-small);
}
.button svg {
  display: block;
  height: 1.5em;
  width: 1.5em;
}
.bold {
  font-weight: 500;
}
.from {
  display: inline-block;
      padding: 0 var(--padding-large) var(--padding-large) var(--padding-large);
}

(Visited 68 times, 1 visits today)

Leave a comment

Your email address will not be published. Required fields are marked *