Background — Как сделать так, чтобы при наведение на окошко…


Содержание

Всплывающее окно на HTML и CSS

Для вывода важных сообщений или просто изменений, произведённых на сайте, можно использовать всплывающие окна. Всплывающие окна бывают двух видов: обычные и модальные.

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

Посмотреть пример модального окна можно с помощью JavaScript, воспользовавшись методом alert().

Всплывающее окно

Первым шагом создания всплывающего окна является создание элемента

Используя псевдо-класс :target мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства display элемента

Теперь надо расположить

Следующим шагом будет реализация скрытия окна, при нажатии на любое место страницы или на само окно. Для этого нам нужно расположить элемент

На этом создание простого всплывающего окна закончено.

Модальное окно

Для создания всплывающего модального окна, берём элемент

Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему

Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный

Полностью адаптивный фон с использованием CSS

В этом руководстве мы в деталях изучим технологию создания респонсивного фонового изображения, которое будет занимать всю область просмотра в браузере при любом разрешении. И использовать мы будем CSS — свойство background-size . Без JavaScript :

ПРИМЕР
СКАЧАТЬ ИСХОДНИКИ

Примеры использования адаптивных фоновых изображений

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

Если вы хотите добиться схожей « внешности » в вашем проекте — вы на правильном пути.

Основные понятия

Вот план нашей игры.

Используем свойство background-size для покрытия всей области просмотра

CSS -свойство background-size может принимать значение cover . Значение cover предписывает браузеру автоматически и пропорционально масштабировать фоновое изображение по длине и ширине таким образом, чтобы оно оставалось равным, или же больше, чем ширина/высота области просмотра.

Используем медиа-запрос при получении уменьшенной версии фонового изображения для мобильных устройств

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

Но все же использовать уменьшенные версии фона для мобильных устройств идея неплохая, и я объясню почему.
Изображение, которое будет использовано в примере, имеет размер около 5500 на 3600px .

С этим разрешением мы имеем в плюсе то, что добиваемся покрытия всей области просмотра на большинстве широкоформатных мониторов выпускаемых в настоящее время, но в минусе имеем размер изображения. Это около 1,7 Мб.

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

Ниже показано все, что понадобится из разметки:

Мы назначим фоновое изображение элементу body и таким образом добьемся полного покрытия фоном.

Однако эта техника сработает на любом блочном элементе ( таком как div или form ). В случае если ширина-высота вашего блочного контейнера подвижна, фоновое изображение будет также менять размер, чтобы занять всю область контейнера.

Мы объявляем свойства элемента body следующим образом:

Самое важное свойство-значение в этом списке:

Стоит заострить на нем внимание. Здесь и происходит чудо. Эта пара значения-свойства и дает указание браузеру на масштабирование фонового изображения в таких пропорциях, что высота-ширина будет оставаться равной или превышать высоту-ширину самого элемента. ( В нашем случае этот элемент — body .)

И тут возникает неприятная ситуация с парой свойство-значение. В случае, когда фоновое изображение будет иметь меньшее разрешение, чем размеры элемента body , а случиться это может либо при отображении страницы на экранах высокого разрешения, либо же когда у вас тонны контента на странице, — браузер будет растягивать изображение.

А как вы знаете, когда мы растягиваем изображение сверх его настоящего размера — мы теряем качество изображения ( другими словами появляется пикселизация ):

Когда изображение масштабируется в сторону увеличения родного размера — падает качество изображения .

Не забудьте об этом, когда будете подбирать фон. В демо-примере мы используем фото размером 5500 на 3600px для больших экранов, и потому в этом случае вряд ли произойдет нечто подобное.

Для того чтобы наш фон был выровнен по центру, мы объявили следующее:


Это установит масштабирующие оси в центр области просмотра.

Далее нам стоит разобраться с ситуацией, когда высота контента больше чем высота области просмотра. Когда подобное происходит — появляется скролл-бар.

