How I can do this effect ...

Discussion in 'ReThink WordPress Theme' started by delkko, Oct 24, 2014.

  1. delkko

    delkko New Member

    Joined:
    Apr 28, 2013
    Messages:
    27
    Likes Received:
    0
    Hello, I would like to know how can I do this effect in the links I put the content of my site.
    I think it's great and I would do it on the links of the posts I publish on my site.
    Thanks

    effect-link.gif
     
  2. Yogesh

    Yogesh Guest

    Joined:
    Aug 8, 2014
    Messages:
    2,052
    Likes Received:
    41
  3. delkko

    delkko New Member

    Joined:
    Apr 28, 2013
    Messages:
    27
    Likes Received:
    0
    Thank you very much, Yogesh, I have achieved the effect with this code:

    a { text-decoration:none; color: #176093; }
    a:hover { text-decoration:none; color: #FF6F00;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    }

    but I can not make the effect only appear in links within the content since the effect also appears in the logo of my website and that's not what I want. Can you tell me how it's done please.
     
  4. Yogesh

    Yogesh Guest

    Joined:
    Aug 8, 2014
    Messages:
    2,052
    Likes Received:
    41
    Hello,

    Don't apply this effect on all anchor tag( <a> ), give some specific class to anchor tag which you want to apply this effect.
    Like as
    1. Today is <a class="boxshadow">Monday</a>.
    2. I am <a class="boxshadow">John</a>.

    Then apply box-shadow property like as
    a { text-decoration:none; color: #176093; }
    a.boxshadow :hover { text-decoration:none; color: #FF6F00;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    }

    It will resolve your issue.

    Thanks & Regards
    Yogesh Bhade
     
  5. delkko

    delkko New Member

    Joined:
    Apr 28, 2013
    Messages:
    27
    Likes Received:
    0
    Thanks Yogesh, but when added a.boxshadow, the effect disappears. Don't worry, either way it's not so important, just that it seemed to me a very attractive effect and wanted to implement the links on my site.
    Thanks for everything.
     
  6. Yogesh

    Yogesh Guest

    Joined:
    Aug 8, 2014
    Messages:
    2,052
    Likes Received:
    41
    Hello,

    If you are applying css code to a.boxshadow then you have to add class boxshadow in anchor tag as shown below in code.
    1. Today is <a class="boxshadow">Monday</a>.
    2. I am <a class="boxshadow">John</a>.
    3. This effect <a>will not show</a> here.

    Above applied css code (a.boxshadow) wil only apply on sentence 1 and 2 , it will not apply on sentence 3.

    It will resolve your issue.

    Thanks & Regards
    Yogesh Bhade
     
  7. delkko

    delkko New Member

    Joined:
    Apr 28, 2013
    Messages:
    27
    Likes Received:
    0
    Thanks Yogesh, I think I understood now as I do that
     

Share This Page