skip to Main Content

Is there any way to make effects like the in the images, with just CSS?

It would be sad to lose all precious SEO because of images replacing text.

Brightness around the text

http://i.stack.imgur.com/bISVC.png

Shining text

http://i.stack.imgur.com/T9ojb.jpg

I first thought of shadows and stuff but I can’t figure anything out…

2

Answers


  1. Try adding a shadow like this : text-shadow: 0 0 3px #0000FF;

    Login or Signup to reply.
  2. These effects are achieved working with multiple shadows layering colors over a dark background.
    Here is an example:

    .glow{
          font-family: Sans-serif;
          font-size: 3rem;
          background: black;
          color: white;
          padding: 80px;
          text-shadow:
                      1px 1px 0px gold,
                      -3px -0 25px red,
                      3px 0px 3px white,
                      0px 0px 15px white,
                      15px 10px 10px black,
                      0 0 40px orangered,
                      0 0 40px orangered,
                      0 0 60px orangered,
                      0 0 80px orangered,
                      0 0 80px orangered,
                      0 0 100px orangered,
                      0 0 150px orangered;
           }
    <h1 class="glow">Glowing CSS only</h1>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search