A Pen by Jens Grochtdreis on CodePen.
Jens Grochtdreis jensgro
jensgro
/ sr-only.css
Last active
December 2, 2020 15:29
Content is only accessible for screenreaders. The white-space-line is important!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* hide only visually */ | |
| .sr-only:not(:focus):not(:active) { | |
| width: 1px; | |
| clip: rect(0 0 0 0); | |
| clip-path: inset(50%); | |
| height: 1px; | |
| overflow: hidden; | |
| position: absolute; | |
| white-space: nowrap; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="app"> | |
| <form> | |
| <div class="input-group"> | |
| <input type="text" class="form-control" placeholder="Buchtitel" aria-label="Buchtitel suchen" v-model="query" @keyup="search"> | |
| <div class="input-group-append"><button class="btn btn-outline-primary" id="button">Suchen</button></div> | |
| </div> | |
| <div class="p-5 d-flex justify-content-center" v-if="!docs.length && query.length"><div class="spinner-border" role="status"><span class="sr-only">Loading...</span></div></div> | |
| <div class="list-group" v-if="docs.length"> | |
| <button v-for="doc in docs" type="button" class="list-group-item list-group-item-action">{{ doc.title }}</button> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="app"> | |
| <form> | |
| <label for="email">Email-Adresse</label> | |
| <input type="email" required name="email" id="email" @keyup="validate" /> | |
| <button id="submit" :disabled="disabled">Abschicken!</button> | |
| </form> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (vundefined) | |
| // Compass (vundefined) | |
| // dart-sass (v1.18.0) | |
| // ---- | |
| // $bp-min: 300px; | |
| // | |
| // .test { | |
| // color: red; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (vundefined) | |
| // Compass (vundefined) | |
| // dart-sass (v1.18.0) | |
| // ---- | |
| $tokens: ( | |
| size-scale: ( | |
| 300: 0.8rem, | |
| 500: 1.25rem, |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Vergleich zwischen SVG- und CSS-Filtern</h1> | |
| <p>IE 10 und 11 können leider nicht mit <a href="https://developer.mozilla.org/de/docs/Web/CSS/filter">CSS-Filtern</a> umgehen und haben auch die vorher proprietären IE-Filter nicht mehr integriert. Allerdings stellen Sie <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter">SVG-Filter</a> dar. Deshalb müssten dann alle Bilder als Teil eines SVG-Konstruktes implementiert werden. In diesem Beispiel stehen ein in SVG implementiertes Bild und ein normal implementiertes Bild nebeneinander. Beiden wurde ein Blur-Filter auferlegt. </p> | |
| <h2>Bild im SVG</h2> | |
| <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg"> | |
| <filter id="blurMe"> | |
| <feGaussianBlur stdDeviation="5"/> | |
| </filter> |
jensgro
/ image-with-text-on-the-back-css3-and-oldie.markdown
Last active
September 19, 2019 14:58
Image with text on the back - CSS3 and oldIE
A Pen by Jens Grochtdreis on CodePen.
Basierend auf diesem Artikel: https://blog.lunarlogic.io/2016/starability-css-accessible-rating-with-animations-on-top/
A Pen by Jens Grochtdreis on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <table class="responsive-table responsive-table--5-4 responsive-table--linearised-60-40"> | |
| <caption>Das ist eine tolle Caption für eine Tabelle</caption> | |
| <thead> | |
| <tr> | |
| <th class="responsive-table__col-1 responsive-table__headdata-column"> | |
| Überschrift 1 | |
| </th> | |
| <th class="responsive-table__col-2 responsive-table__headdata-column"> | |
| Überschrift 2 | |
| </th> |