Вот небольшой пример того, как можно создать простой анимированный индикатор загрузки только с помощью CSS. Секрет очень прост. Нам нужно всего 3 элемента: один контейнер и 2 вложенных элемента. (далее…)
Эта статья поможет вам сделать резиновые закладки с закругленными углами используя CSS и одно фоновое изображение для всех состояний закладки. Результат будет выглядеть примерно так:
Этом пример поможет вам создать простой и визуально красиво выглядящий пейджер, который обычно используют для быстрого перехода между страницами.
В CSS мы можем применить псевдо-класс :hover к ссылке и добавить свойства, которые будут задействованы при наведении указателя на ссылку.
a:link, a:visited { width: 160px; height: 30px; display: block; overflow: hidden; background: url(images/nav1.gif) 0px 0px no-repeat; } a:hover, a:active { background-position: 0px -30px; }
Изображение nav1.gif содержит в себе сразу два состояния кнопки, а при наведении меняется положение фона:
Оригинал: How to make Buttons with Hover Load Faster
Надо заметить что эту технику можно применять не только к кнопкам, но и к другим элементам. Например на известном видеохостинге Youtube в одном изображении объединены сразу несколько графических элементов:
Пробовали ли вы когда-нибудь добавить внутренние отступы у элементов списка, которым было присвоено свойство display со значением inline? Заметили что отступы выглядят немного необычно? Посмотрите на пример ниже:
Каждому элементу добавлен внутренний отступ равный 1em. Однако верхний и нижний отступы отсутствуют и элементы перекрывают друг друга.
Чтобы понять почему это происходит давайте посмотрим на различные варианты того как инлайновые элементы воспринимают такие свойства как width, height, padding и margin. (далее…)