Pull to refresh

Comments 58

Нельзя было сюда все примеры выложить?
Можно. Если настаиваете, выложу все.
Приятнее было бы видеть все здесь, а не ходить по ссылке, тем более вдруг она когда-нибудь станет битой, а тут сохранится наверняка.
Значит, ждите ответа, ваш звонок очень важен для нас :)
Спасибо. Позвонить правда наверное в ЛС надо было.
А у меня нет иллюзии приподнятых уголков, скорее опущенная тень…
Но всё равно за статью спасибо, думаю пригодится.
UFO landed and left these words here
Да нет, старый добрый Samsung SyncMaster 152T уже лет 7-8 он мне служит верой и правдой.
А есть список совместимых браузеров?
И причем тут селекторы?
похоже, это насчет осла человек пошутил
Ок, я тоже тормоз :)
можно узнать, какие еще качественные ссылки с цифрами есть тематические?

и можно даже еще и с буквами и не только про css, но web/mobile в целом =)

стихийный флэшмоб-соцопрос внезапно зародился — дюжина самых важных ресурсов про web/mobile от каждого активного хабрера
Думаю, пригодится, спасибо за примеры!
было бы еще отлично рассказать про это свойство :)
Не для копипасты. Но тема для следующего топика :)
А какая ситуация с производительностью?

Например, если взять галерею из 27 картинок и к каждой применить тень «Приподнятый бокс».
Слабенькие компы сдохнут, можете даже не сомневаться. Как раз сейчас занимаюсь разработкой интерфейсов под всякие терминалы, там относительно слабые процы стоят.
box-shadow начинает тормозить галерею из 12 картинок. Если пытаться добавить еще и CSS3-анимацию для картинок, то особенно заметно.
Интересно, а зачем z-index: -2? Насколько я помню, -1 уже гарантирует нам то, что псевдоэлемент будет «под блоком», не?
Как всегда IE все обламывает.

Хочу в будущее, года на 2-3 вперед, может там с кроссбраузерностью попроще обстоят дела. А еще больше хочу кого-нибудь ударить… чтоб его…
Что значит обламывает? Все примеры работают в IE9+.
Да знаю я, просто сижу верстаю под XP, доступен только IE8. Как раз много на box-shadow и border-radius, поэтому приходится делать их имитации с помощью кучи картинок и событий, там же еще и .div:hover не работает, что тоже добавляет «радости».

Можно конечно, добиться, чтобы внешний вид выглядел везде одинаково, вот только на сколько больше времени придется потратить, имитируя всего то два стиля.
там же еще и .div:hover не работает
Что значит не работает? Какой у вас DOCTYPE?
«Да знаю я, просто сижу верстаю под XP, доступен только IE8. Как раз много на box-shadow и border-radius, поэтому приходится делать их имитации с помощью кучи картинок и событий»

Очень плохо =/ Не нужно картинок, это лишние запросы к серверу.

В ie можно сделать нативные тени и круглые углы — css3pie.com/
А зачем добиваться красивых теней для ИЕ? Ну будут стандартные прямоугольники, кто умрет?
В хороших браузерах хорошее отображение, в плохих — плохое.
Согласен, но если сгруглить углы и добавить красивые тени для 14% пользователей (ie8) занимает 10 минут — я не обламаюсь, сделаю :)
А я обламаюсь. Если в жизни человек вместо авто-внедорожника берет велосипед с квадратными дорогами, то зачем для него делать дорогу не ровную, а полукругами?
Согласен, но я люблю посетителей сайтов, которые делаю, и уважаю их выбор.

Тем не менее на ie6 и очень часто на ie7 эта любовь уже не распространяется.
А вы не думали о том, что, возможно, их выбор — сайты без скругленных углов, теней, поворотов и прочих благ CSS3? Таким образом, вы навязываете им новые технологии.
Думал, но так я рискую сделать сайт, который смогуть посмотреть только разработчики chrome с dev-версии браузера.
У вас сделан сделан использованием только не утвержденных свежих наворотов?
Я, может быть, не гуру верстки, но мои сайты вполне прекрасно смотрятся в современных браузерах. Просто использую общепринятые теги и свойства (text-shadow, border-radius) и не заморачиваюсь с хаками.
а вдруг там пустыня и нет не то что ИЕ, а даже электричества? )
2005:
«Как добавить закругленные уголки в CSS2 не используя изображений»

2011:
«Как сделать реалистичную тень в CSS3 без использования изображений»

2017:
???
2017: как сделать реалистичную тень в CSS4 на столе :)
Шекспир уже все написал
Как сделать [что-то].....(IE6 совместимо)
2035: «… и только радиоактивный снег падал на безжизненную поверхность планеты...»
Беда в том, что в фотошопе такие тени не нарисуешь без кисточек.
UFO landed and left these words here
Самая большая беда в том, что если надо будет увеличить интенсивность теней, цвет, размер, то придется перерисовывать картинку, а в CSS3 надо поменять всего несколько цифр.
я это и подразумевал
Гм… а ка-кто по исходникам не могу найти как фон сделан такой красивый с затемнением к краям. Можно в двух словах для слепых? :)
Из первого примера. Внутренняя тень. box-shadow с параметром inset.
.lifted {
        position:relative;
        width:40%;
        padding:1em;
        margin:2em 10px 4em;
        background:#fff;
        border-radius:4px;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        -moz-border-radius:4px;
 
}
Еесли у родителя есть фон — то вся красота этого варианта уже не работает :(.
Автор, изображения пропали. Перезайлейте пожалуйста на хабрасторадж.
Ок, спасибо. Это я за хостингом не уследил.
Only those users with full accounts are able to leave comments. Log in, please.