Как сделать фак на курсоре мыши

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

Заменить одну картинку на другую при наведении на неё курсора мыши.

Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но в большинстве случаев вполне достаточно и CSS.

Псевдокласс :hover

Вначале разберём, как делается собственно сам эффект. Для этой цели используется псевдокласс :hover , он добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже :hover работает только со ссылками, тогда как другие браузеры понимают :hover и для других элементов. Так что для универсальности придётся помещать изображение внутрь контейнера . Сам рисунок добавляется и меняется с помощью стилевого свойства background . Алгоритм действий следующий.

  1. Готовятся два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания.
  2. Исходная картинка добавляется в качестве фонового рисунка к селектору A через стилевое свойство background со значением url(URI) , здесь URI — путь к графическому файлу.
  3. Присоединяем псевдокласс к селектору A и снова включаем свойство background , но в качестве значения указываем замещающее изображение.
  4. Чтобы ссылка была по размеру картинки, её следует превратить в блочный элемент с помощью свойства display со значением block , а также задать высоту и ширину ссылки.

На рис. 1 приведены два изображения: исходное (рис. 1а) и замещающее (рис. 1б).

а б

Рис. 1. Картинки для создания эффекта перекатывания

Остаётся собрать весь код воедино, как показано в примере 1. Чтобы ссылка не вела на какой-то определенный файл, что в данном случае излишне, добавим «заглушку» в виде символа решетки (#) к атрибуту href тега .

Пример 1. Использование псевдокласса :hover

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Эффект перекатывания с одним рисунком

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

Рис. 2. Изображение с двумя картинками

Смена одного рисунка на другой происходит сдвигом изображения по вертикали за счёт использования универсального свойства background или background-position , как показано в примере 2.

Пример 2. Изменение положения рисунка

HTML5 CSS 2.1 IE Cr Op Sa Fx

Для селектора A устанавливается фоновое изображение через свойство background , ширина ( width ) совпадает с рисунком, а высота (свойство height ) равна половине высоты изображения. В итоге первоначально должна отображаться зеленая вкладка целиком.

При наведении на ссылку фон смещается вверх на половину высоты картинки (40 пикселов) с помощью background-position и становится видна оранжевая вкладка.

источник: htmlbook.ru

Как сделать фак на курсоре мыши

Приветствую вас, уважаемые читатели блога Vorabota.ru! Для того чтобы сделать приятным и красивым вид рабочей области монитора (рабочий стол) все мы, простые пользователи компьютеров, устанавливаем различные изображения, так называемые «обои». Кроме стандартных изображений, которые устанавливаются автоматически с операционной системой Windows, в интернете можно найти и скачать обои на любой цвет и вкус. Но, кроме замены обоев на рабочем столе, «жизнь за компьютером» можно разнообразить и сменой внешнего вида курсора мыши.

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

Самые распространенные расширения файлов для курсоров мыши – это *.cur (статичное изображение курсора) и *.ani (анимационное изображение). Если на компьютере установлена операционная система Windows, курсоры для мыши с этими расширениями будут отображаться без проблем. А вот если установить файл курсора на сайт или блог, курсор с расширением файла *ani будет виден пользователям только через браузер Internet Explorer , а курсор с расширением *cur можно будет просматривать через Chrome и Mozilla Firefox. Эти нюансы следует учитывать. Соответственно, если у вас есть свой собственный сайт или блог, и вы установите на него свой оригинальный курсор, не все пользователи интернета смогут лицезреть его оригинальность. Если браузер, через который будут просматривать ваш сайт или блог, не поддерживает расширение файла курсора, то он будет просто отображаться, как стандартная классическая стрелка.

Как заменить курсор мыши в Windows на своем компьютере.

Если на вашем компьютере стоит операционная система windows, то файлы с курсорами находятся по адресу: Мой компьютер – диск C:\WINDOWS\Cursors.

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

Пуск – Панель управления – и щелкнуть на иконку мышь. В открывшемся окне «свойства мыши» открываем вкладку «указатели».

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

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

Чтобы курсору для мыши придать эффект отображения следа (что-то вроде таскающегося за курсором хвостика) следует перейти на вкладку «параметры указателя» и установить галочку «отображать след указателя мыши».

Длину отображения следа курсора можно отрегулировать подвижным ползунком. И в завершении настроек также нажимаем «применить» и ОК.

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

Как сделать курсор для мыши из фотографии или картинки на бесплатном онлайн сервисе Cursor.cc.

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

или Mozilla Firefox (http://www.mozilla.org/ru/firefox/central/) .

Сначала подберите фотографию или любое изображение, из которого вы хотите сделать курсор мыши, и измените его размер на 32х32 пикселя. Для изменения размера изображения перейдите на бесплатный онлайн сервис Pic resize и загрузите со своего компьютера нужную картинку, нажав на кнопку «выберите файл».

Если вы переходите на сайт Pic resize по ссылке с моего блога, для удобства пользователей я уже установил настройки изменения размера изображения 32х32 пикселя. Поэтому дополнительных действий делать не надо, а просто нажать кнопку «Resize Now» (изменить размер), а затем сохранить на свой компьютер «Save to Disk» (сохранить на диск).

Все, ваш файл с фотографией или картинкой принял нужный размер для дальнейшего превращения его в курсор.

Далее переходим на бесплатный онлайн сервис для создания курсоров Cursor.cc и импортируем на него подготовленное фото или картинку (кнопка в левом верхнем углу «Import Image»). Если все устраивает и изображение не нужно редактировать, сохраняем его на свой компьютер, кнопка «Download Cursor» (скачать курсор) сразу внизу под изображением. После скачивания файла курсора для мыши обязательно переименуйте его, не меняя расширение *.cur (к примеру, на main-cursor.cur). Затем помещаем его в папку с файлами курсоров и устанавливаем в Windows на свой компьютер так, как было описано выше в параграфе как заменить курсор мыши на компьютере.

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

Для того чтобы отредактировать файл курсора, давайте вернемся в онлайн сервис Cursor.cc и сделаем небольшие изменения.

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

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

Как изменить курсор в блоге на бесплатной площадке Blogspot.com.

Если у читателей этого материала нет своего блога на Blogspot.com, но есть желание узнать, как его сделать, вы можете прочитать заметку о том,как создать свой блог на бесплатной площадке блогспот. А те, кто уже имеет свой блог на этом ресурсе, могут сменить курсор на его страницах.

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

Итак, сначала надо обязательно зарегистрироваться на онлайн сервисе Cursor.cc, чтобы можно было получить ссылку на курсор (URL адрес), который будете делать. Ссылка понадобится для того, чтобы установить ее в шаблон блога для отображения курсора на Web страницах. Ведь на Blogspot и других бесплатных блог площадках нет доступа к папкам сайта, а файл с курсором должен где-то лежать. Вот мы и воспользуемся бесплатным онлайн сервисом, где будет постоянно лежать наш файл с курсором.

Чтобы зарегистрироваться, на сайте онлайн сервиса Cursor.cc, нажимаем «Register» (регистрация), которая находится с левой стороны. Затем надо создать курсор для блога таким же способом, как делали его для размещения на своем компьютере (см. описание выше как сделать курсор для мыши). Когда курсор будет сделан, нажимаем кнопку «Publish under an open license» (публикации под открытой лицензией) под изображением. В открывшемся окне надо заполнить форму, и нажать «ОК».

После этого файл будет помещен в кабинет созданных курсоров.

Затем нажимаем на имя курсора и в открывшемся окне, почти в самом низу под изображением, выделяем и копируем всю адресную строку HTML кода. Хочу обратить ваше внимание на то, что код адресной строки будет довольно длинный. Поэтому копируйте его внимательно и полностью (горячие клавиши для копирования Ctrl + C).

Теперь отправляемся в панель инструментов на blogger.com. Открываем шаблон своего блога и нажимаем кнопку «изменить HTML», в открывшемся окне кнопку «пропустить».

Перед вами должен открыться HTML редактор шаблона. Ищем строку:

(горячие клавиши для поиска Ctrl + F), и сразу после нее вставляем наш HTML код курсора (горячие клавиши Ctrl + V).

Сохраняем изменения в шаблоне и смотрим, как выглядит ваш новый курсор мыши на бесплатном блоге в blogspot.com. Если все сделано правильно, мне остается только поздравить вас с установкой оригинального курсора на блог.

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

источник: vorabota.ru

Как сделать фак на курсоре мыши

На днях сидя за ноутбуком, понял, что нужно внести немного разнообразия, а то все уже приелось. Сменил обои :). Но этого мне показалось мало и я начал искать, что бы это еще преобразить. Так как я не люблю всякие там программы, которые изменяют внешний вид операционной системы, то я решил просто изменить курсор мыши, установил себе черный, как в Mac OS. Вот такой у меня сейчас курсор:

Красиво, правда? Мне он нравится больше, чем стандартный белый курсор Windows, который уже успел надоесть. Я изменил не только вид основного указателя, но и фоновый режим, вид при наведении на ссылку и т. д.

Сейчас покажу и расскажу как я это все изменил. Думаю, Вам пригодиться и Вы тоже внесете немного свежести в свой компьютер.

Для начала нам нужно определиться, на какой набор указателей Вы хотите изменить свой курсор. Нужно скачать набор указателей, который Вам понравился. Это как правило архив, в котором находятся файлы с расширением .cur. Это и есть курсоры.

Скачайте сначала набор курсоров. Можете просто набрать например в гугле запрос “курсоры для windows 7”, там есть я проверял :). Или вот ссылка на архив с указателями, которые установлены у меня – cursors.rar.

