CSS Hover Текст (text-shadow и box-shadow)


Ниже размещены несколько примеров hover-эффектов для текста с использованием css теней (свойство text-shadow и box-shadow), а также указаны основные исходные значения (параметры) используемые в демо-примерах.
position: absolute;
background-color: #13C4A5;
Демо-пример 1
#wb_demo1 {
  
text-shadow: 0px 1px 0px rgba(51, 51, 51, 0.5);
  
box-shadow: inset 0px 0px 0px 0px #ff401a;
  
transition: all 500ms linear 0ms;
}
#wb_demo1:hover {
   text-shadow: 2px 2px 2px #4F4F4F;
  
box-shadow: inset 500px 0px 0px 0px #ff401a;
   transition: box-shadow 500ms linear 0ms, text-shadow 500ms linear 0ms;
}
position: absolute;
background-color: #3695C1;
Демо-пример 2
#wb_demo2 {
  
text-shadow: 0px 1px 0px rgba(51, 51, 51, 0.5);
  
box-shadow: inset 0px 0px 0px 0px #ff401a;
  
transition: all 500ms linear 0ms;
}
#wb_demo2:hover {
   text-shadow: 2px 2px 2px #4F4F4F;
  
box-shadow: inset 0px -100px 0px 0px #ff401a;
  
transition: box-shadow 500ms linear 0ms, text-shadow 500ms linear 0ms;
}
position: absolute;
background-color: #77A1A0;
Демо-пример 3
#wb_demo3 {
  
text-shadow: 0px 1px 0px rgba(51, 51, 51, 0.5);
  
box-shadow: inset 0px 0px 0px 0px #ff401a;
  
transition: all 500ms linear 0ms;
}
#wb_demo3:hover {
   text-shadow: 2px 2px 2px #4F4F4F;
  
box-shadow: inset 0px 0px 0px 50px #ff401a;
  
transition: box-shadow 500ms linear 0ms, text-shadow 500ms linear 0ms;
}
position: absolute;
background-color: #C5C5C5;
Демо-пример 4
#wb_demo4 {
  
overflow: hidden;
  
text-shadow: 0px 30px 0px transparent;
   box-shadow: 0px 1px 3px 0px #cdcecf;
   transition: all 300ms linear 0ms;
}
#wb_demo4:hover {
  
text-shadow: 2px 2px 2px #4F4F4F;
  
transition: text-shadow 300ms linear 0ms;
}
position: absolute;
background-color: #13C4A5;
Демо-пример 5
#wb_demo5 {
  
overflow: hidden;
  
text-shadow: 0px 0px 100px transparent;
  
box-shadow: 0px 1px 3px 0px #cdcecf;
   transition: all 300ms linear 0ms;
}
#wb_demo5:hover {
  
text-shadow: 2px 2px 2px #4F4F4F;
  
transition: text-shadow 300ms linear 0ms;
}
position: absolute;
background-color: #3695C1;
Демо-пример 6
#wb_demo6 {
  
overflow: hidden;
  
text-shadow: -30px -30px 0px transparent;
  
box-shadow: 0px 1px 3px 0px #cdcecf;
   transition: all 300ms linear 0ms;
}
#wb_demo6:hover {
  
text-shadow: 2px 2px 2px #4F4F4F;
  
transition: text-shadow 300ms linear 0ms;
}
position: absolute;
background-color: #77A1A0;
Демо-пример 7
#wb_demo7 {
  
overflow: hidden;
  
text-shadow: -150px 0px 0px transparent;
  
box-shadow: 0px 1px 3px 0px #cdcecf;
   transition: all 300ms linear 0ms;
}
#wb_demo7:hover {
  
text-shadow: 2px 2px 2px #4F4F4F;
  
transition: text-shadow 300ms linear 0ms;
}
position: absolute;
background-color: #C5C5C5;
Демо-пример 8
#wb_demo8 {
  
font-size: 37px;
  
text-shadow: 0px 1px 0px rgba(51, 51, 51, 0.5);
  
box-shadow: 0px 1px 3px 0px #cdcecf;
   transition: all 300ms linear 0ms;
}
#wb_demo8:hover {
  
font-size: 32px;
  
text-shadow: 2px 2px 2px #4F4F4F;
  
transition: font-size 300ms linear 0ms, text-shadow 300ms linear 0ms;
}
position: absolute;
background-color: #13C4A5;
Демо-пример 9
#wb_demo9 {
  
box-shadow: 0px 1px 3px 0px #cdcecf;
  
text-shadow: 0px 1px 0px rgba(51, 51, 51, 0.5);
  
transition: all 300ms linear 0ms;
}
#wb_demo9:hover {
  
box-shadow: 5px 5px 0px #A5A5A5;
  
text-shadow: 2px 2px 2px #4F4F4F;
  
transition: box-shadow 300ms linear 0ms, text-shadow 300ms linear 0ms;
}
position: absolute;
background-color: #3695C1;
Демо-пример 10
#wb_demo10 {
  
box-shadow: 0px 1px 3px 0px #cdcecf;
  
text-shadow: 0px 1px 0px rgba(51, 51, 51, 0.5);
  
transition: all 300ms linear 0ms;
}
#wb_demo10:hover {
  
box-shadow: -5px -5px 0px #9E9E9E;
  
text-shadow: 2px 2px 2px #4F4F4F;
  
transform: translate(5px,5px) rotate(0deg) ;
  
transition: box-shadow 300ms linear 0ms,
transform 300ms linear 0ms, text-shadow 300ms linear 0ms;
}
position: absolute;
background-color: #C5C5C5;
Демо-пример 11
#wb_demo11 {
  
text-shadow: 0px 1px 0px rgba(51, 51, 51, 0.5);
  
box-shadow: 0px 1px 3px 0px #cdcecf;
   transition: all 500ms linear 0ms;
}
#wb_demo11:hover {
  
text-shadow: 0px 15px 5px rgba(0,0,0,0.1),
10px 10px 5px rgba(0,0,0,0.05), -10px 10px 5px rgba(0,0,0,0.05);
  
transition: text-shadow 500ms linear 0ms;
}