1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Anyone know how to do text shadow like this one

Discussion in 'HTML & Website Design' started by ketting00, Dec 10, 2014.

  1. #1
    Hi guys,
    I'm looking to make text-shadow like in the pic below.
    Anyone have a clue how to do this?
    Many thanks,
    css3-box-shadow.png
     
    ketting00, Dec 10, 2014 IP
  2. Ben Wilson

    Ben Wilson Greenhorn

    Messages:
    10
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    23
    #2
    It is case of horizontal box shadow effect. Either you can make vertical or horizontal. In your case it is multiple box shadow effects. Try to do following steps:-

    First you need to do HTML coding to make DIV
    <div class="boxshadow">
    <P> Box Shadow </P>
    </div>

    Then CSS parts come:-

    You may use elements scores according to your need.( here i have mentioned default scores) Try using color sets, pixels and width and height.


    .box h1
    {
    text-align: Center;
    position: Relative;
    top:px;
    }

    .box
    {
    width:%;
    height: px;
    background: check out for this color;
    margin: px auto;
    }

    .boxshadow
    {
    position: relative;
    }
    .boxshadow: before, ,boxshadow:after

    {
    z-index: deg;
    position: absolute;
    content: "";
    bottom:px;
    left: px;
    width: %;
    top: %;
    max-width:px;
    background: 0px 0px 0px color;
    -webkit-box-shadow: 0px 0px 0px color;
    -moz-box-shadow: 0px 0px 0px color;
    box-shadow: 0px 0px 0px color;
    -webkit-transform: rotate(deg);
    -moz-transform: rotate(deg);
    -o-transform: rotate(deg);
    -ms-transform: rotate(deg);
    transform: rotate(deg);
    }
    .boxshadow:after
    {
    -webkit-transform: rotate(deg);
    -moz-transform: rotate(deg);
    -o-transform: rotate(deg);
    -ms-transform: rotate(deg);
    transform: rotate(deg);
    right: 0px;
    left: auto;
    }

    Let me know if this works. Hope you find the solution.

    Thanks
    Ben Wilson
     
    Ben Wilson, Dec 10, 2014 IP
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #3
    Hi,
    Thank you, but it doesn't work.

    Anyway, I got it done.

    Appreciated.
     
    ketting00, Dec 10, 2014 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    It would be a Good Thing for the community, especially for those who have a similar question, if you would post the solution you found.

    cheers,

    gary
     
    kk5st, Dec 11, 2014 IP
  5. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #5
    ketting00, Dec 11, 2014 IP
    Numenorean7 likes this.
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    Does that work for you in anything other than Chrome? For me, it fails in Opera and Firefox. It doesn't work completely in Chrome. I don't have IE on this Linux box ;)

    cheers,

    gary
     
    kk5st, Dec 12, 2014 IP
  7. Numenorean7

    Numenorean7 Well-Known Member

    Messages:
    84
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    105
    #7
    That's a pretty good resource. Thanks for sharing.
     
    Numenorean7, Dec 12, 2014 IP
  8. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #8
    It did work on IE10 and Firefox. I haven't tested with other browsers yet. My primary target is Chrome on Android device.
     
    ketting00, Dec 12, 2014 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    Can you post a link to your working version? Or, failing that the actual markup + css you're using?

    g
     
    kk5st, Dec 13, 2014 IP
  10. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #10
    It's under development. I'm not making it live yet. The plan is after the New Year.
     
    ketting00, Dec 13, 2014 IP