Қалай қалай? kazakh.ru-дағыдай (Javascript-сіз)

Жаңа, мана, өткенде kazakh.ru сайтынан мына бір скриптті көзім шалып қалды.

Былай шедевр болмаса да әйтеуір қызық көрінді, әрине бұрындары да басқа сайттардан көріп жүретінмін, ол кездері бұл скрипт ФЛЭШте жасалынған болатын, мынау джейкуеримен жасалыпты, былай бір қарап, осыны CSS3те неге жасамасқа деп жаңа кірісіп кеттім, жып жинақы, ап азғантай код шыға келді. Қосымша скриптсіз.

Сонымен теория жазылмайды, алдыңғы жазбаларда жазылғандай transition арқылы жасалынады бәрі. Бүгін тек мысал ретінде көрсететін боламын.

Алдымен екі сурет керек, бірі жарнамалық баннер, фон ретінде, және екіншісі оның үстіндегі кілемше :)
Фотошопта жасап аламыз, мөлдір фонмен, .png кеңейтілімінде сақтаймыз.

Суреттер міне


Веб құжаттың кез келген жеріне мына (body-дің ішінде, сразу body-дан кейін жазылғаны абзал) кішігірім html кодтты жазамыз

<div class="zharnamama"><a href="#"><img src="img.png" /></a></div>

Енді css стильдері

.zharnamama {
position: absolute;
right:0px;
top: 0px;
z-index: 245;
height: 40px;
width: 40px;
background-image: url(szh.png);
background-repeat: no-repeat;
background-position: top right;
cursor: pointer;
	transition: width 1s ease 0ms, height 1s ease 0ms;
        -webkit-transition: width 1s ease 0ms, height 1s ease 0ms;
        -moz-transition: width 1s ease 0ms, height 1s ease 0ms;
        -o-transition: width 1s ease 0ms, height 1s ease 0ms;
}
.zharnamama img {
height: 40px;
width: 40px;
cursor: pointer;
	transition: width 1s ease 0ms, height 1s ease 0ms;
        -webkit-transition: width 1s ease 0ms, height 1s ease 0ms;
        -moz-transition: width 1s ease 0ms, height 1s ease 0ms;
        -o-transition: width 1s ease 0ms, height 1s ease 0ms;
}
.zharnamama img:hover, .zharnamama:hover, .zharnamama:hover img  {
height: 250px;
width: 250px;
}

Болды ғҒ.

Мысалды мына жерден көре аласыңдар

p/s: Ерініп қалмасам www.award.kz/ сайтындағыдай «фишкаларды» CSS3 те жасап көрсететін боламын