My online log

Technology: Raspberry Pi, Git and web development.

Mead: Recipes and reviews.

Beer and more..

CSS for gradient text font and rotating list animation

19 Jan 2023 / Oscar F

Gradient text Font

p {
  background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 30%);
  background-clip: text;
  color: transparent;
}

Rotating list animation

List item: First Second

.rotate-list span {
  animation: rotateList 4s linear infinite;
  color: #3f91ef;
  opacity: 0;
  position: absolute;
}
.rotate-list span:nth-child(2) {
  animation-delay: 2s;
}
@keyframes rotateList {
  0% { opacity: 0; }
  20% { opacity: 0; transform: translateY(50px); }
  30% { opacity: 1; transform: translateY(0px); }
  70% { opacity: 1; transform: translateY(0px); }
  80% { opacity: 0; transform: translateY(-50px); }
  100% { opacity: 0; }
}

Flying box animation

using @keyframes

.box {
  width: 50px;
  height: 50px;
  background: red;
  position: relative;
  animation: boxMove 15s infinite;
}
@keyframes boxMove {
  0%   {top: 0px; left: 0px; background: red; width: 50px;}
  25% {top: 100px; background: yellow; width: 75px;}
  50% {top: 200px; left: 100px; background: yellow; width: 75px;}
  75% {left: 0px; background: yellow; width: 75px;}
  100%   {top: 0px; background: red; width: 50px;}
}

Tic Tac Toe in ReactJS

03 Jan 2023 / Oscar F

Create the game

Install NodeJS and npm

sudo apt install nodejs npm

Create React app

npx create-react-app tic-tac-toe
cd tic-tac-toe
npm start

Update index.js

const root = ReactDOM.createRoot(document.getElementById("tic-tac-toe"));
root.render(<Game />);

Build for production

npm run build

Add the game to your site

<link rel="stylesheet" type="text/css" href="/documents/7/tic-tac-toe.css">
<div id="tic-tac-toe"></div>
<script src="/documents/8/tic-tac-toe.js" async=""></script>

Play the game