Blog. Just Blog

Web-мастеру и не только

Полезные решения для Web-мастеров
Web-мастеру и не только - RSS-канал Web-мастеру и не только - Карта сайта

Почему символ PHP - слон?

27.03.2019 | Категория: Web-мастеру и не только | Автор: ManHunter

Почему символ PHP - слон?

Если вы читаете околокомпьютерные сайты и блоги, то наверняка обращали внимание, что статьи о языке программирования PHP часто сопровождаются картинками в виде симпатичного слона синего цвета с надписью "PHP" на боку. Что это за слон и откуда он взялся?

Читать статью целиком »
Просмотров: 4711 | Комментариев: 8

Текст с наложением тени с помощью CSS

14.03.2019 | Категория: Web-мастеру и не только | Автор: ManHunter

Текст с наложением тени с помощью CSS

Симпатичный эффект на чистом CSS для создания красивых заголовков. Буквы с тенью накладываются друг на друга с небольшим смещением. В зависимости от шрифта смещение letter-spacing придется подрегулировать.
Code (HTML) : Убрать нумерацию
  1. <style type="text/css">
  2. .header div {
  3.     display: inline-block;
  4.     font-family: Georgia;
  5.     font-size: 72px;
  6.     font-weight: bold;
  7.     color: #FFFFFF;
  8.     letter-spacing: -12px;
  9.     text-shadow: -3px 0px 5px #000000;
  10. }
  11. </style>
Верстка получается немного громоздкой, так как каждую букву текста приходится оборачивать в отдельный тег.
Code (HTML) : Убрать нумерацию
  1. <div class="header">
  2.     <div>C</div>
  3.     <div>S</div>
  4.     <div>S</div>
  5.     <div>&nbsp;&nbsp;&nbsp;</div>
  6.     <div>i</div>
  7.     <div>s</div>
  8.     <div>&nbsp;&nbsp;&nbsp;</div>
  9.     <div>A</div>
  10.     <div>w</div>
  11.     <div>e</div>
  12.     <div>s</div>
  13.     <div>o</div>
  14.     <div>m</div>
  15.     <div>e</div>
  16. </div>
Готовый пример вы можете посмотреть на демонстрационной странице.

Просмотров: 882 | Комментариев: 2

Генерация случайных значений на PHP с заданной вероятностью

11.01.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Понадобилась функция, которая возвращает случайный элемент из определенного набора. Вроде бы простейшее решение в одну строчку. Но особенность задачи такова, что элементы должны появляться не просто случайно, а с определенной вероятностью: какие-то чаще, какие-то реже. То есть у каждого значения имеется весовой коэффициент, влияющий на частоту его появления. Например:
Code (PHP) : Убрать нумерацию
  1. // Массив значений и весовых коэффициентов
  2. $data=array(
  3.     'купить'=>50,
  4.     'заказать'=>5,
  5.     'приобрести'=>30,
  6. );
Для такого набора данных чаще всего должно появляться слово "купить", чуть реже "приобрести" и в очень редких случаях может проскакивать вариант "заказать". Готовая функция получилась следующей:
Code (PHP) : Убрать нумерацию
  1. //-------------------------------------------------------------
  2. // Получение случайного значения с заданной вероятностью
  3. //-------------------------------------------------------------
  4. function smart_rand($data) {
  5.     // Пустой массив не обрабатываем
  6.     if (count($data)==0) { return false; }
  7.  
  8.     // Отсортировать массив с сохранением ключей
  9.     arsort($data);
  10.  
  11.     // Сформировать массив с интервалами
  12.     $max_rand=0;
  13.     $weights=array();
  14.     foreach ($data as $key=>$value) {
  15.         $max_rand+=$value;
  16.         $weights[$max_rand]=$key;
  17.     }
  18.  
  19.     // Случайное число от 0 до суммы всех весовых коэффициентов
  20.     $rand=mt_rand(0,$max_rand);
  21.  
  22.     // Найти интервал, в который попадает случайное число
  23.     foreach ($weights as $key=>$value) {
  24.         if ($rand<=$key) {
  25.             break;
  26.         }
  27.     }
  28.     return $value;
  29. }
На входе передается массив значений с весовыми коэффициентами, на выходе одно из значений. Пример использования:
Code (PHP) : Убрать нумерацию
  1. // Вывести 100 вариантов написания
  2. for($i=0; $i<100; $i++) {
  3.     echo smart_rand($data).' ';
  4. }
Числовые значения весовых коэффициентов могут быть любыми и следовать в произвольном порядке, их количество также ничем не ограничено.

Просмотров: 949 | Комментариев: 1

Как увеличить размер checkbox и radio на CSS

22.12.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
На своей практике я неоднократно сталкивался с тем, что дизайнеры web-сайтов бывают очень далеки от реалий жизни. В результате чего при верстке приходится прилагать немалые усилия, чтобы готовый сайт получился максимально похожим на нарисованный макет. Постоянные читатели блога наверняка читали, как можно разукрасить элементы выбора файлов. Сегодня речь пойдет о чекбоксах и радиокнопках, точнее об их нестандартной стилизации. Много лет назад я уже выкладывал нечто подобное, но там размер чекбокса оставался неизменным, да и решение получилось не самое удачное. Сейчас задача заключается в том, чтобы увеличить кликабельную часть checkbox или radio, и решать я ее буду с помощью современных инструментов, а именно на чистом CSS. Заодно проведу работу над ошибками и сделаю стилизацию элементов так, как должно быть.

