?? ????? CSS ?? ??? ???? ? ?? ??? ??? ??? ?? ??????. ???? CSS text-shadow ??? ????? ? ???? ?? ??? ?? ? ????. ???? ???? ???? ?? ??? ?? ??? ??? ? ??? ?? ? ?? ??? ??? ??? ????. ??? ??? ??? ??? ?? ??? ?? ???? ??? ????.

? ?? ?? ??? :

1. ?? ??? ???? ?? ?? ??? ??????
2. CSS ??? ???? ???? ? ?? ??? ????? (?? ??!)
3. ?? ???, ??? ? 3D? ???? ??? ?? ??? ??????.

text-shadow ??? ??? ???? ?????

?? ???? ?? ? ?? ??? ??? ???????.

??? ?? ??? ? ?? ???? ? ?? ??? ?? ???? ???? ????? ???????? ????? ??? ????. ?? ??? ?? HTML? ???? ??? ???? ??? ? ? ????. CSS?? content: "text" ?? ??????

??? ???? ???? text-shadow ? ?? ?????!

?? ?? #1

CSS ??? ?????.

 .hover-1 {
  ?? ?? : 1.2em;
  ?? : #0000;
  Text-Shadow : 
    0 #000, 
    0 1.2em #1095c1;
  ???? : ???;
  ?? : .3S;
}
.hover-1 : ?? {
  Text-Shadow : 
    0-1.2em #000, 
    0 #1095C1;
}

