Home > Web Front-end > CSS Tutorial > Three small special effects that are easy to master - text hollowing, transparency, and shadow effects

Three small special effects that are easy to master - text hollowing, transparency, and shadow effects

零下一度
Release: 2017-04-28 10:48:29
Original
3326 people have browsed it

This article mainly introduces a summary of examples of text hollowing, transparency value, and shadow effect settings in CSS. Setting the text-stroke-color transparency value can make the text softer to some extent. Friends in need can refer to it. Next

text-fill-color to create hollow text:
Code

CSS CodeCopy content to clipboard

  1. -webkit-text-fill-color:transparent;

  2. -webkit -text-stroke:1px #000;

Effect
201637105111410.png (752×75)

text -stroke-color transparency value makes text softer:
Code

CSS CodeCopy content to clipboard

  1. background-image:-webkit-linear-gradient(#eee,#000);

  2. -webkit-background-clip:text;

  3. -webkit-text-fill-color :transparent;

Effect 1
201637105151945.png (609×90)

Code

CSS Code Copy content to clipboard

  1. ##background-image:-webkit-linear-gradient(#eee,#000);

  2. -webkit-

    background-clip:text;

  3. -webkit-text-fill-

    color:transparent;

  4. -webkit-text-stroke:

    1px transparent; Softer

  5. text-shadow text-shadow

Syntax:
201637105229256.png (620×72)

CSS Code

Copy content to clipboard


box-reflect:

none | [ {2,3} && <color>? ][ , < ;length>{2,3} && <color

>? ]*
  1. Let’s implement a shadowed text example: CodeCSS Code

    Copy content to clipboard


##text-shadow

:2px 2px 0

#000
    ;
  1. Effect text-shadow has 3 length parameters, the first represents horizontal offset, the second represents vertical offset, and the third represents blur (optional) Softer text shadow: Code

CSS Code


Copy content to clipboard201637105301417.png (622×53)



text-shadow

:1px 1px

5px
  1. #000

    ; EffectMultiple shadows: Code

  2. CSS Code

Copy content to clipboard
201637105352727.png (596×46)


##text-shadow

:

1px 1px 5px

    #000
  1. ;

Effect
201637105420741.png (578×52)

The above is the detailed content of Three small special effects that are easy to master - text hollowing, transparency, and shadow effects. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template