오픈 소스 모험: 에피소드 50: CSS 그리드를 사용한 푸틴의 후속 밈에 대한 가능한 시나리오

제가 좋아하는 밈 형식 중 하나가 다양한데alignment charts 사실 하나 만들기가 좀 번거롭습니다.

나는 어떤 사람들에게 어떻게 만드는지 물었고 분명히 Inkscape에서 손으로 대답했습니다. 나는 확실히 그것에 대한 인내심이 없습니다. 그래서 웹 기술로 하나를 만들었습니다.

Here's the finished meme .

그리고 이 게시물은 HTML과 CSS만으로 그런 것을 만드는 방법입니다.

밈 코드

단일 파일로 된 전체 HTML은 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: 120%;
}
.supergrid {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 100px 1fr 100px;
}
.left, .right, .top, .bottom {
  font-size: 200%;
  font-family: sans-serif;
  text-align: center;
}
.left {
  grid-column: 1;
  grid-row: 2;
  writing-mode: vertical-lr;
}
.right {
  grid-column: 3;
  grid-row: 2;
  writing-mode: vertical-lr;
}
.top {
  grid-column: 2;
  grid-row: 1;
}
.bottom {
  grid-column: 2;
  grid-row: 3;
}
.grid {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  background: #ccc;
}
.scenario {
  width: 500px;
  height: 300px;
  display: flex;
  gap: 10px;
}
.image {
  display: flex;
  align-items: center;
  justify-content: center;
}
img {
  max-width: 150px;
  display: inline-block;
}
h1 {
  margin: 0;
}
h2 {
  margin: 0;
}
p {
  margin: 0;
  margin-bottom: 0.5em;
}
</style>
</head>
<body>

<div class="supergrid">
  <h3 class="top">Retarded</h3>
  <h3 class="bottom">Enlightened</h3>
  <h3 class="right">Negative Credibility</h3>
  <h3 class="left">Imaginary Credibility</h3>

  <div class="grid">

    <div class="scenario">
      <div class="image">
        <img src="schroeder.png">
      </div>
      <div>
        <h1>Führer Gerhard Schröder</h2>
        <h2>Fourth Reich</h2>
        <p>Germans were playing the long game.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="lukashenko.jpeg">
      </div>
      <div>
        <h1>Colonel Lukashenko</h2>
        <h2>Reverse Union State</h2>
        <p>All generals got switchbladed, leaving Colonel Lukashenko as the highest ranked officer of the Russian Forces.</p>
        <p>Surprisingly little changes for Russia.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="pooh.png">
      </div>
      <div>
        <h1>Xi Jinping</h2>
        <h2>Chinese Vassal State</h2>
        <p>Everything in Russia got sold to China to fund the war. War still lost.</p>
        <p>Uralvagonzavod now assembles Huawei phones.</p>
        <p>Most Russians better off this way.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="assad.jpeg">
      </div>
      <div>
        <h1>Caliph Bashar al-Assad</h2>
        <h2>al-Khilafat al-Ruwsia</h2>
        <p>Recruitment of Syrians goes better than expected.</p>
        <p>Syrians have a different idea once they get to Russia.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="kirill.jpeg">
      </div>
      <div>
        <h1>Patriarch Kirill</h2>
        <h2>Holy Russian Empire</h2>
        <p>Because only God can save Russia from this mess.</p>
        <p>Spoiler alert: Turns out God did not save Russia from this mess.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="zelensky.jpeg">
      </div>
      <div>
        <h1>President Zelensky</h2>
        <h2>Greater Ukraine</h2>
        <p>The way things are going, would it really be that surprising?</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="e2.jpeg">
      </div>
      <div>
        <h1>Queen Elizabeth II</h2>
        <h2>Crimean War 2: Electric Boogaloo</h2>
        <p>Charge of the Light Brigade takes Kremlin.</p>
        <p>Sun never sets on the British Empire.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="kadyrov.jpeg">
      </div>
      <div>
        <h1>Supreme Influencer Kadyrov</h2>
        <h2>Greater Chechnya</h2>
        <p>While Russian soldiers were dying, Tik Tok Army was looting.</p>
        <p>The only armed force left standing, with all the best stolen weapons.</p>
      </div>
    </div>

    <div class="scenario">
      <div class="image">
        <img src="shoigu.jpeg">
      </div>
      <div>
        <h1>Khan Sergei Shoigu</h2>
        <h2>Khanate of Tuva</h2>
        <p>3000 black horses of Shoigu won the war.</p>
        <p>Horses can run through mud, Javelin can't lock onto horses, Kyiv taken in 48h.</p>
        <p>Nomad hordes roam free on the steppes once more.</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

사용된 CSS

대부분은 간단한 내용 또는 밈 콘텐츠이지만 잘 알려지지 않은 두 가지 CSS 트릭이 있습니다.

writing-mode: vertical-lr 회전 변환이 필요 없는 가로 텍스트용

nested display: grid - 매우 복잡한 5x5 격자를 만드는 대신 축에 대한 외부 격자를 만든 다음 시나리오에 대한 내부 격자를 만들었습니다. 이것은 정말 코드를 단순화합니다.

외부 그리드 코드는 약간 지저분하고 확실히 더 나은 방법이 있지만 그렇게 할 것입니다.

지금까지의 이야기

이것을 온라인 템플릿으로 바꾸는 것은 그리 어렵지 않지만 정렬 차트 스타일 밈은 일반적으로 매우 복잡하며 하나의 템플릿을 따르지 않습니다.

All the code is on GitHub .

Reference

이 문제에 관하여(오픈 소스 모험: 에피소드 50: CSS 그리드를 사용한 푸틴의 후속 밈에 대한 가능한 시나리오), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/taw/open-source-adventures-episode-50-possible-scenarios-for-putins-successor-meme-with-css-grid-hng

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

오픈 소스 모험: 에피소드 50: CSS 그리드를 사용한 푸틴의 후속 밈에 대한 가능한 시나리오

밈 코드

사용된 CSS

지금까지의 이야기

Reference

좋은 웹페이지 즐겨찾기