coding: less

Показаны сообщения с ярлыком less. Показать все сообщения

воскресенье, 8 марта 2020 г.

PHPStorm & Less: как компилировать минимизированный файл с помощью File Watchers?

#phpstorm #less #jetbrains


Каждый раз сталкиваюсь с этим вопросом и с долго ищу ответ англоязычном stackOverflow. 

В PHPStorm нужно компилировать "на лету" минимизированный .css файл из .less. 
File Watcher настроен, файл компилируется исправно, но какой флаг нужно добавить
к аргументам, чтобы получить минимизированный файл?

Ответы

Ответ 1


Введение

Представленный в этой части код не является ответом!

Безуспешно попытавшись найти ответ на свой вопрос (вероятно, плохо искал), я решил
поступить так, как следовало сделать с самого начала - заглянуть в help node-модуля
less. Выполнив команду, я получил исчерпывающий ответ - 

-x, --compress           Compresses output by removing some whitespaces.


Вот оно! - подумал я, добавил флаг --compress в настройках File Watcher и получил...
минимизированный файл с предупреждением

The compress option has been deprecated. We recommend you use a dedicated css minifier, 
for instance see less-plugin-clean-css.html


Дальше я проследовал на страницу https://github.com/less/less-plugin-clean-css, где
нашел итоговую, рабочую инструкцию. 

Рабочий ответ

Требуется установить дополнительно модуль less-plugin-clean-css командой 

npm install -g less-plugin-clean-css


и затем к аргументам Watcher'а добавить 

--clean-css="--s1 --advanced --compatibility=ie8"


в итоге настройки Watcher'a в моем случае выглядели вот так: 



Файл получаем минимизированный, но с сохраненными комментариями. Описание всех аргументов
модуля clean-css можно найти на странице https://github.com/jakubpawlowicz/clean-css. 
Там я нашел ответ, как при минимизации убрать комментарии: 

требуется к аргументам для --clean-css добавить флаг --s0 (в моем случае - исправить
уже имеющийся флаг --s1) таким образом:

 --clean-css="--s0 --advanced --compatibility=ie8"

пятница, 14 февраля 2020 г.

Логика работы SASS SCSS и LESS?

#sass #scss #less


Хочу понять в теории, как работают css препроцессоры SASS SCSS и LESS.


Браузер не читает напрямую данные из .sass (например) файла, нужно вначале скомпилировать
.sass > .css?
Т.е. получается, что .sass файлы являются что-то вроде 'базовой' библиотеки стилей,
из которой потом 'лепится' уже готовый набор .css файлов?

Ответы

Ответ 1


Браузер не читает напрямую данные из .sass (например) файла, нужно вначале скомпилировать
.sass > .css?


Браузер может работать только с CSS и для этого sass компилируется в CSS


  Т.е. получается, что .sass файлы являются что-то вроде 'базовой' библиотеки стилей,
из которой потом 'лепится' уже готовый набор .css файлов?


sass это не "базовая библиотека" она сама по себе не содержит никаких стилей, sass
это другой формат стилей и после компиляции получается обычный css который уже используется
браузером. sass даёт большие возможностей, часто облегчает вёрстку и делает стили лучше
читаемыми для разработчика.

Примерно такая же ситуация и с LESS.

четверг, 13 февраля 2020 г.

В чём отличие между less и sass?

#less #вёрстка #sass #css


Служат для одной и той же цели, имеют похожие методы, а в сущности различаются только
синтаксисом и расширением? По мне все же sass поудобнее(покороче) будет, как считаете?

Ответы

Ответ 1


отличий куча во первых sass на ruby, less на js синтаксис оч сильно отличается посмотри
на примеры:

http://lesscss.org/
http://sass-lang.com/ 

ну а про расширение я бы сказал в последнюю очередь. Чтобы окончательно все расставить
по местам читай вот что: SASS против LESS


Ответ 2