?? ?? ???? ? ?? ?? ???? ???? ?? ???? ??? ???? ???? ???? ( #0000 ??). ? ?, ?? text-shadow ???? ? ?? ???? ????. ? ??? ? ?? ?? ? ? ?????. ?? ?? ??? ?? ??? ??? ??? ??? ??? ????? ???? ???? ???? ???? ?????.

??? ??? ???? ???? ??? ??????. ????? ?? ???? ???? ?? ????“????”???? ????.

??? ? ? ??? ? ?? ??? ???? ????. ????? ??? ?? ???? ??? ??? ???? ?? ???? ?? ???? ?? ? ??? ????. ???? ??? ?? ??? ???? ????? ?? ?????.

??? ??????. ???? ??? ???? ???? ?? 1.2em ?? ?? ? ???? CSS ??? ?? ??? ???? ???????? ( --h ?????).

 .hover-1 {
  -H : 1.2EM;

  ?? ?? : var (-h);
  ?? : #0000;
  Text-Shadow : 
    0 #000, 
    0 var (-h) #1095c1;
  ???? : ???;
  ?? : .3S;
}
.hover-1 : ?? {
  Text-Shadow : 
    0 calc (-1 * var (-h)) #000, 
    0 #1095C1;
}

?? ? ?? calc() ??? ???? ??? ?? ????? text-shadow ? ?? ????? ? ? ????. (??? ?? ????? ??? ??????.)

 .hover-1 {
  -H : 1.2EM;   

  ?? ?? : var (-h);
  ?? : #0000;
  Text-Shadow : 
    0 calc (-1*var (-_ t, 0em)) #000, 
    0 calc (var (-h)-var (-_ t, 0em)) #1095c1;
  ???? : ???;
  ?? : .3S;
}
.hover-1 : ?? {
  --_ t : var (-h);
}

? --_t ??? ??? ????? ?????, ??? ??? ???? ? ???? ?? ? ????? ?? ?? (? : --h --_t )?? ???? ???? ? ??? ?? (? : - -h)? ???? ? ???? ?? ?? ?????. ?? ??, ??? ?? ??? ???? ??? ??? ????.

?? ?? ???? ???? ????? ?? ??? ?? ?? ??? ???? ? ? ????.

??? text-shadow ??? ?? ?? ???? ? ??????. ??? ?? ?? ??? ?????!

?? ?? #2

? ??? ??, ??? ? ?? ??, ? text-shadow ? background ????? ? ????. text-shadow ? ???? ??? ??? ?? ??? ?? ? ?? ???? ??? ??? ???? ?? ?? ?? ???? ??? ???? ????? ? ? ??? ?????.

 .hover-2 {
  /* ??*/
  -H : 1.2EM;

  ?? ?? : var (-h);
  ?? : #0000;
  Text-Shadow : 
    0 var (-_ t, var (-h)) #fff,
    0 0 var (-_ c, #000);
  ?? : 0.3S;
}
.hover-2 : ?? {
  --_ t : 0;
  --_ c : #0000;
}

????? ?? ??? ???? ???? ????? ?? ???? ??? ???? ?????. ?? ?? ?????? ???? background-size ?????? ??????.

?????, ??? overflow: hidden

 .hover-2 {
  /* ??*/
  -H : 1.2EM;

  ?? ?? : var (-h);
  ?? : #0000;
  Text-Shadow : 
    0 var (-_ t, var (-h)) #ffff,
    0 0 var (-_ c, #000);
  ??: 
    ?? ???? (#1095c1 0 0) 
    ??/100% var (-_ d, 0) ???? ??;
  ???? : ???;
  ?? : 0.3S;
}
.hover-2 : ?? {
  --_ d : 100%;
  --_ t : 0;
  --_ c : #0000;
}

??? ????? ?? CSS text-shadow ? background ??? ???? ? ?? ??? ??? ????. ?? CSS ??? ???? ??? ??? ? ? ????.

?? ??? ???? ??? ?? ???? ?? ?? ????. ?? ?? ??? ?? ???? ??? ??? ??????? ?????. CSS ?? ??? ???? ?? ?,? ??? ?? ?? ?? ? ?? ?? ??? ???? ?? ??? ?????.

?? ????? ??? ?? ? ???? ?? ??? ??? ??? ???????. ??? ??? ? ? ?????

?, ??! ??? ??? ??? ?? ??? ??? ???? ???? ? ? ???? CSS ??? ?? ?? ? ???????.

 .hover-2 {
  /* ??*/
  -H : 1.2EM;

  ?? ?? : var (-h);
  ?? : #0000;
  Text-Shadow : 
    0 var (-_ i, var (-h)) #fff,
    0 rgb (0 0 0 / calc (var (-_ i, 1) * 100%);
  ??: 
    ?? ???? (#1095c1 0 0) 
    ??/100% calc (100%-var (-_ i, 1) * 100%) ? ??;
  ???? : ???;
  ?? : 0.3S;
}
.hover-2 : ?? {
  --_ i : 0;
}

?? ?? #3

? ?? ??? ??? ? ? ?? ??? ??? ??? ????. ?? ???? ? ?? ?? ?? ?? ???? ? ?? ?? ??.

 .hover-3 {
  /* ??*/
  ---C : #1095C1;
  /* ??*/
  -H : 1.2EM;

  /*? ??? ? ?? ?? ??*/
  ?? ?? : var (-h);  
  ?? : #0000;
  ???? : ???;
  Text-Shadow : 
    0 calc (-1 * var (-_ t, 0em)) var (-c), 
    0 calc (var (-h)-var (-_ t, 0em)) #fff;
  /* ?? ???? ? ?? ?? ??*/
  ??: 
    ?? ???? (var (-c) 0 0) ? ?? 
    calc (200%-var (-_ p, 0%)) 100% / 200% var (-_ p, .08em);
  ?? : .3S var (-_ s, 0s), ?? ?? .3s calc (.3s- var (-_ s, 0s));
}
.hover-3 : ?? {
  --_ t : var (-h);
  --_ p : 100%;
  --_ S : .3S
}

?? ? ?? ?? ??? ??? ???? ?? ?? ??? ??? ?? ???? ??????. ??? ???? ??? ?? ??? ????! ???? ?? ??? ???? ???? ??? ?? ? ??? ???? ? ?? ??? ??? ??? ?????.

?? ? ?? ???? ???? ?? ?? ?? ??? ???? ??? ????? ??? ????????.

 .hover-3 {
  /* ??*/
  ---C : #1095C1;
  /* ??*/
  -H : 1.2EM;

  ?? ?? : var (-h);  
  ?? : #0000;
  ???? : ???;
  Text-Shadow : 
    0 calc (-1 * var (-h) * var (-_ i, 0)) var (-c), 
    0 calc (var (-h) * (1- var (-_ i, 0)) #fff;
  ??: 
    ?? ???? (var (-c) 0 0) ? ??
    calc (200%-var (-_ i, 0) * 100%) 100% / 200% calc (100% * var (-_ i, 0) .08EM);
  ?? : .3S calc (var (-_ i, 0) * .3s), ?? ?? .3s calc (.3s-calc (var (-_ i, 0) * .3s));
}
.hover-3 : ?? {
  --_ i : 1;
}

?? ?? #4

? ?? ??? ? ?? ?? ??? ?????. ??, clip-path ?????? ???? ??? ??? ? ??? ?? ? ?? ???????.

??? ?? ?? ???? ??? ? ? ?????? ? ?? ?????.

???? ?? ??? ? ? ? ?? ??? overflow: hidden ? ??? inset(0 0 0 0) ??????. ????? ??? ?? ? ??? ???? ???? ?? ??? ??? ?? ??? ? ?? ? (?? ???? ???)? ???????.

???? ??? ???? ???? ??? ?? ? ?? ?? ??? ?? ? ? ???, ??? ??? ????.

??? ?? ????? ????! clip-path ?????? ?? ?? ? ?? ?? ?? ?? ???????. ?? ?? clip-path ???? ??? ?? ??? ??? ?? ? ? ????.

 ?? : 0.4S 0.4S, ?? ?? 0.4S;

???? ??? ????? ?????.

 ?? : 0.4S, ?? ?? 0.4S 0.4S;

??? ??? box-shadow ???? ??? ???? ???? ??? ??? ????. ???? ??? ????? ??? ???? ??? ??? background ? ??? ???? ????. ??? box-shadow ??? ??? ?? ? ? ????.

 .hover-4 {
  /* ??*/
  ---C : #1095C1;
  /* ??*/
  -H : 1.2EM;

  ?? ?? : var (-h);
  ?? : #0000;
  Text-Shadow : 
    0 var (-_ t, var (-h)) #fff,
    0 0 var (-_ c, #000);
  Box-Shadow : 0 var (-_ t, var (-h)) var (-c);
  ?? ?? : ?? (0 0 0 0);
  ?? : ?? ???? (var (-c) 0 0) 0 var (-_ t, var (-h)) no-Repeat;
  ?? : 0.4S, ?? ?? 0.4S 0.4S;
}
.Hover-4 : ?? {
  --_ t : 0;
  --_ c : #0000;
  ?? ?? : ?? (0 0 calc (-1 * var (-h)) 0);
  ?? : 0.4S 0.4S, ?? ?? 0.4S;
}

box-shadow ? ??? ???? text-shadow ??? ?? ??? ???? ??? ?? ??? ? ? ????. ? ? ?? ???? ?????? ??? ??? ??????. ? ? ???? ??? ? ?????. box-shadow ?? ?? ?? text-shadow ? ?? ????.

??? ???? ??? ????? ??????? ? ?? ????? ?????.

??, ?? ??? ? ?? ?? ??? ?? ? ?? ?? ????!

?? ??! ?, ??? ?? ?? ??? ???? ??? ??? ???? ????. ??? 0%?? 100%? ??????? ?? ??? ????????.

?????? ??? ???? ??? ????? ?? ??? ??? ?????. ?? ( --h )? ??? ?? ???? 0 var(--h) ?? 0 0 ?? ??? ?????? ???? ??? ?? ? ????.

 .hover-4 {
  / * ... */
  ?? : ?? ???? (var (-c) 0 0) 0 var (-_ t, var (-h)) no-Repeat;
}
.Hover-4 : ?? {
  --_ t : 0;
}

??? background-size ?????? ???? ?? ??? ?? ? ??? ?? ??? ? ?? ??? ??????!

????? inset(0 0 1px 0) ? ??????… ??

?? ??? ??? ???? ???? ????? ???? ?? ?? ??? ?? ?? ?????. ? ?? ??? ?? ?? ???? 1px? ???? ?????.

?? ??? ?? ???? ??????

? ?? ???? ?? ??! ? ? ?? ?? ??? ?? ??? ?? ??? ??? ?? ? ????? ??? ???? ? ? ??????. ?? ???? ??? ????? ????!

?? ???!

??? ?? ??? ???????.? ??? ?? ??? ? ?? ?????. ??? ?? ?? ??? ????? ? ? ????? ??? ??? ????? ???? ?? ????!

??

??? ??? ??? ? ?? CSS ??? ???? ?? ??? ??? ?? ??? ?? ??? ???? ??? ??? ???? ?? ?? ?? ?????. ?? ??? ???? ????! ??? ?? ??? ???? ? ?? ?????? ??? ?????? ?? ? ? ????.

? ?? ??? ? ?? ??? Shadow ?? ??? ???? ? ??? ??? ??? ??? ???? 500 ?? ?? ?? ???? ??????.

? ??? CSS ??? ???? ???? 4 ?? ? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!