psd to css

Solutions on MaxInterview for psd to css by the best coders in the world

showing results for - "psd to css"
María Paula
09 Sep 2017
1	.type {
2  font-family: Helvetica;
3  font-size: 10px;
4  color: #fff;
5}
6
7.paneltop {
8  width: 351px;
9  height: 81px;
10  -webkit-border-radius: 20px 20px 0 0;
11  -moz-border-radius: 20px 20px 0 0;
12  border-radius: 20px 20px 0 0;
13  background-color: #000;
14  background-image: -webkit-linear-gradient(top, #0162ab, #00345b);
15  background-image: -moz-linear-gradient(top, #0162ab, #00345b);
16  background-image: -o-linear-gradient(top, #0162ab, #00345b);
17  background-image: -ms-linear-gradient(top, #0162ab, #00345b);
18  background-image: linear-gradient(to bottom, #0162ab, #00345b);
19}
20
21.panelback {
22  width: 351px;
23  height: 418px;
24  -webkit-border-radius: 20px;
25  -moz-border-radius: 20px;
26  border-radius: 20px;
27  background-color: #e0e1e2;
28  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.34);
29  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.34);
30  box-shadow: 2px 3px 5px rgba(0,0,0,.34);
31}
Amel
28 Jun 2020
1	.type {
2  color: #fff; /* text color */
3  font-family: "Helvetica";
4  font-size: 10px;
5}
6
7.paneltop {
8  width: 351px;
9  height: 81px;
10  -moz-border-radius: 20px 20px 0 0;
11  -webkit-border-radius: 20px 20px 0 0;
12  border-radius: 20px 20px 0 0; /* border radius */
13  -moz-background-clip: padding;
14  -webkit-background-clip: padding-box;
15  background-clip: padding-box; /* prevents bg color from leaking outside the border */
16  background-color: #000; /* layer fill content */
17  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDM1MSA4MSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSIgeDI9IjUwJSIgeTI9IjEwMCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDA2MWFiIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAzMzViIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIzNTEiIGhlaWdodD0iODEiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==); /* gradient overlay */
18  background-image: -moz-linear-gradient(top, #0061ab 0%, #00335b 100%); /* gradient overlay */
19  background-image: -o-linear-gradient(top, #0061ab 0%, #00335b 100%); /* gradient overlay */
20  background-image: -webkit-linear-gradient(top, #0061ab 0%, #00335b 100%); /* gradient overlay */
21  background-image: linear-gradient(top, #0061ab 0%, #00335b 100%); /* gradient overlay */
22}
23
24.panelback {
25  width: 351px;
26  height: 418px;
27  -moz-border-radius: 20px;
28  -webkit-border-radius: 20px;
29  border-radius: 20px; /* border radius */
30  -moz-background-clip: padding;
31  -webkit-background-clip: padding-box;
32  background-clip: padding-box; /* prevents bg color from leaking outside the border */
33  background-color: #dfe0e2; /* layer fill content */
34  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.34); /* drop shadow */
35  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.34); /* drop shadow */
36  box-shadow: 2px 3px 5px rgba(0,0,0,.34); /* drop shadow */
37}