Максим Покровский

— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.



Внимание:


  • До 15 июля нахожусь в отпуске. Однако, если вы заинтересованы, чтобы работу выполнил именно я, то можете воспользоваться ссылкой справа и написать мне письмо. Я ознакомлюсь с задачей, сообщу сроки и цену и предположительное время начала работы.

Заказать мне работу
20.01

Переходим на em

Комментарии (25) CSS, HTML

Сейчас мы за одну минуту перестанем указывать размеры шрифта в пикселях и станем указывать их в em. (давно вообщем то пора)

Итак, вот такая конструкция:

html{
    font-size:100.01%;
    }
   
body{
    font-size:62.5%;
    }

font-size:100.01%; - установили шрифт стандартного размера (16px). Почему я написал 100.01%? Это из-за проблем округления в Opera и Safari. Незнаю может уже пофиксили, но я навсякий случай продолжаю так писать.

font-size:62.5%; - Что бы не мучаться с математикой устанавливаем размер шрифта в 10px. Один раз посчитали, и хватит

Как пользоваться:

Например, нам нужен размер заголовка 24px, тогда пишем так: font-size:2.4em;
т.е 24px = 2.4em. Визаульное сходство прослеживается?

На что надо обратить внимание:

EM наследуется! Поэтому добрый совет, прописывайте размер шрифта непосредсвенно тегу с текстом. Тоесть если у вас такой код:

<div id="sidebar">
   <p>текст</p>
   <p>текст</p>
   <p>текст</p>
</div>

то следует писать не #sidebar{font-size:1.2em;}, а #sidebar p{font-size:1.2em;}. Поверьте, так гораздо меньше гемора. Если же вам приходится указывать размер шрифта вложенному элементу, например:

Новинки Все новинки

, а у родителя уже указан размер, то код будет такой:

h2{
    font:normal 2.4em Arial; // 24px
    }
   
h2 a{
      font-size:0.5em; //12px
      }

Математика тут элементраная: делем желаемое, на имеемое (12px/24px=0.5em)

Сорри за сжатую форму поста, наступила зима, сессия продрала свои налитые кровью глазки и возалкала свежей крови. Аминь.

Метки:,
27.12

Семантика или как же лучше

Комментарии (28) HTML

Допустим мы имеем такую картинку

Распишем идеальную семантическую раскладку:

<div id="search-form">
   <div id="cabinet">Вы зашли как <a href="#">admin</a></div>
   
     
     
   
</div>

В данном чтобы панелька имела именно такой вид, мы подготовим три изображения. Левое закругление, правое и сам background. Левое мы назначим на #cabinet, правое на form, а bаckground …

Читать далее

24.12

6 expression для IE6

Комментарии (8) CSS, HTML

1. Эмуляция CSS-свойства content

ul li {
   margin: 0.5em 0; padding: 0 0 0 20px;
   list-style-type: none;
   behavior: expression( !this.before ? this.before = this.innerHTML = '&mdash;&nbsp;' + this.innerHTML : '' );
   text-indent: -1.24em;
   }
ul li:before { content: '\2014\a0'; }

2. Эмуляция position:fixed

body{
   background: url('/0.gif') no-repeat;
   background-attachment: fixed; /*избавляемся от дергания при вертикально прокрутки*/
   } 
#header{
    width: 100%;
    padding: 0.5em 0;
    background-color: #000;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    //position: absolute;
    top: expression(
        document.getElementsByTagName( 'body' )[0].scrollTop + "px"
    );
   }

#content{
   height:4000px;
   }
<div id="header">Эмуляция fixed</div>
<div id="content">Какой-то контент</div>

Читать далее



— Как предоплата мобилизует отоношения - так и и гибкость в отношениях позволяет зарабатывать больше
комментарий заказчика к статье http://pokrovskii.com/predoplata-i-druzya

Rambler's Top100