Как сделать градиентную резиновую кнопку с косым краем (в виде трапеции) и закругленными углами?

#html #css #css3

Вот пример на картинке, как можно это реализовать? Желательно на чистом css?


    

Ответы

Ответ 1

UPD. Вот кнопка с градиентом, скошенным краем и закруглёнными углами. Растягивается
под содержимое.



Делал на основе стрелки с градиентом. Чтобы получить скошенную сторону, спрятал за кнопку
псевдоэлемент и трансформировал его с помощью skewX. Чтобы кнопка растягивалась, переместил
точку трансформации в угол, растянул псевдоэлемент между верхним и нижним краями родителя
и задал ему ширину как у родителя.

https://codepen.io/glebkema/pen/eRPgMP



.btn-skew,
.btn-skew:before {
  border: 1px solid #4d7a9c; 
  box-sizing: border-box;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;

  background: #238fe7; /* Old browsers */
  background: -moz-linear-gradient(top,  #238fe7 0%, #156fba 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #238fe7 0%,#156fba 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #238fe7 0%,#156fba 100%); /* W3C, IE10+,
FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#238fe7', endColorstr='#156fba',GradientType=0
); /* IE6-9 */ 
}

.btn-skew {
  border-left: none;
  color: white;
  font-size: 18px;
  margin-left: 20px;
  padding: 10px 14px 11px 10px;
  position: relative;
}

.btn-skew:before {
  content: '';
  display: block;
  position: absolute; top: -1px; right: 0; bottom: -1px;
  width: 100%;
  z-index: -1;
 
  -webkit-transform: skewX(-15deg);
     -moz-transform: skewX(-15deg);
      -ms-transform: skewX(-15deg);
       -o-transform: skewX(-15deg);
          transform: skewX(-15deg);
  -webkit-transform-origin: 0 0;
     -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
       -o-transform-origin: 0 0;
          transform-origin: 0 0;
}




Ответ 2

Реализация на основе свойства transform



.element {
  display:inline-block;
  position:relative;
  width:100px; height:40px;
  background-color:blue;
  border-radius:5px 5px 5px 0;
  padding-left:15px;
}
.element::before {
  position:absolute;
  top:0; bottom:0; left:-7.5px;
  width:15px;
  background-color:blue;
  border-radius:5px 0 0 7.5px;
  content:'';
  transform:skewX(-15deg);
}
body {
  margin:100px;
}

Вращение блока при движении мышкой

#javascript #jquery #css #transform

Нужна анимация как на сайте https://openai.com/
Карточка сверху в правом блоке и ряд внизу.

Кратко:
При движении мыши над блоком-карточкой, сторона над которой находится мышь как бы
отдалялась

Понятно, что это transform rotate X,Y,Z. Но как рассчитываются координаты, может
это плагин какой-то? 
Но лучше реализацию без плагина на jQuery.
    

Ответы

Ответ 1

Можно привязать свойство rotateX и rotateY к CSS-переменным и на лету менять их значение
через JS. Чувствительность к движению мыши задается коэффициентом 30, чем он выше,
тем менее картинка реагирует на движение мыши.



const img = document.querySelector("img");

document.addEventListener("mousemove", function (e) {
  move (e.clientX, e.clientY);
});

function move (x, y) {
  let wh = window.innerHeight / 2,
  ww = window.innerWidth / 2;
  
  document.body.style.setProperty('--mouseX', (x - ww) / 30 + "deg");
  document.body.style.setProperty('--mouseY', (y - wh) / 30 + "deg");
}
:root {
  --mouseX: 0deg;
  --mouseY: 0deg;
}

body {
  display: flex;
  min-height: 100vh;
}

img {
  width: 50vmin;
  height: 50vmin;
  margin: auto;
  transform: rotateX(calc(var(--mouseY))) rotateY(calc(var(--mouseX)));
}



Ответ 2

Получилось так. Особо не думал над названиями переменных. Главное работает



let $img = $('.card');

