http___mi3dot.org_tutorials_comments_65__1.xml
1.1 1.2 2.1 2.2 3.1 3.2 3.3 4.1 4.2 4.3 4.4 5.1 5.2 6.1 6.2 6.3 6.4 6.5 6.6 7.1 7.2 7.3 7.4 8.1 9.1 10.1
In-a-nutshell, CSS image-sprites are a way of showing many different images to a viewer of your Webpage—via a single actual image as a resource. While the idea of using CSS to create these sprites is somewhat new, the image-sprite concept has been around for quite awhile. The image-sprite was originally invented as a method of quickly compositing several images together in two-dimensional video games using special hardware. However, as computer performance improved, this optimization became unnecessary, and the term evolved to refer specifically to the two dimensional images themselves that were integrated into a scene.[1] CSS image-sprites borrow from the original concept. However, the main reason for using them is to reduce the number of HTTP requests for images referenced by a Webpage. Here's one process for creating an image-sprite in a nutshell: The many CSS image-sprite examples I've found on the Internet do not appear to be very user-friendly with respect to Web Accessibilty guidelines. Sure, they all seemed to please search engines by adding text within the requisite links. However, several of the examples set the display-property of the link-text containers to display: none. This might cause issues for those who choose to reconfigure browser image and/or color settings to make Webpages easier for them to read. The following CSS image-sprite example allows for the link-text to stay visible, no matter what settings the user might have changed with repect to showing inline and/or background images. Even when images and/or colors are turned-off, these hyperlinks will still appear, and their functionality remain intact. First, examine a use the above 5-button toolbar. Then, if you are using Internet Explorer *, open Tools/Internet Options and click on the 'Accessibility' button. Then check the 'Ignor Colors' checkbox. Click OK. Doing this will in effect, turn-off images on your Webpages. Notice that even after you do this, the above image-sprite example is still quite functional. If you happen to be using Firefox *, open Tools/Options and click on the 'Content' tab, and click again on the 'Colors' button. Then uncheck the 'Allow pages to choose their own colors' checkbox. Click OK. Doing this will, similarly, turn-off images on your Webpages. Here are the key pieces of code that I used in order to build the above example via a single background-image. Home         Resumé         Design         Development         Contact div.toolbar-buttons { position: relative; height: 80px; width: 500px; background-image: url(../images/buttons.jpg); background-repeat: no-repeat; border: 1px solid #333; border-left: 0; clear: both } div.toolbar-buttons div { float: left; position: relative; text-align: center; font: bold .92em verdana; clear: none } div.toolbar-buttons a span { position: relative; display: block; width: 100%; margin-top: 57px; padding-top: 3px; border-top: 1px solid #333; } div.toolbar-buttons a:link, div.toolbar-buttons a:visited, div.toolbar-buttons a:hover, div.toolbar-buttons a:active, div.toolbar-buttons a:focus { display: block; height: 80px; width: 99px; overflow: hidden; cursor: pointer; border-left: 1px solid #333; color: #000; text-decoration: none } div.toolbar-buttons a:hover { color: #1133aa; background-image: url(../images/buttons.jpg); background-repeat: no-repeat; } div#homepage a:hover { background-position: -1px -80px; } div#resume a:hover { background-position: -101px -80px; } div#design a:hover { background-position: -201px -80px; } div#development a:hover { background-position: -301px -80px; } div#contact a:hover { background-position: -401px -80px; }
1.1 2.1 3.1 4.1 5.1 6.1 6.2 7.1 8.1 9.1 10.1 10.2 10.3 11.1 12.1 13.1 14.1 15.1 15.2 16.1 17.1 18.1 19.1 20.1 21.1 22.1 23.1 24.1 25.1 27.1 28.1 29.1 30.1 31.1 32.1 33.1 34.1 34.2 35.1 36.1 37.1 38.1 39.1 40.1 41.1 42.1 43.1 45.1 46.1 47.1 48.1 49.1 50.1 51.1 52.1 53.1 54.1 55.1 56.1 56.2 56.3 56.4 57.1
CSS image hover efekt Prije hovera — IR (image replacement) U tutorialu Poboljšanje sitea uz pomoć CSS-a (autor retro_one) uredno je opisana dobro strukturirana navigacija i pokazano je kako je urediti u CSS-u. No ponekad obični fontovi i ograničenje samo na boje pozadina i 'bordera' elemenata ozbiljnom dizajneru nisu dovoljne za ostvarenje zamišljenog izgleda. Metode za IR (image replacement) u CSS-u već su dugo s nama, neke bolje a neke lošije, primarno zbog potrebe da ljudi na web stranici vide fontove koje je dizajner i namijenio. Idealni IR bi bio takav da zamijeni tekst iz nekog HTML elementa sa slikom — CSS background-image — bez korištenja dodanih tagova (u većini slučajeva nested span elementa), a da očuva tekst tako da ih screen readeri čitaju. Jedan takav blizu idealnog je Accessible Image Replacement (Mike Rundle). Njegovu metodu koristim u ovom tutorialu. Dva background-image property-a Sada, kad smo napravili IR, hover pseudoselektorom možemo mijenjati taj element (obično link) kada se preko njega prijeđe mišem. Na primjer, slika se može promijeniti (kako je to ranije bilo veoma popularno JavaScriptom) tako da napišemo background-image: url(button.gif) za element, a isto to sa drugom slikom (button_hover.gif) za element:hover. #mylink1 { text-indent:-100em; /* image replacement Mike Rundle style */ text-decoration:none; /* potrebno da se skine underline */ display:block; width:207px; height:105px; background: white url(button.gif) no-repeat; #mylink1:hover { background-image: url(button_hover.gif); } link test 1 Problem ove metode još jedan server request, odnosno to što browser zatraži tu 'hover' sliku tek kad se prijeđe mišem preko nje. Ako je slika veća, a veza na internet sporija, osjeti se jedan mali delay prije nego što se 'hover' slika pojavi i ta mala sitnica može biti veoma ružna. Rješenje — background-position Da izbjegnemo naknadni dohvat 'hover' slike možemo koristiti nekakav JS preload, ali postoji elegantno rješenje bez skriptiranja i (najvažnije) bilo kakvih hackova. Već smo napravili IR i time znamo veličinu elementa (linka) — kako znamo veličinu, 'zalijepimo' slike button.gif i button_hover.gif u jednu (prva na lijevoj strani, druga na desnoj) i hover efekt radimo tako da shiftamo taj background lijevo-desno sa background-position propertyem. button_both.gif: #mylink2 { text-indent:-100em; text-decoration:none; /* potrebno da se skine underline */ display:block; width:207px; height:105px; background: white url(button_both.gif) no-repeat; #mylink2:hover { background-position: right; } /* oh yeah */ link test 2 Čija je to dovitljivost ne znam, naučio sam je proučavajući feature list sa Stylegala (tri kućice skroz desno, sredina). Pros: - no delay; - no hacks; - single button — single image; - jednostavan CSS znači podržanost; - ovisno o dizajnu može se postići relativna fleksibilnost veličine elementa. Cons: - Designer mora uložiti dodatan trud da 'slijepi' slike skupa. Ako imate neka nova saznanja o tehnikama opisanim ovdje bit će mi drago da ih čujem. Oho, Red me već prosvijetlio (thnx). Poslao mi je link na ovaj CSS rollover generator na kojem koriste opisanu tehniku i zovu je sliding doors rollover (neš' ti čuda). Barem više nije anonimna :). —Mislav