Comments on: CSS смяна на картинки http://designtohtml.net/2010/03/css-%d1%81%d0%bc%d1%8f%d0%bd%d0%b0-%d0%bd%d0%b0-%d0%ba%d0%b0%d1%80%d1%82%d0%b8%d0%bd%d0%ba%d0%b8/ CSS блог за xhtml кодиране на дизайн Wed, 04 May 2011 11:02:53 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Kristabelle http://designtohtml.net/2010/03/css-%d1%81%d0%bc%d1%8f%d0%bd%d0%b0-%d0%bd%d0%b0-%d0%ba%d0%b0%d1%80%d1%82%d0%b8%d0%bd%d0%ba%d0%b8/comment-page-1/#comment-811 Kristabelle Wed, 04 May 2011 11:02:53 +0000 http://designtohtml.net/?p=309#comment-811 At last! Someone who understands! Thanks for psotnig! At last! Someone who understands! Thanks for psotnig!

]]> By: admin http://designtohtml.net/2010/03/css-%d1%81%d0%bc%d1%8f%d0%bd%d0%b0-%d0%bd%d0%b0-%d0%ba%d0%b0%d1%80%d1%82%d0%b8%d0%bd%d0%ba%d0%b8/comment-page-1/#comment-566 admin Thu, 17 Feb 2011 13:34:53 +0000 http://designtohtml.net/?p=309#comment-566 Може :) с js. Само че тук не е това основното Може :) с js. Само че тук не е това основното

]]> By: Teco http://designtohtml.net/2010/03/css-%d1%81%d0%bc%d1%8f%d0%bd%d0%b0-%d0%bd%d0%b0-%d0%ba%d0%b0%d1%80%d1%82%d0%b8%d0%bd%d0%ba%d0%b8/comment-page-1/#comment-565 Teco Thu, 17 Feb 2011 13:16:40 +0000 http://designtohtml.net/?p=309#comment-565 Може ли картинките да се въртят автоматично? Може ли картинките да се въртят автоматично?

]]> By: admin http://designtohtml.net/2010/03/css-%d1%81%d0%bc%d1%8f%d0%bd%d0%b0-%d0%bd%d0%b0-%d0%ba%d0%b0%d1%80%d1%82%d0%b8%d0%bd%d0%ba%d0%b8/comment-page-1/#comment-533 admin Tue, 06 Jul 2010 18:50:01 +0000 http://designtohtml.net/?p=309#comment-533 Като гледам ти си написал/а почти същото, което е написал Chris Coyier в статията, коята посочих в началото на поста. Всъщност идеята ми е да може да се ползва без да указвам id за всяка картинка, и по-важното - картинката да не е сложена като фон на някой от елементите, защото както вече казах, ако имаш динамичен сайт, не е удачно понеже картинките ще идват от CMS-a. :) Като гледам ти си написал/а почти същото, което е написал Chris Coyier в статията, коята посочих в началото на поста. Всъщност идеята ми е да може да се ползва без да указвам id за всяка картинка, и по-важното – картинката да не е сложена като фон на някой от елементите, защото както вече казах, ако имаш динамичен сайт, не е удачно понеже картинките ще идват от CMS-a. :)

]]> By: tuizzl http://designtohtml.net/2010/03/css-%d1%81%d0%bc%d1%8f%d0%bd%d0%b0-%d0%bd%d0%b0-%d0%ba%d0%b0%d1%80%d1%82%d0%b8%d0%bd%d0%ba%d0%b8/comment-page-1/#comment-532 tuizzl Tue, 06 Jul 2010 07:53:03 +0000 http://designtohtml.net/?p=309#comment-532 HTML: div id="wrapper"> a id="one" href="#">Image one</a> a id="two" href="#">Image two</a> a id="three" href="#">Image three</a> a id="four" href="#">Image four</a> HTML:
div id=”wrapper”>

a id=”one” href=”#”>Image one
a id=”two” href=”#”>Image two
a id=”three” href=”#”>Image three
a id=”four” href=”#”>Image four

]]> By: tuizzl http://designtohtml.net/2010/03/css-%d1%81%d0%bc%d1%8f%d0%bd%d0%b0-%d0%bd%d0%b0-%d0%ba%d0%b0%d1%80%d1%82%d0%b8%d0%bd%d0%ba%d0%b8/comment-page-1/#comment-531 tuizzl Tue, 06 Jul 2010 07:50:12 +0000 http://designtohtml.net/?p=309#comment-531 Аз попаднах на ето този начин малко по-различен е, но ефекта е същия. ХТМЛ: <a href="#" rel="nofollow">Image one</a> <a href="#" rel="nofollow">Image two</a> <a href="#" rel="nofollow">Image three</a> <a href="#" rel="nofollow">Image four</a> CSS: a { text-decoration: none; } #wrapper { width: 400px; margin: 50px auto; position: relative; } #wrapper a { width: 400px; height: 226px; display: block; position: absolute; top: 0; left: 0; } #one { background: url(img/1.jpg) no-repeat; z-index: 1; } #two { background: url(img/2.jpg) no-repeat; } #three { background: url(img/3.jpg) no-repeat; } #four { background: url(img/4.jpg) no-repeat; } #wrapper a span { position: absolute; border: 1px solid gray; } #one span { left: 0; bottom: -35px; } #two span { left: 0; bottom: -75px; } #three span { left: 150px; bottom: -35px; } #four span { left: 150px; bottom: -75px; } #wrapper a:hover { z-index: 2; } + reset Ha CSS-a Аз попаднах на ето този начин малко по-различен е, но ефекта е същия.
ХТМЛ:

Image one
Image two
Image three
Image four

CSS:

a { text-decoration: none; }

#wrapper { width: 400px; margin: 50px auto; position: relative; }

#wrapper a { width: 400px; height: 226px; display: block; position: absolute; top: 0; left: 0; }

#one { background: url(img/1.jpg) no-repeat; z-index: 1; }
#two { background: url(img/2.jpg) no-repeat; }
#three { background: url(img/3.jpg) no-repeat; }
#four { background: url(img/4.jpg) no-repeat; }

#wrapper a span { position: absolute; border: 1px solid gray; }

#one span { left: 0; bottom: -35px; }
#two span { left: 0; bottom: -75px; }
#three span { left: 150px; bottom: -35px; }
#four span { left: 150px; bottom: -75px; }

#wrapper a:hover { z-index: 2; }

+ reset Ha CSS-a

]]>