Нам нужно файлы, которые находятся в архиве (а в моем архиве еще и в папке Cursors) скопировать в папку C:\Windows\Cursors.

Скопировали? Отлично, продолжаем.

Заходим в Пуск, Панели управления. Просмотр переключаем на Крупные значки и выбираем Мышь.

Откроется окно, в котором переходим на вкладку “Указатели”. Выделяем нужный нам указатель, например сначала “Основной указатель” и нажимаем кнопку Обзор… Откроется сразу папка C:\Windows\Cursors (в которую мы уже скопировали наши новые указатели) . Выделите нужный указатель и нажмите кнопку Открыть.

Вы увидите, что один указатель изменился. Проделайте такое со всеми остальными указателями, или только с теми, которые хотите изменить.

Когда закончите, нужно сохранить нашу схему. Нажмите кнопку Сохранить как… Введите название схемы и нажмите Ok.

Почти готово! Осталось только нажать кнопку Применить и Ok.

Вот и все, новые и красивые курсоры установлены! Аж работать приятнее стало :). Всего хорошего!

  • Настройка OpenVPN на Windows и Ubuntu: что, зачем и как

Интернет подобен морю. С пересылаемыми данными, как с судном во время путешествия, может случиться что угодно: они могут повредиться, затонуть…

MSDaRT – диск восстановления Windows, который должен быть у каждого