Начнем с изменения размера. Вариант с изменением атрибутов width или height отпадает сразу, элементы checkbox или radio это игнорируют или же размер поменяется лишь в некоторых версиях каких-то браузеров. Чуть более продвинутый вариант - это увеличение элемента за счет масштабирования. Например:
Code (HTML) : Убрать нумерацию
  1. <label>
  2.     <input type="checkbox" style="transform:scale(3.0);" /> Option
  3. </label>
Но и это не решение. Хорошо справляется с масштабированием только движок WebKit и браузеры на его основе (Chrome и т.п.), а также последние версии Internet Explorer. Браузеры на базе Mozilla тупо растягивают стандартный чекбокс или кругляш, в результате получается просто вырвиглазный ужас. Но даже если такой фокус удастся, при изменении масштаба все равно придется шаманить с положением модифицированного элемента на странице. Не говоря уже о том, что старые браузеры вообще не поддерживают атрибут transform.

Читать статью целиком »
Просмотров: 5964 | Комментариев: 2

Сортировка строк HTML-таблицы на JavaScript

05.12.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Понадобился скрипт для сортировки строчек HTML-таблицы в зависимости от значений столбцов. В этих ваших интернетах есть немало готовых решений, но, как часто случается на моей работе, постановка задачи включает в себя кучу дополнительных условий. Например, в ячейке таблицы может быть не просто текст, а несколько HTML-тегов, сортируемое значение может быть отформатировано особым образом или к нему могут быть дописаны какие-нибудь дополнительные данные, а то и вовсе отображаемое текстовое значение в ячейке соответствует какому-то внутреннему индексу в системе и сортировать надо именно по этому индексу. Короче, отображаемое содержимое ячеек таблицы не влияет на ожидаемый порядок их сортировки.

Разнобой со значениями, влияющими на сортировку, решается добавлением к каждой строке таблицы набора data-атрибутов, введенных в HTML5. Вкратце, чтобы не грузить вас теорией, data-атрибуты позволяют хранить нужную вам дополнительную информацию в стандартных элементах HTML без применения хаков вроде нестандартных атрибутов, лишних DOM-свойств и т.п. Например:
Code (HTML) : Убрать нумерацию
  1. <tr data-price="10" data-ident="4" data-area="32" data-dev="СуперСтрой">
  2.     <td>менее 10 млн.</td>
  3.     <td>без отделки</td>
  4.     <td>32 м<sup>2</sup></td>
  5.     <td>ООО СуперСтрой</td>
  6. </tr>
  7. <tr data-price="50" data-ident="3" data-area="62.7" data-dev="ПИК">
  8.     <td>50.000.000</td>
  9.     <td>черновая</td>
  10.     <td>62.7 м<sup>2</sup></td>
  11.     <td>ГК "ПИК"</td>
  12. </tr>
Как вы видите, содержимое в data-атрибутах отличается от содержимого ячеек, это как раз те значения, по которым должна выполняться сортировка. Если какой-либо атрибут не указан, то такие строчки будут просто перенесены в начало таблицы.

Читать статью целиком »
Просмотров: 2686 | Комментариев: 7

prev 01 02 03 04 05 06 07 08 09 ... 35 next
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (19), AJAX (5), Assembler (251), COM (17), CSS (38), Exif (14), FASM (7), Firefox (7), HDD (9), Hello Teddy (9), HTML (45), iconBIT (4), JavaScript (61), MySQL (11), Nikon (19), PDF (8), PHP (93), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), Windows 7 (63), аккумуляторы (22), аксессуары (11), анализаторы файлов (8), архиваторы (5), аттракционы (6), безопасность (50), браузеры (16), бытовая техника (8), варенье (15), ВВЦ (9), ВДНХ (8), видео (20), Воробьевы горы (4), вторые блюда (96), выпечка (18), выставки (100), генератор ПСЧ (6), графика (85), десерты (27), Египет (7), заготовки на зиму (35), закуска (17), закуска к пиву (21), зарядные устройства (22), защита (15), зоопарки (9), игры (30), иконки (18), интерфейс (21), исследование защиты (242), каша (4), клавиатура (7), Коломенское (35), консоль (5), концерты (52), Кузьминки (4), куклы (25), ледяные скульптуры (6), мои программы (62), мониторы (6), музеи (63), мультимедиа (40), мясо (41), напитки (11), ноутбуки (6), обфускация (6), окна (63), оформление сайта (45), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (104), полезные функции (34), прохождения (4), процессы (20), птица (16), путешествия (24), распаковка (12), реверсинг (45), рыба (30), салаты (16), сброс триала (4), сеть (27), система (153), Сокольники (8), соусы (4), супы (12), телефоны (7), Тунис (6), файлы справки (6), фаст-фуд (14), фестиваль цветов (5), флешки (5), фото (23), хеши (15), числа (8), юмор (12), яйца (16)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 28,574 раза
<< 2021 - ИЮНЬ >>
Пн Вт Ср Чт Пт Сб Вс
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30        
Международный день прогулки
Всемирный день жонглирования
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 410
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2021
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.08 сек. / MySQL: 2 (0.0016 сек.) / Память: 4.75 Mb
Наверх