{"id":2401,"date":"2024-01-30T10:14:13","date_gmt":"2024-01-30T09:14:13","guid":{"rendered":"https:\/\/inf.gymgmunden.at\/?p=2401"},"modified":"2024-01-30T10:14:13","modified_gmt":"2024-01-30T09:14:13","slug":"css-tricks","status":"publish","type":"post","link":"https:\/\/inf.gymgmunden.at\/index.php\/2024\/01\/30\/css-tricks\/","title":{"rendered":"CSS Tricks"},"content":{"rendered":"\n<p>CSS steht f\u00fcr Cascading Style Sheets und bezeichnet die Technologie, mit der Webanwendungen gestyled werden.<\/p>\n\n\n\n<p>Manchmal gibt es ganz besondere Hacks, wie folgenden animierten Glow-Effekt:<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/inf.gymgmunden.at\/wp-content\/uploads\/2024\/01\/SOLAppAnimated.mp4\"><\/video><\/figure>\n\n\n\n<p>Hier der Hack, falls es jemand nachbauen m\u00f6chte \ud83d\ude42<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.text-effect-wrapper,\n.text {\n  &amp;::before,\n  &amp;::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n  }\n}\n\n.text-effect-wrapper {\n  --spotlight-color: white;\n\n  overflow: hidden;\n  position: relative;\n\n  &amp;::before {\n    animation: shining 5s infinite linear;\n    background: \n      radial-gradient(circle, var(--spotlight-color), transparent 25%) 0 0 \/ 25% 25%,\n      radial-gradient(circle, var(--spotlight-color), black 25%) 50% 50% \/ 12.5% 12.5%;\n    inset-block-start: -100%;\n    inset-inline-start: -100%;\n    mix-blend-mode: color-dodge;\n    z-index: 3;\n  }\n\n  &amp;::after {\n    backdrop-filter: blur(1px) brightness(90%) contrast(150%);\n    z-index: 4;\n  }\n}\n\n@keyframes shining {\n  100% {\n    transform: translate3d(50%, 50%, 0);\n  }\n}\n\n.text {\n  --background-color: black;\n  --text-color: white;\n\n  --color-1: goldenrod;\n  --color-2: gold;\n\n  color: transparent;\n  text-shadow: \n    0 0 0.02em var(--background-color), \n    0 0 0.02em var(--text-color),\n    0 0 0.02em var(--text-color), \n    0 0 0.02em var(--text-color);\n\n  &amp;::before {\n    backdrop-filter: blur(0.013em) brightness(400%);\n    z-index: 1;\n  }\n\n  &amp;::after {\n    background: linear-gradient(45deg, var(--color-1), var(--color-2));\n    mix-blend-mode: multiply;\n    z-index: 2;\n  }\n}\n\nh1#solapp {\n  --font-size: clamp(6.25rem, 3.25rem + 15vw, 13.75rem);\n\n  font: 700 var(--font-size)\/1 \"Lato\", sans-serif;\n  text-transform: uppercase;\n  text-align: center;\n  margin: 0;\n\n  &amp;:empty,\n  &amp;:focus {\n    border: 2px dotted white;\n    min-width: 1ch;\n    outline-offset: 5px;\n  }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>CSS steht f\u00fcr Cascading Style Sheets und bezeichnet die Technologie, mit der Webanwendungen gestyled werden. Manchmal gibt es ganz besondere Hacks, wie folgenden animierten Glow-Effekt: Hier der Hack, falls es jemand nachbauen m\u00f6chte \ud83d\ude42<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2401","post","type-post","status-publish","format-standard","hentry","category-allgemein"],"_links":{"self":[{"href":"https:\/\/inf.gymgmunden.at\/index.php\/wp-json\/wp\/v2\/posts\/2401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inf.gymgmunden.at\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inf.gymgmunden.at\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inf.gymgmunden.at\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inf.gymgmunden.at\/index.php\/wp-json\/wp\/v2\/comments?post=2401"}],"version-history":[{"count":1,"href":"https:\/\/inf.gymgmunden.at\/index.php\/wp-json\/wp\/v2\/posts\/2401\/revisions"}],"predecessor-version":[{"id":2403,"href":"https:\/\/inf.gymgmunden.at\/index.php\/wp-json\/wp\/v2\/posts\/2401\/revisions\/2403"}],"wp:attachment":[{"href":"https:\/\/inf.gymgmunden.at\/index.php\/wp-json\/wp\/v2\/media?parent=2401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inf.gymgmunden.at\/index.php\/wp-json\/wp\/v2\/categories?post=2401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inf.gymgmunden.at\/index.php\/wp-json\/wp\/v2\/tags?post=2401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}