Printable View
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/s.../testimonials/
How can I do something like this? or a better version?
thanks
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=fa...+css3&start=10
http://www.jqueryscript.net/rotator/...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
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/_...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/_.../quotes-js.htm - same functionality/compatibility as the CSS-only version (modern browsers and IE9+).
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/_.../quotes-js.htm
You mean like making the whole grey box into a speech bubble (with a little triangle sticking off the side / underneath)?Code:.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
}
That worked awesome! What line in the css do I change to make the quote box wider?
Attachment 5646
This is the home page that it's on.
css code for that part
Code:.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 }
}
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?Code:.quotes { position:relative; max-width:25em; list-style-type:none; text-align:center; margin:0 auto; padding:0 }
I'm on iPhone and it currently looks quite close but it's probably not so obvious in a wider viewport.Code:.quotes span { ... margin-top:1em; ... }
That is what is in the css now.Quote:
Originally Posted by Beverleyh
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...is-a-bad-idea/
What are your thoughts on this?
Yes, I was just highlighting it for you so that you could change it to whatever max-width you need.Quote:
That is what is in the css now.
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.)