The Power of CSS Talk
How do I make an the power of css talk?
What is a the power of css talk? How do you make a the power of css talk? This script and codes were developed by Una Kravets on 06 September 2022, Tuesday.
The Power of CSS Talk Previews
The Power of CSS Talk - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Power of CSS Talk</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a id=s1 title="Section 1 Anchor" class=s></a> <a id=s2 title="Section 2 Anchor" class=s></a> <a id=s3 title="Section 3 Anchor" class=s></a> <a id=s4 title="Section 4 Anchor" class=s></a> <a id=s5 title="Section 5 Anchor" class=s></a> <a id=s6 title="Section 6 Anchor" class=s></a> <a id=s7 title="Section 7 Anchor" class=s></a> <a id=s8 title="Section 8 Anchor" class=s></a> <a id=s9 title="Section 9 Anchor" class=s></a> <a id=s10 title="Section 10 Anchor" class=s></a> <a id=s11 title="Section 11 Anchor" class=s></a> <a id=s12 title="Section 12 Anchor" class=s></a> <a id=s13 title="Section 13 Anchor" class=s></a> <a id=s14 title="Section 14 Anchor" class=s></a><div class=progress></div><div class=border></div><nav class=prevnext role=presentation><ul><li><a href=#s1 accesskey=1 title="Slide 1"></a></li><li><a href=#s2 accesskey=2 title="Slide 2"></a></li><li><a href=#s3 accesskey=3 title="Slide 3"></a></li><li><a href=#s4 accesskey=4 title="Slide 4"></a></li><li><a href=#s5 accesskey=5 title="Slide 5"></a></li><li><a href=#s6 accesskey=6 title="Slide 6"></a></li><li><a href=#s7 accesskey=7 title="Slide 7"></a></li><li><a href=#s8 accesskey=8 title="Slide 8"></a></li><li><a href=#s9 accesskey=9 title="Slide 9"></a></li><li><a href=#s10 accesskey=0 title="Slide 10"></a></li><li><a href=#s11 accesskey=q title="Slide 11"></a></li><li><a href=#s12 accesskey=w title="Slide 12"></a></li><li><a href=#s13 accesskey=e title="Slide 13"></a></li><li><a href=#s14 accesskey=r title="Slide 14"></a></li></ul></nav><nav class=thumbs aria-label="table of contents"><ul><li><a href=#s1 title="Slide 1 Thumbnail"></a></li><li><a href=#s2 title="Slide 2 Thumbnail"></a></li><li><a href=#s3 title="Slide 3 Thumbnail"></a></li><li><a href=#s4 title="Slide 4 Thumbnail"></a></li><li><a href=#s5 title="Slide 5 Thumbnail"></a></li><li><a href=#s6 title="Slide 6 Thumbnail"></a></li><li><a href=#s7 title="Slide 7 Thumbnail"></a></li><li><a href=#s8 title="Slide 8 Thumbnail"></a></li><li><a href=#s9 title="Slide 9 Thumbnail"></a></li><li><a href=#s10 title="Slide 10 Thumbnail"></a></li><li><a href=#s11 title="Slide 11 Thumbnail"></a></li><li><a href=#s12 title="Slide 12 Thumbnail"></a></li><li><a href=#s13 title="Slide 13 Thumbnail"></a></li><li><a href=#s14 title="Slide 14 Thumbnail"></a></li></ul></nav><main role=main><!--Intro--><section class="u-verticalCenter u-center"><article class=intro-article><h1><span class=u-textBold>The Power</span> of CSS</h1><h2>Front Trends 2017<br>@una</h2></article><svg version=1.1 class=intro-bg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x=0px y=0px width=707px height=433px viewbox="0 0 707 433" style="enable-background:new 0 0 707 433;" xml:space=preserve><polygon class=yellow-bg points="247.2,58.1 492.2,322.1 614.4,86.7"></polygon><polygon class=yellow-bg points="342,370 247.2,185.8 0,315"></polygon><polygon class=pink-bg points="102,388 707,166 561,370"></polygon><polygon class=blue-bg points="18.5,0 633.2,0 358.9,433"></polygon></svg><div class=check-offs><input type=checkbox class="u-click-trigger intro-trigger"><div class="u-click-appear intro-gif"><img style="left: -68vw; width: 50vw;" src=https://una.im/slides--the-power-of-css/img/dog.gif></div><input type=checkbox class="u-click-trigger intro-trigger"><div class="u-click-appear intro-gif"><img src=https://una.im/slides--the-power-of-css/img/cssgif2.gif></div><input type=checkbox class="u-click-trigger intro-trigger"><div class="u-click-appear intro-gif"><img src=https://una.im/slides--the-power-of-css/img/cssgif1.gif></div></div></section><section><article><h2 class=u-textRight>Filters & Blend Modes</h2><div class=live-code-area><div class=img-area><img style="position: absolute; top: 0; left: 0; height: 100vh;" class=demo1 src=https://una.im/slides--the-power-of-css/img/brooke-lark-158017.jpg><div class=image-background style="background:white; z-index:-3; position: absolute; top: 0; left: 0; height: 100vh; width: 100vw;"></div></div><!--Filters, Blend Modes--><div><div class=style-box-area><style class=code-editor contenteditable=true>.demo1 { // filter: blur(20px); // filter: brightness(1.5); // filter: contrast(1.5); // filter: grayscale(.8); // filter: hue-rotate(50deg); // filter: invert(.8); // filter: opacity(.1); // filter: sepia(.6); // filter: saturate(4);
}</style></div><input type=checkbox style="float: none" class=u-click-trigger><div class=u-click-appear><div class=demo1-cover></div><div class=style-box-area><style class=code-editor contenteditable=true>.demo1-cover { background: yellow; // mix-blend-mode: multiply; // mix-blend-mode: screen; // mix-blend-mode: lighten; // mix-blend-mode: darken; // mix-blend-mode: hue; // mix-blend-mode: saturation; // mix-blend-mode: luminosity; // mix-blend-mode: color; // mix-blend-mode: soft-light; // mix-blend-mode: difference;
}</style></div></div></div></div><button class=caniuse-trigger>?</button><div class=caniuse-info></div></article></section><!--Turing Complete--><section><article><blockquote>"A <span class=u-textBold>Turing Complete</span> system means a system in which a program can be written that will find an answer to any computational problem"</blockquote><a href=https://codepen.io/mknadler/pen/pEWAmg target=_blank><img src=img/ElementaryCARule110_1000.gif></a></article></section><!--Accordion--><section class=less-padding><article><p data-height=300 data-theme-id=light data-slug-hash=EgLPmZ data-default-tab=result data-user=una data-embed-version=2 data-pen-title="CSS Only Accordion: youmightnotneedjs.com" class=codepen>See the Pen <a href="https://codepen.io/una/pen/EgLPmZ/">CSS Only Accordion: youmightnotneedjs.com</a> by Una Kravets (<a href=https://codepen.io/una>@una</a>) on <a href=https://codepen.io>CodePen</a>.</p><input type=checkbox class=u-click-trigger><div class=u-click-appear><div class=code-area><div class="code-block html"><h3>HTML</h3><pre><code><div class="togglebox"> <input id="toggle1" type="checkbox" name="toggle" /> <label for="toggle1">Label 1</label> <section id="content1"> <p>Content for the first accordion</p> </section> <input id="toggle2" type="checkbox" name="toggle" /> <label for="toggle2">Label 2</label> <section id="content2"> <p>Content for the second accordion</p> </section> <input id="toggle3" type="checkbox" name="toggle" /> <label for="toggle3">Label 3</label> <section id="content3"> <p>Content for the third accordion</p> </section>
</div></code></pre></div><div class="code-block css"><h3>CSS</h3><pre><code>// Visually hide checkbox buttons
input[type="checkbox"] { position: absolute; opacity: 0;
}
// Accordion section content gets hidden
section { height: 0; overflow: hidden; will-change: height;
}
// Open content when clicking label
input[type="checkbox"]:checked ~ section { // Can also set height to auto, no transition height: 200px;
}</code></pre></div></div></div></article></section><!--Tabs--><section class=less-padding><article><p data-height=300 data-theme-id=light data-slug-hash=KgRzRE data-default-tab=result data-user=una data-embed-version=2 data-pen-title="CSS-Only Tabs: youmightnotneedjs.com" class=codepen>See the Pen <a href="https://codepen.io/una/pen/KgRzRE/">CSS-Only Tabs: youmightnotneedjs.com</a> by Una Kravets (<a href=https://codepen.io/una>@una</a>) on <a href=https://codepen.io>CodePen</a>.</p><input type=checkbox class=u-click-trigger><div class=u-click-appear><div class=code-area><div class="code-block html"><h3>HTML</h3><pre><code><div class="tabs"> <div class="tab"> <input type="radio" name="tabgroup" id="tab-1" checked> <label for="tab-1">Label One</label> <div class="content"> <p>Tab One Content</p> </div> </div> <div class="tab"> <input type="radio" name="tabgroup" id="tab-2"> <label for="tab-2">Label Two</label> <div class="content"> <p>Tab Two Content</p> </div> </div> <div class="tab"> <input type="radio" name="tabgroup" id="tab-3"> <label for="tab-3">Label Three</label> <div class="content"> <p>Tab Three Content</p> </div> </div>
</div></code></pre></div><div class="code-block css"><h3>CSS</h3><pre><code>// Tab container
.tabs { position: relative; height: 200px;
}
// Style tab itself to not have radio circle
.tab [type=radio] { position: absolute; clip: rect(0,0,0,0); &:focus + label { outline: 2px dotted #000; }
}
// Style content position to layer
.content { position: absolute; top: 2em; left: 0; right: 0; bottom:
}
// Label visual change
[type=radio]:checked ~ label { background: lightpink;
}
[type=radio]:checked ~ label ~ .content { z-index: 1;
}</code></pre></div></div></div></article></section><!--Lightbox--><section class=less-padding><article><p data-height=300 data-theme-id=light data-slug-hash=wzjGAj data-default-tab=result data-user=una data-embed-version=2 data-pen-title="CSS Only Lightbox: youmightnotneedjs.com" class=codepen>See the Pen <a href="https://codepen.io/una/pen/wzjGAj/">CSS Only Lightbox: youmightnotneedjs.com</a> by Una Kravets (<a href=https://codepen.io/una>@una</a>) on <a href=https://codepen.io>CodePen</a>.</p><input type=checkbox class=u-click-trigger><div class=u-click-appear><div class=code-area><div class="code-block html"><h3>HTML</h3><pre><code><!-- thumbnail image wrapped in a link -->
<a href="#img1"> <img src="img.jpg" class="thumbnail">
</a>
<!-- lightbox container hidden with CSS -->
<a href="#" class="lightbox" id="img1"> <img src="img.jpg">
</a></code></pre></div><div class="code-block css"><h3>CSS</h3><pre><code>//thumbnail style
.thumbnail { max-width: $thumbnail-size;
}
.lightbox { // Position/style of lightbox position: fixed; z-index: 10; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: darkgray; // Hide lightbox image display: none;
}
.lightbox img { /// Pad the lightbox image max-width: 90%; max-height: 80%; margin-top: 2%;
}
.lightbox:target { // Show lightbox on target display: block;
}</code></pre></div></div></div></article></section><!--Modal--><section class=less-padding><article><p data-height=300 data-theme-id=light data-slug-hash=ObRKvq data-default-tab=result data-user=una data-embed-version=2 data-pen-title="CSS-Only Modal: youmightnotneedjs.com" class=codepen>See the Pen <a href="https://codepen.io/una/pen/ObRKvq/">CSS-Only Modal: youmightnotneedjs.com</a> by Una Kravets (<a href=https://codepen.io/una>@una</a>) on <a href=https://codepen.io>CodePen</a>.</p><input type=checkbox class=u-click-trigger><div class=u-click-appear><div class=code-area><div class="code-block html"><h3>HTML</h3><pre><code><a class="modalTrigger" id="modalTrigger" href="#modalDialog1">Open dialog</a>
<dialog class="modal" id="modalDialog1"
tabindex="-1" role="dialog"> <div> <a href="#modalTrigger" aria-label="Close"> &times; </a> <p>Hello Beautiful!</p> </div>
</dialog></code></pre></div><div class="code-block css"><h3>CSS</h3><pre><code>// Modal hidden until it matches an anchor target
.modal { opacity: 0; visibility: hidden;
}
#modalDialog:target { opacity: 1; visibility: visible;
}</code></pre></div></div></div></article></section><!--Dynamic Counters like a calculator--><!--Slider -> Animation--><!--Animation -> Moving Emoji--><!--Tooltip--><!--content: attr(data-tip);--><section class=less-padding><article><p data-height=300 data-theme-id=light data-slug-hash=JWwXEp data-default-tab=result data-user=una data-embed-version=2 data-pen-title="CSS Tooltips: youmightnotneedjs.com" class=codepen>See the Pen <a href="https://codepen.io/una/pen/JWwXEp/">CSS Tooltips: youmightnotneedjs.com</a> by Una Kravets (<a href=https://codepen.io/una>@una</a>) on <a href=https://codepen.io>CodePen</a>.</p><input type=checkbox class=u-click-trigger><div class=u-click-appear><div class=code-area><div class="code-block html"><h3>HTML</h3><pre><code><span class="tooltip" data-tip="I am a tooltip" tabindex="0">tooltip text</span></code></pre></div><div class="code-block css"><h3>CSS</h3><pre><code>.tooltip { position: relative; cursor: help; border-bottom: 2px dotted #c69; &::before, &::after { position: absolute; left: 50%; opacity: 0; z-index: 0; transition: opacity .5s; color: white; } &:hover::before, &:focus::before, &:hover::after, &:focus::after { opacity: 1; z-index: 10; } /* tooltip balloon */ &::before { background: #c69; bottom: 185%; width: 14em; padding: 0.5em; margin-left: -8em; content: attr(data-tip); } /* triangle part overflow: hidden; tooltip */ &::after { content: ""; border-style: solid; border-width: 1em .75em 0 .75em; border-color: #c69 transparent transparent transparent; bottom: 100%; margin-left: -1em; }
}</code></pre></div></div></div></article></section><!--content: attr(data-tip); is a good transition to some of the cool typography Mandy has been working on--><!--Scroll Status Indicator--><section class=less-padding><article><p data-height=300 data-theme-id=light data-slug-hash=bwrEpZ data-default-tab=result data-user=una data-embed-version=2 data-pen-title="CSS Only Scroll Indicator: youmightnotneedjs.com" class=codepen>See the Pen <a href="https://codepen.io/una/pen/bwrEpZ/">CSS Only Scroll Indicator: youmightnotneedjs.com</a> by Una Kravets (<a href=https://codepen.io/una>@una</a>) on <a href=https://codepen.io>CodePen</a>.</p><input type=checkbox class=u-click-trigger><div class=u-click-appear><div class=code-area><div class="code-block html"><h3>HTML</h3><pre><code><body>
content must be longer than 100vh
</main>
</body>
</code></pre></div><div class="code-block css"><h3>CSS</h3><pre><code>body { background: linear-gradient(to right top, $scroller-color 50%, $scroller-background 50%); background-size: 100% calc(100% - 100vh + #{$scroller-height}); background-repeat: no-repeat;
}
body:before { content:''; position: fixed; top: $scroller-height; bottom: 0; width: 100%; z-index: -1; background: $body-background;
}</code></pre></div></div></div></article></section><!--Future features are really exciting like grid & variables, can use CSS @supports to check for feature support--><!--Show Grid Example & Emoji Grid, editable--><section><article><h2><code>@supports</code></h2><div style="display: flex"><style class=code-editor contenteditable=true style="flex: 1;">@supports (display: grid) { .grid-area { display: grid; grid-template: "The Power of CSS Talk - Script Codes CSS Codes
::-moz-selection { background-color: yellow;
}
::selection { background-color: yellow;
}
* { box-sizing: border-box;
}
a { color: #cc0000; font-weight: 600;
}
body { margin: 0;
}
main { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; -webkit-transition: left 500ms; transition: left 500ms; font-family: 'Open Sans', sans-serif; font-size: 1.1em;
}
h1, h2 { font-family: Montserrat, sans-serif;
}
h2 { font-weight: 300; font-size: 2.5rem;
}
h1 { text-transform: capitalize; font-size: 6rem;
}
p, footer .twitter-info a, .caniuse-trigger { font-family: 'Open Sans', sans-serif; font-size: 1.1em;
}
blockquote,
.blockquote { font-weight: 300; font-size: 3rem; max-width: 70%;
}
section { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; margin: 0; opacity: 0; box-sizing: border-box; overflow: auto; -webkit-overflow-scrolling: touch; -webkit-transition: opacity 250ms ease-in-out; transition: opacity 250ms ease-in-out;
}
section:first-child { opacity: 1;
}
section article { width: calc(90% - 60px); max-width: 1200px; padding: 4rem 0 4rem 5%; color: #222;
}
section.less-padding article { padding: 2rem 0 2rem 5%;
}
section pre, section .code-editor { background: white; border: 1px solid rgba(34, 34, 34, 0.1); padding: 0.25rem 0.5rem;
}
section pre, section .code-editor { padding: 1rem; margin: 1rem auto;
}
.code-area { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.code-area .code-block { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-right: .75em;
}
.code-area .code-block pre, .code-area .code-block .code-editor { max-height: 22em; overflow: auto;
}
.code-area .code-block + .code-block { margin-left: .75em;
}
.u-center { text-align: center;
}
.u-textRight { text-align: right;
}
.u-click-trigger { display: block; position: relative; z-index: 3; float: right;
}
.u-click-trigger:checked + .u-click-appear { opacity: 1;
}
.u-click-appear { width: 100%; opacity: 0; -webkit-transition-duration: .5s; transition-duration: .5s; margin-top: 2em;
}
.u-textBold { font-weight: 800;
}
.u-verticalCenter { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.s { position: absolute;
}
nav { position: fixed; z-index: 5; width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
nav.thumbs { right: 10px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 60px; display: block;
}
nav.thumbs ul { margin: 0; padding: 0;
}
nav.thumbs li { display: block; margin: 0 auto 0.5rem;
}
nav.thumbs li:first-child a { opacity: 1; width: 50px; height: 50px;
}
nav.thumbs li a { opacity: 0.5; width: 25px; height: 25px; margin: 0 auto; display: block; background-blend-mode: multiply; background-position: center; background-size: cover; position: relative; -webkit-transition: height 250ms ease-in-out, width 250ms ease-in-out, opacity 250ms ease-in-out; transition: height 250ms ease-in-out, width 250ms ease-in-out, opacity 250ms ease-in-out;
}
nav.thumbs li a:hover { opacity: 1;
}
nav.thumbs li a:active { -webkit-transform: translateY(1px); transform: translateY(1px);
}
.prevnext ul { list-style: none;
}
@media (min-width: 600px) { main { height: 100%; }
}
@media (min-width: 1200px) { main article { padding-left: 0; margin: 0 auto; }
}
.progress { position: fixed; bottom: 0; left: 0; width: 0%; margin: 0 0 20px 20px; border-bottom: 5px solid #222; border-bottom: 20px solid rgba #222; -webkit-transition: width 1000ms linear; transition: width 1000ms linear;
}
#s1:target ~ main section { opacity: 0;
}
#s1:target ~ main section:nth-child(1) { opacity: 1;
}
@media (max-width: 599px) { #s1:target ~ main section { top: 50%; } #s1:target ~ main section:nth-child(1) { top: 0; }
}
@media (min-width: 600px) { #s1:target ~ main { left: 0%; } section:nth-child(1) { left: 0%; }
}
.thumbs li:nth-child(1) a { background-color: #cc5700;
}
#s1:target ~ .border { border: 20px solid #cc5700; height: calc(100vh);
}
#s1:target ~ .progress { width: 0%;
}
#s1:target ~ .thumbs li:first-child a { opacity: 0.5; width: 25px; height: 25px;
}
#s1:target ~ .thumbs li:nth-child(1) a { opacity: 1; width: 50px; height: 50px;
}
#s2:target ~ main section { opacity: 0;
}
#s2:target ~ main section:nth-child(2) { opacity: 1;
}
@media (max-width: 599px) { #s2:target ~ main section { top: 50%; } #s2:target ~ main section:nth-child(2) { top: 0; }
}
@media (min-width: 600px) { #s2:target ~ main { left: -100%; } section:nth-child(2) { left: 100%; }
}
.thumbs li:nth-child(2) a { background-color: #ccaf00;
}
#s2:target ~ .border { border: 20px solid #ccaf00; height: calc(100vh);
}
#s2:target ~ .progress { width: 7.69231%;
}
#s2:target ~ .thumbs li:first-child a { opacity: 0.5; width: 25px; height: 25px;
}
#s2:target ~ .thumbs li:nth-child(2) a { opacity: 1; width: 50px; height: 50px;
}
#s3:target ~ main section { opacity: 0;
}
#s3:target ~ main section:nth-child(3) { opacity: 1;
}
@media (max-width: 599px) { #s3:target ~ main section { top: 50%; } #s3:target ~ main section:nth-child(3) { top: 0; }
}
@media (min-width: 600px) { #s3:target ~ main { left: -200%; } section:nth-child(3) { left: 200%; }
}
.thumbs li:nth-child(3) a { background-color: #92cc00;
}
#s3:target ~ .border { border: 20px solid #92cc00; height: calc(100vh);
}
#s3:target ~ .progress { width: 15.38462%;
}
#s3:target ~ .thumbs li:first-child a { opacity: 0.5; width: 25px; height: 25px;
}
#s3:target ~ .thumbs li:nth-child(3) a { opacity: 1; width: 50px; height: 50px;
}
#s4:target ~ main section { opacity: 0;
}
#s4:target ~ main section:nth-child(4) { opacity: 1;
}
@media (max-width: 599px) { #s4:target ~ main section { top: 50%; } #s4:target ~ main section:nth-child(4) { top: 0; }
}
@media (min-width: 600px) { #s4:target ~ main { left: -300%; } section:nth-child(4) { left: 300%; }
}
.thumbs li:nth-child(4) a { background-color: #3acc00;
}
#s4:target ~ .border { border: 20px solid #3acc00; height: calc(100vh);
}
#s4:target ~ .progress { width: 23.07692%;
}
#s4:target ~ .thumbs li:first-child a { opacity: 0.5; width: 25px; height: 25px;
}
#s4:target ~ .thumbs li:nth-child(4) a { opacity: 1; width: 50px; height: 50px;
}
#s5:target ~ main section { opacity: 0;
}
#s5:target ~ main section:nth-child(5) { opacity: 1;
}
@media (max-width: 599px) { #s5:target ~ main section { top: 50%; } #s5:target ~ main section:nth-child(5) { top: 0; }
}
@media (min-width: 600px) { #s5:target ~ main { left: -400%; } section:nth-child(5) { left: 400%; }
}
.thumbs li:nth-child(5) a { background-color: #00cc1d;
}
#s5:target ~ .border { border: 20px solid #00cc1d; height: calc(100vh);
}
#s5:target ~ .progress { width: 30.76923%;
}
#s5:target ~ .thumbs li:first-child a { opacity: 0.5; width: 25px; height: 25px;
}
#s5:target ~ .thumbs li:nth-child(5) a { opacity: 1; width: 50px; height: 50px;
}
#s6:target ~ main section { opacity: 0;
}
#s6:target ~ main section:nth-child(6) { opacity: 1;
}
@media (max-width: 599px) { #s6:target ~ main section { top: 50%; } #s6:target ~ main section:nth-child(6) { top: 0; }
}
@media (min-width: 600px) { #s6:target ~ main { left: -500%; } section:nth-child(6) { left: 500%; }
}
.thumbs li:nth-child(6) a { background-color: #00cc75;
}
#s6:target ~ .border { border: 20px solid #00cc75; height: calc(100vh);
}
#s6:target ~ .progress { width: 38.46154%;
}
#s6:target ~ .thumbs li:first-child a { opacity: 0.5; width: 25px; height: 25px;
}
#s6:target ~ .thumbs li:nth-child(6) a { opacity: 1; width: 50px; height: 50px;
}
#s7:target ~ main section { opacity: 0;
}
#s7:target ~ main section:nth-child(7) { opacity: 1;
}
@media (max-width: 599px) { #s7:target ~ main section { top: 50%; } #s7:target ~ main section:nth-child(7) { top: 0; }
}
@media (min-width: 600px) { #s7:target ~ main { left: -600%; } section:nth-child(7) { left: 600%; }
}
.thumbs li:nth-child(7) a { background-color: #00cccc;
}
#s7:target ~ .border { border: 20px solid #00cccc; height: calc(100vh);
}
#s7:target ~ .progress { width: 46.15385%;
}
#s7:target ~ .thumbs li:first-child a { opacity: 0.5; width: 25px; height: 25px;
}
#s7:target ~ .thumbs li:nth-child(7) a { opacity: 1; width: 50px; height: 50px;
}
#s8:target ~ main section { opacity: 0;
}
#s8:target ~ main section:nth-child(8) { opacity: 1;
}
@media (max-width: 599px) { #s8:target ~ main section { top: 50%; } #s8:target ~ main section:nth-child(8) { top: 0; }
}
@media (min-width: 600px) { #s8:target ~ main { left: -700%; } section:nth-child(8) { left: 700%; }
}
.thumbs li:nth-child(8) a { background-color: #0075cc;
}
#s8:target ~ .border { border: 20px solid #0075cc; height: calc(100vh);
}
#s8:target ~ .progress { width: 53.84615%;
}
#s8:target ~ .thumbs li:first-child a { opacity: 0.5; width: 25px; height: 25px;
}
#s8:target ~ .thumbs li:nth-child(8) a { opacity: 1; width: 50px; height: 50px;
}
#s9:target ~ main section { opacity: 0;
}
#s9:target ~ main section:nth-child(9) { opacity: 1;
}
@media (max-width: 599px) { #s9:target ~ main section { top: 50%; } #s9:target ~ main section:nth-child(9) { top: 0; }
}
@media (min-width: 600px) { #s9:target ~ main { left: -800%; } section:nth-child(9) { left: 800%; }
}
.thumbs li:nth-child(9) a { background-color: #001dcc;
}
#s9:target ~ .border { border: 20px solid #001dcc; height: calc(100vh);
}
#s9:target ~ .progress { width: 61.53846%;
}
#s9:target ~ .thumbs li:first-child a { opacity: 0.5; width: 25px; height: 25px;
}
#s9:target ~ .thumbs li:nth-child(9) a { opacity: 1; width: 50px; height: 50px;
}
#s10:target ~ main section { opacity: 0;
}
#s10:target ~ main section:nth-child(10) { opacity: 1;
}
@media (max-width: 599px) { #s10:target ~ main section { top: 50%; } #s10:target ~ main section:nth-child(10) { top: 0; }
}
@media (min-width: 600px) { #s10:target ~ main { left: -900%; } section:nth-child(10) { left: 900%; }
}
.thumbs li:nth-child(10) a { background-color: #3a00cc;
}
#s10:target ~ .border { border: 20px solid #3a00cc; height: calc(100vh);
}
#s10:target ~ .progress { width: 69.23077%;
}
#s10:target ~ .thumbs li:first-child a { opacity: 0.5; width: 25px; height: 25px;
}
#s10:target ~ .thumbs li:nth-child(10) a { opacity: 1; width: 50px; height: 50px;
}
#s11:target ~ main section { opacity: 0;
}
#s11:target ~ main section:nth-child(11) { opacity: 1;
}
@media (max-width: 599px) { #s11:target ~ main section { top: 50%; } #s11:target ~ main section:nth-child(11) { top: 0; }
}
@media (min-width: 600px) { #s11:target ~ main { left: -1000%; } section:nth-child(11) { left: 1000%; }
}
.thumbs li:nth-child(11) a { background-color: #9200cc;
}
#s11:target ~ .border { border: 20px solid #9200cc; height: calc(100vh);
}
#s11:target ~ .progress { width: 76.92308%;
}
#s11:target ~ .thumbs li:first-child a { opacity: 0.5; width: 25px; height: 25px;
}
#s11:target ~ .thumbs li:nth-child(11) a { opacity: 1; width: 50px; height: 50px;
}
#s12:target ~ main section { opacity: 0;
}
#s12:target ~ main section:nth-child(12) { opacity: 1;
}
@media (max-width: 599px) { #s12:target ~ main section { top: 50%; } #s12:target ~ main section:nth-child(12) { top: 0; }
}
@media (min-width: 600px) { #s12:target ~ main { left: -1100%; } section:nth-child(12) { left: 1100%; }
}
.thumbs li:nth-child(12) a { background-color: #cc00af;
}
#s12:target ~ .border { border: 20px solid #cc00af; height: calc(100vh);
}
#s12:target ~ .progress { width: 84.61538%;
}
#s12:target ~ .thumbs li:first-child a { opacity: 0.5; width: 25px; height: 25px;
}
#s12:target ~ .thumbs li:nth-child(12) a { opacity: 1; width: 50px; height: 50px;
}
#s13:target ~ main section { opacity: 0;
}
#s13:target ~ main section:nth-child(13) { opacity: 1;
}
@media (max-width: 599px) { #s13:target ~ main section { top: 50%; } #s13:target ~ main section:nth-child(13) { top: 0; }
}
@media (min-width: 600px) { #s13:target ~ main { left: -1200%; } section:nth-child(13) { left: 1200%; }
}
.thumbs li:nth-child(13) a { background-color: #cc0057;
}
#s13:target ~ .border { border: 20px solid #cc0057; height: calc(100vh);
}
#s13:target ~ .progress { width: 92.30769%;
}
#s13:target ~ .thumbs li:first-child a { opacity: 0.5; width: 25px; height: 25px;
}
#s13:target ~ .thumbs li:nth-child(13) a { opacity: 1; width: 50px; height: 50px;
}
#s14:target ~ main section { opacity: 0;
}
#s14:target ~ main section:nth-child(14) { opacity: 1;
}
@media (max-width: 599px) { #s14:target ~ main section { top: 50%; } #s14:target ~ main section:nth-child(14) { top: 0; }
}
@media (min-width: 600px) { #s14:target ~ main { left: -1300%; } section:nth-child(14) { left: 1300%; }
}
.thumbs li:nth-child(14) a { background-color: #cc0000;
}
#s14:target ~ .border { border: 20px solid #cc0000; height: calc(100vh);
}
#s14:target ~ .progress { width: 100%;
}
#s14:target ~ .thumbs li:first-child a { opacity: 0.5; width: 25px; height: 25px;
}
#s14:target ~ .thumbs li:nth-child(14) a { opacity: 1; width: 50px; height: 50px;
}
#s1:target ~ footer .twitter-info a { color: white;
}
html, body { height: 100%; width: 100%; overflow: hidden; color: #222; font-family: Merriweather, Georgia, serif; font-weight: 300;
}
pre, .code-editor, code { font-family: Inconsolata, monospace;
}
.intro-article { z-index: -1;
}
.intro-bg { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; -webkit-transition-duration: .5s; transition-duration: .5s; z-index: 3; mix-blend-mode: multiply; pointer-events: all;
}
.intro-bg polygon { mix-blend-mode: multiply; -webkit-animation: swaying 8s ease-in-out forwards infinite; animation: swaying 8s ease-in-out forwards infinite; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transform-origin: 50%; transform-origin: 50%;
}
.intro-bg polygon:nth-child(1) { -webkit-animation-delay: calc(1s * .8); animation-delay: calc(1s * .8);
}
.intro-bg polygon:nth-child(2) { -webkit-animation-delay: calc(2s * .8); animation-delay: calc(2s * .8);
}
.intro-bg polygon:nth-child(3) { -webkit-animation-delay: calc(3s * .8); animation-delay: calc(3s * .8);
}
.intro-bg polygon:nth-child(4) { -webkit-animation-delay: calc(4s * .8); animation-delay: calc(4s * .8);
}
footer { position: absolute; bottom: 25px; padding: 0 10px; left: 20px; font-weight: 800; font-size: 1.5rem; width: calc(100% - 40px);
}
footer .twitter-info a { text-decoration: none; color: #222; float: right;
}
.caniuse-trigger { position: absolute; bottom: 15px; left: 25px; font-weight: 800; border-radius: 50%; padding: 0 .5em; border: 2px solid rgba(34, 34, 34, 0.1); background: yellow; z-index: 3;
}
.blue-bg { fill: #5AD4FF;
}
.yellow-bg { fill: #FFFF00;
}
.pink-bg { fill: #FF00F3;
}
.blue-bg:hover,
.yellow-bg:hover,
.pink-bg:hover { fill: lightpink; mix-blend-mode: difference;
}
@-webkit-keyframes swaying { 0% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 50% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
}
@keyframes swaying { 0% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 50% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(10deg); transform: rotate(10deg); }
}
@-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.live-code-area { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.live-code-area > div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
.cp_embed_wrapper { outline: 1px solid rgba(34, 34, 34, 0.1);
}
.cp_embed_wrapper + .cp_embed_wrapper { margin-left: 2em;
}
.code-editor { display: block; white-space: pre-wrap; z-index: 2; position: relative;
}
.demo1 { z-index: -2;
}
.demo1-cover { width: 100%; height: 100vh; display: block; z-index: -1; position: absolute; top: 0; left: 0;
}
.flex-half-parent { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.flex-half-parent div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
.grid-area { margin-left: 2em; max-width: 600px; text-align: center;
}
.grid-area .header { padding: .75em; background: yellow;
}
.grid-area .sidebar { background: lightpink; font-size: 4rem;
}
.grid-area .gallery { background: wheat;
}
.grid-area .gallery ul { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 4rem; width: 100%; -ms-flex-pack: distribute; justify-content: space-around; padding: 0;
}
.grid-area .tomato { padding: 1em; background: tomato;
}
.grid-area .footer { padding: .75em; background: black; color: white;
}
.cutout-wrapper { width: 100%; font-family: 'Source Code Pro', monospace; margin: 0 auto; height: 100%;
}
.cutout-wrapper h1 { text-transform: uppercase; -webkit-transform: translate(-50%, -50%) skew(10deg) rotate(-15deg); transform: translate(-50%, -50%) skew(10deg) rotate(-15deg); font-size: 10vw; top: 55%; left: 50%; margin: 0; position: absolute; text-rendering: optimizeLegibility; font-weight: 900; color: #cc00af; text-shadow: 1px 4px 6px white, 0 0 0 #66303a, 1px 4px 6px white; white-space: nowrap;
}
.cutout-wrapper h1:hover { -webkit-animation: rainbow 1s alternate linear infinite; animation: rainbow 1s alternate linear infinite;
}
.cutout-wrapper h1::before { content: attr(data-heading); position: absolute; left: 0; top: -4.8%; overflow: hidden; width: 100%; height: 50%; color: #fbf7f4; -webkit-transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2); transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2); z-index: 2; text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.4);
}
.cutout-wrapper h1::after { content: attr(data-heading); position: absolute; left: 0; top: 0; overflow: hidden; width: 100%; height: 100%; z-index: 1; color: #d3cfcc; -webkit-transform: translate(11px, 0) skew(13deg) scale(1, 0.8); transform: translate(11px, 0) skew(13deg) scale(1, 0.8); -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%); text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.5);
}
@-webkit-keyframes rainbow { from { -webkit-filter: hue-rotate(0); filter: hue-rotate(0); } to { -webkit-filter: hue-rotate(360deg); filter: hue-rotate(360deg); }
}
@keyframes rainbow { from { -webkit-filter: hue-rotate(0); filter: hue-rotate(0); } to { -webkit-filter: hue-rotate(360deg); filter: hue-rotate(360deg); }
}
.check-offs { position: absolute; top: 40px; right: 40px;
}
.intro-gif { position: absolute; mix-blend-mode: unset;
}
.intro-gif img { width: 70vw; position: absolute; left: -75vw; mix-blend-mode: unset; z-index: 10;
}
.intro-trigger { position: relative;
}
The Power of CSS Talk - Script Codes JS Codes
// the only JS is for CodePen Embeds
| Developer | Una Kravets |
| Username | una |
| Uploaded | September 06, 2022 |
| Rating | 4 |
| Size | 13,908 Kb |
| Views | 36,432 |
Do you need developer help for The Power of CSS Talk?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Una Kravets (una) Script Codes
| Name | Size |
| Shape-inside hack | 3,170 Kb |
| Accidental cool effect 2 | 2,050 Kb |
| Vuenicorn | 4,752 Kb |
| Pastel Flowers Weekend Love | 2,618 Kb |
| CSS Custom Properties on Elements | 3,098 Kb |
| Sassy Shape Machine Mixin | 3,054 Kb |
| Infrared Mixin SVG test | 3,018 Kb |
| Animated Menu | 2,801 Kb |
| Selective Coloring with CSS | 2,732 Kb |
| 3D Effect Part 2 | 2,067 Kb |
Create amazing love letters with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Simple star rating using js and data-uri | TheEnd | 5,795 Kb |
| A Pen by Alex Edwards | Exards | 8,218 Kb |
| Pomodoro Timer | Sdas13 | 2,900 Kb |
| Perforated foil | 0x04 | 2,617 Kb |
| CSS Gem Badge | Orchard | 3,335 Kb |
| CSS Clip and Shape Module clearly | Pestov | 2,640 Kb |
| Flexbox Test | Icutpeople | 2,486 Kb |
| AngularJS Animated Todo List | Ehaase | 2,975 Kb |
| Add This API | ThatGuySam | 2,848 Kb |
| Video mute | Leon9208 | 2,131 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!