배경 테마

소개

Obi-Wan Kenobi, Qui-Gon Jinn 및 Darth Maul이 싸울 예정입니다! 그러나 그들은 모두 각자의 광선 검을 가져 오는 것을 잊었습니다. 문자열이 주어진 프로그램이나 함수 작성 Jedi입력 등이 유사한 화상 생성 ^*을 :

문자열이 주어지면 다음 Sith과 비슷한 이미지를 생성합니다.

이미지 사양

• 3 개의 광선 검기 ( 끝에 둥근 모서리를 포함 하는 흰색 블레이드 (빨간색 테두리의 경우 2 개의 둥근 모서리)와 손잡이를 포함 하는 흰색 블레이드 )의 길이는 900 픽셀입니다 ( 블레이드 주변의 색상 그라데이션은 포함 되지 않음 ).

• 칼날 끝의 둥근 모서리는 칼날 너비와 같은 직경을 가진 반원 (물론 이산 근사치)입니다.

• 블레이드 (즉, 광선 검의 흰색 부분)의 너비는 12px입니다.

• 녹색 및 파란색 조명 레이블은 200px (녹색 블레이드의 중심선에서 파란색 블레이드의 중심선까지)로 분리됩니다.

• 3 개의 lightabers에 대한 핸들은 180px (총 길이의 1/5)입니다. 따라서 둥근 모서리를 포함하는 블레이드 자체의 길이는 파란색 및 녹색 라이트 세이버의 경우 720px, 빨간 라이트 세이버의 두 블레이드의 경우 360px입니다.

• 파란색 및 녹색 광선 측정기의 손잡이는 광선 검의 하단에 있습니다. 빨간색 광선 검의 손잡이는 수평 가운데에 있습니다.

• 흰색 블레이드 가장자리에서 완전히 흰색으로 그라데이션의 길이는 1.5 * 블레이드 너비 (예 : 선형 부분의 경우 18px)입니다.

• 녹색 그라디언트는 RGB (0,255,0)에서 흰색 (255,255,255) (또는 구현하기 쉬운 경우 투명)으로 진행됩니다. 빨간색 그라디언트는 (255,0,0)에서 흰색으로, 파란색 그라디언트는 (0,0,255)에서 흰색으로갑니다.

• 핸들의 색상은 RGB (128,128,128)입니다.

• 광선 검 주위에 흰색 빈 공간이있을 수 있습니다.

입력

하나 Sith또는 Jedi문자열로. STDIN에서이 문자열을 함수 인수, 명령 행 매개 변수 또는 이와 유사한 것으로 사용할 수 있습니다. 입력이 항상 정확 Sith하거나 Jedi다른 것으로 가정 할 수 있습니다 .

산출

입력 문자열에 해당하는 이미지가 포함 된 이미지 파일을 생성해야합니다. 트루 컬러 이미지 라면 원하는 이미지 형식을 자유롭게 선택할 수 있습니다 .

채점

이것은 code-golf 이므로 바이트 단위의 최단 답변이 이깁니다. 포스가 함께하길.

^* 이 게시물의 이미지는 전체 크기로 표시되지 않습니다.

HTML / CSS 솔루션, 765740 541 바이트

<style>[id]:not(:target){display:none}table{width:900px;height:12px;border-spacing:0}td:last-child{border-radius:0 12px 12px 0}#Sith td:first-child{border-radius:12px 0 0 12px}#Sith td{box-shadow:0 0 18px red}#Jedi{transform:rotate(-90deg);margin:350px 0}#Jedi td{box-shadow:0 0 18px #0f0}*+table{margin:200px 0 0 0}#Jedi *+table td{box-shadow:0 0 18px #00f}td:nth-last-child(2){background:#888;width:180px;box-shadow:none!important}</style><div id=Jedi><table><td><td></table><table><td><td></table></div><table id=Sith><td><td><td></table>

최근 리 팩터는 a 및 Javascript가 아닌 :target의사 클래스를 사용합니다 <form>.

입력을 입력하려면 URL 끝에 입력을 대상으로 추가하십시오 (예 : test.html#Jedi또는test.html#Sith

여기에 공백과 몇 가지 주석이 있습니다.

<style>
  /* hide all but the anchored lightsaber (only lightsabers have ids) */
  [id]:not(:target) { display:none }

  /* tables are lightsabers */
  table { width:900px; height:12px; border-spacing:0 }
  td:last-child { border-radius:0 12px 12px 0 } /* curved tip */
  #Sith td:first-child { border-radius:12px 0 0 12px } /* 2nd curved tip */
  #Sith td { box-shadow:0 0 18px red }
  #Jedi { transform:rotate(-90deg); margin:350px 0 }
  #Jedi td { box-shadow:0 0 18px #0f0 } /* green */
  * + table { margin:200px 0 0 0 } /* gap between Jedi lightsabers */
  #Jedi * + table td { box-shadow:0 0 18px #00f } /* blue */
  /* handles */
  td:nth-last-child(2) {
    background:#888; width:180px; box-shadow:none!important }
</style>
<div id=Jedi>
  <table><td><td></table>
  <table><td><td></table>
</div>
<table id=Sith><td><td><td></table>

라이트 세이버는 <table>각 id속성 (블레이드 / 핸들) 당 하나의 셀 이있는 요소로 해당 속성을 통해 숨겨져 있습니다.

블레이드는 CSS로 착색되어 box-shadows와 제다이의 광검은을 받다 transform: rotate().

사진 또는 발생하지 않은 경우 (전체 해상도를 보려면 클릭)

td{background:#fff}body{background:#000}CSS에 추가 하면 멋진 어두운 시야를 얻을 수 있습니다.

Firefox 및 Chrome (Linux)에서 테스트되었습니다. 가능한 한 크기를 줄이려고 노력했기 때문에 이것은 모든 표준을 준수하지는 않습니다.

border-spacing및에 대한 @manatwork 덕분에 :target.