Pop Art (CSS)

README.md

Pop Art (CSS)

view on jsgist

index.css

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap');

html, body{
  background:yellow;
	font-family: 'Raleway', sans-serif;
  height: 100%;
  margin: 0;
}

.center {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

span{
  font-size:120px;
	letter-spacing:0.1em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: white;
  text-shadow: 
						8px 8px hsl(320 100% 50%),
						20px 20px #000000;
}
.p>span:nth-child(2) {
  text-shadow: 
						8px 8px hsl(220 100% 50%),
						20px 20px #000000;
}
.p>span:nth-child(3) {
  text-shadow: 
						8px 8px hsl(120 100% 30%),
						20px 20px #000000;
}
.p>span:nth-child(5) {
  text-shadow: 
						8px 8px hsl(200 100% 50%),
						20px 20px #000000;
}
.p>span:nth-child(6) {
  text-shadow: 
						8px 8px hsl(150 100% 40%),
						20px 20px #000000;
}
.p>span:nth-child(7) {
  text-shadow: 
						8px 8px hsl(30 100% 50%),
						20px 20px #000000;
}

index.html

<!-- modified from https://freefrontend.medium.com/css-text-effects-40cd297813f8 -->
<div class="center">
<div class="p"><span>P</span><span>O</span><span>P</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>A</span><span>R</span><span>T</span><span></div>
</div>

index.js

/*bug-in-github-api-content-can-not-be-empty*/

jsGist.json

{"name":"Pop Art (CSS) ","settings":{},"filenames":["index.html","index.css","index.js"]}