Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.07.2015, 19:14
Кандидат Javascript-наук
Отправить личное сообщение для soltx Посмотреть профиль Найти все сообщения от soltx
 
Регистрация: 19.05.2013
Сообщений: 144

На чем реализовать параллелограмм
Привет, на чем реализовать параллелограмм? css отпадает, так как проблемы с кроссбраузерностью

обычное состояние

при наведении
Ответить с цитированием
  #2 (permalink)  
Старый 13.07.2015, 19:23
Аватар для Safort
Профессор
Отправить личное сообщение для Safort Посмотреть профиль Найти все сообщения от Safort
 
Регистрация: 23.12.2013
Сообщений: 1,856

soltx,
использовать графику, другого варианта нет, если уж CSS совсем нельзя.
Ответить с цитированием
  #3 (permalink)  
Старый 13.07.2015, 19:29
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

soltx,
рони тут демонстрировал фишку "Косые края" (что-то про ленточку в браузере) с помощью широких бордеров, Думаю будет кроссбраузерно. Поищите по его сообщениям
Ответить с цитированием
  #4 (permalink)  
Старый 13.07.2015, 19:30
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,138

Сообщение от soltx
css отпадает, так как проблемы с кроссбраузерностью
Какой ужас у 1% пользователей будет прямоугольник вместо параллелограмма.
Ответить с цитированием
  #5 (permalink)  
Старый 13.07.2015, 19:30
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Deff, рони? https://css-tricks.com/examples/ShapesOfCSS/ кивордс css shapes
Ответить с цитированием
  #6 (permalink)  
Старый 13.07.2015, 23:19
Кандидат Javascript-наук
Отправить личное сообщение для soltx Посмотреть профиль Найти все сообщения от soltx
 
Регистрация: 19.05.2013
Сообщений: 144

Сообщение от MallSerg Посмотреть сообщение
Какой ужас у 1% пользователей будет прямоугольник вместо параллелограмма.
вот пример: border нужно сгладить, подобные манипуляции типа backface-visibility: hidden; загубят качество изображения есть ещё подводные камни, так что это не 1%, а все 99%
Ответить с цитированием
  #7 (permalink)  
Старый 13.07.2015, 23:58
Кандидат Javascript-наук
Отправить личное сообщение для soltx Посмотреть профиль Найти все сообщения от soltx
 
Регистрация: 19.05.2013
Сообщений: 144

вот результат на css
проблемы с потерей качества изображения в chrome, opera в safari не смотрел, буду признателен если кто отпишет как там дела

если удалить свойство backface-visibility: hidden; проблема с потерей исчезнет, но появиться новая проблема: у границы будут не сглаженные края (зубчики)

может у кого получиться решить проблему в css, поделитесь кодом

Последний раз редактировалось soltx, 14.07.2015 в 00:11.
Ответить с цитированием
  #8 (permalink)  
Старый 14.07.2015, 00:04
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

soltx,
Мон наложить поверх первого бордера второй с z-index:2 с полупрозрачным цветом rgba() , возможно сдвинуть на пиксел

Последний раз редактировалось Deff, 14.07.2015 в 01:04.
Ответить с цитированием
  #9 (permalink)  
Старый 14.07.2015, 05:39
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от soltx
может у кого получиться решить проблему
Зачем саму картинку-то скукоживать? Плющат, таращат и скукоживают картинки только недобитые пролетарием колхозники.

В качестве иллюстрации функция вычисления ширины основания параллелограмма. Из скрипта для ФШ

/*
@param bounds array габариты объекта
@param radius float юзер задает радиус скругления от 0 (нет) до любого
@param angle float юзер задает угол наклона - скоса от 0 (нет) до +любого (вправо) или -любого (влево)
return side float ширина основания
*/
function calcSkew(bounds, radius, angle) {
	var R = radius,
		A = Math.PI * (Math.abs(angle)/180),
		H = bounds[3] - bounds[1]; // height,
		hyp = R / Math.cos(A),
		leg = hyp * Math.sin(A),
		side = (H * Math.tan(A) - leg + R - hyp)/2;
	return side;
}


Скрипт описывает скругленный параллелограмм внутри габаритных размеров слоя (картинки), а не скукоживает саму картинку, которая как есть просто маскируется векторной маской со всеми радиусами и наклонами и отступами.

Я к тому что если захотите автоматически рассчитывать параметры для стиля, вам эта функция пригодится. В терминах css маскирование это overflow:hidden контейнера картинки.

ЗЫ Кто алгебру читал дальше предисловия, может упростить вычисления. У меня мощности не хватило.

Последний раз редактировалось kostyanet, 14.07.2015 в 05:47.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
функция. ошибка... в чем проблема? ufo Общие вопросы Javascript 8 16.03.2015 00:42
Подскажите в чем ошибка Victor031 Общие вопросы Javascript 2 08.02.2015 23:54
Чем можно сделать отображение видео на сайте как в примере? Duda.Ml1986@gmail.com Библиотеки/Тулкиты/Фреймворки 0 24.10.2014 11:13
Помогите найти в чем ошибка Pashok Элементы интерфейса 6 26.02.2013 20:20
Как реализовать? Fliand Элементы интерфейса 4 22.08.2009 19:47