changing text quotes over background speech bubble

[mlegg]

I was searching for a way to have references, text quotes, changing in or over a speech bubble. I have a dozen of quotes that I would like to put on a page with the business name under it.

I saw something like this, look near the bottom of the page where it says Testimonial Slider.
http://www.kriesi.at/themes/enfold/shortcodes/testimonials/

How can I do something like this? or a better version?
thanks

[Beverleyh]

It depends if you want to randomise, what browsers you want to support (there are some great CSS3 animated fadein/out options but they're only good for IE10+) or if you're using jQuery (a ~100kb library is a bit overkill for small enhancements).

Maybe start here and test a few based on your requirements https://www.google.co.uk/search?q=fadein+quotes+css3&gws_rd=cr,ssl&ei=16wPVcL2EcixUeqlgYAN#q=fadein+quotes+css3&start=10

[mlegg]

http://www.jqueryscript.net/rotator/Simple-Text-Rotation-Plugin-billboard.html seems pretty good. I'll keep searching around.
my original thought was to do something like this http://cssslider.com/ with images and use hidden text so that Google can see it

[Beverleyh]

The billboard one looks quite nice. If you're already using jQuery, I think I'd go for that.

It looks like the CSS slider needs a commercial license for use on a business site - it's pretty pricey :eek:

But the CSS slider you posted reminded me of a simpler CSS-only image slideshow that I recently put together for a school site (http://williamlevick.derbyshire.sch.uk/) so I played around with it a bit and adapted it for text.

Here's a CSS-only version Responsive CSS3 Fading Quotes: http://fofwebdesign.co.uk/template/_testing/quotes-css.htm - good for modern browsers and IE10+ 'as-is', but with a small snippet of JS, it works without fades in IE9 too. There are notes in the source code for animation/keyframe calculations, but they can be a bit challenging to get your noodle around if you haven't worked with them much before, so I also made a JavaScript powered one that cuts out the maths http://fofwebdesign.co.uk/template/_testing/quotes-js.htm - same functionality/compatibility as the CSS-only version (modern browsers and IE9+).

[mlegg]

Hi Beverly, is there a way to make the box appear to be more of a speech bubble in this one by fiddling with the css?
http://fofwebdesign.co.uk/template/_testing/quotes-js.htm

[Beverleyh]

You mean like making the whole grey box into a speech bubble (with a little triangle sticking off the side / underneath)?
.quotes li:after { /* quote triangle */
position:absolute; content:""; display:block; width:0; height:0;
border-left:0.75em solid transparent;
border-right:0.75em solid transparent;
border-top:0.75em solid #ddd;
bottom:-0.75em;
left:2em
}

[mlegg]

That worked awesome! What line in the css do I change to make the quote box wider?

5646

This is the home page (http://www.pscompetitiveedge.com/index.html) that it's on.

css code for that part

.quotes { position:relative; max-width:25em; list-style-type:none; text-align:center; margin:0 auto; padding:0 }
.quotes li { position:absolute; left:0; right:0; background:#ddd; text-align:center; padding:1em; border-radius:0.25em; opacity:0 }
.quotes span { display:block; text-align:right; margin-right:5%; font-size:80%; font-style:italic; color:#999 }
.quotes li:after { /* quote triangle */
position:absolute; content:""; display:block; width:0; height:0;
border-left:0.75em solid transparent;
border-right:0.75em solid transparent;
border-top:0.75em solid #ddd;
bottom:-0.75em;
left:2em
}
.quotes .show { position:relative; -webkit-animation:quote 5s infinite; animation:quote 5s infinite } /* animation lasts 5 secs */
@-webkit-keyframes quote {
0% { opacity:0 }
25% { opacity:1 }
75% { opacity:1 }
100% { opacity:0 }
}
@keyframes quote {
0% { opacity:0 }
25% { opacity:1 }
75% { opacity:1 }
100% { opacity:0 }
}

[Beverleyh]

.quotes { position:relative; max-width:25em; list-style-type:none; text-align:center; margin:0 auto; padding:0 }

Hee, hee. It looks good. Can I make one suggestion? Maybe add a bit of a top margin to the quote span to create a bit more separation between the quote and the name?
.quotes span { ... margin-top:1em; ... }I'm on iPhone and it currently looks quite close but it's probably not so obvious in a wider viewport.

[mlegg]

.quotes { position:relative; max-width:25em; list-style-type:none; text-align:center; margin:0 auto; padding:0 }

That is what is in the css now.
The guy wants me to make the home page all black with whit text. This is how is was designed over 10 years ago. I tried to tell him that a white container with dark text is easier for most everyone to read.
I sent this link to him. http://blog.tatham.oddie.com.au/2008/10/13/why-light-text-on-dark-background-is-a-bad-idea/
What are your thoughts on this?

[Beverleyh]

That is what is in the css now.Yes, I was just highlighting it for you so that you could change it to whatever max-width you need.

Text colour: I would stress the preference/comfort for dark text on a light background to him too. I have made sites in the reverse colour-scheme myself, many years ago, and later came to regret it, especially on longer bodies of text where eyes go fuzzy after the first few paragraphs. I now just reserve white text on black base for statement elements - maybe an overlay on a header slide - and make sure the text is big and bold enough to create good contrast. For any considerable copy length, it's generally easier to read dark on light.

On a side note - I worked with a guy who had quite a severe level of visual impairment, and he found it easier to read VERY VERY large white text on black backgrounds, so there are exceptions. I wouldn't recommend it unless there was a very good reason, and then maybe as a stylesheet switcher option for users with those specific requirements (if they haven't already edited their browser settings/preferences, etc.)