Визитная карточка

Меня зовут Владислав и я могу быть вам полезен, если Вам нужно:
  1. сверстать сайт
  2. поправить вёрстку на уже существующем сайте
  3. написать js-скрипт
  4. проконсультировать по любому из следующих направлений: html, css, javascript
Потенциальный работодатель может связаться со мной одним из 3-x способов:
  1. по почте: smashercosmo@gmail.com
  2. по скайпу: smashercosmo
  3. по телефону: +7(921)7712731
Первые три пункта осуществляются за определенную плату, о которой мы заранее договоримся. Четвёртая услуга по большей части бесплатная (исключение составляют случаи, отнимающие слишком много времени).

SVG с прозрачным фоном в Chrome и Safari

Те из вас, кто когда-либо работал с форматом svg, знают о противном и, что самое главное, чрезвычайно старом баге, проявляющемся в webkit-браузерах. Суть бага в том, что если вставить svg-картинку с прозрачным фоном через тег object, то safari и хром зальют её белым цветом — пример.

Первое решение, которое я встречал в интернете, заключалось в определении браузера через джаваскрипт, и в замене тега object на тег img для webkit-браузеров, так как при вставке svg через img прозрачный бэкграунд отображается правильно. Второе решение сводилось к использованию inline-svg, но для этого сама страница должна быть корректным xhtml-докуметом, что очень не по нраву IE.
Совершенно случайно было найдено третье решение. Настолько элементарное, что удивительно, что никто этого ещё не попробовал (если в этом я ошибаюсь, пожалуйста сообщите мне). Достаточно в svg-файле после тега написать следующие строки:

svg {
    -webkit-background-clip: text;
}

И тут же свершается магия. Вот ссылка на рабочий пример. Спасибо, на этом всё.

P.S. Наконец-то стал первооткрывателем. Аналогичного решения в и-нете не встречается.
P.P.S В хроме начиная с 8-ой версии баг уже починен, но для сафари всё ещё актуально.

Крестик на css

Недавно на хабре спрашивали, как можно сделать крестик на css. Так вот, крестик можно сделать так.

Решение

Решение состоит в том, чтобы создать два прямоугольника и повернуть их на 45 градусов средствами css-transform. Для IE используется фильтр matrix.
.one {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    filter:progid:DXImageTransform.Microsoft.Matrix(M11='0.707', M12='0.707', M21='-0.707', M22='0.707', SizingMethod="auto expand");
}

.two {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    filter:
    progid:DXImageTransform.Microsoft.Matrix(M11='0.707', M12='0.707', M21='-0.707', M22='0.707', SizingMethod="auto expand");
    progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Фильтр matrix почему-то некорректно поворачивает div на -45 градусов, поэтому для второго прямоугольника мы сначала поворачиваем его с помощью фильтра matrix на 45 градусов, а потом разворачиваем зеркально с помощью фильтра BasicImage.

Nota Bene #1

Пора уже раз и навсегда запомнить: всё содержимое html-формы сначала пихается в div, а уже только потом в form. Если не следовать этому правилу, то IE6-7 могут повести себя очень непредсказуемо.
<form>
    <div>
        ...cодержимое формы...
    </div>
</form>

Проблема с выделением текста в поле формы у Safari и Сhrome

Иногда, при выделении текста в поле формы в браузерах Safari и Chrome, выделение загадочным образом пропадает, если мышка случайно вышла за пределы поля. Кто не верит, может протестировать.

Решение

Оказывается, данная странность возникает в том случае, если у любого родительского контейнера этого поля, включая даже тег body, стоит text-align: center.

Соответственно, решение проблемы состоит в том, чтобы обернуть input ещё одним контейнером, у которого будет выставлен text-align: left.

Однако, если среди родителей поля есть хотя бы один элемент с display: inline-block, то данное решение тут же, перестает работать.

Резюме:

1. Выделение будет пропадать
<div style="text-align: center">
    <input type="text" />
</div>

2. В этом случае выделение пропадать не будет

<div style="text-align: center">
    <div style="text-align: left">
        <input type="text" />
    </div>
</div>

3. В этом случае выделение всё равно будет пропадать
<div style="text-align: center">
    <div style="display: inline-block">
        <div style="text-align: left">
            <input type="text" />
        </div>
    </div>
</div>