A Pen by Jens Grochtdreis on CodePen.
Jens Grochtdreis jensgro
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
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> |
jensgro
/ buttons-mit-richtungsempfindlichkeit.markdown
Last active
September 13, 2019 16:15
Buttons mit Richtungsempfindlichkeit
jensgro
/ aufgabe-ein-item-selektieren.markdown
Created
September 5, 2019 14:31
Aufgabe: ein Item selektieren
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
| <div id="container"> | |
| <nav> | |
| <ul class="main-nav main-nav__level1"> | |
| <li class="main-nav__level1-item"><a href="#" class="main-nav__level1-link">Home</a></li> | |
| <li class="main-nav__level1-item"><a href="#" class="main-nav__level1-link">WordPress</a> | |
| <!-- First Tier Drop Down --> | |
| <ul class="main-nav__level2"> | |
| <li class="main-nav__level2-item"><a href="#" class="main-nav__level2-link">Themes</a></li> | |
| <li class="main-nav__level2-item"><a href="#" class="main-nav__level2-link"><strong>Plugins</strong> you want to install</a></li> |
A Pen by Jens Grochtdreis on CodePen.
jensgro
/ ein-einfaches-grid-bauen.markdown
Last active
August 7, 2019 09:33
Ein einfaches Grid bauen
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
| <div class="wrapper"> | |
| <div class="flexitem"> | |
| <div class="teaser"> | |
| <header class="teaser__header"> | |
| <h3>Überschrift, die auch lang sein kann!</h3> | |
| </header> | |
| <div class="teaser__content"> | |
| <p>Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.</p> | |
| </div> |