Каскадные Таблицы Стилей

индекс

322,31

Захабренные

Новые

Отхабренные

Изменение ширины элемента с «шагом» в несколько пикселей из песочницы

Заранее оговорюсь, что чистым CSS здесь, к сожалению, обойтись не получится: Firefox и IE8+ слишком точно (да-да, в данном случае это плохо) производят вычисления ширины блоков. Однако для этих браузеров дописывается нехитрый скриптик в пару строк, если таки надо достичь идеала, хоть это и портит всю прелесть. Для тех, кому лень читать всё, ссылка на окончательный вариант: jsfiddle.net/XeFTr/11/

В чем суть?

Суть в том, что иногда необходимо отобразить на странице резиновый блок с несколькими дочерними элементами, причем потомок должен быть либо виден целиком, либо не виден вообще. Самый простой пример — лента каких-нибудь картинок с прокруткой и стрелочками по бокам. Очень некрасиво смотрится выглядывающее из-под «overflow: hidden» изображение, обрезаннное сбоку. Выход — заставить ширину обёртки всегда быть кратной скольки-то пикселям. Разумеется, если ширина потомков разнится от элемента к элементу, то этот способ не имеет смысла.

Как это работает?

Принцип работы заключается в том, что большинство браузеров вычисляют ширину потомка, если она задана в процентах, исходя из ширины родителя. Таким образом, если у элемента ширина 1000%, то при изменении ширины его родителя на пиксель сам элемент растянется или сожмётся на 10 пикселей. Собственно, всё. Эту штуку описывал в лебедевском скринкасте Сергей Чикуёнок еще в 2008 году, в контексте исправления бага с «прыгающими» блоками в IE6. Однако я, к своему удивлению, так и не нашел описания этой презабавной технологии на Хабре.

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

• css

• , css-tricks

• , ширина

• , кроссбраузерность

+32

12 декабря 2011, 13:49

156

ariser

39

Еще чуть-чуть о круглых аватарках на css3 и маленькой тайне Оперы из песочницы

Хочу поделиться крошечным «тайным знанием» вдогонку к недавнему хабратопику о скруглении картинок средствами CSS3. Все знают, что в Операх ниже свежей версии 11.60 (pepelsbey, спасибо за уточнение!) border-radius не работал для тега img. Даже обертка с overflow:hidden не спасала — углы предательски торчали из нее наружу. Чего только не придумано для борьбы с этим багом. Например, перекрыть эти выступающие углы border-ом псевдоэлемента :before обертки. Наш хабраколлега еще больше приблизился к идеалу, показав, что обертка не нужна (заодно еще раз раскрыв мощь CSS3). Но у таких решений есть существенное ограничение: картинки должны быть на однотонном фоне, иначе «покрышка» сразу выдаст себя. Но есть у Оперы одна малоизвестная особенность, которая поможет нам решить эту проблему. Предлагаю вашему вниманию пример (сразу с кодом — его очень мало — и результатом): jsfiddle.net/XVtMh/147/.

В чем же секрет?

• CSS3

• , круглые углы

• , opera

• , webkit

• , generated content

• , маленькие хитрости

+108

6 Декабря 2011, 06:01

334

SelenIT2

38

Круглые аватарки средствами css 3

Сегодня у меня возникла очередная задача — необходимо было сделать «круглые аватарки».  Наверняка, многие опытные разработчики имеют в запасе пару-тройку способов, с помощью которых можно было бы реализовать подобный функционал. Я же хочу поделиться с вами своей реализацией.

Помню, когда я только начинал увлекаться программированием и изучением основ HTML верстки, мне всегда очень помогали статьи — примеры различных реализаций того или иного функционала. Сейчас я твердо убежден — самый быстрый и понятный способ обучения — это примеры.

Именно поэтому я решился написать эту статью.  Вероятно она покажется скучной для профессиональных верстальщиков. Однако я надеюсь, что среди посетителей Хабрахабра найдутся люди, которые только начинают свой путь web-разработчика и заинтересуются предложенной технологией.

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

• html

• , html5

• , css

• , css3

• , css 3

• , верстка

• , аватарки

• , дизайн

• , примеры

+52