Promijenite boju na css. Jednostavna promjena tona boje

Практика

Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше - делаем все при помощи стилей CSS (файл шаблона может называться style.css, css.css, core.css или еще как-то).

Catside a:hover {background: #0078BF; color: #fff;}

Данной строкой мы указали браузеру менять цвет заднего фона при наведении мышки на синий (#0078BF) и сказали что цвет шрифта должен стать белым (#fff). Сама "штука", позволяющая понять браузеру, что это нужно делать по наведению мышки - псевдокласс hover (о нем можно почитать

Здравствуйте уважаемые читатели блога webcodius! Часто получаю вопросы: как сделать так, чтобы картинка на web-страничке менялась при наведении на нее курсора мыши. Такой эффект встречается на многих сайтах и самый простой пример, это когда вы наводите курсор на какую-нибудь кнопку, а она после этого меняет цвет. Иногда для создания подобного эффекта применяется JavaScript, но обычно достаточно одного CSS, особенно после появления CSS третьей версии. Далее в статье я расскажу как менять картинку при наведении курсора мыши с помощью только одного CSS, рассмотрю несколько способов и различные эффекты.

Эффекты изменения элемента веб страницы при наведении курсора мыши часто называют hover-эффектами . Связано это с тем, что при реализации таких эффектов используется , который определяет стиль элемента при наведении на него курсора мыши.

Для начала рассмотрим вариант попроще. Допустим у Вас на страничке вставлена картинка, как приведено ниже:

И допустим вам необходимо менять ее отображение при наведении на нее курсора мыши. При вставке этого изображения к тегу img добвим атрибут class="animate1" , тогда html-код картинки будет выглядеть примерно так:

Для начала можно просто при наведении курсора сделать картинку прозрачной. За прозрачность в CSS отвечает свойство opacity , которое относится к CSS3. В качестве значения используются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта. Для старых версий Internet Explorer придется использовать свойство filter со значением alpha(Opacity=X) , так как они не поддерживают свойство opacity . Вместо X надо будет подставить число от 0 до 100, где 0 означает полная прозрачность, а 100 — полная непрозрачность.

Тогда, чтобы сделать картинку прозрачной при наведении курсора в файл стилей, или между тегами и html-файла нужно добавить следующий css-код:

U slučaju da niste upoznati sa CSS-om, dozvolite mi da objasnim da unos img.animate1: hover govori pretraživaču da za sve elemente imaju atribut klase jednak animate1 kada pređete preko njih kursorom miša, primenite specificirani stilovi... Stilovi su specificirani između kovrčave zagrade( i ). Ako je sve urađeno kako treba, trebalo bi izgledati otprilike ovako:

Možete napraviti sliku originalno stanje proziran i učini ga neprozirnim pri lebdenju. Zatim dodajte sljedeće linije u CSS datoteku:

img.animate1 (
filter: alfa (Neprozirnost = 25);
neprozirnost: 0,25;
}
img.animate1: lebdjeti (

neprozirnost: 1;
}

Rezultat će biti ovakav:

Za veći efekat, možete usporiti promjene u transparentnosti slike. Da biste to učinili, možete koristiti svojstvo prijelaza CSS-a, koje postavlja efekat prijelaza između dva stanja elementa. Dodajmo, na primjer, jednu sekundu usporavanja. Tada će naš CSS kod postati ovakav:

img.animate1 (
filter: alfa (Neprozirnost = 25);
neprozirnost: 0,25;
-moz-transition: sve 1s jednostavnost-in-out; / * efekat prijelaza za Firefox do verzije 16.0 * /
-webkit-transition: sve 1s jednostavnost ulaska; / * efekat prijelaza za Chrome 26.0, Safari, Android i iOS * /
-o-transition: sve 1s jednostavnost-in-out; / * efekat prijelaza za Opera do verzije 12.10 * /
tranzicija: sve 1s lakoća ulaska; / * efekat tranzicije za druge pretraživače * /
}
img.animate1: lebdjeti (
filter: alfa (Neprozirnost = 100);
neprozirnost: 1;
}

rezultat:

Via transformirati svojstva slika se može skalirati, rotirati, pomicati, naginjati. Hajde da probamo da uvećamo sliku. Tada će css kod biti ovakav:

img.animate1 (


- o-prijelaz: sve 1s lakoća;
tranzicija: sve 1s lakoća;
}
img.animate1: lebdjeti (
- moz-transform: skala (1,5); / * efekat transformacije za Firefox do verzije 16.0 * /
- webkit-transform: skala (1,5); / * efekat transformacije za Chrome do verzije 26.0, Safari, Android i iOS * /
- o-transform: skala (1,5); / * efekat transformacije za Opera do verzije 12.10 * /
- ms-transform: skala (1,5); / * efekat transformacije za IE 9.0 * /
transformacija: skala (1,5); / * efekat transformacije za druge pretraživače * /
}

A rezultat će biti ovakav:

Možete dodati rotaciju uvećanju slike. Onda css stilovi promijeni malo:

img.animate1 (
- moz-prijelaz: sve 1s lakoća;
- webkit-transition: sve 1s lakoća;
- o-prijelaz: sve 1s lakoća;
tranzicija: sve 1s lakoća;
}
img.animate1: lebdjeti (
- moz-transform: rotirati (360 stepeni) skalu (1,5);
- webkit-transform: rotirati (360 stepeni) skalu (1.5);
- o-transformacija: rotirati (360 stepeni) skalu (1,5);
- ms-transform: rotirati (360 stepeni) skalu (1,5);
transformacija: rotirati (360 stepeni) skalu (1,5);
}

rezultat:

Gore smo razmotrili slučajeve kada je jedna slika uključena u animaciju. Razmotrite sljedeće načini za zamjenu jedne slike drugom... U ovom slučaju se obično pripremaju dvije slike iste veličine: jedna za originalni pogled, drugi da ga zamijeni.

Recimo da imamo dvije slike, jedna je crno-bijela, a druga u boji:

Neka bude tako da kada lebdite iznad crno-bijela slika prikazano u boji. Da bismo to učinili, napravit ćemo originalnu sliku pozadinom elementa div koristeći svojstvo background. A kada kursorom zadržite pokazivač miša iznad slike, promijenit ćemo se pozadinska slika koristeći istu pseudo-klasu i svojstvo pozadine. Da biste ostvarili ovaj efekat na html stranica dodati div element sa klasom rotate1:

I dodajte sljedeće opise stilova:

div.rotate1 (
pozadina: url (img / 2.jpg); / * Put do datoteke sa originalnim crtežom * /
širina: 480px; / * Širina slike * /
visina: 360px; / * Visina slike * /
}
div.rotate1: lebdjeti (
pozadina: url (img / 1.jpg); / * Put do datoteke sa zamijenjenom slikom * /
}

A rezultat je:

Ova metoda ima jednu značajan nedostatak... Budući da se druga slika učitava samo kada se kursor pređe iznad, ako korisnik ima sporu internet vezu, a veličina datoteke sa slikom je velika veličina, slika će biti prikazana sa malom pauzom. Stoga ćemo u nastavku razmotriti još nekoliko načina za zamjenu slika pri lebdenju.

Sljedeća metoda će se zasnivati ​​na kombiniranju dvije slike u jednu datoteku. Pretpostavimo da treba da postavimo dugme na stranicu, koje bi, kada kursor miša lebdi preko nje, promenilo pogled. Da biste to učinili, kombinirajte dvije slike u jednu datoteku i rezultirajuća slika će izgledati otprilike ovako:

U ovom slučaju, promjena iz jednog uzorka u drugi će se izvršiti pomicanjem pozadinska slika vertikalno koristeći svojstvo background-position. Pošto kada kliknete na dugme, obično dolazi do prelaska na drugu stranicu, tada ćemo sliku umetnuti u element< a>... Zatim umetnite sljedeći kod u html stranicu:

I u css fajlu ovako:

a.rotate2 (
pozadina: url (img / button.png); / * Put do datoteke sa originalnim crtežom * /
displej: blok; / * Link kao blok element */
širina: 50px; / * Širina slike u pikselima * /
visina: 30px; / * Visina slike * /
}
a.rotate2: lebdjeti (
background-position: 0 -30px; / * Pomak pozadine * /
}

rezultat:

I posljednji način za danas je kada se jedna slika stavi ispod druge koristeći poziciju: apsolutno css pravilo. U ovom slučaju postavljamo dvije slike u div kontejner:

I dodajte css stilove:

Animiraj2 (
položaj: relativan;
margina: 0 auto; / * postavljeno div blok centar stranice * /
širina: 480px; /* širina */
visina: 360px; /* Visina */
}
.animate2 img (
pozicija: apsolutna; / * apsolutno pozicioniranje*/
lijevo: 0; / * poravnajte slike lijevo gornji ugao div * /
vrh: 0; / * poravnajte slike u gornjem lijevom kutu ugao div */
}

Nakon dodavanja css pravila, slike će biti postavljene jedna ispod druge. Sada kontrolišete transparentnost slika sa svojstva neprozirnosti u normalnom stanju, prikazaćemo drugu sliku, a kada kursor lebdi iznad prve. Da bismo to uradili, u normalnom stanju, sliku sa prvom klasom činimo potpuno transparentnom, a kada kursor lebdi, obrnuto: slika sa drugom klasom će biti potpuno prozirna, a sa prvom klasom neće biti transparentna:

Animate2 img.first (/ * prva slika je potpuno transparentna * /
neprozirnost: 0;
filter: alfa (prozirnost = 0);
}
.animate2: lebdite img.first (/ * pri lebdenju, prva slika postaje neprozirna * /
neprozirnost: 1;
filter: alfa (prozirnost = 100);
}
/ * a drugi postaje transparentan pri lebdenju * /
neprozirnost: 0;
filter: alfa (prozirnost = 0);
}

rezultat:

Možete postići glatki prijelaz dodavanjem svojstva CSS prijelaza posljednjem pravilu:

Animate2: lebdi img.second, .animate2 img.second: lebdi (
neprozirnost: 0;
filter: alfa (prozirnost = 0);
-moz-transition: sve 2s lakoća;
-webkit-transition: sve 2s lakoća;
-o-prijelaz: sve 2s lakoća;
tranzicija: sve 2s lakoća;
}

A rezultat je:

A ako dodamo svojstvo transformacije:

Animate2: lebdi img.second, .animate2 img.second: lebdi (
neprozirnost: 0;
filter: alfa (prozirnost = 0);
-moz-transform: skala (0, 1);
-webkit-transform: skala (0, 1);
-o-transform: skala (0, 1);
-ms-transform: skala (0, 1);
transformacija: skala (0, 1); / * smanji širinu slike na 0 * /
}

Ispada ovako:

Kombinovanjem razni CSS svojstva mogu se postići u različitim efekti lebdenja kada menjate slike tokom lebdenja mišem... Ove i druge primjere postavio sam na ovu stranicu, gdje također možete preuzeti izvore. To je sve, dok se ponovo ne sretnemo.

Korištenje i upravljanje stilovima sa koristeći JavaScript omogućava vam da promenite izgled ćelije "u hodu", kada su ispunjeni određeni uslovi, kao što je prelazak miša preko veze ili same ćelije.

Razmotrimo najjednostavniju tehniku ​​- boja pozadine ćelije se mijenja kada kursor miša lebdi iznad nje.

Prelazak miša preko područja se prati događajem onMouseOver, a izlazak miša iz područja prati događaj onMouseOut. Budući da se boja pozadine mijenja za istu ćeliju preko koje lebdimo, promjena stila se vrši korištenjem metode this.style.background.

Primjer koristi promjenu siva Ova metoda ne radi u Netscape 4.x pretraživaču.

Također možete napraviti prijelaz na drugi dokument kada kliknete ne na samu vezu, već na ćeliju tabele. Tada će se cijela ćelija pretvoriti u jednu vezu, a ne samo tekst u njoj. Treba napomenuti da ovaj pristup nije najbolji, zbog svoje neočiglednosti, posjetitelji web stranice su navikli da kada pređu preko linka, kursor miša se pretvara u ruku. Koristeći CSS, možete poništiti izgled kursora miša, ali ova funkcija je dostupna samo za pretraživač Internet Explorer.

Da biste promijenili boju ćelije samo kada pređete mišem preko veze unutar nje, trebali biste se pozvati na svojstva ćelije kroz njeno ime. Da bi program znao koja svojstva ćelije treba promijeniti, koristi se ID parametra koji jedinstveno identifikuje predmet.

Radi praktičnosti, promjena boje ćelije je dizajnirana kao zasebne funkcije. Zahvaljujući Internet pretraživači Koriste Explorer, Netscape i Opera različiti pristupi za dinamičku promjenu stila elementa, u funkcijama prikazanim u primjeru 3, boja pozadine se mijenja na dva načina. Svaki pretraživač će izabrati odgovarajuću liniju za sebe, a ostatak će biti zanemaren.