Web-мастеру и не только
Полезные решения для Web-мастеров
Web-мастеру и не только - RSS-канал
Web-мастеру и не только - Карта сайта
Эффект "кругов на воде" на чистом 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>
Читать статью целиком »
Просмотров: 1304 | Комментариев: 0
Эффект блика в предзагрузке на CSS
07.09.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Эффект блика в предзагрузке на CSS
Если вы пользуетесь мобильными банковскими приложениями, приложениями маркетов и всяким подобным, наверняка видели такой эффект, когда данные еще не загрузились, а на экране уже отобразилась схематическая раскладка страницы с плейсхолдерами ее элементов. И для визуальной имитации, что приложение еще не окончательно зависло, по плейсхолдерам периодически пробегают анимированные блики. Я решил реализовать нечто подобное для web-страничек. За основу взят код из предыдущей статьи.
Читать статью целиком »
Просмотров: 933 | Комментариев: 0
Вставка изображения из буфера обмена на JavaScript
17.08.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Вставка изображения из буфера обмена на JavaScript
В интернетах популярны различные хостинги картинок, на некоторых из них есть возможность вставки изображений из буфера обмена для последующей загрузки. Это весьма интересная и полезная функция, так что мне, естественно, стало любопытно, как это делается.
Читать статью целиком »
Просмотров: 1584 | Комментариев: 1
Прогрессбар с анимированным градиентом на CSS
19.07.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Прогрессбар с анимированным градиентом на CSS
Анимированный прогрессбар очень часто используется в приложениях для мобильных устройств. Но его также можно использовать и на сайтах, когда выполняется какой-то длительный процесс и надо создать у пользователя иллюзию, что приложение не зависло и что-то происходит прямо сейчас. Для анимации обычно применяется бегущий градиентный фон. Сегодня сделаем такой градиентный прогрессбар на чистом CSS, а "оживим" его с помощью JavaScript.
Читать статью целиком »
Просмотров: 779 | Комментариев: 0
Отправка сообщений через API PROSTOR-SMS на PHP
11.07.2024 | Категория: Web-мастеру и не только | Автор: ManHunter
Отправка сообщений через API PROSTOR-SMS на PHP
При возникновении какой-либо чрезвычайной ситуации очень важно, чтобы были своевременно оповещены все ответственные лица. У нас это делается при помощи бота в Telegram, но в роли дополнительного канала используются старые добрые SMS-сообщения. В качестве шлюза для отправки SMS мы уже давно выбрали PROSTOR-SMS. Это не реклама, сервис платный и ни разу не дешевый, но мне с этой статьи ни копейки не капает.
Для взаимодействия с внешними приложениями у сервиса есть несколько интерфейсов API, в том числе REST. Готового официального кода для взаимодействия с API не было, а примеры, мягко говоря, оставляют желать лучшего. Поэтому пришлось рисовать свой вариант. Может быть пригодится кому-нибудь еще.
Читать статью целиком »
Просмотров: 680 | Комментариев: 2
Прокси для Telegram
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 38,314 раз
Поблагодарили 38,314 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 310 |
 |
 |