Форум

Pavel M. · #1 (**permalink**) 03.04.2012, 12:09

Прочитал сегодня http://habrahabr.ru/post/141262/

Попробовал сделать, чтобы заработало в опере немного по другому
не с помощью overflow:hidden в элементе с border-radius,
а используя box-shadow и background: transparent

правда понадобился третий элемент и есть определенные ограничения у этого решения, но вроде у меня в opere 11.61 заработало

автору статьи не писал, нет прав на это в habre

возможно, кому-то пригодится

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>

.wrap{
    width:150px;
    height:150px;
    background:green;
	position: relative;
	overflow: hidden;
}

.p2{
    width:400px;
    height:400px;
    background:red;
	position: absolute;
	border-radius:100%;
	left: 20px;
	top: 20px;
}

.p1{
    width:150px;
    height:150px;
	position: absolute;	
    background:transparent;
    border-radius:100%;
	box-shadow: 0 0 1px 200px #fff;
}

</style>
</head>
<body>
  <div class="wrap">
		<div class="p2">This is Sparta!</div>
		<div class="p1"></div>
  </div>
</body>
</html>

Nanto · #2 (**permalink**) 04.04.2012, 18:25

Меньше читайте всяких дурачков на Хабре.
По коду - если уж фиксите баг для Оперы, отчего не заюзать псевдоэлементы, вместо того, чтобы плодить сущности без нужды.
И таки Ваш пример сработает, только если цвет бэкграунда совпадает с цветом тени. Это очень жирный минус, особенно если бэкграунд не однотонный.
Ну и Вы не пионер:
http://forum.htmlbook.ru/index.php?showtopic=28923
http://forum.htmlbook.ru/index.php?showtopic=29990
http://www.alpatriott.ru/works/primer/opera-radius.html
http://jsfiddle.net/x56G6/15/
http://www.komodomedia.com/blog/2010...s-and-avatars/

Pavel M. · #3 (**permalink**) 05.04.2012, 12:43

спасибо за ссылки, но там в основном бились с проблемой скругления углов у изображений в Опера - сейчас эта проблема не так актуальна - новые Оперы скругляют углы и у картинок.

А вот нормального решения (не затрагивающего фон снаружи) того что в Опера блок с overflow:hidden и со скругленными углами не правильно обрезает содержимое не нашел.

Возможно, кто-то подскажет как это можно сделать.

Nanto · #4 (**permalink**) 05.04.2012, 16:37

Ну по сути одно и тоже ведь!
Раз уж SelenIT не знает - то без вариантов пока. Он правда что-то говорил про поддержку старых версий Оперы фильтров для SVG и возможность через них использовать альфа-канал, но не разобрался в спеках.
А по сабжу - скругляйте углы не только у обёртки, но и у вложенных элементов. Опера не "бажит", она всего лишь воспринимает блок как прямоугольник, что по сути так и есть ведь. Надо скруглять потомкам - им и скругляйте!
В принципе решить задачу на чистом css можно, но нужно хорошо знать геометрию/алгебру и придётся повозиться с вычислением нужных размеров.
Вот пример из статьи для Оперы - пришлось вводить дополнительный элемент, потому что Опера некорректно обсчитывает размеры при повороте (большой красный блок можно обрезать, оставив 13px сверху и повернуть на 45deg, но тогда между элементами возникает промежуток в полпикселя):
http://jsfiddle.net/xEReQ/4/

Pavel M. · #5 (**permalink**) 05.04.2012, 16:47

Сообщение от Nanto

Раз уж SelenIT не знает - то без вариантов пока.

Он в Опере что ли работает?

Nanto · #6 (**permalink**) 05.04.2012, 16:57

Нет, просто давно занимается вёрсткой и знает кучу финтов... Пожалуй лучший специалст по HTML/CSS в рунете

Pavel M. · #7 (**permalink**) 05.04.2012, 17:59

попробовал используя на svg
и для удобства Raphael
тег svg в моей опере 11.61 при border-radius и overflow: hidden вроде стал нормально обрезать контент
по-моему можно использовать
анимация для наглядности

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8>
	<title>test</title>
	<script src='http://yandex.st/raphael/1.5.2/raphael.min.js'></script>
	<style>
	body { background: url('http://visualliteracyksu2010.files.wordpress.com/2010/10/wpid-paper_texture.jpg') no-repeat; }
	#notepad,
	#notepad svg {
		width: 150px; height: 150px;
		background: green;
		border-radius: 75px;
		overflow: hidden;
	}
	</style>
	<script>
	window.onload = function () {
		Raphael("notepad", 150, 150)
		.circle(250, 250, 200)
		.attr({
			fill: '#f00',
			'stroke-width': 0
		})
		.animate({cx: 200, cy: 200}, 3000);
	}
	</script>
</head>
<body>
  <div id="notepad"></div>
</body>
</html>

Nanto · #8 (**permalink**) 05.04.2012, 18:41

90кБ исключительно для скругления углов в Опере?
и вопрос по библиотеке:
она попиксельно умеет работать и сanvas поддерживает?
P.S. Только Вы упростили задачу! Надо ещё текст вписать в дочерний объект (да так чтобы он не заходил за границу окружности)...

Pavel M. · #9 (**permalink**) 05.04.2012, 20:34

Сообщение от Nanto

она попиксельно умеет работать и сanvas поддерживает?

почитайте http://raphaeljs.com/
методы для текста и не только, надеюсь, там найдете

проблема была в overflow: hidden при border-radius - это вроде получилось

devote · #10 (**permalink**) 05.04.2012, 23:11

Сообщение от Nanto

Пожалуй лучший специалст по HTML/CSS в рунете

уж не преувеличивайте.

Форум

Справочник

Discord чат

Курсы javascript