На самом деле less попроще, удобнее и очень легко понять суть препроцессоров на нем.
SASS имеет разные плюшки, более строгий. Лично я для себя использую LESS, в первую
очередь из-за простоты и скорости сборки. К SASS есть прикольная надстройка Compass.
По-моему если уж SASS, то тогда с Compass. Но компилится он жутко долго. У меня LESS
версия бутстрапа - 1-2 секунды против 10-15 SASS. Чувтсвуется разница, не так-ли?
Ну и да, смотрите статью на хабре в ответе Павла.

среда, 5 февраля 2020 г.

Как создать такие треугольники с помощью псевдоэлементов?

#css #sass #less


Здравствуйте,помогите,пожалуйста,создать вот такие вот треугольники...У меня,правда,нет
идей. Уже гуглил на эту тему,но ничего стоящего не нашел. Изображением вставлять не
канает. Нужно именно с помощью CSS.

Ответы

Ответ 1


Gradient Generator - colorzilla.com

CSS triangle generator - http://apps.eky.hk/css-triangle-generator/



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.b-breadcrumbs {
  text-align: center;
  font-size: 0;
  background: #271E19;
  padding: 25px;
  line-height: 1.15;
}
.b-breadcrumbs > li {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  margin-left: 34px;
}
.b-breadcrumbs > li > a {
  height: 48px;
  position: relative;
  display: block;
  color: #000;
  font-weight: 700;
  padding: 15px;
  background: -moz-linear-gradient(top, rgba(255, 201, 55, 1) 0%, rgba(255, 201,
55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255, 201, 55, 1) 0%, rgba(255, 201,
55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255, 201, 55, 1) 0%, rgba(255, 201,
55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.b-breadcrumbs > li > a:before,
.b-breadcrumbs > li > a:after {
  content: '';
  position: absolute;
  left: 100%;
  width: 0;
  height: 0;
  border-style: solid;
}
.b-breadcrumbs > li > a:before {
  top: 0;
  border-width: 24px 0 0 24px;
  border-color: transparent transparent transparent #FFC937;
}
.b-breadcrumbs > li > a:after {
  bottom: 0;
  border-width: 24px 24px 0 0;
  border-color: #FFA523 transparent transparent transparent;
}
.b-breadcrumbs > li:last-child > a:before,
.b-breadcrumbs > li:last-child > a:after {
  display: none;
}
.b-breadcrumbs > li > a > span {
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  width: 24px;
}
.b-breadcrumbs > li > a > span:before,
.b-breadcrumbs > li > a > span:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  left: 0;
}
.b-breadcrumbs > li > a > span:before {
  top: 0;
  border-width: 0 24px 24px 0;
  border-color: transparent #FFC937 transparent transparent;
}
.b-breadcrumbs > li > a > span:after {
  bottom: 0;
  border-width: 0 0 24px 24px;
  border-color: transparent transparent #FFA523 transparent;
}
.b-breadcrumbs > li > a:hover {
  color: #fff;
  background: red;
}
.b-breadcrumbs > li > a:hover:before {
  border-left-color: red;
}
.b-breadcrumbs > li > a:hover:after {
  border-top-color: red;
}
.b-breadcrumbs > li > a:hover > span:before {
  border-right-color: red;
}
.b-breadcrumbs > li > a:hover > span:after {
  border-bottom-color: red;
}

  Item 1
  
  Item 2
  
  Item 3
  
  Item 4
  





Вариант 2 - с использованием clip-path



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.b-breadcrumbs {
    text-align: center;
    font-size: 0;
    background: #271E19;
    padding: 25px;
}
.b-breadcrumbs > li {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    margin-left: 0;
}
.b-breadcrumbs > li > a {
    position: relative;
    display: block;
    color: #000;
    font-weight: 700;
    padding: 15px 25px;
    background: -moz-linear-gradient(top, rgba(255, 201, 55, 1) 0%, rgba(255, 201,
55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 201, 55, 1) 0%, rgba(255,
201, 55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 201, 55, 1) 0%, rgba(255, 201,
55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    
    -webkit-clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
}
.b-breadcrumbs > li:first-child > a{
    padding-left: 15px;
   -webkit-clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0 100%, 0 0);
  clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0 100%, 0 0);
}
.b-breadcrumbs > li:last-child > a{
    padding-right: 15px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 50%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 50%);
}
.b-breadcrumbs > li > a:hover{
    color: #fff;
    background: red;
}

    Item 1
    Item 2
    Item 3
    Item 4



Ответ 2


Сам треугольник можно получить задавая различные цвета границам разных сторон элемента,
а добавить к элементу - используя псевдоэлементы :before :after



   .block {
    background: green;
    display: inline-block;
    position: relative;
    color: #fff;
    width: 120px;
    height: 20px;
    margin: 10px;
   }
   .block::after {
    content: '';
    position: absolute;
    left: 120px; /* Положение треугольника */
    border: 10px solid transparent;
    border-left: 10px solid green; 
   }
   .second::before {
    content: '';
    position: absolute;
    left: -20px;
    border: 10px solid green;
    border-left: 10px solid transparent;
   }
  
  Концепция
  
  
 Реализация

среда, 1 января 2020 г.

Градиент закругленного бордюра кнопки

#html #css #svg #less


Как сделать градиент закругленного бордюра кнопки с прозрачным содержимым?



К примеру, в простом варианте — нет возможности задать градиент для border-bottom,
border-top



   
      
   
   
      
   





Идеальный вариант, теоретически можно с помощью clip-path осуществить заливку середины
маской с прозрачностью и выставить отступы от краев, но на данный момент — код работает
наоборот и нужно инвертировать маску.






  
  


  
    






Пробовал вариант с SVG - он растягивается сильно, даже при применение атрибута non-scaling-stroke
и preserveAspectRatio 


  https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

Ответы

Ответ 1


Добавление анимации

Берется соседний цвет градиента по точкам offset   

values="violet;blue;violet"   


Анимируется атрибут линейного градиента stop-color  


   
   
       

и так для каждой точки offset   



.container {
  width: 50%;
  height: 50%;
}

  





Добавим анимацию для текста кнопки.  

Для этого просто используем уже созданный градиент с анимацией к тексту   

Click me  




.container {
  width: 50%;
  height: 50%;
}

  



Ответ 2


В вашем примере я не увидел реализацию на svg а хотелось бы увидеть что не получилось 

Так же в вашем примере есть clip-path который поддерживается но не везде, от пример
реализации прямоугольника с закруглёнными углами и с градиентной заливкой stroke

вторник, 17 декабря 2019 г.

Как получить CSS из SASS?

#css #phpstorm #sass #less #webstorm


Настраиваю file watcher. Сохраняю main.sass и почему-то создается файл с данным содержимом:

write main.css
write main.css.map


А как получить CSS код через File watcher WebStorm

Ответы

Ответ 1


Не понял в чем именно была проблема, но теперь всё работает с данными настройками:


Ответ 2


можно не привязываться к определенной среде 
а использовать отдельный компилятор
например http://koala-app.com/

компилит все :)

