
Быстрый поиск
Введите фрагмент названия статьи для поиска

Как спрятать курсор на сайте
03.09.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Для одного аппарата с сенсорным экраном потребовалось сделать так, чтобы курсор на экране не отображался. Все клики основному приложению передавал тач-скрин, а курсор мыши только отвлекал и был лишним. Ставить дополнительные утилиты нельзя, вносить изменения в систему тоже. В моем случае задача облегчалась тем, что вся эта конструкция работала на движке Internet Explorer и кроссбраузерной универсальности не требовалось. Но в процессе решения задачи я решил поэкспериментировать с другими браузерами и вот что у меня получилось.Штатными средствами CSS просто скрыть курсор нельзя, но зато есть документированная возможность задавать свой курсор при помощи конструкции cursor: url('ваш_курсор.cur'). То есть теоретически можно создать полностью прозрачный курсор, а затем применить его на сайте в качестве пользовательского. Для этого в CSS добавляется следующее описание стилей:
Code: Убрать нумерацию
- * {
- cursor: url('transparent.cur'), auto;
- }
Из всех протестированных браузеров в точном соответствии с описаниями стандарта повел себя, как ни странно, только Internet Explorer, то есть добросовестно спрятал курсор и не показывал его ни при каких действиях на странице.
Чуть похуже справился с задачей Firefox: при перемещении по странице курсор иногда попадал в промежутки между элементами верстки, и в этот момент он становился видимым. Проблема решается изменением верстки с добавлением какого-нибудь обрамляющего элемента для всего содержимого страницы.
Читать статью целиком »
Просмотров: 9857 | Комментариев: 8

Эффект параллакса на JavaScript
11.08.2013 | Категория: Web-мастеру и не только | Автор: ManHunter

Эффект параллакса на JavaScript
Эффект параллакса хорошо известен в астрономии, стрелковом деле и, как ни странно, в современном веб-дизайне. Для начала давайте разберемся, что же такое параллакс вообще. Вот что нам говорят словари.
Параллакс - изменение видимого положения объекта относительно удаленного фона в зависимости от положения наблюдателя.
В веб-дизайне эффект параллакса используется в неравномерном перемещении фона, а также ближних объектов относительно дальних на многослойном изображении, что создает иллюзию объема. Это может быть вертикальный параллакс, когда при прокрутке страницы сайта фон перемещается медленнее ее содержимого, или же псевдоанимация в шапке сайте или рекламном блоке, которая активизируется при движении мыши.
Читать статью целиком »
Просмотров: 13481 | Комментариев: 13

Эффектное слайд-шоу на JavaScript
19.07.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Для одного из проектов понадобился небольшой скрипт слайд-шоу, который в бесконечном цикле показывает картинки с эффектом растворения. Вот что у меня получилось. Сперва надо подготовить элемент HTML-страницы, где будет происходить все это действо. Тут ничего сложного, единственно, что надо сразу же задать размеры области:Code (HTML) : Убрать нумерацию
- <div style="position: relative; height:600px; width:800px;"></div>
Code (HTML) : Убрать нумерацию
- <div style="position: relative; height:600px; width:800px;">
- <img style="position: absolute; top:0px;" id="sh_back" src="img/02.jpg">
- <img style="position: absolute; top:0px;" id="sh_front" src="img/01.jpg">
- </div>
Читать статью целиком »
Просмотров: 16074 | Комментариев: 9

Горизонтальное меню с вкладками на CSS и JavaScript
27.04.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Сегодня мы будем делать горизонтальное меню с вкладками для размещения на сайте. Но это не обычное навигационное меню, оно делается немного иначе, это меню для отображения различных блоков информации без перехода на другие страницы. Такое горизонтальное меню используется, например, в интернет-мгазинах, когда на одной странице представлено описание товара, фотографии, какие-нибудь дополнительные характеристики, отзывы посетителей и т.д., и вся эта информация переключается как раз таким меню с вкладками.Начнем с проектирования. Нам надо создать в HTML-коде меню с названиями вкладок и блоки с содержимым, которые соответствуют той или иной выбранной вкладке.
Code (HTML) : Убрать нумерацию
- <!-- меню с вкладками -->
- <ul id="menu">
- <li id="goods">Товар</li>
- <li id="descr">Описание</li>
- <li id="foto">Фотография</li>
- <li id="price">Цена</li>
- <li id="shops">Где купить</li>
- </ul>
- <!-- контейнер со страницами -->
- <div id="container">
- <div id="goods_content">Товар</div>
- <div id="price_content">Цена на товар</div>
- <div id="shops_content">Адреса магазинов</div>
- <div id="descr_content">Описание</div>
- <div id="foto_content">Фотографии</div>
- </div>
Читать статью целиком »
Просмотров: 14339 | Комментариев: 15

CSS: текст, зачеркнутый линией другого цвета
10.03.2013 | Категория: Web-мастеру и не только | Автор: ManHunter
Несколько вариантов реализации на CSS простенького эффекта выделения текста - зачеркивание его линией другого цвета. Когда-то передо мной встала такая задача, я с ней успешно справился. Потом решил поэкспериментировать и добиться этого же эффекта, но другими способами. Вот что у меня получилось. Общая суть всех примеров в том, что создается контейнер с перечеркивающей линией одного цвета, а в нем содержится текст другого цвета.Первый вариант, которым и была решена задача, - использование HTML-тега <s> или <strike>. Оба этих тега поддерживаются всеми браузерами, но с HTML 4.01 strike считается устаревшим, а в HTML5 вообще упразднен. Тем не менее, такой вариант имеет место быть.
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- .fixed_text_1 {
- color:#FF0000; /* цвет зачеркивающей линии */
- }
- .fixed_text_1 span {
- color:#000000; /* цвет зачеркиваемого текста */
- }
- </style>
- <s class="fixed_text_1"><span>Исправленному</span></s> верить
- <strike class="fixed_text_1"><span>Исправленному</span></strike> верить
Читать статью целиком »
Просмотров: 17959 | Комментариев: 2
