CSSテーマ作成ツール

このツールは自身の記事のテーマを変えてみたい人のために作られています。あなたは使ってみたいですか?では、レッツゴー!

目次に戻る

使う色を作成する

目次に戻る

サイトのタイトルを"SCP財団"から変更する

目次に戻る

サイトのサブタイトルを"確保、収容、保護"から変更する

目次に戻る

ヘッダーのロゴを変更する

目次に戻る

ヘッダーの背景画像を変更する

目次に戻る

リンクの色を変更する

目次に戻る

通常の文字色を変更する

目次に戻る

通常の背景色を変更する

目次に戻る

見出し要素の色を変更する

目次に戻る

標準フォントを変更する

目次に戻る

見出し要素のフォントを変更する

目次に戻る

サイドバーの色を変更する

目次に戻る

サイドバーの見出しの色を変更する

目次に戻る

サイドバーボタンの色を変更する

目次に戻る

タブの背景色を変更する

目次に戻る

タブのセレクタの色を変更する

目次に戻る

インターウィキの色を調整する

目次に戻る

評価モジュールの色を変更する

text-shadow

<offset-x>, <offset-y>: 必須。これらの <length> 値はテキストに対する影のオフセットを指定します。 <offset-x> は水平方向の距離を指定します。負の値であればテキストの左に影を配置します。 <offset-y> は垂直方向の距離を指定します。負の値であればテキストの上に影を配置します。両方の値が 0 ならば、影はテキストの真後ろに配置されますが、 <blur-radius> の効果により一部だけが見えるかもしれません。

<length>

<blur-radius>: 省略可。これは <length> 値です。指定されなければ、既定では 0 になります。この値が大きいほど、ぼかしは大きくなり、影は広く薄くなります。

<length>

<color>: 省略可。影の色です。オフセット値の前か後に指定できます。色が指定されなければ、ユーザーエージェントが選択した色が使われるので、ブラウザー間で一貫性を持つには、明示的に定義することが求められます。

<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

/* offset-x | offset-y | blur-radius | color */

text-shadow: 1px 1px 2px black;

/* color | offset-x | offset-y | blur-radius */

text-shadow: #fc0 1px 0 10px;

/* offset-x | offset-y | color */

text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */

text-shadow: white 2px 5px;

/* offset-x | offset-y*/
/* デフォルトのcolor並びにblur-radius */

text-shadow: 5px 10px;

box-shadow

<inset>キーワードを除けば、"text-shadow"とほぼ同じです。

---

<inset>: 指定されていない場合(デフォルト)、ボックスにはドロップシャドウ効果 (浮き上がったように見える) が与えられます。
inset キーワードが指定された場合、影はボックスの内側に描画されます (凹んだように見える)。 inset な影は背景の上、境界や内容の下に描画されます。

inset

/* offset-x | offset-y | color */

box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */

box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */

box-shadow: inset 5em 1em gold;

/* カンマで区切れば複数の影を適用できます */

box-shadow: 3px 3px red, -1em 0 0.4em olive;

border

<width>: 境界線の太さを設定します。指定されなかった場合は既定値の medium になります。

<length> | thin | medium | thick

<style>: 境界線の種類を設定します。指定されなかった場合は既定値の none になります。

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

<color>: 境界線の色を設定します。指定されなかった場合は既定値の currentcolor になります。

<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

/* style */

border: solid;

/* width | style */

border: 2px dotted;

/* style | color */

border: outset #f33;

/* width | style | color */

border: medium dashed green;

[フレーム]

a

注1: 上記のツールで計算できるのは大雑把な値のみです。
注2: side-blockの色がモノトーン(#ffffff, #DCDCDC, etc.)ではない場合、"第三法則テーマ"(#E2E4E7)のように、この手法では上手く対応できません。
注3: hue-rotate(-70deg) = hue-rotate(290deg)

通常

例外

a