{"id":1276,"date":"2023-04-15T10:41:00","date_gmt":"2023-04-15T07:41:00","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1276"},"modified":"2023-04-11T22:44:29","modified_gmt":"2023-04-11T19:44:29","slug":"card","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/cards\/1276\/","title":{"rendered":"Card"},"content":{"rendered":"<figure class=\"wp-block-video\"><video height=\"722\" style=\"aspect-ratio: 1210 \/ 722;\" width=\"1210\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/04\/vokoscreenng-2023-04-11_21-41-15.webm\"><\/video><\/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;card&quot;&gt;\n    Magic Card\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;}\">@property --rotate {\n  syntax: &quot;&lt;angle&gt;&quot;;\n  initial-value: 132deg;\n  inherits: false;\n}\n\n:root {\n  --card-height: 65vh;\n  --card-width: calc(var(--card-height) \/ 1.5);\n}\n\n\nbody {\n  min-height: 100vh;\n  background: #212534;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n  box-sizing: border-box;\n}\n\n\n.card {\n  background: #191c29;\n  width: var(--card-width);\n  height: var(--card-height);\n  padding: 3px;\n  position: relative;\n  border-radius: 6px;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  display: flex;\n  font-size: 1.5em;\n  color: rgb(88 199 250 \/ 0%);\n  cursor: pointer;\n  font-family: cursive;\n}\n\n.card:hover {\n  color: rgb(88 199 250 \/ 100%);\n  transition: color 1s;\n}\n.card:hover:before, .card:hover:after {\n  animation: none;\n  opacity: 0;\n}\n\n\n.card::before {\n  content: &quot;&quot;;\n  width: 104%;\n  height: 102%;\n  border-radius: 8px;\n  background-image: linear-gradient(\n    var(--rotate)\n    , #5ddcff, #3c67e3 43%, #4e00c2);\n    position: absolute;\n    z-index: -1;\n    top: -1%;\n    left: -2%;\n    animation: spin 2.5s linear infinite;\n}\n\n.card::after {\n  position: absolute;\n  content: &quot;&quot;;\n  top: calc(var(--card-height) \/ 6);\n  left: 0;\n  right: 0;\n  z-index: -1;\n  height: 100%;\n  width: 100%;\n  margin: 0 auto;\n  transform: scale(0.8);\n  filter: blur(calc(var(--card-height) \/ 6));\n  background-image: linear-gradient(\n    var(--rotate)\n    , #5ddcff, #3c67e3 43%, #4e00c2);\n    opacity: 1;\n  transition: opacity .5s;\n  animation: spin 2.5s linear infinite;\n}\n\n@keyframes spin {\n  0% {\n    --rotate: 0deg;\n  }\n  100% {\n    --rotate: 360deg;\n  }\n}\n\na {\n  color: #212534;\n  text-decoration: none;\n  font-family: sans-serif;\n  font-weight: bold;\n  margin-top: 2rem;\n}<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1277,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[16],"class_list":["post-1276","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cards","tag-htmlcss"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1276","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=1276"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1276\/revisions"}],"predecessor-version":[{"id":1279,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1276\/revisions\/1279"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1277"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}