{"id":1387,"date":"2023-05-04T10:17:00","date_gmt":"2023-05-04T07:17:00","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1387"},"modified":"2023-05-03T16:19:54","modified_gmt":"2023-05-03T13:19:54","slug":"skeuomorphic-ui-kit","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/other\/1387\/","title":{"rendered":"Skeuomorphic UI Kit"},"content":{"rendered":"<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"633\" src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/05\/2023-05-03_15-173-1024x633.png\" alt=\"Skeuomorphic UI Kit\" class=\"wp-image-1388\" srcset=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/05\/2023-05-03_15-173-1024x633.png 1024w, https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/05\/2023-05-03_15-173-300x186.png 300w, https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/05\/2023-05-03_15-173-768x475.png 768w, https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/05\/2023-05-03_15-173.png 1041w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Skeuomorphic UI Kit<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\"> &lt;div class=&quot;content&quot;&gt;\n    &lt;h2&gt;From&lt;\/h2&gt;\n    &lt;div class=&quot;float from topMargin&quot;&gt;\n      &lt;div class=&quot;inline start&quot;&gt;\n        &lt;div class=&quot;card-amount&quot;&gt;\n          &lt;div class=&quot;small shadowless float fromNumber&quot;&gt;\u2219\u2219\u2219\u2219 3649&lt;\/div&gt;\n          &lt;h3&gt;$ 14,020.44&lt;\/h3&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;small float brand&quot;&gt;\n          &lt;h3&gt;HRTBT&lt;\/h3&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    \n    &lt;div class=&quot;spacer&quot;&gt;&lt;\/div&gt;\n    \n    &lt;div class=&quot;float creditCard&quot;&gt;\n      &lt;h3&gt;Credit Card Number&lt;\/h3&gt;\n      &lt;div class=&quot;inline topMargin&quot;&gt;\n        &lt;div class=&quot;small inset cardNumber&quot;&gt;0000 0000 0000 0000&lt;\/div&gt;\n        &lt;div class=&quot;small protrude button&quot;&gt;\n          &lt;svg viewbox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;&quot;&gt;&lt;path d=&quot;M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n    \n    &lt;div class=&quot;spacer&quot;&gt;&lt;\/div&gt;\n    \n    &lt;h2&gt;Amount&lt;\/h2&gt;\n    &lt;div class=&quot;inset amount&quot;&gt;\n      &lt;div class=&quot;inline between&quot;&gt;\n        &lt;h1 class=&quot;bold&quot;&gt;$ 100.00&lt;\/h1&gt;\n        &lt;span class=&quot;light hint&quot;&gt;no fee&lt;\/span&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">:root {\n\t--text-color: #33476B;\n\t--text-color-light: #9EB0C4;\n\t--radius: 1.2em;\n\t\/* --shadow-color: #BBCCDB;*\/\n\t--shadow-color: #ccdbe8;\n\t--border-width: -1px;\n\t--mono-font: monaco;\n\t--body-font: -apple-system, BlinkMacSystemFont, San Francisco, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif;\n\t--padding-small: .75em;\n\t--padding-medium: 1.25em;\n\t--padding-large: 2em;\n  }\n \n  body {\n\tbackground-image: linear-gradient(to right, #E9F0F8 0%, #DEE7F4 100%);\n\tfont-family: var(--body-font);\n\tcolor: var(--text-color);\n  }\n  \n  h1, h2, h3, h4, h5 {\n\tfont-weight: 200;\n\tmargin: 0;\n\tpadding: 0;\n\tline-height: 1;\n  }\n  \n  .content {\n\twidth: 920px;\n\tmax-width: 100%;\n\tmargin: 0 auto;\n\tpadding: 2rem;\n  }\n  \n  .spacer {\n\theight: 35px;\n  }\n  \n  .protrude, .float {\n\tborder-radius: var(--radius);\n  }\n  \n  .small {\n\t--radius: .75em;\n  }\n  \n  .topMargin {\n\tmargin-top: var(--padding-medium);\n  }\n  \n  .round {\n\twidth: 50px !important;\n\theight: 50px !important;\n\tborder-radius: 50% !important;\n  }\n  \n  .inset {\n\tborder-radius: calc(var(--radius) * 0.8);\n\tbackground-color: #E4EDF7;\n\tbox-shadow: inset 3px 3px 6px var(--shadow-color),\n\t  inset -3px -3px 6px 1px rgba(255,255,255,0.5);\n  }\n  \n  .inset.small {\n\tbox-shadow: inset 2px 2px 4px var(--shadow-color),\n\t  inset -2px -2px 4px rgba(255,255,255,0.5);\n  }\n  \n  .protrude {\n\tbackground-color: #E4ECF6;\n\tbox-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);\n  }\n  \n  .float {\n\tposition: relative;\n\tbox-shadow: 8px 8px 15px #CFDAE7;\n\tz-index: 1;\n  }\n  \n  .float .shadowless {\n\tbox-shadow: none;\n  }\n  \n  .float .shadowless:before {\n\tbackground-image: linear-gradient(160deg, #f5fbff 40%, rgba(255,255,255,0) 60%),  linear-gradient(330deg, #ADBAC8 30%, rgba(255,255,255,0) 60%);\n  }\n  \n  .float:before {\n\tcontent: ' ';\n\tdisplay: block;\n\tposition: absolute;\n\ttop: var(--border-width);\n\tleft: var(--border-width);\n\tright: var(--border-width);\n\tbottom: var(--border-width);\n\tborder-radius: var(--radius);\n\tbackground-image: linear-gradient(120deg, #f5fbff 25%, rgba(255,255,255,0) 50%),  linear-gradient(300deg, #ADBAC8 14%, rgba(255,255,255,0) 40%);\n\tz-index: -1;\n  }\n  \n  .float:after {\n\tcontent: ' ';\n\tdisplay: block;\n\tposition: absolute;\n\ttop: 0px;\n\tleft: 0px;\n\twidth: 100%;\n\theight: 100%;\n\tborder-radius: calc(var(--radius) - 1px);\n\tbackground-image: linear-gradient(165deg, #EAF1F8 9%, #DFE8F5 80%);\n\tz-index: -1;\n  }\n  \n  \/* Custom *\/\n  \n  .creditCard {\n\tdisplay: inline-block;\n\tpadding: var(--padding-large);\n  }\n  \n  .inline {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content:flex-start;\n\twidth: 100%;\n  }\n  \n  .inline.start {\n\talign-items: flex-start;\n  }\n  \n  .inline.between {\n\tjustify-content: space-between;\n  }\n  \n  .cardNumber {\n\tdisplay: inline-block;\n\tfont-family: var(--mono-font);\n\tpadding: var(--padding-small);\n\tpadding-right: 3em;\n\tcolor: var(--text-color-light);\n  }\n  \n  .button {\n\tdisplay: inline-block;\n\tpadding: calc(var(--padding-small) - .15em);\n\tmargin-left: var(--padding-small);\n  }\n  \n  .button svg {\n\tdisplay: block;\n\theight: 1.5em;\n\twidth: 1.5em;\n  }\n  \n  .bold {\n\tfont-weight: 500;\n  }\n  \n  .amount {\n\tmargin-top: var(--padding-medium);\n\tpadding: var(--padding-medium);\n\twidth: 320px;\n  }\n  \n  .amount .hint {\n\tmargin-left: auto;\n\tcolor: var(--text-color-light);\n  }\n  \n  .from {\n\tdisplay: inline-block;\n\tpadding: var(--padding-large);\n  }\n  \n  .fromNumber {\n\tfont-family: var(--mono-font);\n\tpadding: var(--padding-small);\n  }\n  \n  .brand {\n\tmargin-left: var(--padding-large);\n\tpadding: var(--padding-small);\n\tpadding-bottom: 3.5em;\n\tpadding-right: 4em;\n  }\n  \n  .brand h3 {\n\tfont-weight: 800;\n\tfont-style: italic;\n  }\n  \n  .card-amount h3 {\n\tmargin-top: var(--padding-medium);\n\tfont-weight: 500;\n  }<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1388,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[16],"class_list":["post-1387","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other","tag-htmlcss"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1387"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1387\/revisions"}],"predecessor-version":[{"id":1389,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1387\/revisions\/1389"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1388"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}