Skip to main content

Home/ CSS Evangelist/ Group items tagged text-indent

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

Replacing the -9999px hack (new image replacement) - Jeffrey Zeldman Presents The Daily... - 0 views

www.zeldman.com/...9px-hack-new-image-replacement

NED12 css webdesign hacks image image-replacement text-indent

shared by Vernon Fowler on 16 Sep 12 - No Cached
  • My friend Scott Kellum, design director at Treesaver, has now sent me this refactored code for hiding text, which I hereby christen the Kellum Method: .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } Really long strings of text will never flow into the container because they always flow away from the container. Performance is dramatically improved because a 9999px box is not drawn. Noticeably so in animations on the iPad 1.
  • Scott Kellum said on 1 March 2012 at 3:41 pm: I went ahead and created a side by side site to test the performance: http://lab.pgdn.us/hidden-text-performance/ @Ethan, This is the best 43min I have ever spent learning about optimizing the performance of my CSS: http://www.youtube.com/watch?v=xuMWhto62Eo
  • Would be interesting to understand both the SEO and accessibility impacts of this approach.
  • ...4 more annotations...
  • Scott Kellum said on 2 March 2012 at 4:06 pm: After much deliberation over here: https://github.com/h5bp/html5-boilerplate/issues/1005#issuecomment-4293007 Jonathan Neal suggested a method using font: 0/0 serif; and things seem to be settling on this — .ir { font: 0/0 serif; text-shadow: none; color: transparent; }
  • While I think this is certainly and interesting approach, I have some concerns with the accessibility. In some, if not all, cases when overflow: hidden; hides the content of the element this is applied to from screen readers. In most cases where I use image replacement, I still need the text to be accessible (e.g. call to action buttons set in Gotham). See Aaron Gustafson’s A List Apart article, http://www.alistapart.com/articles/now-you-see-me/. Has anyone tested this with a wide battery of screen readers or other accessibility devices?
  • Another note on accessibility: Besides the screen reader problems – people who don’t get images will not see the text too.
  • As a few people said already, this does not solve the accessibility problem that comes with text-indent. Worse, it may send the wrong message: “this is new and cool, use this from now!”. As a leader in the industry, I think you should warn people that even if this is “better” in term of performance, it is still a bad solution. Imo, Image Replacement techniques should be evaluated against the problems they solve/address. Fwiw, I wrote something about these challenges a few years back: http://tjkdesign.com/articles/tip.asp </shameless plug>
stylist

Top 10 CSS image gallery tutorials (YouNeed2See Technology) - 0 views

youneed2see.com/...10_CSS_image_gallery_tutorials

css

shared by stylist on 19 Feb 07 - Cached
  • There are many tutorials out there on how to create your own image gallery. There are simple ones made from pure CSS, and there are complex ones using css and javascript. By the end of this article you will have the information necessary to start building your own photo gallery. The first tutorial is from cssplay and is one of my favorites around. They have a very elegant and simple image gallery. Your images are separated into different sections (people, plants, animals, etc) and all your images for each section listed nicely underneath. As you hover over each image it expands double it's size so you can take a better look at each image before you view the full version. The interface is very clean and simple to use, I recommend taking a look at this one.
yc c

Mike Rundle: Accessible Image Replacement - 0 views

phark.typepad.com/...accessible_imag.html

css image links tips

shared by yc c on 09 Mar 09 - Cached
  • yc c on 09 Mar 09
     
    #replaceText { text-indent: -9000px; background: url(bg.gif); .... }
1 - 3 of 3
Showing 20▼ items per page