Винда – штука своевольная: хочет – грузится, не хочет – нет. Особенно она любит устраивать подлянки, когда у нас срочные…

Здравсвуйте. В этой статье разговор зайдет о такой необходимости, как установка Windows 7/8 на mac, а также о способах этого…

Привет друзья! Я тут подумал, что многие не решаются самостоятельно установить, или переустановить операционную систему Windows, только потому, что бояться…

источник: f1comp.ru

Пару дней назад мне подкинули отличную идею в комментариях к сайту www.hronofag.ru написать о том, как в «онлайн-фотошопе» Pixlr сделать курсор. И я хотел бы заметить, что любой посетитель этого сайта может смело предложить в комментариях тему для статьи. Если тема хорошая и пользуется спросом я обязательно напишу статью или урок. Но к сожалению ни в Фотошопе, ни в каком-либо «онлайн-фотошопе» будь то Pixlr или что угодно, сделать полноценный курсор невозможно. Однако, можно сделать изображение курсора, а затем, при помощи особой магии и спец программы, делающей курсоры, довести его до конца. Как обычно, я начал свои поиски с известных поисковиков (см гугл и яндекс), но к удивлению не нашел ни одной толковой статьи на эту тему, кроме панических комментариев на форумах и бесполезных ответов.

Делать курсор или иконку не сложно. Я делал свои первые курсоры, ещё когда учился в школе. На компьютере стоял Windows 98, небо было голубее, а трава зеленее. Я научу вас создавать курсор в программе Photoshop, впрочем, вы можете делать его где угодно, хоть в MS Paint-e, главное, чтобы ваш графический редактор сохранял полупрозрачные PNG, однако все по порядку. Как обычно любой из вас сможет скачать PSD фаилы со слоями, а так же все то, что мы сделаем в этой статье.

Немного о курсоре

Для начала, вам нужно понять, что курсор, это не более чем прямоугольный кусок графики. Конечно, видим то мы только сам курсор, и это потому что остальная часть графики прозрачная, а значение Альфа канала сведено к нулю. Значит, прежде всего, нам нужен такой графический редактор, в котором можно работать с полупрозрачными областями и который может их сохранять, например в GIF или в полупрозрачный PNG 24. И это конечно Фотошоп, хотя изображение курсора можно сделать даже в Иллюстраторе, так как он тоже сохраняет в веб форматы. Замечу, что время GIF-а безвозвратно уходит. В отличие от PNG он имеет всего 256 цветов и не поддерживает полупрозрачность.

Рисуем курсор в Фотошопе вектором

По большей части нам не обязательно рисовать курсор ни в Фотошопе, ни в каком-либо другом графическом редакторе, так как практически ни один из них не умеет сохранять фаилы в курсорных форматах cur или ani. А сохранять в эти форматы умеют только спец программы предназначенные для рисования курсоров, однако, большая часть этих программ либо безнадежно устарела и не обновляется со времен Windows 98, либо предоставляет убожеские возможности управления графикой. Поэтому я и предлагаю сделать графику в старом добром Фотошопе, вместо того, чтобы разбираться с этими аля CursorEditor PRO, которые от Пэйнта отличаются разве что присутствием Альфа канала.

Начните с создания рабочей поверхности File > New и для наших целей нам подойдет размер 120 на 120 px с разрешением 72 dpi, цветовой режим RGB.

Создаем форму курсора

Прежде всего создадим форму курсора. И в этом нам поможет инструмент, в кармане которого уже запасено все что нужно — Сustom Shape Tool. И этот инструмент является разновидностью векторного инструмента в Фотошопе. Подробности его работы можно посмотреть в моем старом Видео уроке о работе Сustom Shape Tool. Выберите этот инструмент, а на панели настроек выберите изображение курсора. И я хотел бы использовать именно эту форму, так как она отлично подходит для урока. Если у вас такой формы нет, скорее всего вы просто не открыли все шаблонные изображения Сustom Shape Tool. В том же окошке кликните по круглой иконке стрелочки и в меню выберите All. Это загрузит практически все шаблоны инструмента Сustom Shape Tool

Трансформируем курсор в Фотошопе

Теперь немного деформируем курсор и вот почему. Вы наверняка замечали, что стандартный курсор направлен не справа налево, а снизу наверх. Это не просто так. Возможно дедушка Фреид бы объяснил лучше, но психологически значительно проще воспринимать указатель, указывающий именно с низу вверх. Все равно, что начать есть левой рукой. Можно наловчиться, но не проще ли сделать так как надо сразу?

Опять выберите Edit > Free transform, для начала разверните курсор, затем уменьшите а после нажмите CTRL. Не отпуская его потяните за уголки рамки трансформирования. Переместите угол наклона ближе к левому краю так как у меня на картинке.

