jQuery plugin · MIT License

Make text
stand out.

A small jQuery plugin for clear text outlines that keep the original fill color visible. Use native text-stroke or smooth, rounded text-shadow rendering.

文字の塗りをつぶさずにアウトラインを付ける軽量なjQueryプラグインです。標準の描画と、角を丸く見せる描画を選べます。

Get started View source

Live demo / ライブデモ

Change the outline.

jQuery Outliner

Hello,
outline.

Install / インストール

Use it from a CDN.

Load jQuery first, then Outliner. jQueryを先に読み込んでから、Outlinerを読み込みます。

jQuery edition / jQuery版

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@goonruntongue/outliner@1/dist/outliner.min.js"></script>

Download jQuery edition / jQuery版をダウンロード

$(".headline").outliner({
  width: "5px",
  color: "#ffffff",
  corner: "0px"
});

Vanilla JavaScript / 依存なし版

No jQuery. Same outline.

Use the dependency-free edition when you want to keep your project light. jQueryを読み込まず、通常のJavaScriptだけで同じアウトラインを適用できます。

Vanilla,
outlined.

<script src="https://cdn.jsdelivr.net/npm/@goonruntongue/outliner-vanilla@1/dist/outliner-vanilla.min.js"></script>
<script>
  Outliner.apply(".headline", {
    width: "5px",
    color: "#f5f7ff",
    corner: "3px"
  });
</script>

Download Vanilla edition / 依存なし版をダウンロード