Thread: Creating glowing text using CSS3

Page 1 of 2 12 LastLast
Results 1 to 10 of 11
  1. #1 Creating glowing text using CSS3 
    Registered Member Aesthetic's Avatar
    Join Date
    Mar 2014
    Posts
    34
    Thanks given
    3
    Thanks received
    10
    Rep Power
    8
    First, you start basic enough by defining your font:
    Code:
    .text-glow {
     font-size:4em;
       color: #FFFFFF;
       font-family:Arial;
       }
    The second part becomes more complicated by defining the hover, focus and active attributes all at once

    Code:
    .text-glow:hover, .text-glow:focus, .text-glow:active {
       -webkit-stroke-width: 5.3px;
       -webkit-stroke-color: #FFFFFF;
       -webkit-fill-color: #FFFFFF;
       text-shadow: 1px 0px 20px yellow;
       -webkit-transition: width 0.3s; /*Safari & Chrome*/
       transition: width 0.3s;
       -moz-transition: width 0.3s; /* Firefox 4 */
       -o-transition: width 0.3s; /* Opera */
       }
    CSS3 link attributes:
    That’s the first half of the code. The second half defines the link attributes like this:
    Code:
     .text-glow a {
       -webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/
       transition: all 0.3s ease-in;
       -moz-transition: all 0.3s ease-in; /* Firefox 4 */
       -o-transition: all 0.3s ease-in; /* Opera */
       text-decoration:none;
       color:white;
       }
    Again, this code mostly uses the transition effect, which is very popular with CSS3 designers.
    To implement this effect on your page, simply set the div class and add an href tag around the text that you want to link and glow.


    Code:
    <div class="text-glow">
       <a href="#">
         This Text Glows In Mouse Over
       </a>
    </div>
    Reply With Quote  
     

  2. #2  
    Founder of Divine Services
    DivineServices's Avatar
    Join Date
    Jul 2013
    Posts
    323
    Thanks given
    8
    Thanks received
    40
    Rep Power
    27
    Nice release I guess
    Reply With Quote  
     

  3. #3  
    Registered Member Aesthetic's Avatar
    Join Date
    Mar 2014
    Posts
    34
    Thanks given
    3
    Thanks received
    10
    Rep Power
    8
    Quote Originally Posted by Doubies View Post
    Nice release I guess
    Thanks, appreciate it.
    Reply With Quote  
     

  4. #4  
    Extreme Donator

    Pase's Avatar
    Join Date
    Mar 2011
    Posts
    666
    Thanks given
    93
    Thanks received
    169
    Rep Power
    186
    Nice, now create a series for web development tutorials to help build a website
    Also explain each line to help noobs.






    [Only registered and activated users can see links. ]

    Reply With Quote  
     

  5. #5  
    Registered Member Aesthetic's Avatar
    Join Date
    Mar 2014
    Posts
    34
    Thanks given
    3
    Thanks received
    10
    Rep Power
    8
    Quote Originally Posted by Pase View Post
    Nice, now create a series for web development tutorials to help build a website
    Also explain each line to help noobs.
    Thanks for your input
    Reply With Quote  
     

  6. #6  
    Extreme Donator

    Pase's Avatar
    Join Date
    Mar 2011
    Posts
    666
    Thanks given
    93
    Thanks received
    169
    Rep Power
    186
    Quote Originally Posted by Warmup View Post
    Thanks for your input
    No problem. For this particular tutorial, try break up the lines and explain them so people understand why each one is there.






    [Only registered and activated users can see links. ]

    Reply With Quote  
     

  7. #7  
    Founder of Divine Services
    DivineServices's Avatar
    Join Date
    Jul 2013
    Posts
    323
    Thanks given
    8
    Thanks received
    40
    Rep Power
    27
    Quote Originally Posted by Pase View Post
    Nice, now create a series for web development tutorials to help build a website
    Also explain each line to help noobs.

    ^this.
    Reply With Quote  
     

  8. #8  
    Donator
    Intredy's Avatar
    Join Date
    Sep 2011
    Age
    19
    Posts
    219
    Thanks given
    19
    Thanks received
    25
    Rep Power
    15
    Or you could add the class to the link:

    Code:
    <a href="#" class="text-glow">Glowing</a>
    Reply With Quote  
     

  9. #9  
    ☜(ˆ▽ˆ)

    Zesh's Avatar
    Join Date
    Nov 2012
    Age
    22
    Posts
    293
    Thanks given
    94
    Thanks received
    73
    Rep Power
    168
    Quote Originally Posted by Warmup View Post
    First, you start basic enough by defining your font:
    Code:
    .text-glow {
     font-size:4em;
       color: #FFFFFF;
       font-family:Arial;
       }
    The second part becomes more complicated by defining the hover, focus and active attributes all at once

    Code:
    .text-glow:hover, .text-glow:focus, .text-glow:active {
       -webkit-stroke-width: 5.3px;
       -webkit-stroke-color: #FFFFFF;
       -webkit-fill-color: #FFFFFF;
       text-shadow: 1px 0px 20px yellow;
       -webkit-transition: width 0.3s; /*Safari & Chrome*/
       transition: width 0.3s;
       -moz-transition: width 0.3s; /* Firefox 4 */
       -o-transition: width 0.3s; /* Opera */
       }
    CSS3 link attributes:
    That’s the first half of the code. The second half defines the link attributes like this:
    Code:
     .text-glow a {
       -webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/
       transition: all 0.3s ease-in;
       -moz-transition: all 0.3s ease-in; /* Firefox 4 */
       -o-transition: all 0.3s ease-in; /* Opera */
       text-decoration:none;
       color:white;
       }
    Again, this code mostly uses the transition effect, which is very popular with CSS3 designers.
    To implement this effect on your page, simply set the div class and add an href tag around the text that you want to link and glow.


    Code:
    <div class="text-glow">
       <a href="#">
         This Text Glows In Mouse Over
       </a>
    </div>
    Very basic, but I guess this will help someone. :3

    Cheers for the release, bud.

    Graphic Design | 17 | Australia | Web Design

    Spoiler for People I respect:

    Reply With Quote  
     

  10. #10  
    Registered Member Aesthetic's Avatar
    Join Date
    Mar 2014
    Posts
    34
    Thanks given
    3
    Thanks received
    10
    Rep Power
    8
    Quote Originally Posted by Zesh View Post
    Very basic, but I guess this will help someone. :3

    Cheers for the release, bud.
    No problem.
    '
    Reply With Quote  
     

Page 1 of 2 12 LastLast

Thread Information
Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Replies: 19
    Last Post: 06-29-2013, 09:08 PM
  2. Replies: 6
    Last Post: 12-23-2012, 02:13 AM
  3. Creating a server using this library?
    By RaddTech LLC in forum Requests
    Replies: 2
    Last Post: 12-21-2012, 04:52 AM
  4. Replies: 2
    Last Post: 09-11-2011, 08:28 AM
  5. Creating 3D Text Effects
    By RuneTrip in forum Tutorials
    Replies: 2
    Last Post: 11-22-2009, 12:11 AM
Posting Permissions
  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •