Text lighting effects implemented in pure css3_html/css_WEB-ITnose

1. [Picture] 201411232307357663.jpg

2. [Code][HTML] Code

1

< span class = "shiny" >< span class = "inner-shiny" >Shiny

3. [Code][CSS] Code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

body

{

background : #111 ;

}

.shiny

{

color: #F5C21B ;

background : -webkit-gradient(linear, left top , left bottom , from( #F5C21B ), to( #D17000 ));

   -webkit-background- clip : text;

   -webkit-text-fill- color : transparent ;

   display : block ;

   width : 610px ;

   margin : auto ;

   font-family : "Source Sans Pro" , sans-serif ;

   font-size : 13em ;

   font-weight : 900 ;

   position : relative ;

   text-transform : uppercase ;

}

 

.shiny::before

{

     background-position : -180px ;

     -webkit-animation: flare 5 s infinite;

   -webkit-animation-timing-function: linear;

   background-image : linear-gradient( 65 deg, transparent 20% , rgba( 255 , 255 , 255 , 0.2 ) 20% , rgba( 255 , 255 , 255 , 0.3 ) 27% , transparent 27% , transparent 100% );

   -webkit-background- clip : text;

   -webkit-text-fill- color : transparent ;

   content : "Shiny" ;

   color : #FFF ;

   display : block ;

   padding-right : 140px ;

   position : absolute ;

}

 

.shiny::after

{

   content : "Shiny" ;

   color : #FFF ;

   display : block ;

   position : absolute ;

   text-shadow : 0 1px #6E4414 , 0 2px #6E4414 , 0 3px #6E4414 , 0 4px #6E4414 , 0 5px #6E4414 , 0 6px #6E4414 , 0 7px #6E4414 , 0 8px #6E4414 , 0 9px #6E4414 , 0 10px #6E4414 ;

   top : 0 ;

   z-index : -1 ;

}

 

.inner-shiny::after, .inner-shiny::before

{

         -webkit-animation: sparkle 5 s infinite;

   -webkit-animation-timing-function: linear;

     background : #FFF ;

   border-radius: 100% ;

   box-shadow: 0 0 5px #FFF , 0 0 10px #FFF , 0 0 15px #FFF , 0 0 20px #FFF , 0 0 25px #FFF , 0 0 30px #FFF , 0 0 35px #FFF ;

   content : "" ;

   display : block ;

   height : 10px ;

   opacity: 0.7 ;

   position : absolute ;

   width : 10px ;

}

 

.inner-shiny::before

{

     -webkit-animation-delay: 0.2 s;

   height : 7px ;

   left : 0.12em ;

   top : 0.8em ;

   width : 7px ;

}

 

.inner-shiny::after

{

   top : 0.32em ;

   right : -5px ;

}

 

@-webkit-keyframes flare

{

   0%   { background-position : -180px ; }

   30%  { background-position : 500px ; }

   100% { background-position : 500px ; }

}

 

@-webkit-keyframes sparkle

{

   0%   { opacity: 0 ; }

   30%  { opacity: 0 ; }

   40%  { opacity: 0.8 ; }

   60%  { opacity: 0 ; }

   100% { opacity: 0 ; }

}