Web-мастеру и не только
Полезные решения для Web-мастеров
Web-мастеру и не только - RSS-канал
Web-мастеру и не только - Карта сайта
Перемешивание массива на JavaScript
20.11.2020 | Категория: Web-мастеру и не только | Автор: ManHunter
Перемешивание массива на JavaScript
Несмотря на особенности сортировки массивов в JavaScript, которые нашли отражение даже в интернет-мемах, без этой самой сортировки не обойтись. Случайное перемешивание массива - тоже своеобразный вариант сортировки. Для его реализации в этих ваших интернетах обычно рекомендуют воспользоваться следующим или каким-то подобным кодом:
Code (JavaScript) : Убрать нумерацию
- var test_array=[1,2,3,4,5,6,7,8,9,10];
- test_array.sort(
- function() { return (Math.random()-0.5); }
- );
- // test_array -> перемешанный массив
Читать статью целиком »
Просмотров: 156 | Комментариев: 1
Эффект покачивания изображения при наведении мыши
24.08.2020 | Категория: Web-мастеру и не только | Автор: ManHunter
Эффект покачивания изображения при наведении мыши
Красивый эффект для оформления сайтов на случай какой-нибудь акции или распродажи. При наведении курсора мышки на бейджик, он начинает покачиваться. Никаких скриптов, вся анимация реализована исключительно средствами CSS.
Читать статью целиком »
Просмотров: 423 | Комментариев: 0
Центрирование элементов на странице средствами CSS
06.05.2020 | Категория: Web-мастеру и не только | Автор: ManHunter
За всю историю развития верстки и Web-дизайна, было придумано немало способов размещения блока точно по центру внутри другого блока. Какие-то лучше, какие-то хуже, какие-то даже получались более-менее кроссбраузерными. Технологии на месте не стоят, поэтому правильный, красивый и современный вариант такого позиционирования достигается комбинацией свойств CSS top, left, right и transform.Поддержка браузерами свойства transform достаточно хорошая, по крайней мере эту технологию поддерживают все современные декстопные и мобильные браузеры на всех платформах. Для совместимости с некоторыми устаревшими версиями браузеров при описании свойства надо будет дополнительно использовать специфические браузерные префиксы.
Контейнер, относительно которого должны быть спозиционированы вложенные блоки.
Code (HTML) : Убрать нумерацию
- .container {
- position: relative;
- }
Читать статью целиком »
Просмотров: 248 | Комментариев: 1
Отслеживание изменений в DOM через Mutation Events и MutationObserver
04.03.2020 | Категория: Web-мастеру и не только | Автор: ManHunter
Отслеживание изменений в DOM через Mutation Events и MutationObserver
Время статичных web-страниц уже давно прошло, теперь немалая часть контента подгружается динамически уже после загрузки основной страницы. Соответственно, эти данные недоступны для скриптов, отслеживающих загрузку через события типа onload или DOMContentLoaded. Может возникнуть вопрос: а зачем вообще это отслеживать? Ну, например, чтобы при помощи браузерных расширений и пользовательских скриптов удалять со страниц динамически подгружаемую рекламу, которую другими способами не заблокировать. К счастью, для отслеживания любых изменений, вносимых в структуру DOM, есть как минимум два инструмента. Речь идет о событиях Mutation Events и интерфейсе MutationObserver.
Читать статью целиком »
Просмотров: 638 | Комментариев: 2
Плавное появление надписи при наведении на картинку
21.12.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Красивый эффект на чистом CSS, который будет хорошо смотреться в какой-нибудь web-галерее. При наведении курсора на картинку, поверх нее плавно выезжает название и описание, причем отдельными независимыми блоками. Начнем с таблицы стилей.Code (HTML) : Убрать нумерацию
- <style type="text/css">
- .cool_img {
- display: inline-block;
- position: relative;
- text-align: center;
- overflow: hidden;
- border-radius: 5px;
- }
- .cool_img .info {
- position: absolute;
- bottom: 0;
- }
- .cool_img .info span {
- display: block;
- position: relative;
- top: 130px;
- color: #FFFFFF;
- background: #000000;
- transition-delay: 0;
- transition-duration: 0.3s;
- }
- .cool_img .info .info_title {
- font-size: 18px;
- font-weight: bold;
- padding: 5px;
- border-radius: 5px 5px 0 0;
- opacity: 0.8;
- }
- .cool_img .info .info_text {
- font-size: 12px;
- padding: 10px;
- opacity: 0.6;
- }
- .cool_img:hover .info span, .cool_img:focus .info span {
- top: 0;
- }
- .cool_img:hover .info .info_title {
- transition-delay: 0.15s;
- }
- .cool_img:hover .info .info_text {
- transition-delay: 0.25s;
- }
- </style>
Читать статью целиком »
Просмотров: 1015 | Комментариев: 0
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 27,485 раз
Поблагодарили 27,485 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 400 |
 |
 |