chris/crt-css
1
0
Fork 0
mirror of https://github.com/HearMeWhisper/crt-css.git synced 2026-06-11 14:25:38 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Danny Schapeit 2021-10-03 01:35:28 +02:00
commit d26534113b
4 changed files with 90 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
README.md Normal file
View File

@ -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).

24
index.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<title>D3NN7</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="D3NN7">
<meta name="publisher" content="D3NN7">
<meta name="copyright" content="D3nn7">
<meta name="description" content="Hey my name is Danny. I'm a developer stundent in Germany who is interested in Privacy and Open Source">
<meta name="keywords" content="schapeit, danny-tobias schapeit, danny-tobias, danny, slynite, slynitestudio, sslnk, developer, german, germany, portfolio, legakulie, cactus, youtube, socialmedia, spedion, Slynite Event, develope, code, coding, php, sql, mysql, html, css, git, javascript, web, website, webdeveloper, linux, windows, apple, iOS, android, privacy, open source, free, add free">
<meta name="robots" content="index, follow">
<!-- Links -->
<link href="./src/style.css" rel="stylesheet">
</head>
<body>
<h1>Bye.</h1>
<p>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.</p>
<p>I hope we will see us again, because you see each other twice in life.</p>
<br>
<p>バージョン2の登場</p>
</body>
</html>

BIN
src/fonts/NotoSansDisplay-Regular.ttf Normal file
View File

Binary file not shown.

51
src/style.css Normal file
View File

@ -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;
}
}