CSS

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

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

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

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

 

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

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

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

 

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

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

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

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

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