function move(x, y) {
  // обертка с доп свойствами
  $img.addClass('card-active');

  // центр карточки
  let xser = $img.offset().left + $img.width() / 2;
  let yser = $img.offset().top + $img.height() / 2;

  // координаты мыши относительно центра карточки
  let otnX = x - xser;
  let otnY = y - yser;

  // вычисляем % - на каком расстоянии мышь от середины до края, центр = 0%
  let raznX = otnX / $img.width() * 100 * 2;
  let raznY = otnY / $img.height() * 100 * 2;

  // на сколько градусов нужно повернуть (100% = 6deg)
  let trX = raznY / 100 * 6 * -1;
  let trY = raznX / 100 * 6;

  // окруление
  trX = Math.round(trX * 1000) / 1000;
  trY = Math.round(trY * 1000) / 1000;

  // в css
  $img.css('transform', 'rotateY(' + trY + 'deg) rotateX(' + trX + 'deg) rotateZ(0deg)
scale(1.05)');
}

function resetTransform() {
  $img.removeClass('card-active');
  $img.css('transform', 'rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1)');
}

$img.mousemove(function(e) {
    move(e.pageX, e.pageY);
  })
  .mouseout(function(e) {
    resetTransform();
  });
.card-wrapper {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.card {
  background: linear-gradient(45deg, #1e5799 0%, #bab523 19%, #210611 37%, #e23424
66%, #28fcdc 84%, #764682 100%);
  display: block;
  position: relative;
  width: 220px;
  height: 320px;
  margin: 50px auto;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.card img {
  width: 100%;
  height: 100%;
}

.card img:before {
  position: absolute;
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #000;
  left: 50%;
  top: 50%;
}

.card-active {
  transition: transform .4s cubic-bezier(0, 0, .2, 1), filter .15s cubic-bezier(0,
0, .2, 1);
}


  


  



Ответ 3

Этот эффект называется что-то вроде Parallax effect for cards.

Один из примеров реализации — Create an Apple TV Poster Parallax Effect in CSS3 &
jQuery, но с использованием jQuery.

Ребята с https://openai.com/ всё на чистом JavaScript реализацию написали. Также
с использованием CSS анимации само собой (для переходов). Но они JS обфусцировали.
Может быть вы или кто-то другой захочет реверс-инжиниринг провести.

Эти странные теги SVG

#svg

Странные какие-то эти теги в SVG. То они парные, то одиночные.
Не пойму, когда, какие применять. 

Например, - встречаются две формы записи команды  с разной формой записи закрывающего
тега:  








Так как же правильно закрывать тег, если обе формы записи работают без сообщения
об ошибке?
    

Ответы

Ответ 1

Да, эти две формы записи будут работать без сообщения об ошибке, но только, если
код SVG встроен в HTML. 
Но если код SVG сохранён в *.svg файл и  запустить его на выполнение, то будет выдано
сообщение об ошибке: 

   

В данном случае, правильное закрывание тега      

Так зачем же применяются две формы записи закрывания тега?    

В синтаксисе SVG довольно строгая система   написания тегов. По порядку применения,
теги можно разбить на три группы:   


Тэги “хамелеон” – в зависимости от контекста могут быть одиночными или парными.    
Одиночные тэги     
Парные тэги   


1. Тэги “хамелеон” – в зависимости от контекста могут быть одиночными или парными.

Одиночный тэг –  в примере ниже работает нормально. 

         

Допустим понадобилось добавить анимацию линии. Для этого внутрь одиночного тэга –
 добавляем одиночный тэг анимации –        

 
            
/>


Получаем сообщение об ошибке: 

       

Посмотрите внимательно на код выше. Одиночный тег анимации вложен в одиночный тег
линии. Парсер XML не понимает этого и подсказывает, что нужно изменить внешний одиночный
тэг линии на парный .    

Пример правильного закрытия тега       








Вывод – одиночные теги базовых фигур SVG заменяются на парные теги, если внутри вложены
одиночные теги анимации:    

, , , ,        

Это справедливо для всех основных фигур SVG: , , , , , , и ;       

2. Одиночные тэги.

В этом разделе находятся тэги, которые всегда применяются, только как одиночные.
Это тэги реализующие анимацию:




   

Анимационные теги всегда используются вместе с тегами объекта анимации. Они могут
находится либо внутри тегов объекта анимации, либо использовать ссылку, xlink:href=”#my-circle”
на внешний объект, см.  листинг ниже.   







В этом примере анимационный тег находится снаружи объекта анимации, поэтому тег объекта
анимации  закрыт, как одиночный тег.        

 3. Парные теги

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

 … 
 … 
 … 
 … 
 … 
 … 
 … 
 … 

 … 
 …      

В спецификации SVG тегов много, перечислять все парные теги нет смысла.
 Полный перечень здесь.

Полупрозрачная круглая рамка для фото

#html #css #css3

В продолжении темы Полупрозрачная рамка внутри картинки —
а если нужна рамка с закругленными углами, или полностью круглая, т.е. прямоугольное
фото центр чистый, остальное пространство занято полупрозрачной рамкой, внутренняя
часть в виде круга?
    

Ответы

Ответ 1

Можно и на изи без SVG..



.img-block {
  display: block;
  width: 150px;
  height: 150px;
  position: relative;
  overflow: hidden;
}

.img-block img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.img-block .border {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 100px rgba(255, 0, 0, .5);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

  
  




Ответ 2

На SVG позже сделаю.
mix-blend-mode плохо поддерживается, но эффекты получаются невероятные:



img {
  width: 480px;
}

.item {
  width: 480px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.item:after {
  content: "";
  display: block;
  width: inherit;
  height: 100%;
  background: rgba(255, 5, 255, .9);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: screen
}

.item:before {
  content: "";
  display: block;
  width: 90%;
  height: 90%;
  background: rgba(250, 250, 250, 0.8);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  mix-blend-mode: color;
}

  





Второй пример: 



img {
  width: 480px;
}

.item {
  width: 480px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.item:after {
  content: "";
  display: block;
  width: inherit;
  height: 100%;
  background: rgba(255, 5, 255, .9);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: darken;
}

.item:before {
  content: "";
  display: block;
  width: 90%;
  height: 90%;
  background: url(https://cdn.wallaps.com/wallpapers/150000/144504.jpg);
  position: absolute;
  top: 50%;
  left: 50%;
  background-size: 100% 100%;
  z-index: 3;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

  





Третий вариант:



img {
  width: 480px;
}

.item {
  width: 480px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.item:after {
  content: "";
  display: block;
  width: inherit;
  height: 100%;
  background: rgba(255, 255, 255, .0);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: color-dodge;
  filter: grayscale(0);
}

.item:before {
  content: "";
  display: block;
  width: 90%;
  height: 90%;
  background: url(https://cdn.wallaps.com/wallpapers/150000/144504.jpg);
  position: absolute;
  top: 50%;
  left: 50%;
  background-size: 100% 100%;
  z-index: 3;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: grayscale(100);
}

  



Ответ 3

SVG. Пример с использованием mask:






Ответ 4

Можно также использовать для этого наслаивающийся псевдоэлемент с бесконечной тенью
и border-radius:



body {
  margin: 0;
}

div {
  background-image: url("https://i.stack.imgur.com/sPNoH.jpg");
  background-size: cover;
  height: 100vh; /* Указать нужную высоту и ширину здесь */
  position: relative;
}

div:after {
  content: "";
  
  /* накрыть картинку полностью */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  /* бесконечная тень */
  /* fallback для IE, так как IE не распознаёт единицы vmax */
  box-shadow: 0 0 0 99999px rgba(255, 255, 255, .6);
  /* для остальных браузеров, которые понимают vmax */
  box-shadow: 0 0 0 100vmax rgba(255, 255, 255, .6);
 
  border-radius: 50%;
}







Для некоторых ситуаций вам вполне подойдёт полупрозрачный радиальный градиент с полностью
прозрачной областью для картинки ("вырез"):



body {
  margin: 0;
}

div {
  background-image:
    radial-gradient(transparent 70%, rgba(255, 255, 255, 0.6) 0),
    url("https://i.stack.imgur.com/sPNoH.jpg");
  background-size: cover;
  height: 100vh; /* Указать нужную высоту и ширину здесь */
}





Я использую 0 как второе значение (rgba(255, 255, 255, 0.6) 0) в радиальном градиенте,
чтобы не дублировать первое, так как по спецификации ступенька градиента не может быть
меньше предыдущего значения.


  If a color-stop has a position that is less than the specified position of any
color-stop before it in the list, set its position to be equal to the largest specified
position of any color-stop before it.

Как заставить работать constexpr с указателем на -1?

#cpp #cpp11 #constexpr

Нужен указатель на адрес 0xFFFF FFFF FFFF FFFF, или на -1. Пытаюсь определить как
constexpr auto hInvd = reinterpret_cast(-1ul);, но вываливается ошибка, что
это не константное выражение. Очевидно из-за reinterpret_cast. К сожалению, другие
*_cast тоже не дают ничего полезного. Простой const работает без проблем const auto
hInvd=reinterpret_cast(-1ul);
Мне нужен указатель на область памяти, которая будет свободна. nullptr для этого
не годится, так как нулевой адрес может быть использован, а вот вероятность использования
адреса 0xFFFFFFFFFFFFFFFF практически равна нулю.
    

Ответы

Ответ 1

Конвертировать любую целочисленную константу в указатель на constexpr невозможно,
т.к. для этого используется reinterpet_cast, который прямо запрещён в описании константных
выражений ([expr.const]).

Почему так? Потому что constexpr всегда является чем-то определённым и не может дать
на выходе неопределённое поведение. Если бы можно было случайный адрес привести к указателю
на constexpr, тогда получилось бы, что его использование (разыменовывание) может приводить
к UB.


Ответ 2

Как выяснилось, этот ответ - баг компилятора :)


Ну, gcc сожрал финт с вычитанием единицы из нулевого указателя, правда, только через
промежуточную переменную: https://ideone.com/Hp6DNt

#include 

using namespace std;

int main()
{
  constexpr void *p = nullptr;
  constexpr void *res = p - 1;

  cout << res << endl;

  return 0;
}

Заливка слоя-маски

#javascript #html #jquery #css #svg

Предыстория

Хочу написать некую "систему уровней".
Есть три переменные:

Score - Текущее количество очков;
ScoreNext - Количество очков до нового уровня;
Level - Текущий уровень;


Механику подсчёта опустим, приведу пример:
У пользователя 10 очков, он на 1 уровне, для следующего нужно набрать 20 очков.

1 LVL (0) | #####10%----- | 2 LVL (20) // Не не хватает 10 очков == 10%


Надеюсь понятно, переходим дальше.

Идея

Пользовались программой Steam? Если да, то понять меня будет проще.
Но всё же расскажу:

В Steam используются уровни и их много (на данный момент 4999).


Каждый уровень разбит на "группы"(вертикальные столбцы): Первые 100 - круг, вторые
100 - шестиугольник и т.д. (на скрине видно).
Так же каждая группа разбита ещё на группы (горизонтальные столбцы) - 0-10 - серый
цвет изображения, 10-20 - красный и т.д..

Что хочу

Реализовать подобное на SVG.
При этом цвет будет заполнятся как прогресс-бар, снизу-вверх, в процентном соотношение.
Сама "иконка" уровня (вертикальные столбцы на скрине) - маска-слой изображение (SVG
или растровое изображение).
При этом всё это будет изменяться через JS\JQ.

Что нужно
Как сверстать разметку самого SVG, что "крутить" чтобы JS\JQ кодом можно было управлять
"уровнями" (картинкой, цветами, процентным соотношением).



P.s. Вопрос в основном для @Alexandr_TT, он попросил задать его в виде вопроса тут,
но если кому-то интересна данная идея - прошу писать ответы или комментарии.

P.s. Слой-маска или Alpha texture.



Ближе к чёрному - прозрачное.



"значок" уровня, пример:



body {background: gray;}






UPD

Вот что-то такое, косяков много



$('select').bind('change', function(){
	let c = $(this).val();
  $('.lvl-icon').attr('class','lvl-icon '+c).find('animate').attr('dur', '5s');
});

$('input').bind('change mousemove', function(){
	let c = $(this).val();
  $('#change').attr('height', c+'%');
});
.lvl-icon {
  fill: none;
  stroke: transparent;
  stroke-width: 10;
  mask: url(#mask);
}

.lvl-icon .none {display: none;}
.lvl-icon.gray {stroke: gray;}
.lvl-icon.red {stroke: red;}
.lvl-icon.cur #curcle,
.lvl-icon.quad #quad {display: block;}


  lvl 00-10 - gray
  lvl 10-20 - red
  Ниже будет другая картинка
  lvl 20-30 - gray
  lvl 30-40 - red













    

Ответы

Ответ 1

Сначала была лишь анимация заливки в стакан:  



#пуск {cursor: pointer;}
#жижа {stroke:#a50; 
       stroke-linecap: butt; 
       stroke-width:200%; 
       stroke-opacity:.6}







Однако это была лишь разминка.
А не пора ли нам показать настоящий "тринкен-процесс", (?)  

На троих:



#лить, #пить {cursor: pointer;}
#жижа {stroke:#f4a; stroke-width:200%; 
       stroke-linecap: butt; stroke-opacity:.8;
}
#тринк {box-shadow: #fff 0 0 8px 4px inset; background: 
  repeating-linear-gradient(45deg, transparent, #999, transparent .8%) fixed;
}









Остальное - по мере поступления дополнительных комментариев...


Ответ 2

Не совсем уверен, не ушел ли я не в ту степь) Не svg, но довольно похоже. Работает
с -webkit- в Chrome (в других не проверял). Изображение выступает в роли маски, применяется
через -webkit-mask-image. Цвет меняется на каждом уровне в зависимости от общего прогресса.



document.getElementById("range").addEventListener("input", e => {
  let val = e.target.value;
  let max = 1000;
  let lvlMax = 200;

  let currentlvlProgress = val % lvlMax / lvlMax * 100;
  let currentLvl = Math.ceil(val / lvlMax);
  let globalProgress = val / max * 100;
  let hue = currentLvl / (max / lvlMax) * 360;

  document.getElementById("info").innerHTML = `
    1 уровень: ${lvlMax} очков

    Всего уровней: ${max / lvlMax}

    Текущий уровень: ${currentLvl}

    Прогресс в уровне: ${currentlvlProgress}

    Глобальный прогресс: ${globalProgress}

    Изменение цвета: ${hue} градусов

  `;

  document.getElementById("progress").style.height = `${currentlvlProgress}%`;
  document.getElementById("progress").style.filter = `hue-rotate(${hue}deg)`;
});
body {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

body>* {
  margin-bottom: 5px;
}

#icon {
  position: relative;
  width: 40px;
  height: 40px;
  mask-size: 100% 100%;
  mask-position: 0 0;
  mask-image: url("https://cdn.vectorlogosupply.com/logos/large/2x/instagram-glyph-1-png-transparent-logo.png");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
  -webkit-mask-image: url("https://cdn.vectorlogosupply.com/logos/large/2x/instagram-glyph-1-png-transparent-logo.png");
  -moz-mask-size: 100% 100%;
  -moz-mask-position: 0 0;
  -moz-mask-image: url("https://cdn.vectorlogosupply.com/logos/large/2x/instagram-glyph-1-png-transparent-logo.png");
}

#icon>#progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0%;
  width: 100%;
  background-color: red;
  z-index: 2;
}

  

Производительность LINQ

#linq #c_sharp

Есть массив целых чисел. Нужно подсчитать количество элементов больше пяти.
int[] numbers = { 1, 3, 5, 7, 3, 2, 5, 7 };

Вариант с циклом:
int count = 0;
foreach (int n in numbers) {
    if (n > 5) {
        count++;
    }
}

Вариант с LINQ:
int count = numbers.Count(n => n > 5);

Что выгодней с точки зрения производительности и насколько существенна разница?    

Ответы

Ответ 1

Предыдущий ответ не имеет никакого отношения к реальности. Хотелось бы примера с
подтверждением наличия случая, когда LINQ быстрее обычного кода. Нужно понимать, что
нет ничего бесплатного. Свои пять копеек стоит даже использование foreach вместо обычного
for. Если необходимо писать некую библиотеку, с требованием к производительности, то
надо быть очень осторожным при использовании LINQ. Другой вопрос, что как правило преимущества
качества кода гораздо важнее некоторого падения производительности.

int count = 0;
//int[] numbers = { 1, 3, 5, 7, 3, 2, 5, 7 };
int N = 100000;
int RUN_COUNT = 10000;
Random r = new Random();
int[] numbers = Enumerable.Range(1, N).Select((x) => r.Next()).ToArray();


DateTime started = DateTime.Now;
for (int i = 0; i < RUN_COUNT; i++)
{
    count = 0;
    //foreach (int n in numbers)
    for (int j = 0; j < numbers.Length; j++ )
    {
        if (numbers[j] > 5)
        //if (n  > 5)
        {
            count++;
        }
    }
}

DateTime end = DateTime.Now;
TimeSpan tspan = end - started;

double iteration_time_simple = (double)tspan.TotalMilliseconds /  1000;           
//---------------------------------------------------------
started = DateTime.Now;
for (int i = 0; i < RUN_COUNT; i++)
{
     count = numbers.Count(n => n > 5);
}

end = DateTime.Now;
tspan = end - started;

double iteration_time_linq = (double)tspan.TotalMilliseconds /  1000;


Console.WriteLine("linq/simple: {0}", iteration_time_linq / iteration_time_simple);
Console.WriteLine("simple time: {0} seconds", iteration_time_simple);
Console.WriteLine("linq  time: {0} seconds", iteration_time_linq); 


На выходе получаем:

linq/simple: 2.612
simple time: 7.8125 seconds
linq  time: 20.40625 seconds


То есть вариант с LINQ работает более, чем в 2.5 раза медленнее. 

Мое резюме: использовать LINQ, но при необходимости  с помощью профилировщика переписывать
совсем неадекватные места; если писать LINQ без ума, можно и разницу более чем в 10
раз получить и далее.


Ответ 2

LINQ - гарантированно быстрее, чем любые вручную имплементированные циклы. Он раскладывается
в более компактный ассемблер.
В конкретном примере врядли можно заметить разницу, но при работе с большим количеством
текстовых данных, производительность LINQ будет заметна.
А, в общем, по LINQ: ведь качество кода (в частности, его читабельность) не менее
важно, чем производительность. Подумайте, что будет легче поддерживать, 1й или 2й вариант?