Jump to content
  • Sign Up

Search the Community

Showing results for tags 'clip'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML и CSS
    • Проблемы верстки
    • Препроцессоры, постпроцессоры и шаблонизаторы
    • Методологии
    • Фреймворки и библиотеки
  • JavaScript
    • Для начинающих
    • Фреймворки и библиотеки
    • Скрипты и плагины
  • Разработка сайтов
    • Для начинающих
    • Инструменты разработки, сборки и автоматизации
    • Аудит и анализ кода
    • Программное обеспечение разработчика
    • Веб-дизайн
    • Мобильные платформы
    • Open Source
  • Серверное программирование
    • Для начинающих
    • PHP
    • Платформы и языки программирования
    • Базы данных
    • Скрипты, готовые движки, CMS, конструкторы
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Сервер
    • Техническая поддержка
    • Веб-сервер
    • Базы данных
    • Хостинг
    • Домены
  • Интернет-маркетинг, SEO
  • Коммерческие услуги
  • Давайте поговорим о ...
  • Наш форум

Calendars

  • События форума
  • События партнёров
  • Все события

Blogs

There are no results to display.

There are no results to display.

Marker Groups

  • Members
  • Front-end
  • Back-end
  • Education
  • Looking for job
  • Offering job

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Web site


ICQ


Jabber


Skype


From


Interests

Found 1 result

  1. Доброго всем дня, уважаемые эксперты! Как решается такая задача: <div class="ls-rubber-block ls-bg-heavenly"> <div id="ls-img-01"></div> <div id="ls-img-02"></div> </div> html { height: 100%; } body { height: 100%; margin: 0; padding: 0; font-family: 'PT Sans Caption', sans-serif; } /* Блок, который рвстягивается по высоте и ширине на 100% */ .ls-rubber-block { width: 100%; height: 100%; min-height: 100%; box-sizing: border-box; border: 0px solid #FF0004; overflow: hidden; clip: rect(0, 100%, 0, 100%); } #ls-img-01 { position: absolute; display: block; width: 700px; height: 600px; top: -200px; right: 30px; box-sizing: border-box; border: 0px solid #cccccc; background-image: url(http://lanasvetlaya.ru/landing/master_jelaemoy_jizni/img/header_flowerpot.png); background-size: 700px 600px; background-repeat: no-repeat; background-position: center center; } #ls-img-02 { position: absolute; display: block; width: 730px; height: 520px; top: 600px; right: -30px; box-sizing: border-box; border: 1px solid #cccccc; background-image: url(http://lanasvetlaya.ru/landing/master_jelaemoy_jizni/img/header_tablet.png); background-size: 730px 520px; background-repeat: no-repeat; background-position: center center; } Внутри родителя два блока, у каждого фоновое изображение. Собственно можно не фоном а через <img> тег. Как обрезать эти изображения родительским блоком? Если ставить clip, например, родителю, то сложность в том, что родитель резиновый и принимает 100% на 100% размер экрана. А вот такая конструкция: clip: rect(0, 100%, 0, 100%); Не дала видимого результата... Стремлюсь повторить такой же заголовок как здесь: http://gaze.tommusdemos.wpengine.com/homepages/startup-tokyo/# Благодарю за помощь! Ответ найден! Тем, кому это интересно: Я изучил ссылку на предмет свойств css и нашел там такие строки: Признаюсь, удивлен, ведь transform задействует преобразование объекта, но вот что он его обрезает - никак не мог представить. И признаться так и не понимаю до конца как это работает, но работает! Рекомендую для кросбраузерности добавить так: Желаю сем удачи!
×
×
  • Create New...