Применяем стиль для курсора

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

Выбираем Layer > Layer Style > Blending Options или альтернативное открытие — двойной клик по слою с курсором на панели слоев Layers. Появится диалоговое окно. В окне две области, меню с левой стороны и настройки с правой. Выберите с левой стороны Style и вы попадете в сохраненные стили, которые уже записаны в Фотошопе. И если у вас там ничего нет, значит вы не загрузили шаблоны. Кликните по круглой кнопочке с правой стороны и выберите из меню Web. Это загрузит все стили из раздела для веб. И собственно на этом можно уже и остановиться, так как вы легко можете выбрать любой стили, применить его и вуаля, красивый курсор готов.

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

Кликните по полоске градиента и настройте цвета от белого, к сине серому — 535b5e. В стилях градиента выберите Radial, то есть шарообразный градиент. И вы в любой момент можете позиционировать местонахождение градиента на курсоре, для этого просто кликните по рабочей области, там где нарисован курсор, при открытых настройках стиля Gradient Overlay и перемещайте градиент мышкой на лету. И на моем скрине в панели слоев вы увидите остальные невидимые пока эффекты Стилей. Ничего, их мы тоже последовательно подключим.

Теперь настроим эффект Satin. Что это? Это материал похожий на шелк. И основная задача эффекта Satin создавать переливающиеся блики, примерно такие же как на оригинальном материале. В эффекте Satin выберите режим наложения Blend Mode — Vivid Light и белый цвет. Это создаст жесткий контрастный оттенок при наложении сатина на градиент. Остальные настройки по вкусу, или воспользуйтесь моими.

Теперь включите Bevel and Emboss, он создает псевдо 3D эффекты, подсвечивая слой с одной стороны темным цветом с другой светлым. За счет этого получается визуальная трехмерность.

На всякий случай, вот эффекты, которых мы добились, если все настройки правильные. И если у вас отмечена галочка Preview, то вы видите превьюшку эффекта прямо под кнопкой New Style с правой стороны окна.

И Inner Shadow чтобы создать внутреннюю тень, подчеркнув края курсора. Воспользуйтесь своими настройками, или перепишите мои, это не так важно. И когда ваш стиль готов, вы всегда можете кликнуть по кнопке New Style и записать его в архив стилей.

Последний стиль — Inner Glow, который создает внутреннюю подсветку. В режиме наложения конечно Vivid Light, в настройке Choke 20 размер Size 8. И теперь, мои друзья, мы закончили с созданием стиля для нашего курсора. Нажмите на кнопку New Style и сохраните стиль в память Фотошопе.

Сливаем слои и уменьшаем курсор

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

Теперь выделите все слои, используйте SHIFT. Затем зайдите в Layers > Merge Layers Я не боюсь сливать изображение и терять мой векторный контур прежде всего, потому что он не представляет особой ценности, так как мы сделали его за 3 минуты. К тому же я сохранил созданный стиль, и могу применить его к чему угодно одним кликом. Однако если вам кажется что этот слой вам еще понадобится, сохраните его в PSD. Вот, зачем я сливаю слои. Сейчас мы будем уменьшать курсор, так как чаще всего курсоры достаточно маленькие, они не занимают ни пол экрана ни даже 200 px. В этом их курсорный смысл.

Конечно, я всегда могу воспользоваться галочкой Scale Styles в окне Image Size и Фотошоп постарается маштабировать стиль, однако он не сможет сделать это достаточно достоверно и стиль все равно поедет. Я хочу слить слои, чтобы перевести прикрепленный стиль в пиксели, так как для нас очень важно, чтобы маленький курсор выглядел так же как большой. Теперь слои слиты, у нас всего один слой с курсором в растре. Зайдиите в Image > Image Size и измените размер с 120 на 120 px на 32 на 32 px. И мы практически сделали наш курсор.

Сохранение курсора в PNG

