commit d26534113b06a273163e432309a61a5a42fc8d24 Author: Danny Schapeit Date: Sun Oct 3 01:35:28 2021 +0200 first commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..0d37e52 --- /dev/null +++ b/README.md @@ -0,0 +1,15 @@ +# CRT CSS effect for Web +![CSS3](https://img.shields.io/badge/css3-000000.svg?style=for-the-badge&logo=css3&logoColor=white) +![HTML5](https://img.shields.io/badge/html5-000000.svg?style=for-the-badge&logo=html5&logoColor=white) + +## Introduction +This repository has a simple CRT (TV) effect in CSS. + +Thanks to [Patrick Hlauke](https://codepen.io/patrickhlauke/pen/YaoBop) for his Codepen example. + + +## License? +I love Open Source and decide that this small project don't need a license. You can use it without any restrictions. + +## Fonts +In this repository I used [Noto Sans Display](https://fonts.google.com/noto/specimen/Noto+Sans+Display). \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..a6f11d4 --- /dev/null +++ b/index.html @@ -0,0 +1,24 @@ + + + + D3NN7 + + + + + + + + + + + + + +

Bye.

My Website is down for now. I decided to remove my site from the WWW and I'm sure that was a good thing I done.

I hope we will see us again, because you see each other twice in life.

+
+

バージョン2の登場

+ + \ No newline at end of file diff --git a/src/fonts/NotoSansDisplay-Regular.ttf b/src/fonts/NotoSansDisplay-Regular.ttf new file mode 100644 index 0000000..95223e4 Binary files /dev/null and b/src/fonts/NotoSansDisplay-Regular.ttf differ diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..2a58cdd --- /dev/null +++ b/src/style.css @@ -0,0 +1,51 @@ +/* +* Style by D3NN7 +* and Patrick Hlauke (https://codepen.io/patrickhlauke/pen/YaoBop) +*/ + +@font-face { + font-family: 'Noto Sans Display'; + font-style: normal; + font-weight: 400; + src: url(./fonts/NotoSansDisplay-Regular.ttf); + } + html { background: #111; + padding: 1em; + font-family: Noto Sans Display; + color: #eee; + font-size: 1em; + line-height: 1; + text-shadow: 0.06rem 0 0.06rem #ea36af, -0.125rem 0 0.06rem #75fa69; + letter-spacing: 0.125em; + animation-duration: 0.01s; + animation-name: textflicker; + animation-iteration-count: infinite; + animation-direction: alternate; + } + h1 { + font-size: 5em; + text-align: center; + } + + @media screen and (min-width: 1200px) { + body { + margin-left: 20rem; + margin-right: 20rem; + } + } + + @media screen and (min-width: 600px) { + body { + margin-left: 5em; + margin-right: 5em; + } + } + + @keyframes textflicker { + from { + text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69; + } + to { + text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69; + } + } \ No newline at end of file