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]コメント 


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

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


    브라우저 지원

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

    Propertyicon-chrome1.png icon-edge.png icon-firefox1.png icon-safari1.png icon-opera1.png
    object-fit31.016.036.07.119.0

    정의(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:

    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]コメント 

Board Pagination Prev 1 Next
/ 1