psd to css code example

Example 1: psd-to-css

.type {
  font-family: Helvetica;
  font-size: 10px;
  color: #fff;
}

.paneltop {
  width: 351px;
  height: 81px;
  -webkit-border-radius: 20px 20px 0 0;
  -moz-border-radius: 20px 20px 0 0;
  border-radius: 20px 20px 0 0;
  background-color: #000;
  background-image: -webkit-linear-gradient(top, #0162ab, #00345b);
  background-image: -moz-linear-gradient(top, #0162ab, #00345b);
  background-image: -o-linear-gradient(top, #0162ab, #00345b);
  background-image: -ms-linear-gradient(top, #0162ab, #00345b);
  background-image: linear-gradient(to bottom, #0162ab, #00345b);
}

.panelback {
  width: 351px;
  height: 418px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background-color: #e0e1e2;
  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.34);
  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.34);
  box-shadow: 2px 3px 5px rgba(0,0,0,.34);
}

Example 2: psd-to-css

.type {
  color: #fff; /* text color */
  font-family: "Helvetica";
  font-size: 10px;
}

.paneltop {
  width: 351px;
  height: 81px;
  -moz-border-radius: 20px 20px 0 0;
  -webkit-border-radius: 20px 20px 0 0;
  border-radius: 20px 20px 0 0; /* border radius */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  background-color: #000; /* layer fill content */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDM1MSA4MSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSIgeDI9IjUwJSIgeTI9IjEwMCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDA2MWFiIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAzMzViIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIzNTEiIGhlaWdodD0iODEiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==); /* gradient overlay */
  background-image: -moz-linear-gradient(top, #0061ab 0%, #00335b 100%); /* gradient overlay */
  background-image: -o-linear-gradient(top, #0061ab 0%, #00335b 100%); /* gradient overlay */
  background-image: -webkit-linear-gradient(top, #0061ab 0%, #00335b 100%); /* gradient overlay */
  background-image: linear-gradient(top, #0061ab 0%, #00335b 100%); /* gradient overlay */
}

.panelback {
  width: 351px;
  height: 418px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px; /* border radius */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  background-color: #dfe0e2; /* layer fill content */
  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.34); /* drop shadow */
  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.34); /* drop shadow */
  box-shadow: 2px 3px 5px rgba(0,0,0,.34); /* drop shadow */
}