Мы сделаем вот что. Установим свойство background-attachment в значение fixed , чтобы быть уверенными в том, что изображение останется на своем месте, даже если мы будем скролить страницу вниз:

В демо пример я включил возможность « загрузить некий контент » для того, чтобы вы смогли пронаблюдать поведение фона при прокрутке страницы.

Все что вам остается сделать — скачать демо-пример и немного поэкспериментировать со свойствами позиционирования ( background-attachment и background-position ) чтобы увидеть, как они влияют на поведение страницы и фона при прокрутке.

Следующие значения свойств говорят сами за себя.

Краткая запись CSS

Выше, для наглядности, я определял CSS — свойства в полном виде.

А так выглядит краткая запись:

Все, что вам остается сделать, это сменить значение url на путь к вашей картинке.

Опционально: медиа-запрос на получение уменьшенной версии фоновой картинки

Для экранов с меньшим разрешением нам понадобится Photoshop для пропорционального уменьшения разрешения картинки до 768 на 505px . Также я пропустил ее через Smush.it для уменьшения размера файла. Это позволило уменьшить размер с 1741 до 114 килобайт. Это уменьшило объем файла на 93%.

Не поймите меня неправильно, но 114 килобайт это все равно довольно много для использования в некоторых видах веб-дизайна. И мы будем загружать эти 114 килобайт только в случае необходимости, потому как, смотря на статистику, следует находить компромиссы между дизайном для настольных и мобильных устройств.

А вот и сам медиа-запрос:

Ключевая часть медиа-запроса заключена в свойстве max-width: 767px , которое, в нашем случае, означает, что если область просмотра браузера больше чем 767px — используется большое изображение.

Минус этого способа состоит в том, что, если вы изменяете размер окна браузера, с, допустим, 1200px до 640px ( или наоборот ), вы увидите мерцающий экран, пока меньшее или большее изображение будет подгружаться.

И вдобавок, из-за того, что некоторые мобильные устройства могут работать в большем разрешении — к примеру, iPhone 5 с Retina -дисплеем разрешением в 1136 на 640px , меньшее изображение будет выглядеть некрасиво.

Заключение

Весь использованный в этом руководстве код вы можете взять с GitHub .

Если и можно что-то добавить на счет этой техники, то это следующее.

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

Цукерберг рекомендует:  Пришёл, покодил, победил

Оптимизируйте ваши картинки для Веб, прежде чем использовать.

Лицензия: общественное достояние

Если вы хотите использовать код из этой статьи в своих целях — нет необходимости спрашивать, можно ли это делать; весь код размещен как общественное достояние на основе CC0 1.0 Universal .

Исходный код в репозитории GitHub repo не защищен какими либо авторскими правами. Вы можете использовать, продавать, модифицировать и распространять исходный код. Запрос на это вам не нужен.

( Владельцем фоновой картинки я не являюсь. Она принадлежит Unsplash ).

Данная публикация представляет собой перевод статьи « Responsive Full Background Image Using CSS » , подготовленной дружной командой проекта Интернет-технологии.ру

Перемещение элемента CSS background-position с помощью позиции мыши

Дата публикации: 2020-10-18

От автора: предположим, вы хотите переместить CSS background position элемента, когда на него наводится указатель мыши, чтобы сделать дизайн более интересным.

У вас есть такой элемент:

И вы задаете для него фон:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Вы можете настроить положение фона в JavaScript следующим образом:

Или вы можете вместо этого изменить пользовательские свойства CSS в JavaScript:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Вот пример, в котором фон перемещается непосредственно через JavaScript, но с примененным переходом, поэтому он плавно перемещается в новую позицию, а не дергается:


Или вместо этого вы можете перенести фактический элемент (вместо фона). Вы сделали бы это, если в перемещающемся элементе был бы какой-то контент или интерактивные взаимодействия. Вот пример, который снова задает пользовательские свойства CSS, но затем перемещает сам элемент через translate() и calc(), чтобы замедлить скорость.

