WEB start
Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17
Наши преимущества
- Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
- Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
- Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
- Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.
Регистрация на сайте
CSS clipping, shapes
CSS clipping
- clip-path
- shape-outside
- mask-border
- mask
- mask-clip
- -webkit-background-clip: text
Клипы
Клип (clip-path) позволяет менять форму HTML элемента. Форму можно создать как: circle, ellipse, polygon, SVG - image.
circle( [<shape-radius>]? [at <position>]? )
ellipse( [<shape-radius>{2}]? [at <position>]? )
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
shape-radius - радиус, для эллипса задаются 2 радиуса
position - две координаты центра - смещения от левой границы и от верхней границы блока
fill-rule - способ заливки внутренней области многоугольника
shape-arg - массив координат вершин многоугольника
Простой клип
CSS:
#clipTest {
display: inline-block;
padding: 10px;
margin: 20px;
height: 300px;
width: 200px;
background-color: blue;
clip-path: circle(150px at 0px 0px);
color: #fff;
font-size: 1.5rem;
font-weight: bold;
}
HTML
<div id="clipTest">Clip test</div>
Текст и клип
Текст, располагающийся вокруг области клипа в форме окружности. Клип-окружность создаёт свойство
clip-path: circle(100px at 0px 0px)
Область, которая "вырезана" из блока с текстом, создаёт свойство
shape-outside: circle(110px at 0px 0px)
Свойство
float: left
для клипа обязательно для того, чтобы текст "обтекал" клип.
<!DOCTYPE html>
<head>
<style>
#shapeOutsideTest1 {
display: inline-block;
position: relative;
height: 300px;
width: 300px;
position: relative;
border: 1px solid red;
padding: 10px;
}
#shapeOutsideTest1 > #shape1-1 {
float: left;
height: 100%;
width: 100%;
background-color: blue;
shape-outside: circle(110px at 0px 0px);
-webkit-clip-path: circle(100px at 0px 0px);
clip-path: circle(100px at 0px 0px);
}
</style>
</head>
<body>
<div id="shapeOutsideTest1">
<div id="shape1-1"></div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores id, ad
illo ea iste totam, consectetur ab praesentium repudiandae iusto
perferendis consequuntur, recusandae suscipit fugit dolorum impedit?
Blanditiis, pariatur quae. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Aut consequuntur provident eum illo doloremque ducimus
alias molestiae quo illum eveniet, debitis saepe ex, recusandae magni
veniam esse! Excepturi, ratione tenetur!
</div>
</body>
</html>
Два клипа и текст
Два клипа в форме многоугольников и текст между ними.
Один клип - слева () , второй клип - справа ()
<!DOCTYPE html>
<head>
<style>
#shapeOutsideTest2 {
display: inline-block;
height: 400px;
width: 400px;
border: 1px solid gray;
padding: 10px;
}
#shapeOutsideTest2 #shape2-1 {
float: left;
width: 50%;
height: 100%;
margin-right: 10px;
background-color: red;
clip-path: polygon(0% 0%, 38% 0, 54% 50%, 38% 100%, 0% 100%);
shape-outside: polygon(0% 0%, 38% 0, 54% 50%, 38% 100%, 0% 100%);
}
#shapeOutsideTest2 #shape2-2 {
float: right;
width: 45%;
height: 100%;
background-color: green;
shape-outside: polygon(100% 0, 0 100%, 100% 100%);
clip-path: polygon(100% 0, 0 100%, 100% 100%);
} </style>
</head>
<body>
<div id="shapeOutsideTest2">
<div id="shape2-1"></div>
<div id="shape2-2"></div>
<div id="shape2Text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores id, ad
illo ea iste totam, consectetur ab praesentium repudiandae iusto
perferendis consequuntur, recusandae suscipit fugit dolorum impedit?
Blanditiis, pariatur quae. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Aut consequuntur provident eum illo doloremque ducimus
alias molestiae quo illum eveniet, debitis saepe ex, recusandae magni
veniam esse! Excepturi, ratione tenetur!Aut consequuntur provident eum illo doloremque ducimus
alias molestiae quo illum eveniet, debitis saepe ex!
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<style>
#shapeOutsideTest3 {
display: inline-block;
border: 1px solid #157cca;
width: 300px;
height: 300px;
}
#shapeOutsideTest3 .leftTriangle {
width: 40%;
height: 100%;
background-color: #157cca;
margin: 0 20px 0 0;
float: left;
clip-path: polygon(0 0, 0 100%, 50% 0);
shape-outside: polygon(0 0, 0 100%, 50% 0);
}
#shapeOutsideTest3 .rightTriangle {
width: 40%;
height: 100%;
background-color: #157cca;
float: right;
clip-path: polygon(100% 0, 50% 100%, 100% 100%);
shape-outside: polygon(100% 0, 50% 100%, 100% 100%);
}
</style>
</head>
<body>
<div id="shapeOutsideTest3">
<div class="leftTriangle"></div>
<div class="rightTriangle"></div>
Lorem isum dolor sit amet consectetur adipisicing elit. Beatae
aspernatur aut molestias, expedita ipsa quae deserunt, non, magni
recusandae dolor blanditiis asperiores ex itaque accusantium alias.
Voluptas quis corrupti ducimus. Lorem ipsum dolor, sit amet consectetur
adipisicing elit. Magni nihil repellendus soluta doloribus, totam sunt
aliquam facere a maxime itaque, cupiditate deleniti molestias nostrum
eos ipsum, ex rerum. Minus, perspiciatis.
</div>
</body>
</html>
Картинка - в фоне клипа
Картинка - background-image: url(../images/image.jpg);
Многоугольник - клип (clip-path: polygon(30% 0, 50% 50%, 30% 100%, 0% 100%, 0 50%, 0% 0%))
<!DOCTYPE html>
<head>
<style>
#wrapper4 {
width: 320px;
height: 300px;
display: inline-block;
margin: 20px;
}
#wrapper4 #clip4 {
float: left;
width: 100%;
height: 100%;
margin-right: 30px;
background-image: url(../images/image.jpg);
background-size: auto 100%;
shape-outside: polygon(30% 0, 50% 50%, 30% 100%, 0% 100%, 0 50%, 0% 0%);
-webkit-clip-path: polygon(30% 0, 50% 50%, 30% 100%, 0% 100%, 0 50%, 0% 0%);
clip-path: polygon(30% 0, 50% 50%, 30% 100%, 0% 100%, 0 50%, 0% 0%);
}
#wrapper4 p {
color: #0099ff;
}
</style>
</head>
<body>
<div id="wrapper4">
<div id="clip4"></div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
obcaecati voluptatum inventore facilis eum illum corporis, dolor
possimus repellendus tenetur rerum aliquid sint aliquam! Nostrum amet id
accusamus delectus ad. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Quidem voluptate eveniet sit molestiae enim?
Necessitatibus voluptas delectus cupiditate error, iste sapiente earum
perspiciatis sint voluptatem, debitis impedit porro assumenda nulla!
</div>
</div>
</body>
</html>
Клип - текст
-webkit-background-clip: text;
Фоновая картинка вставлена в клип-текст. Цвет текста задан с прозрачностью.
<!DOCTYPE html>
<head>
<style>
#wrapper5 {
display: inline-block;
border: 1px solid blue;
text-align: center;
background-image: url("../images/coffee-writing-computer-blogging-34676.jpg");
background-size: auto 100%;
background-position: center;
-webkit-background-clip: text;
color: #74000077;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bolder;
font-size: 200px;
}
</style>
</head>
<body>
<div id="wrapper5">
TEST
</div>
</body>
</html>
