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
    33
    Thanks given
    3
    Thanks received
    12
    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
    320
    Thanks given
    8
    Thanks received
    41
    Rep Power
    27
    Nice release I guess
    Reply With Quote  
     

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

  4. #4  
    Quality Animated Banners


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







    Reply With Quote  
     

  5. #5  
    Registered Member Aesthetic's Avatar
    Join Date
    Mar 2014
    Posts
    33
    Thanks given
    3
    Thanks received
    12
    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  
    Quality Animated Banners


    Pase's Avatar
    Join Date
    Mar 2011
    Posts
    681
    Thanks given
    99
    Thanks received
    178
    Rep Power
    300
    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.







    Reply With Quote  
     

  7. #7  
    Founder of Divine Services
    DivineServices's Avatar
    Join Date
    Jul 2013
    Posts
    320
    Thanks given
    8
    Thanks received
    41
    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
    25
    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
    27
    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
    33
    Thanks given
    3
    Thanks received
    12
    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)


User Tag List

Similar Threads

  1. Would it be possible to create a RSPS using Python?
    By ShadowJagu in forum Application Development
    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 PrataKosong 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
  •