- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我想创建一个 sigmoid curve类似形状的全屏布局,一侧显示装饰性图案背景,另一侧显示纯色背景,用于将文本放置在其顶部。
目标是有一个全屏页面,左上 Angular 有一个类似 sigmoid 的图案,页面的其余部分只是有白色背景。
JSFiddle:Unfinished sigmoid curve
#container {
padding-top: 10%;
padding-bottom: 10%;
background: white url(http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg) top left / 26px 32px repeat;
width: 100%;
height: 100%;
overflow: hidden;
}
#parallelogram {
margin-left: 35%;
width: 100%;
height: 900px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
transform: skew(-15deg);
background: white;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
-webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
}
<div id="container">
<div id="parallelogram">
</div>
</div>
#container {
padding-top: 100px;
background: red;
width: 100%;
height: 100%;
overflow: hidden;
}
#parallelogram {
margin-left: 400px;
width: 100%;
height: 900px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
transform: skew(-15deg);
background: white;
-moz-border-top-left-radius: 100px;
-webkit-top-left-border-radius: 100px;
border-top-left-radius: 100px;
}
#bottom {
height: 200px;
width: 100%;
background: white;
}
#bottom-corner {
height: 100px;
width: 300px;
margin-left: -34px;
background: red;
-moz-border-bottom-right-radius: 100px;
-webkit-bottom-right-border-radius: 100px;
border-bottom-right-radius: 100px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
transform: skew(-15deg);
}
<div id="container">
<div id="parallelogram">
</div>
<div id="bottom">
<div id="bottom-corner">
</div>
</div>
</div>
#container {
padding-top: 100px;
background: white url(http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg) bottom left / 26px 32px repeat;
width: 100%;
height: 100%;
overflow: hidden;
}
#parallelogram {
margin-left: 400px;
width: 100%;
height: 900px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
transform: skew(-15deg);
background: white;
-moz-border-top-left-radius: 100px;
-webkit-top-left-border-radius: 100px;
border-top-left-radius: 100px;
-moz-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
-webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
}
#bottom {
height: 200px;
width: 100%;
background: white;
-moz-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
-webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
}
#bottom-corner {
height: 100px;
width: 300px;
margin-left: -34px;
background: white url(http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg) top left / 26px 32px repeat;
-moz-border-bottom-right-radius: 100px;
-webkit-bottom-right-border-radius: 100px;
border-bottom-right-radius: 100px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
transform: skew(-15deg);
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .4);
box-shadow: 0 0 15px rgba(0, 0, 0, .4);
}
<div id="container">
<div id="parallelogram">
</div>
<div id="bottom">
<div id="bottom-corner">
</div>
</div>
</div>
#container {
padding-top: 100px;
background: white url(http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg) top left / 26px 32px repeat;
width: 100%;
height: 100%;
overflow: hidden;
}
#parallelogram {
margin-left: 385px;
width: 100%;
height: 900px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
transform: skew(-15deg);
background: white;
-moz-border-top-left-radius: 100px;
-webkit-top-left-border-radius: 100px;
border-top-left-radius: 100px;
-moz-box-shadow: inset 0 15px rgba(0, 0, 0, .4);
-webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
box-shadow: inset 0 0 15px rgba(0, 0, 0, .4);
}
#bottom-rounded-corner {
height: 122px;
position: relative;
width: 200%;
z-index: 1000;
margin-top: -80px;
margin-left: -185px;
background: url(http://famok.com/wp-content/uploads/2016/11/CornerAndMask.png) top left no-repeat;
}
#bottom-white {
height: 100px;
width: 100%;
background: white;
}
<div id="container">
<div id="parallelogram">
</div>
<div id="bottom-rounded-corner">
</div>
<div id="bottom-white">
</div>
</div>
最佳答案
对复杂形状使用 SVG 而不是 CSS:
正如我在评论中提到的,请不要使用 CSS 来创建如此复杂的形状。 SVG 是处理此类复杂内容的推荐工具。 SVG 易于创建、维护,并且默认情况下它们也是响应式的(可缩放的),因此它有很多优点。
创建 sigmoid 形状:
使用 SVG 本身创建 sigmoid 曲线形状非常简单,只需要一个路径元素:
M0,750
将假想的笔靠近 SVG 元素的左下 Angular (坐标设置为略低于 SVG 的高度,以便在底部有一个间隙,可以看到阴影)。 L250,750
产生水平 L 从点 (0,768) 到 (250,768) C650,730 500,154 1024,154
创建实际曲线。这里前两个坐标是曲线的控制点 ((650,730), (500,154)),第三个坐标是终点 (1024,154)。可以通过修改控制点来调整曲线的曲率。 L1024,0 0,0 0,750
是为了完成形状。形状需要完整才能填充工作。 body {
margin: 0;
}
svg {
width: 100%;
height: 100vh;
}
<svg viewBox='0 0 1024 768' preserveAspectRatio='none'>
<!-- For the shadow -->
<defs>
<filter id="dropShadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="6" />
<feOffset dx="3" dy="3" result="offsetBlur" />
<feFlood flood-color="#AAA" flood-opacity="1" result="offsetColor" />
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- End of shadow -->
<!-- For filling the top-left with pattern -->
<pattern id='dots' patternUnits='userSpaceOnUse' width='25' height='25'>
<polygon points='0,0 0,25 25,25 25,0' fill='yellowgreen' />
<circle cx='12.5' cy='12.5' r='4' fill='rebeccapurple' />
</pattern>
<!-- End of pattern -->
<!-- Actual sigmoid curve -->
<path d='M0,750 L250,750 C650,730 500,154 1024,154 L1024,0 0,0 0,750' fill='url(#dots)' filter='url(#dropShadow)' />
</svg>
polygon
创建了一个圆点图案。和
circle
元素,但在 SVG 本身中创建它不是强制性的,我们也可以使用
image
元素并用图像图案填充形状。
xlink:href
中指定您图片的 URL。
image
的属性像下面的代码片段一样标记。根据您的需求和形象,您可能需要更改
height
和
width
的
pattern
和
image
.
<pattern id='dots' patternUnits='userSpaceOnUse' width='25' height='25'>
<image xlink:href='https://yourwebsite.com/yourpath' x='0' y='0' width='15' height='15' />
</pattern>
body {
margin: 0;
}
svg {
width: 100%;
height: 100vh;
}
<svg viewBox='0 0 1024 768' preserveAspectRatio='none'>
<defs>
<filter id="dropShadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="6" />
<feOffset dx="3" dy="3" result="offsetBlur" />
<feFlood flood-color="#AAA" flood-opacity="1" result="offsetColor" />
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<pattern id='dots' patternUnits='userSpaceOnUse' width='36.6' height='46'>
<image xlink:href='http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg' x='0' y='0' width='36.6' height='46' />
</pattern>
</defs>
<path d='M0,750 L250,750 C650,730 500,154 1024,154 L1024,0 0,0 0,750' fill='url(#dots)' filter='url(#dropShadow)' />
</svg>
filter
元素以及
feGaussianBlur
,
feOffset
和
feMerge
元素。
feGaussianBlur
元素通过指定的标准偏差值和
feOffset
模糊源图形(我们的 sigmoid)将结果图像偏移
dx
,
dy
值。原始图像和模糊图像使用
feMerge
合并.
feFlood
和
feComposite
以防万一你想给阴影一个不同的颜色。可以使用
flood-color
指定颜色和
flood-opacity
属性。 (更改 SVG 阴影颜色的方法来自 Joe W.的
this answer。)
text
元素本身就像我之前链接的演示中一样。如果不是,那么您必须确保文本的容器框不会重叠到 sigmoid 形状的区域上。
body {
margin: 0;
}
div.container {
position: relative;
width: 100%;
height: 100vh;
}
svg {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
.container div {
position: absolute;
top: 50%;
right: 0px;
height: 30vh;
width: 33.33%;
font-size: 20px;
}
<div class='container'>
<svg viewBox='0 0 1024 768' preserveAspectRatio='none'>
<defs>
<!-- For the shadow -->
<filter id="dropShadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="6" />
<feOffset dx="3" dy="3" result="offsetBlur" />
<feFlood flood-color="#AAA" flood-opacity="1" result="offsetColor" />
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<!-- End of shadow -->
<!-- For filling the top-left with pattern -->
<pattern id='dots' patternUnits='userSpaceOnUse' width='25' height='25'>
<polygon points='0,0 0,25 25,25 25,0' fill='yellowgreen' />
<circle cx='12.5' cy='12.5' r='4' fill='rebeccapurple' />
</pattern>
<!-- End of pattern -->
</defs>
<!-- Actual sigmoid curve -->
<path d='M0,750 L250,750 C650,730 500,154 1024,154 L1024,0 0,0 0,750' fill='url(#dots)' filter='url(#dropShadow)' />
</svg>
<div>Hello! Here is some text that is placed on the solid colored area of the page.</div>
</div>
shape-outside
属性(property)但
browser support for that is pretty poor此刻。这是一个
demo使用这个
shape-outside
属性(property)。无法在现场托管它,因为它需要创建一个单独的 SVG 文件。该演示是
W3C CSS Shapes Spec 中提供的版本的改编版本。 .
div.container
然后将 SVG 绝对放在元素的顶部。 SVG 形状(具有白色填充)将防止图案在另一侧可见。 body {
margin: 0;
}
div.container {
position: relative;
background: white url(http://famok.com/wp-content/uploads/2016/10/WhiteOnWhite.jpg) top left / 26px 32px repeat;
width: 100%;
height: 100vh;
}
svg {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
.container div {
position: absolute;
top: 50%;
right: 0px;
height: 30vh;
width: 33.33%;
font-size: 20px;
}
<div class='container'>
<svg viewBox='0 0 1024 768' preserveAspectRatio='none'>
<defs>
<filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
<feComponentTransfer in=SourceAlpha>
<feFuncA type="table" tableValues="1 0" />
</feComponentTransfer>
<feGaussianBlur stdDeviation="6" />
<feOffset dx="2" dy="2" result="offsetblur" />
<feFlood flood-color="#AAA" result="color" />
<feComposite in2="offsetblur" operator="in" />
<feComposite in2="SourceAlpha" operator="in" />
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode />
</feMerge>
</filter>
</defs>
<path d='M0,750 L250,750 C650,730 500,154 1024,154 L1024,768 0,768 0,750' fill='white' filter='url(#dropShadow)' />
</svg>
<div>Hello! Here is some text that is placed on the solid colored area of the page.</div>
</div>
img
)和另一个 SVG 是与
shape-outside
一起使用的相反(图案区域)。 .
关于css - 带 CSS 的 Sigmoid 曲线形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40350457/
运行 PostgreSQL(7.4 和 8.x),我认为这是可行的,但现在我遇到了错误。 我可以单独运行查询,它工作得很好,但如果我使用 UNION 或 UNION ALL,它会抛出错误。 这个错误:
我试图为我的应用程序创建一个导航,使用抽屉导航我的 fragment 之一(HomeFragment)有一个 ViewPager,可容纳 3 个 fragment (Bundy Clock、Annou
以我目前正在开发的应用为例: - 它有一个包含多个项目的抽屉导航;现在有两个项目让我感兴趣,我将它们称为 X 和 Y。 X 和 Y 都在单击时显示包含 x 元素或 y 元素列表的 fragment 选
我有一个形状为 (370,275,210) 的 NumPy 数组,我想将其重新整形为 (275,210,370)。我将如何在 Python 中实现这一点? 370是波段数,275是行数,210是图像包
我们如何与被子 UIViewController 阻止的父 UIViewController(具有按钮)交互。显然,触摸事件不会通过子 Nib 。 (启用用户交互) 注意:我正在加载默认和自定义 NI
我是 Jpa 新手,我想执行过程 我的代码如下 private static final String PERSISTENCE_UNIT_NAME = "todos"; private static
与安装了 LAMP 的 GCE 相比,选择与 Google Cloud SQL 链接的 GCE 实例有哪些优势? 我确定 GCE 是可扩展的,但是安装在其上的 mysql 数据库的可扩展性如何? 使用
这个问题在这里已经有了答案: Value receiver vs. pointer receiver (3 个答案) 关闭 3 年前。 我刚接触 golang。只是想了解为 Calc 类型声明的两种
我不小心按了一个快捷键,一个非常漂亮的断线出现在日期上。 有点像 # 23 Jun 2010 -------------------- 有人知道有问题的快捷方式吗?? (我在 mac 上工作!) 在
我正在Scala中编写正则表达式 val regex = "^foo.*$".r 这很好,但是如果我想做 var x = "foo" val regex = s"""^$x.*$""".r 现在我们有
以下 XML 文档在技术上是否相同? James Dean 19 和: James Dean 19 最佳答案 这两个文档在语义上是相同的。在 X
我在对数据帧列表运行稳健的线性回归模型(使用 MASS 库中的 rlm)时遇到问题。 可重现的示例: var1 <- c(1:100) var2 <- var1*var1 df1 <- data.f
好的,我有一个自定义数字键盘,可以在标签(numberField)中将数字显示为 0.00,现在我需要它显示 $0.00。 NSString *digit = sender.currentTitle;
在基于文档的应用程序中,使用 XIB 文件,创建新窗口时其行为是: 根据最后一个事件的位置进行定位和调整大小 window 。 如果最后一个事件窗口仍然可见,则新窗口 窗口应该是级联的,这样它就不会直
我想使用参数进行查询,如下所示: SELECT * FROM MATABLE WHERE MT_ID IN (368134, 181956) 所以我考虑一下 SELECT * FROM MATABLE
我遇到一些性能问题。 我有一个大约有 200 万行的表。 CREATE TABLE [dbo].[M8]( [M8_ID] [int] IDENTITY(1,1) NOT NULL,
我在 jquery 中的按键功能遇到问题。我不知道为什么按键功能不起作用。我已经使用了正确的 key 代码。在我的函数中有 2 个代码,其中包含 2 个事件键,按一个键表示 (+) 代码 107 和(
我想显示音频波形,我得到了此代码,它需要.raw音频输入并显示音频波形,但是当我放入.3gp,.mp3音频时,我得到白噪声,有人可以帮助我如何使其按需与.3gp一起使用使用.3gp音频运行它。 Inp
我无法让 stristr 函数返回真值,我相信这是因为我的搜索中有一个 $ 字符。 当我这样做时: var_dump($nopricecart); 完整的 $nopricecart 值是 $0 ,我得
如果我有这样的循环: for(int i=0;i O(n) 次。所以do some执行了O(n)次。如果做某事是线性时间,那么代码片段的复杂度是O(n^2)。 关于algorithm - 带 If 语
我是一名优秀的程序员,十分优秀!