CSS

CSS Удобная блочная модель с box-sizing: border-box

Эта заметка — вольный перевод статьи Пола Айриша * { box-sizing: border-box } FTW.

Неудобная и нелюбимая многими особенность CSS — это связь width и padding в блочной модели. Потому что эта самая особенность заставляет нас при верстке высчитывать и подгонять значение ширины блока (width), с учетом отступов внутри него (padding). Ведь если нам нужно сверстать блок шириной 200 пикселей с отступом внутри него в 20 пикселей со всех сторон, то нужно подгонять css-свойства так, чтобы width был равен 160px, а padding: 20px.

Читать дальше →

 

Веб-разработка PhoneGap, или нативное приложение для Android на HTML, CSS и Javascript

Не так давно я стал обладателем мобильного устройства на Android. Как разработчика программного обеспечения меня сразу же заинтересовала возможность написания мобильных приложений для подобного устройства. Как известно, нативные приложения для Android пишутся на Java с использованием Android SDK от Google. Но также существует возможность создавать мобильные версии веб-приложений на HTML, CSS и JavaScript, и такие веб-приложения будут доступны лишь через браузер и не будут иметь возможность доступа к таким возможностям мобильных устройств как геолокация, акселерометр, камера, доступ к файлам и другим. Но признайтесь, было бы неплохо, если бы нативное мобильное приложение можно было написать на JavaScript…

Читать дальше →

 

CSS Фиксированное позиционирование блоков без использования position:fixed

Очень часто приходится верстать макеты, в которых попадаются элементы, которые нужно зафиксировать на одном месте при прокрутке основного контента страницы. Обычно для верстки таких блоков применяется css-свойство position:fixed. Однако часть браузеров до сих пор не поддерживает это css-свойство. И здесь речь идет не только о Internet Explorer 6, но и о Mobile Safari, который также не поддерживает position:fixed на операционных системах iOS до версии 5. А так как некоторые макеты сайтов должны безукоризненно отображаться на iPhone и iPad, то можно воспользоваться небольшим трюком в CSS, который позволит сделать такие фиксированные блоки, но без использования свойства position:fixed.

Читать дальше →

 

JavaScript Вращение псевдотрехмерных цилиндрических объектов с помощью CSS и JavaScript

Как-то давно я прочитал занятную статью Романа Кортеса (Roman Cortes) об интересном эффекте, которого можно добиться используя старое-доброе css-свойство background-attachment:fixed. Основная суть этого занятного эффекта в разбиении видимой поверхности цилиндрического объекта на множество вертикальных прямоугольников и задании им фоновой картинки с background-attachment:fixed. Далее достаточно проскроллить блок с таким образом сформированным объектом и поразиться тому, что с помощью простого CSS можно добиться такого эффекта вращения цилиндрического объекта. Но в упомянутой выше статье вертикальные блоки для видимой части цилиндра, а также их настройки (в частности background-position) были подобраны вручную. Я решил написать простенький javascript-код, которой позволит собирать подобную цилиндрическую поверхность из любой прямоугольной текстуры.

Читать дальше →

 

CSS Текст со штриховкой или -webkit-mask приходит на помощь

На этой неделе передо мной встала задача по верстке макета, в который дизайнеры заботливо поместили текст со штриховкой. Фрагмент этого макета вы можете видеть на картинке чуть ниже по тексту. Сверстать макет необходимо было под iPad, а это значит, что в достижении поставленной задачи можно использовать всю мощь движка Webkit, который лежит в основе браузера Mobile Safari в iPad.

Текст со штриховкой или -webkit-mask

Беглый осмотр списка всех возможных css-свойств привел к тому, что было найдено свойство -webkit-mask, которое, в итоге, и помогло в этой затруднительной ситуации.

Читать дальше →

12