How to create this in css?

[fifthhouse]

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

[molona]

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.

[ralph.m]

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.

[PicnicTutorials]

Here are three ways http://www.visibilityinherit.com/cod...tes-how-to.php

[fifthhouse]

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.