A reusable .sticker with CSS variables to adjust the gradient colors and the shine angle.
A Pen by Jens Grochtdreis on CodePen.
Jens Grochtdreis jensgro
jensgro
/ light-and-shadow-dom.html
Created
December 2, 2025 22:10
— forked from cferdinandi/light-and-shadow-dom.html
YouTube tutorial: https://youtu.be/vlmtVmWimD4
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Basic Setup</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style type="text/css"> | |
| body { | |
| margin: 1em auto; |
jensgro
/ screenreader-links.md
Created
November 17, 2025 10:44
- How A Screen Reader User Surfs The Web - Video
- Setting up a screen reader testing environment on your computer
- Screen reader quick guide
- Which VoiceOver?
- Screen Reader HTML Support – Lookup - welcher SR unterstützt was und wie?
- Browsing with a desktop screen reader
- Browsing with a mobile screen reader
- Day 8: Testing using a screen reader
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>Responsive Images </h1> | |
| <h2>Banner image</h2> | |
| <div class="wrapper"> | |
| <div class="image banner-image"> | |
| <picture> | |
| <source media="(min-width: 1024px)" | |
| srcset="https://dummyimage.com/1440x810/a20000/fff&text=1440x810source 1440w, | |
| https://dummyimage.com/1080x608/fd8700/000&text=1080x608source 1080w" | |
| sizes="(min-width: 1440px) 1080px, | |
| (min-width: 1024px) 1440px" |
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>Responsive Images </h1> | |
| <h2>Banner image</h2> | |
| <div class="wrapper"> | |
| <div class="image banner-image"> | |
| <picture> | |
| <source media="(min-width: 1200px)" | |
| srcset="https://dummyimage.com/768x432/444/fff 768w,https://dummyimage.com/1440x810/a20000/fff 1440w,https://dummyimage.com/1080x608/fd8700/000 1920w" | |
| sizes="(min-width: 1200px) 1000px" width="768" height="432"> | |
| <img src="https://dummyimage.com/320x180/ddd&text=Fallback" | |
| srcset="https://dummyimage.com/320x180/ddd 320w,https://dummyimage.com/480x270/ccc 480w,https://dummyimage.com/768x432/444/fff 768w" |
jensgro
/ java in vscode.md
Created
October 14, 2025 06:42
- Getting Started with Java in VS Code
- Java in Visual Studio Code
- How to Use Visual Studio Code With Java?
- Setting Up Visual Studio Code for Java: A Comprehensive Guide
- Mastering Java Development in Visual Studio Code: A Complete Guide
- Using Java 21 with VS Code: A Lightweight Workflow
- How to Use VSCode for Java Development
jensgro
/ base-mathml.css
Created
September 27, 2025 21:27
Basis-CSS für MathML, generiert von Github Copilot
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
| /* Basic stylesheet for MathML elements */ | |
| math { | |
| font-family: 'Times New Roman', Times, serif; | |
| font-size: 1em; | |
| line-height: 1.2; | |
| } | |
| mrow, | |
| mfrac, | |
| msqrt, |
jensgro
/ sass-cheatsheet.md
Created
July 24, 2025 11:57
— forked from fredsiika/sass-cheatsheet.md
A high-level Sass (SCSS) cheatsheet for the most important functionality features of Sass.
jensgro
/ tailwind_cheatsheet.css
Created
April 1, 2025 13:03
— forked from LeCoupa/tailwind_cheatsheet.css
Tailwind CSS CheatSheet --> UPDATED VERSION --> https://github.com/LeCoupa/awesome-cheatsheets
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
| /* ******************************************************************************************* | |
| * TAILWIND.CSS | |
| * DOCUMENTATION: https://tailwindcss.com/ | |
| * ******************************************************************************************* */ | |
| /* | |
| * Available breakpoints | |
| * -------------------- | |
| * sm: min-width: 640px; | |
| * md: min-width: 768px; |
jensgro
/ linktipps-css-html.md
Last active
January 30, 2025 15:53
Empfehlenswerte Links zum Erlernen von HTML und CSS
- Learn CSS auf web.dev
- Learn HTML auf web.dev
- Learn Forms auf web.dev
- Learn to Code HTML & CSS
- Frontend Handbook - eine Übersicht über alle Aspekte der Frontendentwicklung mit weiterführenden Links
NewerOlder