{"id":1295,"date":"2023-04-12T10:24:32","date_gmt":"2023-04-12T07:24:32","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1295"},"modified":"2023-04-12T10:24:34","modified_gmt":"2023-04-12T07:24:34","slug":"card-2","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/cards\/1295\/","title":{"rendered":"Card"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Card UI\" width=\"640\" height=\"480\" src=\"https:\/\/www.youtube.com\/embed\/yUPd6UWgC-s?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/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;link href=&quot;https:\/\/fonts.googleapis.com\/css?family=Raleway+Dots&quot; rel=&quot;stylesheet&quot;&gt;\n&lt;link href=&quot;https:\/\/fonts.googleapis.com\/css?family=Raleway&quot; rel=&quot;stylesheet&quot;&gt;\n\n  &lt;div class='card'&gt;\n    &lt;input checked='checked' id='rad1' name='rad' type='radio'&gt;\n    &lt;div for='rad1'&gt;\n      &lt;h1&gt;1&lt;\/h1&gt;\n      &lt;div class='btn'&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;input id='rad2' name='rad' type='radio'&gt;\n    &lt;div for='rad2'&gt;\n      &lt;h1&gt;2&lt;\/h1&gt;\n      &lt;div class='btn'&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;input id='rad3' name='rad' type='radio'&gt;\n    &lt;div for='rad3'&gt;\n      &lt;h1&gt;3&lt;\/h1&gt;\n      &lt;div class='btn'&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;input type='checkbox'&gt;\n    &lt;a&gt;Read More&lt;\/a&gt;\n    &lt;p&gt;Phasellus nec sem in justo pellentesque facilisis. In hac habitasse platea dictumst. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.&lt;\/p&gt;\n    &lt;div class='shapes'&gt;&lt;\/div&gt;\n    &lt;div class='photo'&gt;\n      &lt;div&gt;&lt;\/div&gt;\n      &lt;div&gt;&lt;\/div&gt;\n      &lt;div&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;div class='blob'&gt;\n      &lt;div class='glob'&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; version=&quot;1.1&quot;&gt;\n  &lt;defs&gt;\n  &lt;filter id=&quot;goo&quot;&gt;\n  &lt;feGaussianBlur in=&quot;SourceGraphic&quot; stdDeviation=&quot;12&quot; result=&quot;blur&quot; \/&gt;\n  &lt;feColorMatrix in=&quot;blur&quot; mode=&quot;matrix&quot; values=&quot;1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9&quot; result=&quot;goo&quot; \/&gt;\n  &lt;feComposite in=&quot;SourceGraphic&quot; in2=&quot;goo&quot; operator=&quot;atop&quot;\/&gt;\n  &lt;\/filter&gt;\n  &lt;\/defs&gt;\n  &lt;\/svg&gt;\n  &lt;svg class=&quot;svg&quot; viewBox=&quot;0 0 400 400&quot;&gt;\n  &lt;defs&gt;\n  &lt;filter id=&quot;duotone-filter-post-one&quot;&gt;\n  &lt;feColorMatrix type=&quot;matrix&quot; values=&quot;0.14453125 0 0 0 0.33203125 0.71875 0 0 0 0.27734375 -0.34765625 0 0 0 0.73046875 0 0 0 1 0&quot;&gt;&lt;\/feColorMatrix&gt;\n  &lt;\/filter&gt;\n  &lt;\/defs&gt;\n  &lt;\/svg&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;}\">@charset &quot;UTF-8&quot;;\nbody {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100vh;\n  font-family: &quot;Raleway Dots&quot;;\n  background: radial-gradient(ellipse at bottom left, #FE8D58, #FE8D58 20%, transparent 20%), linear-gradient(to bottom, #314a5e, #fff);\n}\nbody input[type=radio] {\n  position: absolute;\n  z-index: 999;\n  left: 0;\n  bottom: 0;\n  width: 33.33%;\n  opacity: 0;\n  overflow: hidden;\n  height: 30px;\n}\nbody input[type=radio]:hover + div .btn {\n  background: #314a5e;\n}\nbody input[type=radio]:hover + div .btn:after {\n  color: #fff;\n}\nbody input[type=radio]:nth-of-type(2) {\n  left: 33.33%;\n}\nbody input[type=radio]:nth-of-type(2) + div .btn {\n  left: 33.33%;\n}\nbody input[type=radio]:nth-of-type(2) + div .btn:after {\n  content: &quot;2&quot;;\n}\nbody input[type=radio]:nth-of-type(3) {\n  left: 66.66%;\n}\nbody input[type=radio]:nth-of-type(3) + div .btn {\n  left: 66.66%;\n}\nbody input[type=radio]:nth-of-type(3) + div .btn:after {\n  content: &quot;3&quot;;\n}\nbody input[type=radio]:checked + div .btn {\n  box-shadow: 0 0 0 2px #6D44B5;\n  z-index: 10;\n  padding: 5px 0;\n}\nbody input[type=radio]:checked + div .btn:before {\n  left: -25%;\n}\nbody input[type=radio]:checked + div .btn:after {\n  color: #fff;\n}\nbody input[type=radio] + div .btn {\n  position: absolute;\n  width: 33%;\n  bottom: 0;\n  left: 0;\n  height: 25px;\n  box-shadow: 0 0 0 2px #314a5e;\n  overflow: hidden;\n  z-index: 9;\n  cursor: pointer;\n}\nbody input[type=radio] + div .btn:after {\n  content: &quot;1&quot;;\n  position: absolute;\n  color: #FE8D58;\n  font-weight: 900;\n  font-size: 22px;\n  left: 50%;\n  top: 50%;\n  transform: translateX(-50%) translateY(calc(-50% - 2.5px));\n  line-height: 0;\n  color: #314a5e;\n}\nbody input[type=radio] + div .btn:before {\n  content: &quot;&quot;;\n  position: absolute;\n  width: 150%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  background: #6D44B5;\n  left: -150%;\n  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\nbody svg {\n  position: absolute;\n  width: 0;\n  height: 0;\n}\nbody .card {\n  width: 500px;\n  min-width: 500px;\n  height: 350px;\n  position: relative;\n  max-width: 100%;\n  background: #fff;\n}\nbody .card * {\n  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\nbody .card h1, body .card a {\n  position: absolute;\n  right: 30px;\n  z-index: 9;\n  color: #fff;\n  font-size: 200px;\n  font-weight: 100;\n  margin: 0;\n  top: 0;\n  line-height: 0.75;\n  transform: scale(0) rotateX(180deg);\n  opacity: 0;\n}\nbody .card p {\n  position: absolute;\n  z-index: 999;\n  width: 75%;\n  font-size: 18px;\n  font-weight: 100;\n  font-family: &quot;Raleway&quot;;\n  line-height: 26px;\n  left: 12.5%;\n  color: #fff;\n  display: inline-block;\n  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);\n  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);\n  transition: none;\n}\nbody .card a {\n  color: #6D44B5;\n  font-size: 15px;\n  bottom: 50px;\n  top: auto;\n  width: 50%;\n  display: block;\n  text-align: center;\n  letter-spacing: 5px;\n  text-transform: uppercase;\n  font-weight: 900;\n  padding: 15px 5px;\n  border: 2px solid;\n  cursor: pointer;\n  left: -50px;\n  opacity: 1;\n  transform: none;\n  height: 12.5px;\n  font-family: &quot;Raleway&quot;;\n  border-radius: 10px;\n}\nbody .card a:before {\n  content: &quot;BACK&quot;;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translateX(-50%) translateY(-50%) scale(0);\n  font-size: 15px;\n  opacity: 0;\n}\nbody .card input[type=checkbox] {\n  z-index: 999;\n  position: absolute;\n  bottom: 50px;\n  width: 50%;\n  left: -50px;\n  height: 50px;\n  opacity: 0;\n}\nbody .card input[type=checkbox]:hover ~ a {\n  background: #fba0cc;\n  color: #fff;\n  border-color: #fba0cc;\n}\nbody .card input[type=checkbox]:checked ~ p {\n  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.175);\n  transition-delay: 0.2s;\n  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);\n  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);\n}\nbody .card input[type=checkbox]:checked ~ a {\n  z-index: 100;\n  color: #fff;\n  font-size: 0;\n}\nbody .card input[type=checkbox]:checked ~ a:before {\n  opacity: 1;\n  transform: translateX(-50%) translateY(-50%) scale(1);\n}\nbody .card input[type=checkbox]:checked ~ .blob {\n  z-index: 99;\n  transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\nbody .card input[type=checkbox]:checked ~ .blob:before, body .card input[type=checkbox]:checked ~ .blob:after {\n  transform: scale(0);\n}\nbody .card input[type=checkbox]:checked ~ .blob .glob {\n  transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1);\n  min-width: 110%;\n  min-height: 110%;\n  border-radius: 0px;\n  top: -5%;\n  right: -5%;\n}\nbody .card input[type=radio] + div {\n  overflow: hidden;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n}\nbody .card input[type=radio]:checked + div h1 {\n  transform: scale(1) rotate(0deg);\n  opacity: 1;\n}\nbody .card input[type=radio]:nth-of-type(2):checked + div ~ .blob .glob {\n  width: 70%;\n  height: 75%;\n  background: #FE8D58;\n}\nbody .card input[type=radio]:nth-of-type(2):checked + div ~ .blob:before {\n  top: 40%;\n  background: #FE8D58;\n}\nbody .card input[type=radio]:nth-of-type(2):checked + div ~ .blob:after {\n  background: #FE8D58;\n}\nbody .card input[type=radio]:nth-of-type(3):checked + div ~ .blob .glob {\n  width: 70%;\n  height: 55%;\n  background: #F45746;\n}\nbody .card input[type=radio]:nth-of-type(3):checked + div ~ .blob:before {\n  top: 20%;\n  background: #F45746;\n  left: 40%;\n}\nbody .card input[type=radio]:nth-of-type(3):checked + div ~ .blob:after {\n  background: #F45746;\n  left: 70%;\n}\nbody .card input[type=radio]:nth-of-type(1):checked + div ~ .photo div:nth-of-type(1) {\n  transform: rotateX(0deg);\n}\nbody .card input[type=radio]:nth-of-type(2):checked + div ~ .photo div:nth-of-type(2) {\n  transform: rotateX(0deg);\n}\nbody .card input[type=radio]:nth-of-type(3):checked + div ~ .photo div:nth-of-type(3) {\n  transform: rotateX(0deg);\n}\nbody .card input[type=radio]:nth-of-type(2):checked + div ~ .shapes {\n  top: 35%;\n  left: 65%;\n  width: 90px;\n}\nbody .card input[type=radio]:nth-of-type(2):checked + div ~ .shapes:before {\n  left: 120px;\n  top: 170px;\n  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);\n  clip-path: polygon(0 0, 0% 100%, 100% 50%);\n}\nbody .card input[type=radio]:nth-of-type(3):checked + div ~ .shapes {\n  top: 55%;\n  left: 55%;\n  width: 140px;\n}\nbody .card input[type=radio]:nth-of-type(3):checked + div ~ .shapes:before {\n  left: 140px;\n  top: -40px;\n  -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);\n  clip-path: polygon(100% 0, 0 0, 100% 100%);\n}\nbody .card:before {\n  content: &quot;&quot;;\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);\n  z-index: 200;\n}\nbody .card .photo {\n  position: absolute;\n  width: 50%;\n  height: 100%;\n  z-index: 0;\n  overflow: hidden;\n  perspective: 300px;\n}\nbody .card .photo div {\n  position: absolute;\n  width: 75%;\n  height: 50%;\n  transform: rotateX(-180deg);\n  top: -12.5%;\n  margin-left: -12.5%;\n  transform-style: preserve-3d;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  border-radius: 100%;\n  box-shadow: inset 0 0 0 5px #fff, 0 0 0 5px #fba0cc, 0 0 0 10px #fff;\n}\nbody .card .photo div:before {\n  content: &quot;?&quot;;\n  font-size: 75px;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  margin: 20px 0 0 5px;\n  transform: translateX(-50%) translateY(-50%);\n  filter: saturate(0) brightness(20);\n  opacity: 0.25;\n}\nbody .card .photo div:first-of-type {\n  background: #fba0cc;\n}\nbody .card .photo div:nth-of-type(2) {\n  background: #F45746;\n  box-shadow: inset 0 0 0 5px #fff, 0 0 0 5px #F45746, 0 0 0 10px #fff;\n}\nbody .card .photo div:nth-of-type(2):before {\n  content: &quot;?&quot;;\n}\nbody .card .photo div:nth-of-type(3) {\n  background: #314a5e;\n  box-shadow: inset 0 0 0 5px #fff, 0 0 0 5px #314a5e, 0 0 0 10px #fff;\n}\nbody .card .photo div:nth-of-type(3):before {\n  content: &quot;?&quot;;\n}\nbody .card .shapes {\n  position: absolute;\n  left: 45%;\n  top: 20%;\n  background: #FE8D58;\n  width: 60px;\n  height: 4px;\n  z-index: 2;\n  box-shadow: 0 8px 0 0 #FE8D58, 0 16px 0 0 #FE8D58, 0 24px 0 0 #FE8D58, 0 32px 0 0 #FE8D58;\n  mix-blend-mode: screen;\n}\nbody .card .shapes:before {\n  content: &quot;&quot;;\n  position: absolute;\n  width: 40px;\n  height: 40px;\n  background: linear-gradient(to bottom, #FE8D58, #F45746);\n  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n  left: 175px;\n  top: 160px;\n  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\nbody .card .blob {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  filter: url(#goo);\n}\nbody .card .blob .glob {\n  position: absolute;\n  width: 60%;\n  height: 75%;\n  background: #6D44B5;\n  border-radius: 100%;\n  top: -25%;\n  right: -25%;\n}\nbody .card .blob:before, body .card .blob:after {\n  content: &quot;&quot;;\n  position: absolute;\n  width: 50%;\n  height: 60%;\n  background: #6D44B5;\n  border-radius: 100%;\n  right: 0;\n  top: 20px;\n  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\nbody .card .blob:after {\n  right: -15%;\n  top: 20%;\n  width: 40%;\n  height: 60%;\n}<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1296,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[16],"class_list":["post-1295","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\/1295","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=1295"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1295\/revisions"}],"predecessor-version":[{"id":1297,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1295\/revisions\/1297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1296"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}