воскресенье, 8 декабря 2019 г.

Как по клику изменить текст, используя css?

#css #css3 #sass #less


Получил интересное задание, но уже сломал голову, как его выполнить, без js. Звучит
оно так - 

"Дан фрагмент html, для которого нужо написать стили css, допускается less или sass.
Результат должен быть как на картинке. Круг, а внутри цифра 4. При клике цифра должна
уменшаться на-1. Если кликнуть по кружку когда в нём находится цифра 1, то цифра сбрасывается
до 4 - необходимо описать такой внешний вид и поведение, используя только стили. html-менять
нельзя, применять другие языки тоже нельзя.

http://prntscr.com/okb9zt ссылка на пример"

html 


    
    
    
    4



css, который я для этого уже написал

  .radius{
      position: absolute;
      padding: 20px;
      margin: 5px;
      border: 3px solid black;
      border-radius: 50px;
   }
   .num{
      position: relative;
      top: 19px;
      left: 24px;
   }

Ответы

Ответ 1


Такое можно вытворять ради спортивного интереса, но это издевательство над CSS, в
реальном коде не надо так!))

Оставил чекбоксы, чтобы было видно, что происходит. Можно было не трогать четверку
лейбела, и добавить еще три before-after, но так показалось нагляднее.



.num::before { content: "4"; }
.radius::before { content: "3"; }
.num::after { content: "2"; }
.radius::after { content: "1"; }

#check1:not(:checked) + #check2:not(:checked) ~ .num         { display: block;}
#check1:not(:checked) + #check2:not(:checked) ~ .num::before { display: block;}

#check1:not(:checked) + #check2:checked ~ .radius         { display: block;}
#check1:not(:checked) + #check2:checked ~ .radius::before { display: block;}

#check1:checked + #check2:checked ~ .num        { display: block;}
#check1:checked + #check2:checked ~ .num::after { display: block;}

#check1:checked + #check2:not(:checked) ~ .radius        { display: block;}
#check1:checked + #check2:not(:checked) ~ .radius::after { display: block;}

/* Ага, можно оставить один { display: block }, а все селекторы разделить запятыми. */

label {
  display: none;
  position: relative; /* Чтобы абсолютные before и after не выходили за рамки элемента */
  color: transparent; /* текст самого лейбела - прозрачный, чтобы не заморачиваться */
  width: 30px;
  height: 30px;
  border: 1px solid #999;
  border-radius: 50%;
  font-size: 20px;
  font-family: "Helvetica";
  cursor: pointer;
  user-select: none;
}

.num::before,
.num::after,
.radius::before,
.radius::after {
  display: none;
  position: absolute;
  color: black;
  top: 5px;
  width: 100%;
  text-align: center;
}

  
  
  
  4





P.s. А возможных комбинаций n! ))) Будет 3 чекбокса - можно сделать 6 "переключений".
4 штуки = 24, 5 штук - уже 120 !)


Ответ 2


Хоть и не в тему, но вот подобное на z-index, без javascript:

Изначальный вариант был длиннее и неинтереснее, ищите его в истории правок, если угодно.

Новый, улучшенный вариант:



button:focus + button {z-index: 4}

button:nth-child(1) {z-index: 3}
button:nth-child(2) {z-index: 2}
button:nth-child(3) {z-index: 1}

button {
  background: radial-gradient(#fff 57%,#000 61%,#000 67%,#fff 71%);
  padding: 0 12px;
  position: absolute;
  font-size: 40px;
  outline: none;
  border: none;
}

четверг, 5 декабря 2019 г.

Сложный polygon на препроцессорах

#svg #sass #scss #less #clip_path


Необходим специфический clip-path: polygon() по точкам.
Какой-никакой пример в коде ниже.



.wrapper {
  width: 960px;
  height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background-image: url(http://beerhold.it/960/722);
  background-repeat: no-repeat;
  backgorund-position: center center;
  position: relative;
}

.key {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10em;
  height: 10em;
  border: 2em solid rgba(255, 255, 255, .3);
  border-radius: 10em;
}

.block1,
.block2 {
  position: absolute;
  top: 0;
  width: 480px;
  height: 720px;
}

.block1 {
  left: 0;
  background-color: rgba(255, 0, 0, .2);
}

.block2 {
  right: 0;
}
.block3 {
  top: 0;
  width: 100%;
  height: calc(50% - 7em);
  background: rgba(0, 0, 0, 0.7);
  
}
.block4 {
  top: calc(50% - 7em);
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 14em;
  clip-path: polygon(1% 0%, 100% 0%, 100% 100%, 0% 100%, 8% 94%, 15% 88%, 22% 78%,
29% 69%, 34% 60%, 34% 48%, 33% 36%, 30% 22%, 23% 14%, 12% 7%);
}
.block5 {
  bottom: 0;
  height: calc(50% - 7em);
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
}

  
  
    
    
    
    
  
  





Как заметно, на данный момент это просто кривая, вогнутая в фигуру. Задача нарисовать
полуокружность(или максимально приблизить к ней), вогнутую в фигуру.
В моём понимании для этого нужны less, sass и прочее. А также sin, cos. Плохо понимаю
с чего и как начать, не сталкивался с этим.
Спасибо @AndreyFedorov за кусок его кода использованный здесь 

(!) согласен и на любые другие варианты, дающие такой же результат.

Ответы

Ответ 1


Необходимые координаты в path:


120 — радиус круга; если надо уменьшить, то уменьшать обе координаты
240 — высота блока
1000 — длина блока


При необходимости повернуть вырез, воспользуйтесь атрибутом transform="rotate()" 



* {
  margin: 0;
  padding: 0;
}

.btn {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 10px solid rgba(255,255,255,0.4);
  top: 130px;
  left: -120px;
  background: transparent;
  box-sizing: border-box;
}
.btn:hover {
  border-color: rgba(255,255,255,0.7);
}
.image {
  background-image: url(https://s3.amazonaws.com/finely/resources/test.jpg);
  background-size: cover;
  background-position: center;
  width:100%;
  height:500px;
}

.image__right {
  position: absolute;
  width:50%;
  right: 0;
  top: 0;
}

.placeholder {
  height:130px;
  background: rgba(0,0,0,0.5);
}

.border-mask {
  height: 240px;
  background: rgba(0,0,0,0.5);
  -webkit-clip-path: url(#circleClip);
  clip-path: url(#circleClip);
}

понедельник, 17 июня 2019 г.

PHPStorm & Less: как компилировать минимизированный файл с помощью File Watchers?

Каждый раз сталкиваюсь с этим вопросом и с долго ищу ответ англоязычном stackOverflow.
В PHPStorm нужно компилировать "на лету" минимизированный .css файл из .less. File Watcher настроен, файл компилируется исправно, но какой флаг нужно добавить к аргументам, чтобы получить минимизированный файл?

Ответ

Введение
Представленный в этой части код не является ответом!
Безуспешно попытавшись найти ответ на свой вопрос (вероятно, плохо искал), я решил поступить так, как следовало сделать с самого начала - заглянуть в help node-модуля less. Выполнив команду, я получил исчерпывающий ответ -
-x, --compress Compresses output by removing some whitespaces.
Вот оно! - подумал я, добавил флаг --compress в настройках File Watcher и получил... минимизированный файл с предупреждением
The compress option has been deprecated. We recommend you use a dedicated css minifier, for instance see less-plugin-clean-css.html
Дальше я проследовал на страницу https://github.com/less/less-plugin-clean-css, где нашел итоговую, рабочую инструкцию.
Рабочий ответ
Требуется установить дополнительно модуль less-plugin-clean-css командой
npm install -g less-plugin-clean-css
и затем к аргументам Watcher'а добавить
--clean-css="--s1 --advanced --compatibility=ie8"
в итоге настройки Watcher'a в моем случае выглядели вот так:

Файл получаем минимизированный, но с сохраненными комментариями. Описание всех аргументов модуля clean-css можно найти на странице https://github.com/jakubpawlowicz/clean-css. Там я нашел ответ, как при минимизации убрать комментарии:
требуется к аргументам для --clean-css добавить флаг --s0 (в моем случае - исправить уже имеющийся флаг --s1) таким образом:
--clean-css="--s0 --advanced --compatibility=ie8"

вторник, 9 апреля 2019 г.

Как создать такие треугольники с помощью псевдоэлементов?

Здравствуйте,помогите,пожалуйста,создать вот такие вот треугольники...У меня,правда,нет идей. Уже гуглил на эту тему,но ничего стоящего не нашел. Изображением вставлять не канает. Нужно именно с помощью CSS.

Ответ

Gradient Generator - colorzilla.com
CSS triangle generator - http://apps.eky.hk/css-triangle-generator/
* { padding: 0; margin: 0; box-sizing: border-box; } .b-breadcrumbs { text-align: center; font-size: 0; background: #271E19; padding: 25px; line-height: 1.15; } .b-breadcrumbs > li { display: inline-block; vertical-align: top; font-size: 16px; margin-left: 34px; } .b-breadcrumbs > li > a { height: 48px; position: relative; display: block; color: #000; font-weight: 700; padding: 15px; background: -moz-linear-gradient(top, rgba(255, 201, 55, 1) 0%, rgba(255, 201, 55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255, 201, 55, 1) 0%, rgba(255, 201, 55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255, 201, 55, 1) 0%, rgba(255, 201, 55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .b-breadcrumbs > li > a:before, .b-breadcrumbs > li > a:after { content: ''; position: absolute; left: 100%; width: 0; height: 0; border-style: solid; } .b-breadcrumbs > li > a:before { top: 0; border-width: 24px 0 0 24px; border-color: transparent transparent transparent #FFC937; } .b-breadcrumbs > li > a:after { bottom: 0; border-width: 24px 24px 0 0; border-color: #FFA523 transparent transparent transparent; } .b-breadcrumbs > li:last-child > a:before, .b-breadcrumbs > li:last-child > a:after { display: none; } .b-breadcrumbs > li > a > span { position: absolute; top: 0; right: 100%; height: 100%; width: 24px; } .b-breadcrumbs > li > a > span:before, .b-breadcrumbs > li > a > span:after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; left: 0; } .b-breadcrumbs > li > a > span:before { top: 0; border-width: 0 24px 24px 0; border-color: transparent #FFC937 transparent transparent; } .b-breadcrumbs > li > a > span:after { bottom: 0; border-width: 0 0 24px 24px; border-color: transparent transparent #FFA523 transparent; } .b-breadcrumbs > li > a:hover { color: #fff; background: red; } .b-breadcrumbs > li > a:hover:before { border-left-color: red; } .b-breadcrumbs > li > a:hover:after { border-top-color: red; } .b-breadcrumbs > li > a:hover > span:before { border-right-color: red; } .b-breadcrumbs > li > a:hover > span:after { border-bottom-color: red; }

Вариант 2 - с использованием clip-path
* { padding: 0; margin: 0; box-sizing: border-box; } .b-breadcrumbs { text-align: center; font-size: 0; background: #271E19; padding: 25px; } .b-breadcrumbs > li { display: inline-block; vertical-align: top; font-size: 16px; margin-left: 0; } .b-breadcrumbs > li > a { position: relative; display: block; color: #000; font-weight: 700; padding: 15px 25px; background: -moz-linear-gradient(top, rgba(255, 201, 55, 1) 0%, rgba(255, 201, 55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255, 201, 55, 1) 0%, rgba(255, 201, 55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255, 201, 55, 1) 0%, rgba(255, 201, 55, 1) 50%, rgba(255, 165, 35, 1) 50%, rgba(255, 165, 35, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ -webkit-clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%); clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%); } .b-breadcrumbs > li:first-child > a{ padding-left: 15px; -webkit-clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0 100%, 0 0); clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0 100%, 0 0); } .b-breadcrumbs > li:last-child > a{ padding-right: 15px; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 50%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 50%); } .b-breadcrumbs > li > a:hover{ color: #fff; background: red; }

понедельник, 8 октября 2018 г.

Сложный polygon на препроцессорах

Необходим специфический clip-path: polygon() по точкам. Какой-никакой пример в коде ниже.
.wrapper { width: 960px; height: 720px; display: flex; align-items: center; justify-content: center; margin: 0 auto; background-image: url(http://beerhold.it/960/722); background-repeat: no-repeat; backgorund-position: center center; position: relative; } .key { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 10em; height: 10em; border: 2em solid rgba(255, 255, 255, .3); border-radius: 10em; } .block1, .block2 { position: absolute; top: 0; width: 480px; height: 720px; } .block1 { left: 0; background-color: rgba(255, 0, 0, .2); } .block2 { right: 0; } .block3 { top: 0; width: 100%; height: calc(50% - 7em); background: rgba(0, 0, 0, 0.7); } .block4 { top: calc(50% - 7em); background: rgba(0, 0, 0, 0.7); width: 100%; height: 14em; clip-path: polygon(1% 0%, 100% 0%, 100% 100%, 0% 100%, 8% 94%, 15% 88%, 22% 78%, 29% 69%, 34% 60%, 34% 48%, 33% 36%, 30% 22%, 23% 14%, 12% 7%); } .block5 { bottom: 0; height: calc(50% - 7em); width: 100%; background: rgba(0, 0, 0, 0.7); }

Как заметно, на данный момент это просто кривая, вогнутая в фигуру. Задача нарисовать полуокружность(или максимально приблизить к ней), вогнутую в фигуру. В моём понимании для этого нужны less, sass и прочее. А также sin, cos. Плохо понимаю с чего и как начать, не сталкивался с этим. Спасибо @AndreyFedorov за кусок его кода использованный здесь
(!) согласен и на любые другие варианты, дающие такой же результат.

Ответ

Необходимые координаты в path
120 — радиус круга; если надо уменьшить, то уменьшать обе координаты 240 — высота блока 1000 — длина блока
При необходимости повернуть вырез, воспользуйтесь атрибутом transform="rotate()"
* { margin: 0; padding: 0; } .btn { position: absolute; width: 240px; height: 240px; border-radius: 50%; border: 10px solid rgba(255,255,255,0.4); top: 130px; left: -120px; background: transparent; box-sizing: border-box; } .btn:hover { border-color: rgba(255,255,255,0.7); } .image { background-image: url(https://s3.amazonaws.com/finely/resources/test.jpg); background-size: cover; background-position: center; width:100%; height:500px; } .image__right { position: absolute; width:50%; right: 0; top: 0; } .placeholder { height:130px; background: rgba(0,0,0,0.5); } .border-mask { height: 240px; background: rgba(0,0,0,0.5); -webkit-clip-path: url(#circleClip); clip-path: url(#circleClip); }

Страницы

Поиск по вопросам

воскресенье, 8 марта 2020 г.

Ответы

Ответ 1

пятница, 14 февраля 2020 г.

Ответы

Ответ 1

четверг, 13 февраля 2020 г.

Ответы

Ответ 1

Ответ 2

среда, 5 февраля 2020 г.

Ответы

Ответ 1

Ответ 2

среда, 1 января 2020 г.

Ответы

Ответ 1

Ответ 2

вторник, 17 декабря 2019 г.

Ответы

Ответ 1

Ответ 2

воскресенье, 8 декабря 2019 г.

Ответы

Ответ 1

Ответ 2

четверг, 5 декабря 2019 г.

Ответы

Ответ 1

понедельник, 17 июня 2019 г.

Ответ

вторник, 9 апреля 2019 г.

Ответ

понедельник, 8 октября 2018 г.

Ответ

воскресенье, 8 марта 2020 г.

пятница, 14 февраля 2020 г.

четверг, 13 февраля 2020 г.

среда, 5 февраля 2020 г.

среда, 1 января 2020 г.

вторник, 17 декабря 2019 г.

воскресенье, 8 декабря 2019 г.

четверг, 5 декабря 2019 г.

понедельник, 17 июня 2019 г.

вторник, 9 апреля 2019 г.

понедельник, 8 октября 2018 г.