Java Swing Metal/Steel 風の背景

<< 戻る   トップ >>

「永遠の」という形容詞がつきそうな鴨乃嘴南蛮 Sesto だが、あきらめたわけではない。シンプルな内部フレームを作ろうという企図は達成できたのだが、シンプルすぎた。さらに、途中からよくわかっていなかったタッチデバイスへの対応を組み込もうとしてぐちゃぐちゃになっていった。もうすこしシンプルじゃないデザインへ回帰するとともに、最初からタッチデバイス対応を組み込んでやりなおそうと思う。

印象に残っているフレームデザインに、Java Swing のオリジナル Look & Feel である Metal の Steel テーマがある。とくに、内部フレームのタイトルバーの「リベット」表現が好きだったので、タイトルバーにこの「リベット」を採用したい。背景画像ファイルのつくりは簡単で、4×4ドットの単純なビットマップで表現できる。それでもよいのだが、せっかくだから CSS で表現できないかと考えた。

幸い、(株)SPC のウェブサイトのトピックスに「CSSで市松模様をつくる」という方法が紹介されていたので、これを参考にスタイルを作ってみた。

.rivet {
  	background: linear-gradient(45deg, transparent 87.5%, #fff 87.5% ),
  		    linear-gradient(45deg, #fff 12.5%, transparent 12.5% ),
  		    linear-gradient(45deg, transparent 87.5%, #0009 87.5% ),
  		    linear-gradient(45deg, #0009 12.5%, transparent 12.5% ),
  		    linear-gradient(45deg, transparent 87.5%, #fff 87.5% ),
  		    linear-gradient(45deg, #fff 12.5%, transparent 12.5% ),
  		    linear-gradient(45deg, transparent 87.5%, #0009 87.5% ),
  		    linear-gradient(45deg, #0009 12.5%, transparent 12.5% );
  	background-size: 4px 4px;
	background-position: 0   0  ,  3px 1px,
			     1px 1px,  4px 2px,
			     2px 2px,  5px 3px,
			     3px 3px, 6px 4px;
	background-color: #ccffcc;
  }

Metal/Steel テーマ風味

素直に画像ファイルを使った方がよいかもしれない


作成: 2021-06-19 17:37:11更新: 2021-06-19 17:37:11
https://museo-anonimo.jp/nanban/?id=1551,https://museo-anonimo.jp/nanban/tr/1551