Псевдоселекторы

Действие CSS на HTML странице

Очень интересное действие оказывают псевдоселекторы таблицы стилей CSS на отображение элементов HTML страницы.
Один щелчок мыши изменяет внешний вид элемента. Да, даже простое наведение курсора, способно это сделать.

Сначала покажу, как с помощью CSS меняются размеры обычных кнопок и цвет текста на них. Потом другие интересные моменты.

Размер кнопок

Первые кнопки сделаны просто в HTML.
и это тоже кнопочка: (*кстати, имеет большое практическое значение).

А эти уже с применением CSS.

*P.S. Я не "вешал" на них никакие HTML-коды действий и скрипты, поэтому они только нажимаются. Ниже интереснее.

Превращения кнопок

Также без всякого скрипта - только HTML+CSS!
Первые две будут менять свой цвет при нажатии, а третья и вовсе "переоденется".

Попробуйте кликнуть по ним, затем где-нибудь возле.

Теперь попробуйте навести курсор на них, затем кликнуть по ним.
Будет меняться не только цвет, но и в строке браузера произойдут изменения.

Как Вы увидели, использование псевдоселекторов позволяет организовать очень интересные эффекты на HTML-странице.
К тому же, показал здесь лишь малую толику того, что можно делать с их помощью.

Кого интересует более подробно тема, как сделать кнопки для своего сайта, тому сюда: "Кнопки для сайта" (откроется в новом окне).

Ну а я покажу ещё один занимательный CSS-эффект, реализуемый с помощью псевдоселекторов. Он так и называется - фокус (focus).

Превращения картинок

Аналогично кнопкам можно работать и с картинками. До нажатия - одна картинка, после - другая (крупная!).

**Правда, последний, такой интересный эффект, позволял наблюдать только Internet Explorer 8. Его игнорируют: "Yandex", "Opera" и "Firefox", и все мобильные устройства. Но зато!!!
Они показывают скругление углов, которое мой любимый Explorer признавать не желает ... ... .

Чтобы не заканчивать страницу на такой "грустной ноте", что, кто-то чего-то не желает, посмотрите ещё одну очень интересную особенность HTML.

Превращения кнопок

В HTML-интерпретатор браузеров "вшита" способность понимать элементы JavaScript напрямую в коде HTML.
Браузеры называют их активными элементами ActiveX.

Для возвращения кнопок в исходное состояние, страницу нужно перезагрузить.

Прописал ниже 2 группы кнопок, причём, только в HTML, даже без таблиц CSS!

Вот. Полюбуйтесь. Что делать, на них написано.

Аккуратно! Для следующей группы достаточно навести курсор, чтоб кнопка изменилась. Когда она "подрастёт", кликните по ней. Затем снова наведите, и т.д..

Понравилось?
Мне - так, очень! Интересный эффект. Баловство, конечно. Пока! И у этого "баловства" есть вполне конкретные области практического применения.

Практическое применение

Наиболее частый, из возможных способов практического применения техники псевдоселекторов, показываю на странице "Кнопки для сайта" (откроется в новом окне).

Великолепный(!) способ использования этой техники для создания фотогалерей и галерей рисунков узнаете на странице "Галерея" (откроется в новом окне).

Ещё один из возможных способов практического применения техники псевдоселекторов разместил на странице "Интересное подключение анимации" (откроется в новом окне).

***

Кого интересует использование похожих (внешне) эффектов, загляните в другой раздел учебных сайтов, следующую главу: "Техника спрайт" (откроется в новом окне).

ВВЕРХ