replace - How to use the new image replacement technique by Scott Kellum -
i practicing using various image replacement methods , came across couple articles discussing new, supposedly more efficient method scott kellum.
original website article regarding new method
it seems , practice using it, not sure html , css should be. in example below, have h1, example logo text inside. added class of .hide-text h1 , styled css. used photoshop logo image made , set background image....the image has width of 203px , height of 57px.
question 1: when tested code in browser, seems working fine, usage of mr.kellum's image replacement technique correct?
question 2: should target h1 in css , declare width , height or okay include width , height directly in hide-text class in example below?
<style> .hide-text { background: url(images/mylogo.jpg) 0 0 no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden; width: 203; height: 57px; }
<body> <h1 class="hide-text">mylogo text</h1> </body> any appreciated. thank community!
i have found the css image replacement museum while searching actual trends on image replacement. met scott kellum method's there. after found question - i'm not expert using technique - , want share opinion about.
implementation copy-pasted link above
simple, posted on question.
<h3 class="skm">css-tricks</h3> css
h3.skm { width: 300px; height: 75px; background: url(test.png); text-indent: 100%; white-space: nowrap; overflow: hidden; } implementation it
i've read original article , think it's better split css code reusability. maybe we'll replace images more single element.
<h1 class="ir">an awesome pretty title</h1> <h2>some words here not replaced images<h2> <nav> <!-- links replaced images use css sprites --> <a class="ir" href="#">home</a> <a class="ir" href="#">sweet</a> <a class="ir" href="#">home</a> </nav> reusing ir class image replacement technique, suggested on post linked on question, keeps things tidy.
.ir { text-indent: 100%; white-space: nowrap; overflow: hidden; } h1 { background-image: url('/the-title-replacement.png''); width: /*the-image-width*/px; height: /*the-image-height*/px; } nav { background-image: url('/the-menu-icons-sprite.png'); width: 24px; height: 24px; } nav { background-position: 0 0; } nav + { background-position: 0 24px; } nav + + { background-position: 0 48px; } conclusions
the image url & size must set each replaced element. if using sprites background position comes in play each element, though element size shared between elements.
all of use cases can benefit splitting css code, keeping stylesheet tidier.
note: i've made these thoughts pure css implementation. using css preprocessor - such less example - changes rules.
note 2: trending method proposed h5bp team. undecided use.
Comments
Post a Comment