Быстрый поиск
Введите фрагмент названия статьи для поиска
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> верить
Читать статью целиком »
Просмотров: 18698 | Комментариев: 2
Защита контента сайта от копирования
05.07.2012 | Категория: Web-мастеру и не только | Автор: ManHunter
Сразу же оговорюсь, что я категорически против использования на практике любых методов, описываемых в этой статье. Любой запрет только раздражает посетителей сайта и вряд ли кто-то захочет вернуться снова на страницу, которая, например, блокирует правую кнопку мышки или требует для просмотра текста включенный JavaScript. Максимум, что я признаю, это пассивная защита контента. Это не говоря о том, что любую защиту в случае реальной необходимости можно без особых проблем обойти. Но тем не менее, активная защита от копирования контента иногда встречается на некоторых сайтах. В этой статье я собрал методы активной защиты, которые встречал на практике.Первый способ, самый простой. Подавление событий выделения текста, движения и клика мышкой, копирования и вызова контекстного меню путем блокировки правой кнопки мыши. Ставится обработчик, который не дает событию всплывать по иерархии DOM и сразу же возвращает флажок отмены:
Code (JavaScript) : Убрать нумерацию
- function nocopy(event) {
- var event = event || window.event;
- if (event.preventDefault) { event.preventDefault(); }
- else { event.returnValue = false; }
- return false;
- }
- document.onmousedown = nocopy;
- document.onmouseup = nocopy;
- document.onmousemove = nocopy;
- document.ondragstart = nocopy;
- document.onselectstart = nocopy;
- document.ontextmenu = nocopy;
- document.oncopy = nocopy;
Читать статью целиком »
Просмотров: 20558 | Комментариев: 27
Горизонтальный скроллер на JavaScript
17.08.2011 | Категория: Web-мастеру и не только | Автор: ManHunter
Горизонтальный скроллер на JavaScript
Захотел сделать горизонтальный скроллер для фотогалереи, естественно, без использования всяких сторонних скриптов. Условие: кроссбраузерность, валидная верстка и стандартные стили, поддержка колесика мыши. Начнем с верстки:
Code (HTML) : Убрать нумерацию
- <div class="scroller_container">
- <div class="scroller_navigate"><img src="images/left.gif" alt=""></div>
- <div class="scroller_window" id="scroller_window">
- <div class="scroller_row" id="scroller_row">
- <div id="scroller_rule">
- <!-- список превьюшек в линейке скроллера -->
- <a href="#"><img src="..." width="150" height="100" alt=""></a>
- <a href="#"><img src="..." width="150" height="100" alt=""></a>
- <a href="#"><img src="..." width="150" height="100" alt=""></a>
- <a href="#"><img src="..." width="150" height="100" alt=""></a>
- </div>
- </div>
- </div>
- <div class="scroller_navigate"><img src="images/right.gif" alt=""></div>
- </div>
Читать статью целиком »
Просмотров: 11501 | Комментариев: 21
Стилизация checkbox с использованием CSS и JavaScript
11.08.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
В некоторых случаях при верстке макетов сайтов возникает необходимость нестандартной стилизации различных полей ввода HTML-форм. Например, дизайнер в фотошопе слепил красивый шаблон с вычурными графическими элементами, макет утвержден и заказчик слышать ничего не хочет про "стандартные элементы управления". Оформить поля ввода и всякие кнопочки еще не проблема, а вот с элементом checkbox уже сложнее. Мало того, что каждый браузер его отрисовывает по-своему, так еще визуально у него поменять ничего нельзя. Для решения проблемы можно воспользоваться следующим хитрым трюком: checkbox помещается внутрь контейнера, например div, после этого сам checkbox визуально скрывается путем установки ему 100% прозрачности, а у контейнера меняется стиль в зависимости от состояния "галочки" в checkbox.Code (HTML) : Убрать нумерацию
- <style type="text/css">
- /* Стиль для обертки отмеченного checkbox'а */
- div.boxChecked {
- background: url("checkbox.gif") no-repeat 0 3px;
- }
- /* Стиль для обертки неотмеченного checkbox'а */
- div.boxUnchecked {
- background: url("checkbox.gif") no-repeat 0 -18px;
- }
- /* Прозрачный стиль для checkbox'а */
- div.boxChecked input, div.boxUnchecked input {
- cursor: pointer;
- margin: 0px;
- padding: 0px;
- width: 16px;
- opacity: 0;
- -moz-opacity: 0;
- -khtml-opacity: 0;
- filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
- }
- </style>
Читать статью целиком »
Просмотров: 19695 | Комментариев: 14
Поле ввода с убирающейся подсказкой
20.04.2010 | Категория: Web-мастеру и не только | Автор: ManHunter
Трудно представить современный сайт без интерактивности. И она состоит из множества мелких деталей, которые стали уже чуть ли не стандартом в web-строительстве. Одна из таких "фишек" - текстовое поле ввода, в котором по умолчанию прописана подсказка об ожидаемом содержимом, например, "введите текст для поиска". При клике на это поле текст подсказки убирается, а при уходе с него, если пользователь ничего не ввел, текст подсказки возвращается обратно. Такой способ экономит полезное место в дизайне, не загромождая его выносными подсказками, а также помогает пользователю лучше ориентироваться при заполнении различных форм. Классический вариант, который обычно используется на сайтах, выглядит примерно так:Code (HTML) : Убрать нумерацию
- <label for="search">Поиск по сайту:</label>
- <input type="text" name="search" id="search" value="что ищем?"
- onfocus="if(this.value==this.defaultValue){this.value='';}"
- onblur="if(this.value==''){this.value=this.defaultValue;}">
Читать статью целиком »
Просмотров: 17665 | Комментариев: 19
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 29,158 раз
Поблагодарили 29,158 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 400 |
 |
 |