?

Log in

No account? Create an account

Jun. 17th, 2020

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

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

Jan. 21st, 2011

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-ой версии баг уже починен, но для сафари всё ещё актуально.
Tags: ,

Jun. 21st, 2010

Крестик на 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.
Tags:

Jun. 17th, 2010

Nota Bene #1

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

Проблема с выделением текста в поле формы у 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>