Я уверен, что есть множество других способов сделать это — перемещение SVG viewBox, скрипты, управляющие холстом, webGL … кто знает! Если у вас есть какие-то более увлекательные способы сделать это, напишите в комментариях.

Автор: Chris Coyier

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Появление блока с текстом при наведении CSS

В статье узнаете, как создать появление блока с информацией, что появится при наведении клика на элемент, где используем чистый стиль CSS. Вероятно при построении сайта, что безусловно дело дойдет до функциональности, то вам нужно поставить описание под кнопку или изображение. Но как всегда место под это нет, так как возможно все происходит на главной страницы.

Тогда здесь можно применить CSS3, что по функциональности позволит выставить окно под любой дизайн. Так как это окно можно красиво и под основной стиль портала сделать. Здесь оно идет стандартно, разве только тени прописаны под светлый фон.

Нам нужно только задействовать 2 класса, где один идет под определение, что когда будет появляться описание, или картинка с краткими названиями, где можно закрепить ссылку на переход на другую страницу. Второй класс идет под стиль на форму, в нашем случай как видим, это синий квадрат, что вы будете ставить, то аналогично, все под класс прописываем.

Так выглядит, после когда поставите на интернет ресурс.

Здесь пишем описание — что в окне отображается.

.sometan-onetization <
position: relative;
margin: 6px auto;
background: #3d58bb;
height: 137px;
width: 137px;
border: 3px solid #f3f1f1;
box-shadow: 0px 1px 14px rgba(88, 81, 81, 0.43), 1px 2px 30px 3px rgba(27, 25, 25, 0.32);
border-radius: 3px;
cursor:pointer;
>

.kimone-tization <
display:none;
margin-left:-393px;
padding:7px;
margin-top:21px;
background:#f3f3f3;
height:128px;
-moz-box-shadow:0 7px 7px rgba(25, 24, 24, 0.41);
-webkit-box-shadow:0 7px 7px rgba(19, 18, 18, 0.37);
box-shadow:0 7px 7px rgba(19, 18, 18, 0.37);
>
.sometan-onetization:hover .kimone-tization <
display: block;
position: absolute;
top: 115px;
z-index: 9999;
width: 398px;
background: #d8d8dc;
border-radius: 5px;
>

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

Также самостоятельно все подгоняем под свою структуру, это нахождение каркаса, что можно как приподнять, так и опустить ниже, все редактируем в CSS, а в коде только вписываем или выставляем, то что будет появляться.

Меняем цвет элемента по наведению мышки

В данной статье на примере показано, как сделать на произвольном элементе сайта смену цвета, если на него был наведен курсор мышки.

Делается данная «штука» при помощи стилей CSS, т.е. придется добавить несколько строчек текста в файл стилей шаблона, а так же проявить свои дизайнерские способности. Я подскажу что именно добавить.

Обновлено 17.01.2020

Давайте сразу для наглядности пример, чтобы поняли о чем речь. Проведите мышкой по пунктам меню:

Как только мышка оказывается наведена на любое поле в списке — происходит смена заднего фона строки, а так же цвет текста/ссылки в названии рубрики сайта.

Вот так выглядит код данного блока:

В моем примере видим что эффект срабатывает на обычной ссылке. Вместо нее может быть контейнер

Чтобы сказать браузеру, что эффект нужно выполнять на конкретных ссылках, я взял их в отдельный

Практика

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

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

Чуть понятнее: мы указали что ссылка a должна находиться внутри контейнера с классом .catside . Далее мы добавили псевдокласс hover и оформили по правилам CSS.

Послесловие

В данной статье я показал как работает смена цвета элементов на самом обычном примере. Если хотите развиваться далее, то почитайте профильную литературу и справочники по CSS.

Использовать hover можно, практически, для всех элементов на сайте: блоки, текст, ссылки. Проявите немного фантазии и поймете как устроено у вас на сайте подобное. После этого сможете его украсить или сменить частично оформление.

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

Три способа сделать так, чтобы картинка менялась при наведении курсора мыши

2015-03-25 / Вр:00:10 / просмотров: 14742

Многие веб-мастера на своих сайтах в меню или на кнопках используют такой эффект, когда картинки меняются при наведении на них курсора мышки. Если вас интересует, как осуществить такой эффект, то в этой статье, я расскажу о трех способах, с помощью которых можно сделать так, чтобы картинка менялась при наведении на нее курсора мыши.
Использую чистый CSS, без JavaScript и jQuery.

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

Теперь вставим эти две кнопки в файл:

Способ №2 – использование одной картинки
Подготовьте одну картинку. Но на картинке должно быть два изображения кнопки разных по цвету.


Вы, наверное, задаете себе вопрос, как картинка будет меняться на другую, если она одна?! Легко, за счёт использования свойства background-position .
Замена одного изображения на другое происходит с помощью сдвига по вертикали. Вот и все чудеса! Смотрите на код:

Способ №3 – использование одной картинки и CSS-эффект

Возьмите картинку из способа №1, например, « knopka-1.png ». Здесь нам понадобится только одна картинка. При наведении на картинку мышкой сработает CSS-эффект. Смотрите на код:

Как изменить картинку при наведении на нее курсора или немного о hover-эффектах

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

Цукерберг рекомендует:  Создание свежего меню

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

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

Как вставлять картинки на веб-страницу вы можете узнать из статьи как вставить изображение на web-страницу.

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

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

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

На случай если вы не разбираетесь в CSS поясню, что запись img.animate1:hover говорит браузеру, что для всех элементов , имеющих атрибут class равный animate1 при наведении на них курсора мыши, применять указанные стили. А стили указываются между фигурными скобками < и >. Если все сделали правильно, то должно получиться примерно так:

Можно сделать картинку в исходном состоянии полупрозрачной, а при наведении курсора делать ее не прозрачной. Тогда в CSS-файл нужно добавить такие строки:

img.animate1 <
filter: alpha (Opacity=25);
opacity: 0.25;
>
img.animate1:hover <
filter: alpha (Opacity=100);
opacity: 1;
>

Результат будет такой:

Для большего эффекта можно замедлить изменения прозрачности картинки. Для этого можно воспользоваться свойством CSS transition , которое устанавливает эффект перехода между двумя состояниями элемента. Добавим для примера одну секунду замедления. Тогда наш CSS код станет таким:

img.animate1 <
filter: alpha (Opacity=25);
opacity: 0.25;
-moz-transition: all 1s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */
-webkit-transition: all 1s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */
-o-transition: all 1s ease-in-out; /* эффект перехода для Opera до версии 12.10 */
transition: all 1s ease-in-out; /* эффект перехода для других браузеров */
>
img.animate1:hover <
filter: alpha (Opacity=100);
opacity: 1;
>

С помощью свойства transform изображение можно масштабировать, вращать, сдвигать, наклонять. Попробуем увеличить картинку. Тогда css-код будет таким:

img.animate1 <
— moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
>
img.animate1:hover <
— moz-transform: scale (1.5); /* эффект трансформации для Firefox до версии 16.0 */
— webkit-transform: scale (1.5); /* эффект трансформации для Chrome до версии 26.0, Safari, Android и iOS */
— o-transform: scale (1.5); /* эффект трансформации для Opera до версии 12.10 */
— ms-transform: scale (1.5); /* эффект трансформации для IE 9.0 */
transform: scale (1.5); /* эффект трансформации для других браузеров */
>

И результат будет таким:

К увеличению картинки можно добавить поворот. Тогда css стили немного изменяться:

img.animate1 <
— moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
>
img.animate1:hover <
— moz-transform: rotate (360deg) scale (1.5);
— webkit-transform: rotate (360deg) scale (1.5);
— o-transform: rotate (360deg) scale (1.5);
— ms-transform: rotate (360deg) scale (1.5);
transform: rotate (360deg) scale (1.5);
>

