Web-мастеру и не только
Полезные решения для Web-мастеров
Web-мастеру и не только - RSS-канал
Web-мастеру и не только - Карта сайта
Обработка системных цветов на JavaScript
02.12.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Обработка системных цветов на JavaScript
Еще со времен CSS2 появилась возможность использовать в качестве стиля цвета так называемые системные цвета, то есть значения из текущей цветовой схемы пользователя. Таким образом можно оформлять свои web-приложения, чтобы они не выбивались из привычной пользователю цветовой гаммы.
Читать статью целиком »
Просмотров: 119 | Комментариев: 0
Прокрутка страницы к определенному элементу
24.10.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Прокрутка страницы к определенному элементу
Функция плавной прокрутки страницы до определенного элемента в настоящее время одна из обязательных составляющих web-приложений и сайтов. Для ее реализации в современных браузерах есть специальный метод scrollIntoView(). С его помощью можно автоматически прокрутить страницу таким образом, чтобы нужный элемент попал в область видимости.
Читать статью целиком »
Просмотров: 51 | Комментариев: 0
Создание и скачивание файлов в браузере на JavaScript
01.10.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Сохранять изображения из браузера мы уже научились, теперь разберем более общий пример, когда надо создать виртуальный файл и отправить его на скачивание. Современными средствами JavaScript можно "на лету" создавать ZIP-архивы, PDF-файлы и даже некоторые форматы офисных документов. Подобное управление файлами посредством JavaScript на стороне клиента значительно повышает удобство работы, так как все манипуляции выполняются без необходимости поддерживать связь с сервером.Code (JavaScript) : Убрать нумерацию
- function virtual_download (data, file_name, mime_type) {
- // Создать элемент Blob
- var blob=new Blob([data], { type: mime_type });
- var url=window.URL.createObjectURL(blob);
- // Создать элемент ссылки
- var link=document.createElement('a');
- link.href=url;
- link.download=file_name;
- // Добавить элемент в DOM
- document.body.appendChild(link);
- // Эмуляция клика на ссылке
- link.click();
- // Убрать элемент из DOM
- document.body.removeChild(link);
- // Очистить объект Blob
- setTimeout(function() {
- window.URL.revokeObjectURL(url)
- }, 1000);
- }
Читать статью целиком »
Просмотров: 645 | Комментариев: 3
Эффект "кругов на воде" на чистом CSS
25.09.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Мне определенно нравятся анимированные эффекты, которые можно сделать вообще без скриптов, используя только чистый CSS. Сегодня это будет эффект расходящихся кругов на воде. С его помощью можно сделать акцент на каком-нибудь элементе страницы, визуально выделить информационный блок или другую область.Начинаем с описания модели анимации и создания соответствующей таблицы стилей. Модель будет следующая. В контейнере заданного размера будут размещаться абсолютно позиционированные блоки с "кругами на воде" в нужном количестве и нужных цветов.
Code: Убрать нумерацию
- <style type="text/css">
- .water {
- position: relative;
- display: inline-block;
- }
- .ripple1, .ripple2, .ripple3, .ripple4 {
- position: absolute;
- border-radius: 20px;
- left: -20px;
- right: -20px;
- top: -20px;
- bottom: -20px;
- opacity: 0;
- animation: water 4s linear infinite;
- }
- .ripple1 {
- border: 2px solid #909090;
- animation-delay: 0s;
- }
- .ripple2 {
- border: 2px solid #FF0000;
- animation-delay: 1s;
- }
- .ripple3 {
- border: 2px solid #0000FF;
- animation-delay: 2s;
- }
- .ripple4 {
- border: 2px solid #00FF00;
- animation-delay: 3s;
- }
- @keyframes water {
- 0% {
- transform: scale(0.6);
- opacity: 0;
- }
- 33% {
- transform: scale(0.8);
- opacity: 0.8;
- }
- 66% {
- transform: scale(1);
- opacity: 1;
- }
- 100% {
- transform: scale(1.2);
- opacity: 0;
- }
- }
- </style>
Читать статью целиком »
Просмотров: 354 | Комментариев: 0
Эффект блика в предзагрузке на CSS
07.09.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Эффект блика в предзагрузке на CSS
Если вы пользуетесь мобильными банковскими приложениями, приложениями маркетов и всяким подобным, наверняка видели такой эффект, когда данные еще не загрузились, а на экране уже отобразилась схематическая раскладка страницы с плейсхолдерами ее элементов. И для визуальной имитации, что приложение еще не окончательно зависло, по плейсхолдерам периодически пробегают анимированные блики. Я решил реализовать нечто подобное для web-страничек. За основу взят код из предыдущей статьи.
Читать статью целиком »
Просмотров: 282 | Комментариев: 0
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 35,698 раз
Поблагодарили 35,698 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |