WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

hit 
counter

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения 055-966-10-17
  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Защита информации.
  • Интернет. Планирование, создание WEB-сайтов. Дизайн, программирование. CEO, продвижение сайтов в интернет.
  • Основы современных IT - технологий.

Наши преимущества

  • Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
  • Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
  • Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
  • Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.


Регистрация на сайте

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>