Баг в Опере c overflow: hidden и border-radius
Прочитал сегодня 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>
|
Меньше читайте всяких дурачков на Хабре.
По коду - если уж фиксите баг для Оперы, отчего не заюзать псевдоэлементы, вместо того, чтобы плодить сущности без нужды. И таки Ваш пример сработает, только если цвет бэкграунда совпадает с цветом тени. Это очень жирный минус, особенно если бэкграунд не однотонный. Ну и Вы не пионер: 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/ |
спасибо за ссылки, но там в основном бились с проблемой скругления углов у изображений в Опера - сейчас эта проблема не так актуальна - новые Оперы скругляют углы и у картинок.
А вот нормального решения (не затрагивающего фон снаружи) того что в Опера блок с overflow:hidden и со скругленными углами не правильно обрезает содержимое не нашел. Возможно, кто-то подскажет как это можно сделать. |
Ну по сути одно и тоже ведь!
Раз уж SelenIT не знает - то без вариантов пока. Он правда что-то говорил про поддержку старых версий Оперы фильтров для SVG и возможность через них использовать альфа-канал, но не разобрался в спеках. А по сабжу - скругляйте углы не только у обёртки, но и у вложенных элементов. Опера не "бажит", она всего лишь воспринимает блок как прямоугольник, что по сути так и есть ведь. Надо скруглять потомкам - им и скругляйте! В принципе решить задачу на чистом css можно, но нужно хорошо знать геометрию/алгебру и придётся повозиться с вычислением нужных размеров. Вот пример из статьи для Оперы - пришлось вводить дополнительный элемент, потому что Опера некорректно обсчитывает размеры при повороте (большой красный блок можно обрезать, оставив 13px сверху и повернуть на 45deg, но тогда между элементами возникает промежуток в полпикселя): http://jsfiddle.net/xEReQ/4/ |
Цитата:
|
Нет, просто давно занимается вёрсткой и знает кучу финтов... Пожалуй лучший специалст по HTML/CSS в рунете
|
попробовал используя на 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>
|
90кБ исключительно для скругления углов в Опере?
и вопрос по библиотеке: она попиксельно умеет работать и сanvas поддерживает? P.S. Только Вы упростили задачу! Надо ещё текст вписать в дочерний объект (да так чтобы он не заходил за границу окружности)... |
Цитата:
методы для текста и не только, надеюсь, там найдете проблема была в overflow: hidden при border-radius - это вроде получилось |
Цитата:
|
| Часовой пояс GMT +3, время: 10:29. |