{"id":20253,"date":"2021-11-24T11:10:01","date_gmt":"2021-11-24T10:10:01","guid":{"rendered":"https:\/\/kevinrechsteiner.com\/blog\/?p=20253"},"modified":"2021-11-24T11:10:01","modified_gmt":"2021-11-24T10:10:01","slug":"ein-vw-kaefer-aus-reinem-css","status":"publish","type":"post","link":"https:\/\/kevinrechsteiner.com\/blog\/2021\/11\/24\/ein-vw-kaefer-aus-reinem-css\/","title":{"rendered":"Ein VW-K\u00e4fer aus reinem CSS"},"content":{"rendered":"<p>Das ist jetzt ein bisschen fachspezifisch, aber ganz kurz: Bei Internetseiten werden Farben, Formen, Gr\u00f6ssen, Abst\u00e4nde usw. mit CSS gel\u00f6st. CSS sieht etwa so aus:<\/p>\n<blockquote><p>position: absolute;<br \/>\nright: -2%;<br \/>\nbottom: -3%;<br \/>\nwidth: 105%;<br \/>\nheight: 8%;<br \/>\nbackground: #000;<br \/>\nborder-radius: 100%;<br \/>\nbackground: radial-gradient($bigshasow 0% 50%, transparent),<br \/>\nradial-gradient($bigshasow 0% 30%, transparent);<br \/>\nfilter: blur(4px);<\/p><\/blockquote>\n<p>Im Moment zeigen viele Webentwickler, was mit CSS m\u00f6glich ist. So ist z.B. dieser VW-K\u00e4fer unten aus reinem CSS entstanden. Beeindruckend!<\/p>\n<p><a href=\"https:\/\/codepen.io\/shunyadezain\/pen\/MWypjVW\">Hier geht&#8217;s zum Code.<\/a><\/p>\n<p><a href=\"https:\/\/codepen.io\/shunyadezain\/pen\/MWypjVW\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-20254 size-full\" src=\"https:\/\/kevinrechsteiner.com\/blog\/wp-content\/uploads\/2021\/11\/csskaefer.jpg\" alt=\"\" width=\"714\" height=\"397\" srcset=\"https:\/\/kevinrechsteiner.com\/blog\/wp-content\/uploads\/2021\/11\/csskaefer.jpg 714w, https:\/\/kevinrechsteiner.com\/blog\/wp-content\/uploads\/2021\/11\/csskaefer-300x167.jpg 300w\" sizes=\"auto, (max-width: 714px) 100vw, 714px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das ist jetzt ein bisschen fachspezifisch, aber ganz kurz: Bei Internetseiten werden Farben, Formen, Gr\u00f6ssen, Abst\u00e4nde usw. mit CSS gel\u00f6st. CSS sieht etwa so aus: position: absolute; right: -2%; bottom: -3%; width: 105%; height: 8%; background: #000; border-radius: 100%; background: radial-gradient($bigshasow 0% 50%, transparent), radial-gradient($bigshasow 0% 30%, transparent); filter: blur(4px); Im Moment zeigen viele Webentwickler, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[1345,60],"class_list":["post-20253","post","type-post","status-publish","format-standard","hentry","category-computer","tag-css","tag-webdesign"],"_links":{"self":[{"href":"https:\/\/kevinrechsteiner.com\/blog\/wp-json\/wp\/v2\/posts\/20253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kevinrechsteiner.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kevinrechsteiner.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kevinrechsteiner.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kevinrechsteiner.com\/blog\/wp-json\/wp\/v2\/comments?post=20253"}],"version-history":[{"count":1,"href":"https:\/\/kevinrechsteiner.com\/blog\/wp-json\/wp\/v2\/posts\/20253\/revisions"}],"predecessor-version":[{"id":20255,"href":"https:\/\/kevinrechsteiner.com\/blog\/wp-json\/wp\/v2\/posts\/20253\/revisions\/20255"}],"wp:attachment":[{"href":"https:\/\/kevinrechsteiner.com\/blog\/wp-json\/wp\/v2\/media?parent=20253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kevinrechsteiner.com\/blog\/wp-json\/wp\/v2\/categories?post=20253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kevinrechsteiner.com\/blog\/wp-json\/wp\/v2\/tags?post=20253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}