блок "неправильной" формы

Тема в разделе "Верстка", создана пользователем duncan, 16 июн 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.596
    Симпатии:
    441
    все элементы на странице имеют четкую прямоугольную форму
    это касается и блочных элементов, и строчных, и строчно-блочных
    так вот итересует возможность трансформации -- возможли ли такое вообще? :)
     
  2. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    737
    Симпатии:
    324
  3. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.596
    Симпатии:
    441
    а с помощью джава-скрипт?
     
  4. Viorteya

    Viorteya Создатель

    Регистр.:
    24 апр 2013
    Сообщения:
    14
    Симпатии:
    10
    какой именно трансформации? поставьте задачу поконкретнее. имитировать элемент неправильной формы (статичный) можно и в css, если поиграться с наложением элементов друг на друга, полями, фоном и изображениями.
    если нужна анимация - тут, конечно, лучше js (если указанного выше transform и transition недостаточно)
     
  5. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.596
    Симпатии:
    441
    нерешимый вопрос.
    transform и transition -- не комильфо, поскольку даже современные браузеры не все поддерживают
    а вообще это была идея фикс -- трансформировать инлайновый элемент (картинку)
    даже не совсем картинка, а делать в виде блока-наложения по верху картинки и с помощью overflow:hidden скрывать то, что не будет помещаться.
    но кроссбраузерности все равно добиться не реально.
     
  6. Viorteya

    Viorteya Создатель

    Регистр.:
    24 апр 2013
    Сообщения:
    14
    Симпатии:
    10
    Не опускайте руки -) Какой самый низкий порог браузеров с корректным отображением требуется? (я правильно понимаю, что речь главным образом об IE?)
    Трансформ с транзишном - это главным образом для анимации и прочих необязательных рюшечек, без которых сайт все равно будет юзабелен. У вас же задача статичная, насколько я понимаю? Может можно ограничиться абсолютным позиционированием и отрицательными марджинами? А также всякими top, z-index и т.п. ну а на крайняк и про js вспомнить... -)
    В общем либо распишите еще подробнее, либо набросайте схематичное изображение (что будет понятнее) желаемого итогового вида элемента.
     
  7. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
    все зависит от конкретной задачи и соответственно решения тоже могут быть разные. Где-то можно сверху накладывать полупрозрачный пнг с дырками нужной формы, где-то действительно поможет трасформация, ну а где-то можно и канвас использовать (что будет наверное самым простым и самым кроссбраузерным вариантом).
     
  8. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.596
    Симпатии:
    441
    в том-то и дело, что просто наложить сверху пнж-рамочку не выйдет, хитрый замут в дизе)
    суть в том, что это слайдер со слайдами неправильной формы
    а под слайдером сразу неоднотонный фон, схематично:

    1.jpg
     
  9. NiceBro

    NiceBro Создатель

    Регистр.:
    2 ноя 2012
    Сообщения:
    44
    Симпатии:
    25
    Можно сделать сами слайды в png повернуть как надо в Ps и остальной фон сделать прозрачным.
     
  10. duncan

    duncan батяр з личакова

    Регистр.:
    10 апр 2007
    Сообщения:
    1.596
    Симпатии:
    441
    это очевидное и самое просто решение)
    но к верстке отношения не имеет