お知らせ

✔ Viewer

CSS

Css 텍스트 외곽선 처리하기, Stroke

by THEVOS posted Nov 28, 2019

Shortcut

Prev前へ書き込み

Next次へ書き込み

Larger Font Smaller Font 上へ下へ Go comment 印刷

Shortcut

Prev前へ書き込み

Next次へ書き込み

Larger Font Smaller Font 上へ下へ Go comment 印刷

Extra Form
原文出所	https://webisfree.com/2017-09-01/css-%ED...%B0-stroke

CSSを使用してテキストに輪郭、ストローク効果を与える方法を見てみます。

輪郭はテキストを強調する効果的な方法です。CSSを使用して簡単に使用することができますが、最も簡単な方法は次のように-webkit-text-strokeを使用する方法です。

-webkit-text-stroke: 1px #000

ただし、この方法は非常に便利ですが、標準的な方法ではなく、ウェブキットおよびモジラ系のブラウザでのみ適用されます。使用する場合は、次のようにCSSに適用してください。

.text-stroke {
-webkit-text-stroke: 1px #000;
}

これでテキストに輪郭が鮮明に表示されます。

それでは、別の方法を見てみましょう。

# -webkit-text-stroke クロスブラウジング方法
以下のような方法を使用すると、テキストの影響を利用して、同様の効果を得ることができます。以下のコードをご覧ください。

.text-stroke {
color: #f00;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}

この方法は、text-shadowが適用されるほとんどのブラウザで実装されます。非常に効果的な方法です。

# 実際の輪郭が適用された例を見る
もしも、以下のようなHTMLに上記のCSSを適用して輪郭を直接実装してみましょう。

<span class="text-stroke">THEVOS</span>

上記のコードの実行結果は以下のようになります。

THEVOS

Facebook [ja]コメント

Prev CSS オブジェクトフィットプロパティ

CSS オブジェクトフィットプロパティ 2019.12.04by TheVOS

Dislike

Facebook Twitter Google Pinterest

上へ下へ Go comment 印刷

✔コメントする

Select Editor

✔ Textarea ✔ WYSIWYG

コメントする権限がありません。 Sign In?

Q: [CSS] CSS オブジェクトフィットプロパティ 2019.12.04

https://thevos.jp/Manual/58029

object-fit 속성은 IMG, VIDEO 태그의 크기를 컨테이너에 맞게 자정하는데 사용됩니다.

브라우저 지원

테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.

Property
object-fit	31.0	16.0	36.0	7.1	19.0

특징	설명
기본 값	object-fit : 개별적 속성
상속	안됨
애니메이션	안됨
적용	-
버전	CSS3

정의(Definition)

object-fit 속성은 <img>, <video> 태그의 크기를 정의합니다.

문법(Syntax)

object-fit: fill | contain | cover | scale-down | none

속성(Property)

속성값	설명
fill	컨텐츠 사이즈 크기에 맞게 설정합니다.
contain	컨텐츠의 가로 값을 기준으로 맞게 설정합니다.
cover	컨텐츠 화면 사이즈에 맞게 설정합니다.
scale-down	컨텐츠 크기 보다 작게 설정합니다.

Original

FILL

CONTAIN

COVER

NONE

SCALE-DOWN

object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

Facebook [ja]コメント

Q: [CSS] Css 텍스트 외곽선 처리하기, Stroke 2019.11.28
A:
https://thevos.jp/Manual/57951

CSSを使用してテキストに輪郭、ストローク効果を与える方法を見てみます。

輪郭はテキストを強調する効果的な方法です。CSSを使用して簡単に使用することができますが、最も簡単な方法は次のように-webkit-text-strokeを使用する方法です。

-webkit-text-stroke: 1px #000

ただし、この方法は非常に便利ですが、標準的な方法ではなく、ウェブキットおよびモジラ系のブラウザでのみ適用されます。使用する場合は、次のようにCSSに適用してください。

.text-stroke {
-webkit-text-stroke: 1px #000;
}

これでテキストに輪郭が鮮明に表示されます。

それでは、別の方法を見てみましょう。

# -webkit-text-stroke クロスブラウジング方法
以下のような方法を使用すると、テキストの影響を利用して、同様の効果を得ることができます。以下のコードをご覧ください。

.text-stroke {
color: #f00;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}

この方法は、text-shadowが適用されるほとんどのブラウザで実装されます。非常に効果的な方法です。

# 実際の輪郭が適用された例を見る
もしも、以下のようなHTMLに上記のCSSを適用して輪郭を直接実装してみましょう。

<span class="text-stroke">THEVOS</span>

上記のコードの実行結果は以下のようになります。

THEVOS

Facebook [ja]コメント

書き込む

マニュアル

お知らせ

Css 텍스트 외곽선 처리하기, Stroke

Shortcut

Shortcut

Facebook [ja]コメント

브라우저 지원

정의(Definition)

문법(Syntax)

속성(Property)

Original

FILL

CONTAIN

COVER

NONE

SCALE-DOWN

Facebook [ja]コメント

Facebook [ja]コメント

お客様のビジネススタイルの価値を大切にする企業THEVOSです。 THEVOSは、お客様との緊密な外部ITチームです。