swish pytorch
进行一行标记,几个CSS3规则(无图像),您可以在五分钟之内完成折叠效果。 让我们看看如何。
步骤1:标记
我们将从一个空HTML文档开始; doctype,字符集声明,头,主体,通常的嫌疑人。 您还会注意到,我们正在链接到Google Web Fonts API,因此我们可以使用装饰精美的Montez字体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swish CSS3 folded ribbon effect.</title>
<link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'>
</head>
<body>
</body>
</html>
现在,我们将添加功能区元素。 是的,一个要素,这就是我们所需要的。 在这种情况下,我们使用h1
标头:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swish CSS3 folded ribbon effect.</title>
<link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'>
</head>
<body>
<h1 class="ribbon">Swish CSS3 folded ribbon effect.</h1>
</body>
</html>
步骤2:以某种风格搅拌
打开一个新CSS文件,链接到它的head
文档,再跳进加入一些样式。
html {
background: url(black-linen.png); /* Black Linen http://subtlepatterns.com */
}
body {
margin: 0;
padding: 100px 0 0 0;
}
.ribbon {
padding: 0 25px;
height: 80px;
background: #c94700;
color: #301607;
position: relative;
float: left;
clear: left;
font-family: 'Montez', cursive;
font-size: 32px;
line-height: 80px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
为了演示的目的,我们从样式化html和主体开始(是的,我使用背景图像,但是功能区本身是100%无图像的)。
然后,我们将注意力转向功能区元素。 我们给它左右一些填充,但是我们对高度(在本例中为80px)非常具体,因为我们需要在以后的折叠端复制高度。 我们还将行高指定为80px,以使文本在功能区上垂直居中。 我们浮动并清除它,以便我们可以在页面边缘显示多个。
注意:如果出于某种原因,您不想浮动功能区,请对其进行display: inline-block;
。 这将导致它被当作内联元素处理(不会填满其父元素),同时表现得像块级元素一样,允许您定义宽度,高度,内边距,边距等。
![基本色带](https://i-blog.csdnimg.cn/blog_migrate/396cbac6d6453a9079c4db145681ca16.png)
看起来已经足够好了,是吗?
步骤3:折页
我们将针对流行的:after
伪选择器来增加倍数。 他在这里..
.ribbon:after {
content: "";
display: block;
width: 40px;
height: 0px;
position: absolute;
right: 0;
bottom: 0px;
z-index: 20;
border-bottom: 80px solid #de6625;
border-right: 80px solid transparent;
}
![加倍](https://i-blog.csdnimg.cn/blog_migrate/0c465fa9ca61efffe8ac31fbf897d472.png)
看见?
那么,我们刚刚制造的奇怪的刀片状东西到底是什么?它对我们有什么帮助? 这是边界,即:after
伪元素的底部边界,我们将其厚度设为80px以匹配功能区的高度。 通过定义相邻的右边界并提供有意的透明背景(并非不常见的技巧),我们将其边缘切成45°。 我们给了它40px的宽度,它决定了矩形的末端。 图表将使这一点更加清晰:
![褶皱如何制作](https://i-blog.csdnimg.cn/blog_migrate/8b87d2ddad29f3fd247d4bc700724a9b.png)
我们的元素是如何构造的
步骤4:转台
建立了可折叠钻头之后,我们现在需要对其进行枢轴旋转。 为此,我们将使用CSS3转换属性并对其进行旋转,如下所示:
![折痕如何旋转](https://i-blog.csdnimg.cn/blog_migrate/669da55fa1879819b494394ad636d8bb.png)
没有图表的世界会在哪里?
默认情况下,对元素进行旋转将使其绕中心轴旋转-我们需要围绕其右下角旋转它,这就是为什么我们将其定位在功能区的右下角。
这是更新后的语法,带有一堆特定于供应商的规则,以确保满足所有可能的浏览器的要求:
highlight="41-50"
.ribbon:after {
content: "";
display: block;
width: 40px;
height: 0px;
position: absolute;
right: 0;
bottom: 0px;
z-index: 20;
border-bottom: 80px solid #de6625;
border-right: 80px solid transparent;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: right bottom;
-moz-transform: rotate(90deg);
-moz-transform-origin: right bottom;
-o-transform: rotate(90deg);
-o-transform-origin: right bottom;
-ms-transform: rotate(90deg);
-ms-transform-origin: right bottom;
transform: rotate(90deg);
transform-origin: right bottom;
}
每个transform:rotate
属性都会transform:rotate
我们的对象扭曲90°。 每个transform-origin
属性均声明要围绕右下角旋转。
那么,看起来怎么样?
![旋转的](https://i-blog.csdnimg.cn/blog_migrate/1afacbd1ef705ae61f387a5f41f6f90f.png)
甜!
我们拥有一个简单而有效的功能区,它将很高兴在以下浏览器中呈现:
- Firefox 3.5+
- 歌剧10.5
- Safari 3.1+
- Chrome
- IE9
IE9之下的所有内容目前都不会与我们已应用CSS3转换相抵触,但是有一种MS过滤器形式的解决方法。 我不会在这里研究过滤器,但是如果您需要使用IE4或更高版本, 请查看CSS3! 看看它们在操作中的巧妙示例。
第5步:黑影飘落
为了给效果添加一些尺寸,让我们在襟翼下方放置一个阴影(我仍然不知道该怎么称呼)。
这再简单不过了,我们将使用功能区中的:before
伪元素,然后或多或少地重复我们对:after
所做的工作; 创建黑色版本的形状,将其稍微旋转一点,并确保(使用z-index
)将其放置在原始形状下。
.ribbon:before {
content: "";
display: block;
width: 40px;
height: 0px;
position: absolute;
right: 0;
bottom: 0px;
z-index: 10;
border-bottom: 80px solid #000000;
border-right: 80px solid transparent;
-webkit-transform: rotate(80deg);
-webkit-transform-origin: right bottom;
-moz-transform: rotate(80deg);
-moz-transform-origin: right bottom;
-o-transform: rotate(80deg);
-o-transform-origin: right bottom;
-ms-transform: rotate(80deg);
-ms-transform-origin: right bottom;
transform: rotate(80deg);
transform-origin: right bottom;
}
这是我们得到的:
![阴影](https://i-blog.csdnimg.cn/blog_migrate/fe603325dcb022689e6c77761aa6b28d.png)
第6步:微妙,真实的微妙
最好的办法是通过缩短阴影并使其不透明来降低阴影的效果。
.ribbon:before {
content: "";
display: block;
width: 20px;
height: 0px;
position: absolute;
right: 0;
bottom: 0px;
z-index: 10;
border-bottom: 80px solid rgba(0, 0, 0, 0.3);
border-right: 80px solid transparent;
我们已经将#000000的边框颜色替换为它的RGBA等效色,(再次)对于所有上述现代浏览器(包括IE9)都很好。 如果要满足IE的早期版本,则需要再次使用MS过滤器应用效果。 以下代码段是一个示例:
/* required to trigger hasLayout for IE 5, 6, 7 */
zoom: 1;
/* and this makes the whole lot 30% opaque */
filter: alpha(opacity=30);
我们还向功能区本身添加一个类似的阴影。
.ribbon {
padding: 0 25px;
height: 80px;
background: #c94700;
color: #301607;
position: relative;
float: left;
clear: left;
font-family: 'Montez', cursive;
font-size: 32px;
line-height: 80px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
-moz-box-shadow: -7px 7px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: -7px 7px 0px rgba(0, 0, 0, 0.3);
box-shadow: -7px 7px 0px rgba(0, 0, 0, 0.3);
}
..这给了我们这个:
![微妙的阴影](https://i-blog.csdnimg.cn/blog_migrate/18699d74710c7cdcb59d11bb2ec80750.png)
第7步:突出显示
我们已经建立了有效的功能区,您可能希望按原样使用它。 在我们称之为完成交易之前,让我们先来看几个其他方面。
.ribbon {
padding: 0 25px;
height: 80px;
color: #301607;
background-color: #c94700;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c94700), to(#b84100));
background-image: -webkit-linear-gradient(top, #c94700, #b84100);
background-image: -moz-linear-gradient(top, #c94700, #b84100);
background-image: -ms-linear-gradient(top, #c94700, #b84100);
background-image: -o-linear-gradient(top, #c94700, #b84100);
background-image: linear-gradient(top, #c94700, #b84100);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
在这里,我们在功能区上有一个微妙的渐变填充,并为不支持(-IE10)的浏览器提供了各种供应商前缀和background-color
回退。 我们还向功能区的底部添加了带有高光边框的高光闪烁。
.ribbon:after {
content: "";
display: block;
width: 40px;
height: 0px;
position: absolute;
right: 0;
bottom: -1px;
z-index: 20;
添加边框后,我们有效地将功能区提高了1px,因此我们需要将折叠的东西撞一下。
![突出](https://i-blog.csdnimg.cn/blog_migrate/579f8e4c12c7ce33e1fea10fe891ed3c.png)
第8步:蓬勃发展
如果您想真正发疯,为什么不放松折叠呢? 圆角不平整和定位调整很容易做到。
border-bottom-right-radius: 20px 5px;
那是圆角
bottom: 4px;
bottom: 4px;
这就是折叠位,加上阴影,略微抬起以说明更改。
![四舍五入](https://i-blog.csdnimg.cn/blog_migrate/6503b229e6f837a922dbbe4d839258cb.png)
功能区中的细微但有效的弯曲
结论
而已! 无话可说-试试吧,让我知道您的想法。 与往常一样,感谢您的关注!
swish pytorch