user profile image

Metro-style testimonials slider


  1. 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.

  2. 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 :)

  3. Btw I will make a Jquery + responsive version as soon as I can :)

  4. Hola, amo programar, y tu código es un idilio, saludos desde Venezuela. :D. Feliz vida

  5. Hola! Carlos, thank u! I THINK I understood what u said, thank u and greetings from Lebanon! :)

  6. splendid work Sara

  7. Thank u moklick ! :)

  8. 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.

  9. i also changed the checkbox hide to clip: rect(0 0 0 0); instead of display none.

  10. 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.

  11. 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?

  12. visibility:hidden*

  13. 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 :)

  14. 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.

  15. 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!

  16. 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 :/

  17. 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. .visuallyhidden { position: absolute; width: 1px; /* Setting this to 0 make it invisible for VoiceOver / height: 1px; / Setting this to 0 make it invisible for VoiceOver */ padding: 0; margin: -1px; border: 0; clip: rect(0 0 0 0); overflow: hidden;

  18. you all taught me so much. thank you. I hope I can give back eventually.

  19. 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! :)

  20. 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.

  21. Thank u! and yes I believe nothing beats the HTML5 Boilerplate snippet.. for now :D

  22. Hola, a mi me gustaria utilizar este codigo en mi pagina web. ¿Esto se podría hacer?

  23. Hi Sara, Thanks for using my design and giving life to it :)

  24. @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. :)

  25. I am impressed,its very nice,thank you :)

  26. Hi Sara, 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

  27. 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.

    Thank you

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.