Қалай қалай? 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 те жасап көрсететін боламын

19 пікір

Abylai
ақыры үйренер, жаза берейін
yerbol89
Ооо жақсы жақсы )))) СЖ-ға Айтаберді осылай іліп қойсам боладыы екен ғой. Авард демекші Айтаберліктер мен СЖ-лықтар сайымызды қолдап барып Лайктап және Мне нравитсялап кетсеңіздер алғысым шексіз еді. www.award.kz/catalog/show/id/62
followme_alik
Wow, найс.very good т.с.с.
соңғы сілтемеңнің `фишка`сын таппай әлекпін
Jako
Менің кәлләма ауырлау екен…
Abylai
Ауыр деп ойласаңыз ауыр әрине
zhurttyn_balasy
.zharnamama {
position: absolute;
right:0px;
top: 0px;
z-index: 245;
background-image: url(szh.png) no-repeat top right;
}

.zharnamama, .zharnamama img {
height: 40px;
width: 40px;

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;
cursor: pointer;
}

Деп қысқартуға болады екен
pana
өлтірдіңіз)
User
Қараш жұрттың балдары пысық
Abylai
Тағы 196 символға (байт) қысқартылды


.zharnamama{
position:absolute;
right:0%;
top:0%;
z-index:245;
background:url(szh.png) 100% 0%;
}
.zharnamama,.zharnamama img{
height:40px;
width:40px;				
transition:1s;
-webkit-transition:1s;
-moz-transition:1s;
-o-transition:1s;
}
.zharnamama img:hover,.zharnamama:hover,.zharnamama:hover img{
height:250px;
width:250px;
}
ereke_enu
Рахмет. Жабаскрипт болашақта керек болмай қалатын шығар). Жалпы, сайттың шаблонын(мастер пейдж) жасаудан блог жазғың келмей ме? Кезеңдері, фишкалары жайында бір екі ауыз, біліп жүретін…
qyrmyzy
неткен бас, неткен ми!
pari
Ұжыс, басым айналып кетті, осыны дұрыстап үйреніп алмасам,:)
User
Керемет! ұнады продолжай в том же духе!!!
Arhun
Керемет, Әбіл! мәләдис!
khairbek
не ол сиси код деген
User
Сіздің кэллэңызға ауырлау шығар мүмкін.
khairbek
жооок былай жобалап айтып карасай,?
User
Атырауда туылып, Шымкенттің көшелеріне рахмет айтып жүрсіз ба?
Тек тіркелген қолданушылар ғана пікір қалдыра алады.