Metro-style testimonials slider
This is quite lovely! I forked and changed the quotes a bit, took the span tags out and made the triangle a psuedo element of blockquote. Nice work :) if you want to see here it is http://codepen.io/jwebcat/pen/fkysE Tell me what you think.
The triangle in my demo is already a pseudo-element of the blockquote Jupiter :) and btw your right quotes (the one at he bottom) aren't placed correctly, I mean they're "cut off" :) and I see you tried adding some jQuery, jQuery will make both the HTML and CSS MUCH less, so the code should change a bit if u're gonna do that :)
and thank u Jupiter :)
Btw I will make a Jquery + responsive version as soon as I can :)
Hola, amo programar, y tu código es un idilio, saludos desde Venezuela. :D. Feliz vida
Hola! Carlos, thank u! I THINK I understood what u said, thank u and greetings from Lebanon! :)
splendid work Sara
Thank u moklick ! :)
Your work is brilliant ;) I loved your cat by the way. I know your triangle is already a pseudo :) I was talking about the 6 span tags that you were using for the quotes. I made them a pseudo element of blockquote. I really like this. What do you think of the rounded quotes as content "/2601"? I know the quotes are cutoff, I fixed them . It was perfect in Chrome.
i also changed the checkbox hide to clip: rect(0 0 0 0); instead of display none.
Thanks again Jupiter :) I like the rounded quotes, but I kept mine the way they are coz I think they are more "metro" in a way, I don't know it's probably just a matter of taste, the original design contains rounded quotes as I recall, but I thought I'd use these instead.
As for the radio buttons, I think that visibility:none would be best for accessibility? but then again this demo could be changed in many ways to become cross-browser and optimized in many ways, right?
I still plan on making a cross-browser version with jquery, with much less code as I said before, but I can't find the time to do it now, maybe in a couple of days or so :)
honestly I think I like the metro style too :) your work is quite lovely.
about accessibility.. it is questionable. I asked Tim Pietrusky, and he said he thinks the clip:rect(0 0 0 0) technique is better than -9999px. so... visibility:hidden I'm not sure if a screen reader will still see it.
I would like to know myself which is best.
Thank u very much Jupiter :)
I've personally never used the clip: rect(0 0 0 0); method, and I've read somewhere a while ago that -9999px is bad for the browser, I don't really remember exactly how, but I also remember that visibility:hidden is ok for screen readers, meaning that they can read it, as opposed to display:none which they can't.. will have to do some research myself too!
Oh this is interesting, A list apart has a table which compares each hiding method and tells how they affect screen readers: http://www.alistapart.com/articles/now-you-see-me/ , apparently visibility:hidden makes screen readers ignore the content :// weird, am pretty sure I read otherwise a while ago :/
Ha i just read another similar article on stack overflow here is one answer http://stackoverflow.com/a/6105651/1672933 from alistapart too it seems 3/5 read it not bad.
this is a method i got off codrops to hide and still get screen reader access.
width: 1px; /* Setting this to 0 make it invisible for VoiceOver /
height: 1px; / Setting this to 0 make it invisible for VoiceOver */
clip: rect(0 0 0 0);
you all taught me so much. thank you. I hope I can give back eventually.
Ha! I was just gonna paste this: http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ , chris coyier talks about the various methods, references the "A list apart" article I mentioned, AND it turns out that the snippet you found on Stackoverflow which is used by Codrops, is actually a snipppet from the HTML5 Boilerplate! awesome ha? :D This is what I love about the open web community :) we all keep learning new things every day :) thank u for brining the topic up! :)
yeaaaah! :D yes of course. So I guess the snippet from boilerplate is the best for screen readers? I look forward to seeing the cross browser version/ jquery version :D.
Thank u! and yes I believe nothing beats the HTML5 Boilerplate snippet.. for now :D
Hola, a mi me gustaria utilizar este codigo en mi pagina web. ¿Esto se podría hacer?
Hi Sara, Thanks for using my design and giving life to it :)
@nepdud Hi Subash, thank you for a simple and cool design! :) Also, is there a link to your website/design that I could add for credit? I remember seeing the design on some freebies website, but would rather credit you directly. :)
I am impressed,its very nice,thank you :)
Loved this, I tweaked a little for responsive, though I removed the images - please take a look and let me know what you think. http://codepen.io/anon/pen/EawoNq
Hi Sara, I love this testimonial slider it is great.
I read in the comments you were planning on creating a responsive version and just wondered if that is available?
Also what code is needed to make this slider automatically revolve?
I have some coding experience and can generally edit code as needed for my website but could do with a little help to get this started, it would be much appreciated.
Need to know how to enable it? Go here.