Blog. Just Blog

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

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

Прячем IP-адрес сервера в ссылке

26.06.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Все мы давно привыкли, что IP-адрес записывается при помощи 4 октетов, разделенных точками. Я имею в виду IPv4. Но по стандарту протокол TCP/IP также поддерживает адресацию, когда IP-адрес задан единым числом. Это число получается из октетов IP-адреса по определенной формуле. К примеру, IP-адрес главной страницы поисковика Google 64.233.165.94. Разобьем его на октеты и преобразуем в число:

(64<<24) + (233<<16) + (165<<8) + 94 = 1089054046
или более наглядный вариант:

(64*256*256*256) + (233*256*256) + (165*256) + 94 = 1089054046
В PHP такое преобразование делается вообще одной командой ip2long. Теперь подставляем найденное значение в ссылку вместо IP-адреса: закодированная ссылка на Google. Современные браузеры распознают такие подмены и при наведении курсора на ссылку показывают корректный IP-адрес, но можете посмотреть в исходном коде страницы и убедиться, что вместо IP-адреса там действительно стоит число. При клике по этой ссылке открывается главная страница поисковика. По таким ссылкам можно загружать файлы, открывать сайты, пересылать данные, делать все то же самое, что и с обычными адресами. Единственное условие, чтобы целевой ресурс однозначно сопоставлялся с конкретным IP-адресом.

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

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

29.04.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Периодически возникающая задача на верстку: нужна таблица с колонками одинаковой ширины, при этом ни количество колонок, ни их содержимое заранее неизвестно. Решается эта задача всего двумя правилами CSS:
  1. .equal_table {
  2.     table-layoutfixed;
  3. }
  4. .equal_table td {
  5.     width:100%;
  6. }
Класс применяется к таблице, у которой надо сделать колонки одинаковой ширины, больше никаких действий не требуется.
  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>
Готовый пример можете посмотреть на демонстрационной страничке.

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

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

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

Этот способ основан на применении абсолютно спозиционированного псевдоэлемента ::before, с помощью которого на текст накладывается цветная линия. Текстовое содержимое псевдоэлемента пустое, но при этом он растянут по всей ширине родительского элемента и смещен относительно его базовой линии.
  1. .striked {
  2.     positionrelative;
  3. }
  4.  
  5. .striked:before {
  6.     positionabsolute;
  7.     width100%;
  8.     height50%;
  9.     content'';
  10.     border-bottom4px solid #FF0000;
  11.     pointer-eventsnone;
  12. }
Угол и направление наклона линии регулируется дополнительными стилями:
  1. .up::before {
  2.     transformrotate(-5deg);
  3. }
  4. .down::before {
  5.     transformrotate(5deg);
  6. }
В коде HTML-страницы это выглядит примерно так:
  1.     <div><span class="striked up">Исправленному</spanверить.</div>
  2.     <div><span class="striked down">Исправленному</spanверить.</div>
Верстка абсолютно валидная, стили стандартные, поддерживаются всеми современными браузерами. В зависимости от места применения, вы можете отрегулировать цвет и толщину линии, а также угол ее наклона. Обратите внимание, что если применять этот эффект к многострочному тексту с переносами, то перечеркнутой окажется только первая строчка. Готовый пример вы можете посмотреть на демонстрационной странице.

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

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

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

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

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

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

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

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

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

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

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

prev 01 02 03 04 05 06 07 next
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2018
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.11 сек. / MySQL: 3 (0.0387 сек.) / Память: 4.75 Mb
Наверх