html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Учимся использовать css-свойство clip

Наверняка вы слышали о свойстве css под названием clip. Сегодня мы поговорим немного о его синтаксисе и будем учиться создавать интересный эффект с его помощью.

 

Синтаксис

example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

Первое, что вы должны знать про clip — это то, что это свойство может быть добавлено только к элементу, который имеет абсолютное позиционирование (position: absolute или position: fixed).

Значение может быть определено в виде  формы или задано автоматически. Значение auto не имеет ограничений и установлено по умолчанию для всех элементов.

Чтобы определить форму (в настоящее время допускаются только прямоугольники) нужно прописать rect(), передавая значения, которые определяют форму. Значения могут быть положительными или отрицательными.

Значение rect()

example {
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

Значения, переданные в прямоугольник() кажутся на первый взгляд немного запутанными, но вскоре вы поймёте, что в них нет ничего сложного. Значения определяют смещение сверху и слева от элемента.

Другими словами, в приведенном выше примере, первое значение придается мнимой линии, проходящей горизонтально длинной 110px сверху (первое значение), а вторая горизонтальная линия 170px сверху — это третье значение. Второе значение  — для воображаемой вертикальной линии длинною 160px слева, и последнее значение -  для другой воображаемой вертикальной линии длинною 60px слева.

Если это вас смущает, может быть, это изображение поможет:

 

Этот скриншот использует направляющие, чтобы показать вам, где соответствующие значения поставит мнимые пересекающиеся линии. Яркие области изображения являются частью изображения, которые были бы видны.Остальные будут скрыты. Таким образом, «обрезанная» площадь определяется пересекающимися линиями той области, которая остается.

Следует также отметить, что IE6 и IE7 поддерживают это свойство, но вместо запятых разделяющих значения, этот браузер требуют пробел.

Создаём анимированную галерею

Посмотрите  эту анимационную галерею, чтобы лучше понять, как работает стилевой параметр clip.

Автор: impressivewebs

Перевод: Дежурка

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

88
    +70 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • sobeninaolga
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции