Эффект при наведении курсора CarveMe

CarveMe

Имитация вставки эффекта text-shadow CSS3

color: transparent;
background-color: rgba(82,96,117,0.5);
-webkit-background-clip: text;
text-shadow: rgba(255,255,255,0.5) 0 5px 6px;
  1. Сначала мы устанавливаем цвет текста на прозрачной.
  2. Затем мы добавляем тёмный background-color.
  3. Затем добавляем background-clip: text— это делает фон в пределах контура текста. Это как маска. Заметьте, это не является стандартной функцией и применяются только в Chrome и Safari.
  4. И, наконец, если мы добавим светлый, наполовину прозрачный text-shadow сверху и наведём на него, то увидим что это делает его похожим на текст  вырезанный на поверхности.

Смотреть DEMO


Комментарии: