Понедельник, 24 Декабря 2012 10:21

CSS свойство clip - видимая часть блока

Written by 
Оцени эту запись
(0 Голоса)

CSS свойство clip задает видимую часть блока. Применяется только для абсолютно спозиционированных элементов. На данный момент видимая задание видимой области доступно только в виде прямоугодяника по координатам.

 

 

clip: rect(y1, x1, y2, x2);

 

  • y1 - координата начала области по вертикали (отступ сверху)
  • x1 - координата конца видимой области по горизонтали (отступ слева + ширина)
  • y2 - координата конца облсти по вертикали (отступ сверху + высота)
  • x2 - координата начала по горизонтали (отступ слева)

 

Теперь можно привести пример. Допустим, у нас есть блок с текстом:

 

 

<div style="margin: 20px auto; position: relative; width: 300px; height: 300px; background: blue; color: white;">
    <div style="position: absolute; top: 10px; left: 10px; background: violet; width: 250px; height: 250px;">
        HTML - это гипертекстовый язык разметки (HyperText Markup Language), который используется для создания документов в Интернет.<br />
 
        Язык HTML был разработан примерно в 1986-1991 годах британским ученым Тимом Бернерсом-Ли.<br />
 
        Текстовый документ, содержащий язык разметки HTML, имеет расширение .html или .htm и открывается браузерами. На данный момент самыми популярными браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari. Подробнее в статье Браузеры, под которые нужно делать верстку
    </div>
</div>
 
 
 
Посмотрим, как он выглядит:
 
 
HTML - это гипертекстовый язык разметки (HyperText Markup Language), который используется для создания документов в Интернет.
Язык HTML был разработан примерно в 1986-1991 годах британским ученым Тимом Бернерсом-Ли.
Текстовый документ, содержащий язык разметки HTML, имеет расширение .html или .htm и открывается браузерами. На данный момент самыми популярными браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari. Подробнее в статье Браузеры, под которые нужно делать верстку
 

А теперь применим к внутреннему блоку свойство clip:

 

 

clip: rect(30px, 200px, 100px, 20px)

 
 
 
 
HTML - это гипертекстовый язык разметки (HyperText Markup Language), который используется для создания документов в Интернет.
Язык HTML был разработан примерно в 1986-1991 годах британским ученым Тимом Бернерсом-Ли.
Текстовый документ, содержащий язык разметки HTML, имеет расширение .html или .htm и открывается браузерами. На данный момент самыми популярными браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari. Подробнее в статье Браузеры, под которые нужно делать верстку
 
 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов