Модератор форума: Yuri_G |
Сообщество uCoz » Вебмастеру » Общие вопросы от вебмастеров » Отображение элементов сайта на разных страницах (<head>.../<head>) |
Отображение элементов сайта на разных страницах |
Sentimo, Так не получилось,у меня чуть по другому ПОЛУЧИЛОСЬ
ЦитатаЧтобы сделать любой элемент прозрачным ему нужно присвоить свойства прозрачности для всех браузеров. Прозрачность измеряется в %, то есть 100% = 1 = полностью видимый, 50% = 0.5 = «наполовину» прозрачный. В коде ниже прозрачный элемент имеет class=»prozrachni» .prozrachni { filter:alpha(opacity=50); opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5} Чтобы при наведении мышки этот же элемент стал видимым нужно добавить свойства :hover и :focus с прозрачностью = 100% = 1 .prozrachni:hover, .prozrachni:focus { filter:alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0; -khtml-opacity: 1.0} И на странице: <div class="prozrachni">Яндекс.Метрика</div> Добавлено (17 Мар 2015, 10:41:59) Кнопки с подсказками CSS Украсить сайт или блог можно добавлением как всяких красивых рюшечек, прозрачностей и теней так и заменой банального tooltip на свой. Стилизовать подсказку к кнопке или ссылке можно любыми свойствами css, а вызов подписи осуществлять с помощью jquery. Обычная ссылка выглядит следующим образом: Код <a href="#" class="function button" title="КНОПКА">это ссылка</a> Для преображения ссылки визуально в кнопку с подписью используем следующий пример разметки: Код <nav> <a href="#" class="button"> Текст кнопки <span class="command"> <span class="screen-reader-text">Подпись кнопки</span> </span> </a> </nav> И добавим стили: Код .button { position: relative } /* положение кнопки */ .command { position: absolute; opacity: 0 } /* положение подписи относительно кнопки и скрытие ее по-умолчанию */ .command { transition: opacity 0.2s 0 ease } /* моментальное скрытие подписи если мышь не над кнопкой */ .button:hover .command { transition: opacity 0.2s 1s ease } /* Если мышь над кнопкой подпись медленно появляется */ nav.immediate .command { transition-delay: 0s !important } nav.out .command { transition-delay: 1s !important } Чтобы не перенагружать всякими дубликатами с разными именами можно использовать JQuery для присвоения всем кнопкам внутри блока одинаковых свойств и задержек. Код $("nav").hover(function() { var nav = $(this).removeClass("out"); /* Мышь над кнопкой убираем класс out и добавляем класс immediate */ setTimeout(function() { nav.addClass("immediate"); }, 1000); }, function() { $(this) .addClass("out") .removeClass("immediate"); /* Мышь сходит с кнопки убираем класс immediate и добавляем класс out */ }); Добавлено (17 Мар 2015, 16:58:33) Эта фишка для поисковиков! Код <meta name="revisit" content="7 days"> <meta name="revisit-after" content="7 days"> Как вы считаете оно полезное? Сайт всей моей жизни slouga.at.ua
|
Цитата Как вы считаете оно полезное? |
Можно ли фону (картинке) задать функцию, чтоб на разном мониторе было разное отоброженеие. Тоесть на широкофрматном была картинка а вот на обычном этого фона уже небыло!
Добавлено (20 Мар 2015, 11:04:37) Сайт всей моей жизни slouga.at.ua
|
Можно ли фону (картинке) задать функцию, чтоб на разном мониторе было разное отоброженеие. Тоесть на широкофрматном была картинка а вот на обычном этого фона уже небыло! Это будет "не идеальное" решение из-за того, что все браузеры по размноу воспринимают некоторые "команды". Если очень нужно, можно с помощью JS определять ширину страницы в браузере и в зависимости от полученных данных отображать/скрывать изображение. Учитесь читать, читая - вчитывайтесь, вчитываясь - вдумывайтесь, вдумываясь - понимайте, поняв - делайте. ©
|
Inkvizitor, Хмм....а вот сделать сайт на весь экран, тоесть резиновый. Подскажи!
Добавлено (22 Мар 2015, 10:30:57) Сайт всей моей жизни slouga.at.ua
|
| |||