Откройте File > Safe for Web and Devices и это окно специально создано для сохранения и оптимизации графики для веб, телефонов и планшетов. В появившемся окне вы увидите три области. Средняя область с изображением. Левая область с инструментами. И правая область с настройками. В правой области выберите PNG 24 из выпадающего меню и не забудьте галочку Transparancy, которая и добавляет в фаил альфа канал, скрывающий часть изображения. И это все настройки для нашего курсора. Нажимайте ОК.

Как сделать курсор в формате CUR

Мы практически сделали курсор, однако это по прежнему картинка в формате PNG с изображением курсора, а не сам курсор. В операционной системе его не использовать, для сайта в код не повесить. Настоящий курсор — это прежде всего разновидность системного фаила, к которому прикреплена картинка курсора. Формат такого файла зависит от операционной системы. Для Windows они одни, для Mac OS другие. Мы поговорим о формате CUR. Это статичный формат для курсора, который работает с Windows.

В начале этой статьи я упоминал, что в подобные форматы сохраняют программы типа КурсорРедактор. К сожалению большая часть из них либо платная, либо с испытательным сроком на 30 дней, а графические возможности всех этих программ оставляют желать лучшего. Я перепробовал десяток подобных программ и по моему мнению лучшая из них — IcoFX. Здесь можно найти официальный сайт. Здесь можно скачать IcoFX. Здесь можно посмотреть некоторые уроки о работе с этой программой. И главное преимущество IcoFX — её можно скачать бесплатно и без испытательного срока, по крайней мере пока что. Она работает с большей часть форматов для иконок и курсоров для основных операционных систем. И её способность создавать графический дизайн значительно выше остальных олдскульных программ. Здесь и полупрозрачность, и масса кистей и градиенты и основные инструменты, однако все это ничто против способностей Фотошопа, поэтому я не буду останавливаться на программе IcoFX. Просто скачайте её и давайте уже сделаем этот курсор!

Открываем и сохраняем PNG в CUR

Открываем в программе IcoFX наш PNG. File > Open. В диалоговом окне выбираем Portable Network Graphic (*.png), чтобы видеть фаилы в формате PNG. Нашли, нажимаем OPEN.

Это пожалуй все что нужно сделать. Теперь сохраним эту картинку в формате CUR. Откройте File > Save As и в появившемся окне выберите формат Windows Cursor (*.cur). И это все. Мы только что создали работающий курсор в нужном формате.

Загружаем курсор в Windows

Я работаю с Windows Vista, однако на других Windows настройки такие же. В нижнем левом углу экрана нажмите кнопку START. В выпадающем меню выберите Сontrol Panel. В появившемся окне выберите Мышку — Mouse.

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

Курсор для сайта

Если вы хотите использовать курсор для сайта, то вам прежде всего необходим фаил курсора в формате CUR, который нужно загрузить на хостинг сайта и прописать его нахождение в CSS сайта. О том как это сделать подробно написано на сайте HTMLBook, который специализируется на HTML и CSS. И помните, что формат CUR сработает для сайта только у тех пользователей, которые пользуются Windows.

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

Дмитрий Веровски

Арт директор в Red Bear Agency. Первый Фотошоп поставил себе в 2000 году, а профессионально занялся дизайном в 2007. Реализовал сотни проектов (сайты, рекламные компании, упаковки, айдентика и печать). В блоге и своих соц. сетях пишу статьи и краткие заметки на тему дизайна, заработка и клиентов. Добро пожаловать! Мои социальные сети: Вконтакте Фейсбук Инстаграм

источник: hronofag.ru

Как установить курсоры на Windows 7/8/10

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

1. Если в наборе имеются файл (ы) конфигурации *.inf, тогда кликаем ПКМ по нему и выбираем действие «Установить».

После переходим в Панель управления\Оборудование и звук -> Мышь -> Указатели, выбираем установленную схему курсоров и «OK».

2. Если вы не нашли такого файла (*.inf) тогда каждый курсор нужно устанавливать отдельно, это занимает немного больше времени. Для этого нужно перейти в Панель управления\Оборудование и звук -> Мышь -> Указатели, выбрать один из курсоров и нажать кнопку «Обзор. », далее перейти в папку где вы сохранили ранее скачанные курсоры и выбрать один из соответствующих.

Такую операцию нужно сделать с каждый курсором. После того желательно сохранить схему курсоров с помощью кнопки «Сохранить как. ».

На этом установка курсоров будет закончена. Учтите что некоторые темы оформления могут изменять указатели на те которые прописаны в файле визуального стиля. Если вы этого не желаете снимите галочку с пункта «Разрешить темам изменять указатели мыши» который можно увидеть на последней картинке.

источник: 7themes.su

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

Заменить одну картинку на другую при наведении на неё курсора мыши.

Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но в большинстве случаев вполне достаточно и CSS.

Псевдокласс :hover

Вначале разберём, как делается собственно сам эффект. Для этой цели используется псевдокласс :hover , он добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже :hover работает только со ссылками, тогда как другие браузеры понимают :hover и для других элементов. Так что для универсальности придётся помещать изображение внутрь контейнера . Сам рисунок добавляется и меняется с помощью стилевого свойства background . Алгоритм действий следующий.

  1. Готовятся два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания.
  2. Исходная картинка добавляется в качестве фонового рисунка к селектору A через стилевое свойство background со значением url(URI) , здесь URI — путь к графическому файлу.
  3. Присоединяем псевдокласс к селектору A и снова включаем свойство background , но в качестве значения указываем замещающее изображение.
  4. Чтобы ссылка была по размеру картинки, её следует превратить в блочный элемент с помощью свойства display со значением block , а также задать высоту и ширину ссылки.

На рис. 1 приведены два изображения: исходное (рис. 1а) и замещающее (рис. 1б).

а б

Рис. 1. Картинки для создания эффекта перекатывания

Остаётся собрать весь код воедино, как показано в примере 1. Чтобы ссылка не вела на какой-то определенный файл, что в данном случае излишне, добавим «заглушку» в виде символа решетки (#) к атрибуту href тега .

Пример 1. Использование псевдокласса :hover

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Эффект перекатывания с одним рисунком

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

Рис. 2. Изображение с двумя картинками

Смена одного рисунка на другой происходит сдвигом изображения по вертикали за счёт использования универсального свойства background или background-position , как показано в примере 2.

Пример 2. Изменение положения рисунка

HTML5 CSS 2.1 IE Cr Op Sa Fx

Для селектора A устанавливается фоновое изображение через свойство background , ширина ( width ) совпадает с рисунком, а высота (свойство height ) равна половине высоты изображения. В итоге первоначально должна отображаться зеленая вкладка целиком.

При наведении на ссылку фон смещается вверх на половину высоты картинки (40 пикселов) с помощью background-position и становится видна оранжевая вкладка.

источник: htmlbook.ru

Как сделать, чтобы цвет рамки вокруг изображения-ссылки менялся при наведении на него курсора мыши?

Изменить параметры рамки вокруг изображения при наведении на него курсора мыши и восстановить обратно, когда курсор уходит прочь.

За изменение стиля элемента при наведении на него указателя мыши отвечает псевдокласс :hover . Для управления стилем ссылок этот псевдокласс добавляется к селектору A .

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

Пример 1. Изменение цвета рамки

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Вид рамки до и после наведения курсора на изображение

Если хочется сделать изменение цвета рамки без применения ссылок, то свойство border допустимо применить непосредственно к селектору img , при этом в браузере Internet Explorer до версии 6.0 код работать не будет (пример 2).

Пример 2. Изменение параметра рамки вокруг изображения

В данном примере рамка добавляется ко всем изображениям веб-страницы, если с помощью рамки требуется выделить только некоторые из них, добавьте к ним стилевые классы.

источник: htmlbook.ru