Выше мы рассмотрели случаи, когда в анимировании участвует одна картинка. Далее рассмотрим способы подмены одного изображения на другое. В этом случае обычно подготавливают два изображения одинакового размера: одно для исходного вида, другое для его подмены.

Допустим у нас есть две картинки, одна черно-белая другая цветная:

Сделаем так, чтобы при наведении курсора на черно-белое изображение отображалось цветное. Для этого исходную картинку сделаем фоном элемента div с помощью свойства background . А при наведнии на картинку курсора будем менять фоновую картинку с помощью все тех же псевдокласса hover и свойства background . Для реализации этого эффекта на html страницу добавляем элемент div с классом rotate1 :

И добавляем следующие описания стилей:

div.rotate1 <
background: url (img/2.jpg); /* Путь к файлу с исходным рисунком */
width: 480px; /* Ширина рисунка */
height: 360px; /* Высота рисунка */
>
div.rotate1:hover <
background: url (img/1.jpg); /* Путь к файлу с заменяемым рисунком */
>

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

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

В этом случае смена одного рисунка на другой будет осуществляться путем сдвига фонового изображения по вертикали с помощью свойства background-position . Так как при клике по кнопке обычно происходит переход на другую страницу, то изображение вставим в элемент a> . Тогда в html-страницу вставляем такой код:

А в css-файл такой:

a.rotate2 <
background: url (img/button.png); /* Путь к файлу с исходным рисунком */
display: block; /* Ссылка как блочный элемент */
width: 50px; /* Ширина рисунка в пикселах */
height: 30px; /* Высота рисунка */
>
a.rotate2:hover <
background-position: 0 -30px; /* Смещение фона */
>

И последний на сегодня способ, это когда одно изображение размещается под другим с помощью css правила position: absolute . В этом случае помещаем в контейнер div два изображения:

И добавим css-стилей:

.animate2 <
position:relative;
margin:0 auto;/* устанваливаем блок div по центру страницы*/
width:480px; /* Ширина */
height: 360px; /* Высота */
>
.animate2 img <
position:absolute; /* абсолютное позиционирование*/
left: 0; /* выравниваем картинки по левому верхнему углу div-а*/
top: 0; /* выравниваем картинки по левому верхнему углу div-а */
>

После добавления правил css, картинки будут размещены друг под другом. Теперь управляя прозрачностью картинок с помощью свойства opacity в обычном состоянии будем показывать вторую картинку, а при наведении курсора первую. Для этого в обычном состоянии делаем картинку с классом first полностью прозрачной, а при наведении курсора наоборот: картинка с классом second будет полностью прозрачной, а с классом first не прозрачной:

Можно добиться плавности перехода добавив к последнему правилу свойство CSS transition :

.animate2:hover img.second, .animate2 img.second:hover <
opacity:0;
filter:alpha (opacity=0);
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
>

А если добавить свойство transform :


.animate2:hover img.second, .animate2 img.second:hover <
opacity:0;
filter:alpha (opacity=0);
-moz-transform:scale (0, 1);
-webkit-transform:scale (0, 1);
-o-transform:scale (0, 1);
-ms-transform:scale (0, 1);
transform:scale (0, 1); /* уменьшаем ширину картинки до 0 */
>

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

Тема: Изменение background-color при наведении курсора

Опции темы
Отображение
  • Линейный вид
  • Комбинированный вид
  • Древовидный вид

Изменение background-color при наведении курсора

Как изменить background-color при наведении курсора??
Я знаю, что в ссылках просто прописывается

но это в ссылках, а мне надо, чтобы background-color div-a изменялся!

на форуме есть много примеров меню где это делается

Я предполагал, что такие темы уже есть, НО я уже » полчаса » ищу и безрезультатно!

А с таблицей?

