SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to create this in css?

    Hello all. I want to create an effect on my wordpress site, to put product testimonials. I know it's asking a lot, but could someone tell me how I would do it? I am attaching an image with the visual look I want to achieve. Also, I have the head image that you see in the attachment.

    testimonial.png
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond

  2. #2
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    That would depend on how your want to do it... meaning if you want to take advantage of CSS3 and you don't mind that those browsers that don't fully support may see it differently or if you really need that all browsers see it exactly as it looks there.

    Why am I saying this? because of the gradient. CSS3 can use gradientes but if you follow the CSS 2.1 route you'll need to use a background picture at the bottom.

    Regarding the little triangle that points to the avatar, it is just a picture.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Since it's a quote, I'd use the <blockquote> element. Put some padding on it (say 25px), a background gradient image on it (as molona suggested—forget about CSS3 for now). Maybe give it position: relative, too, and then att ach the little arrow by using blockquote:after and positioning it absolutely at the bottom and a certain number of px from the left.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Location
    Toronto
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone for your help. I wasn't able to figure it out on my own, so I asked my developer to do it. I'm a newbie to css and the learning curve is a slow one for me.
    Mindfulness Anger Management
    http://mindfulnessangermanagement.com
    anger management and beyond


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •