Blog. Just Blog

Быстрый поиск

Введите фрагмент названия статьи для поиска

Таблица с колонками одинаковой ширины

29.04.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Периодически возникающая задача на верстку: нужна таблица с колонками одинаковой ширины, при этом ни количество колонок, ни их содержимое заранее неизвестно. Решается эта задача всего двумя правилами CSS:
Code: Убрать нумерацию
  1. .equal_table {
  2.     table-layout: fixed;
  3. }
  4. .equal_table td {
  5.     width:100%;
  6. }
Класс применяется к таблице, у которой надо сделать колонки одинаковой ширины, больше никаких действий не требуется.
Code (HTML) : Убрать нумерацию
  1. <table class="equal_table" style="width:600px;">
  2. <tr>
  3.     <td>первая</td>
  4.     <td>вторая</td>
  5.     <td>третья</td>
  6.     <td>а в этой колонке будет очень длинный текст</td>
  7. </tr>
  8. </table>
Готовый пример можете посмотреть на демонстрационной страничке.

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

CSS: перечеркнутый по диагонали текст

10.04.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Ранее я уже выкладывал статью о том, как можно сделать текст, перечеркнутый линией другого цвета. Там линия была строго горизонтально. Сегодня будет похожая задача, но только зачеркивающая линия будет проходить по диагонали.

Этот способ основан на применении абсолютно спозиционированного псевдоэлемента ::before, с помощью которого на текст накладывается цветная линия. Текстовое содержимое псевдоэлемента пустое, но при этом он растянут по всей ширине родительского элемента и смещен относительно его базовой линии.
Code: Убрать нумерацию
  1. .striked {
  2.     position: relative;
  3. }
  4.  
  5. .striked:before {
  6.     position: absolute;
  7.     width: 100%;
  8.     height: 50%;
  9.     content: '';
  10.     border-bottom: 4px solid #FF0000;
  11.     pointer-events: none;
  12. }
Угол и направление наклона линии регулируется дополнительными стилями:
Code: Убрать нумерацию
  1. .up::before {
  2.     transform: rotate(-5deg);
  3. }
  4. .down::before {
  5.     transform: rotate(5deg);
  6. }
В коде HTML-страницы это выглядит примерно так:
Code (HTML) : Убрать нумерацию
  1.     <div><span class="striked up">Исправленному</span> верить.</div>
  2.     <div><span class="striked down">Исправленному</span> верить.</div>
Верстка абсолютно валидная, стили стандартные, поддерживаются всеми современными браузерами. В зависимости от места применения, вы можете отрегулировать цвет и толщину линии, а также угол ее наклона. Обратите внимание, что если применять этот эффект к многострочному тексту с переносами, то перечеркнутой окажется только первая строчка. Готовый пример вы можете посмотреть на демонстрационной странице.

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

3D текст с помощью CSS

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

3D текст с помощью CSS

Небольшой трюк, как можно оформить любой элемент сайта в виде "трехмерного" текста совсем без графики, с помощью одного только CSS. Такое оформление будет хорошо смотреться на крупных надписях, например, на заголовках.

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

Символ рубля без использования шрифтов

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

Символ рубля без использования шрифтов

Небольшой трюк, как можно нарисовать символ рубля без использования юникода и внешних шрифтов, средствами одного только CSS. Кроме того, даже с отключенными стилями цена будет отображаться просто с буквой "Р", что тоже, в принципе, допустимо.
Code (HTML) : Убрать нумерацию
  1. <div class="price">Цена: 20,100,999 <span class="rub">Р</span></div>
Блок с ценой обернут в элемент DIV, а символ рубля находится внутри строчного элемента SPAN. Обратите внимание, что в тексте страницы символ записан обычной буквой "Р", а горизонтальная палочка выполнена в виде символа "узкое тире" и добавляется к нему в CSS при помощи псевдоэлемента ::before.
Code (HTML) : Убрать нумерацию
  1. <style type="text/css">
  2. .price {
  3.     font-family: Verdana;
  4.     font-size: 24px;
  5. }
  6.  
  7. .rub {
  8.     position: relative;
  9.     color: #FF0000;
  10. }
  11. .rub::before {
  12.     content: '–';
  13.     position: absolute;
  14.     bottom: -4px;
  15.     left: -2px;
  16. }
  17. </style>
Способ кроссбраузерный, работает как на стационарных, так и на мобильных платформах. При использовании разных размеров шрифтов скорее всего понадобятся корректировки смещений палочки по горизонтали и вертикали, это вы можете легко сделать самостоятельно. Готовый результат можно посмотреть на демонстрационной страничке.

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

Как отследить потерю фокуса вкладки в браузере

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

Как отследить потерю фокуса вкладки в браузере

В современных браузерах есть очень полезный инструмент - Page Visibility API. Он позволяет узнать, когда вкладка с веб-страницей видна пользователю, а когда пользователь находится на другой странице. Через Page Visibility API можно установить обработчик для реагирования на изменение состояния видимости. Для чего это надо? Например, если сайт открыт на мобильных устройствах, то при переходе на другую вкладку есть смысл отключить ненужные сетевые запросы, всякие спецэффекты, динамическое обновление контента и прочие ресурсоемкие операции. В веб-приложениях, например, можно сделать автоматическое сохранение незаполненной формы при переходе на другую вкладку. На моем сайте при потере фокуса вкладки активируется опция "камуфляж".

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

01 02 03 04 05 06 07 08 09 10 11
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Я в Telegram
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (35), AJAX (5), Assembler (381), COM (44), CSS (46), Exif (15), FASM (9), Firefox (7), HDD (17), Hello Teddy (10), HTML (56), iconBIT (4), JavaScript (82), MySQL (13), Nikon (19), PDF (10), PHP (128), Samsung (6), SEO (12), Sublime Text (9), Telegram (5), TintonLife (4), UGREEN (4), Windows 7 (68), аккумуляторы (24), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (34), варенье (22), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (138), выпечка (31), выставки (125), генератор ПСЧ (10), графика (123), десерты (31), Египет (9), заготовки на зиму (47), закуска (23), закуска к пиву (26), зарядные устройства (25), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (335), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (28), ледяные скульптуры (6), мои программы (70), мониторы (6), музеи (82), мультимедиа (85), мясо (66), напитки (14), ноутбуки (8), обфускация (7), окна (71), оформление сайта (53), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (140), полезные функции (49), прохождения (4), процессы (25), птица (28), путешествия (26), распаковка (22), реверсинг (53), регулярные выражения (5), рыба (35), салаты (19), сброс триала (4), сеть (40), система (182), Сокольники (8), соусы (16), супы (15), телефоны (10), Тунис (6), умный дом (28), файлы справки (7), фаст-фуд (19), фестиваль цветов (5), флешки (6), фото (23), хеши (21), числа (8), юмор (12), яйца (21), Яндекс (24)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 37,599 раз
<< 2025 - ДЕКАБРЬ >>
Пн Вт Ср Чт Пт Сб Вс
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 31        
Международный день танго
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 340
Сейчас я слушаю
---
Имя:

Сообщение:

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

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