Пытаюсь это применить к ячейке, что бы картинка менялась — Не получается :-(

Как сделать что бы при наведении на ячейку картинка background`a менялась.

Levin, лучше разместите в ячейке ссылку A для которой в стилях задайте
display:block

а фоно меняйте тоже в стилях посредством
a:hover

Но тогда все будет применяться только для ссылки, а необходимо изменить фон ячейки, в которой находится ссылка!

Цукерберг рекомендует:  Создание и оформление вкладок при помощи CSS3 и jQuery

Levin, при тех параметрах что я указал, ссылка будет занимать всё пространство ячейки таблицы
и визуально не будет никакой разницы

но если же, вы всё-таки прицепились к ячейкам, то можно использовать такой код

в котором вы задаете фоновую картинку, и только меняете ее позицию со смещением

Да, верно :-)
Это натолкнуло меня на другую мысль.
сделал списком, но честно говоря частично спер, поэтому принцип не совсем понял.
Буду очень признателен если прокомментируете:
Файл CSS

#MainMenu
<
width:210%;
height:112px;
background:#FFF;
border:0;
margin:0;
>

list-style:none;
float:left;
margin:0;
padding:0;
>
#tab li
<

display:inline;
float:left;
margin:0;
padding:0;
>
#tab a
<
background:#000 url(картинка в покое);
text-decoration:none;
border:0;
display:block;
float:left;
margin:0;
padding:0;
>
#tab a span
<
display:block;
font-family:Georgia, serif;
font-size:12px;
color:#7f7f7f;
font-weight:700;
width:95px;
line-height:111px;
padding:0 0px;
>
#tab a:hover,#tab li.item_active a
<
background:url(картинка при наведении);
>
#tab a:hover span,#tab li.item_active a span
<
color:#000;
font-weight:700;
font-style:normal;
text-decoration:none;
>

в результате список выстраивается горизонтально друг за другом, и у ссылки получается заданный размер. Вот только почему понял не до конца :-(

Как сделать всплывающую подсказку | CSS

Всплывающая подсказка в HTML

Согласно w3.org

  1. текст атрибута alt отображается, когда не может быть показан объект,
  2. текст атрибута title отображается во всплывающей подсказке, когда курсор мышки наведён на элемент.
содержимое
Пример: title=»про атрибут title: содержимое в большинстве случаев не индексируется поисковыми системами»> наведи на меня
Результат: наведи на меня
Пример: наведи на меня
Результат: наведи на меня

Появляющаяся подсказка (сообщение) в JavaScript

Пример: нажми на меня
Результат: нажми на меня

Своя всплывающая подсказка к тексту

Что будет работать на CSS


Желательное поведение подсказки:

  1. появляться с небольшой задержкой, чтобы не мешать незаинтересованным в подсказке посетителям,
  2. появляться по центру (слева/справа) наводимого элемента,
  3. адаптироваться к ширине и высоте окна браузера,
  4. иметь HTML-содержимое (изображение, ссылка), а не только текст,
  5. подстраиваться под содержимое (или не более содержимого, или не более указанной величины, или не более окна браузера),
  6. работать на сенсорных экранах (появляться и при наведении, и при нажатии),
  7. индексироваться поисковыми системами.

Примеры: наведи на меня (по центру) В статье «Как заработать деньги в интернете» можно увидеть практическое использование , наведи на меня (влево) Важно: tabindex в теге нужен чтобы срабатывал :focus , наведи на меня (вправо) Ничто так не воодушевляет, как сознание своего безнадёжного положения Альбер Камю

Пример с анимацией: наведи на меня Короткая

Что нельзя сделать без JavaScript

Желательное поведение:

  1. находится в видимой области окна браузера.

Пример: наведи на меня Даже когда ширина подсказки меньше окна браузера, она может уходить за край видимой области, так как подсказка располагается относительно элемента, а не относительно HTML-документа

Как сделать всплывающую подсказку, появляющуюся рядом с курсором мышки или рядом с тем местом, куда нажал посетитель

21 комментарий:

Павел Каким образом относится высказывание:»Это правило не относится к IE, поэтому лучше указать оба атрибута.» к IE? Означенные атрибуты собственно нужны не столько пользователям и браузерам, а поисковикам. Так как первым(тем кто ищет информацию отключив мультимедию) до лампочки изображения(а ссылка, как правило анонсируется), из вторых как раз таки правильно отображает указанные атрибуты IE. Вот у гугловского хрома проблема с alt. NMitra Спасибо за то, что обратили внимание на этот момент. Строку убрала, дабы не вводить в заблуждение читателей. Я имела ввиду то, что версии ниже IE 8 отображают подсказку при наведении мышки на изображение, если в теге img указан alt (без title). Серебро Оригинальное оформление. Только свойства CSS у вас прописаны для блоков podskazka, а сама конструкция подсказки привязана к блоку priskazka, что может привести к ошибкам в оформлении у читателей, взявших ваш пример на вооружение. NMitra Совершено верно. Благодарю за замечание. Бегу исправлять PANIC Я хочу, чтобы при наведении на ссылку в гаджете «страницы» (или «список ссылок») появлялась всплывающая подсказка (как у Вас вверху).
Но куда и что вставлять. не могу понять NMitra Нужно прописывать тегу a атрибут title. Это возможно либо в гаджете HTML/JavaScript, либо если размещать ссылки прямо в шаблоне. Maniak помогите привязать к картинке а картинку сделать к левому краю экрана — хочу сделать всплывающие контакты сейчас работает только после нажатия NMitra Похоже вы справились без моей помощи. К сожалению, ранее не было возможности ответить — находилась вне связи. Мишаня Скажите, пожалуйста, а можно установить какой-нибудь код, чтобы на всех размещённыхв блоге фотографиях оторбажались её свойства (размер и габариты). NMitra Правая кнопка мышки — «Информация об изображении» даст всю необходимую информацию. Можно прописать title элементу, где указать размеры. Как автоматизировать этот процесс, я точно не скажу.

Фон для сайта (свойство CSS background)

Если вы заметили, слегка приукрасил Дизайн Манию, добавил текстуры в фон. Сразу же появилась идея рассказать вам как именно мне удалось это сделать. Открываю данным постом рубрику «Верстка» раздела «Веб-дизайн». В данной категории планирую публиковать статьи, заметки, рекомендации и уроки по HTML, CSS, а также, возможно, JavaScript. Материал постараюсь размещать простой и с пояснениями, чтобы понятно было всем читателям. Думаю, подобная информация пригодится многим блоггерам, которые хотят, но не могут подправить собственные дизайны из-за отсутствия навыков верстки.

Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость бекграунда как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже:

Background-color

Задает цвет фона. Можно применять к отдельным элементам

или ко всему сайту через через тэг :

/* черный фон сайта */ body < background-color: #000; >/* черный фон заголовка, белый цвет шрифта */ h1

Background-image

Используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:

Обратите внимание как указан путь к изображению — это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать полный путь к изображению. Опция пригодится если вы захотите, например, добавить кликабельный фон на сайте.

Background-size

Определяет размер фонового изображения.

Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.

Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.

Background-repeat

Используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:

  • background-repeat: repeat-x — изображение повторяется только по горизонтали
  • background-repeat: repeat-y — изображение повторяется только по вертикали
  • background-repeat: repeat — изображение повторяется по горизонтали и вертикали
  • background-repeat: no-repeat — изображение не повторяется

background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:

  • background-attachment: scroll — прокручивается вместе со страницей
  • background-attachment: fixed — при прокрутке фон остается неподвижным

Background-position

Задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:

  • в фиксированных единицах (пикселы, сантиметры)
  • в процентах
  • словесно: — top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).
  • background-position: 20px 50px — изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
  • background-position: 50% 25% — расположено по центру по горизонтали и отступает на 25% сверху.
  • background-position: right bottom — рисунок располагается снизу справа.

Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

background: #000 url(«my-image.jpg») no-repeat fixed left bottom;

Если какое-то свойство пропускается, то его значение установлено по умолчанию.

Надеюсь, данный урок вам пригодился, подписываемся на обновления блоге через RSS, дальше вас ожидает еще много интересных секретов!

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих