仓酷云

标题: 来看看：CSS3计划静态平面盒子:CSS3通明水晶盒 [打印本页]

作者: 柔情似水 时间: 2015-1-15 23:13
标题: 来看看：CSS3计划静态平面盒子:CSS3通明水晶盒
学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。
破洛洛文章简介：纯CSS3通明水晶盒。
信任人人有看过这个例子：3D盒子，在书《CSS3实战》上第282页有个综合实战“计划静态平面盒子”的例子，完成体例跟它一样，我的盒子也是以它为原型来计划的，不外在完成方面有做修正、优化，和增加了一些细节，上面是我的盒子Firefox截图：

通明化了盒子，通透性强了，由于通明了，以是背部的三个面也就要做出来了，以是统共6个面，比原作多3个；
投影镜像，让盒子的平面感更激烈；
边角线的处置，让盒子面与面之间过渡协调。

你能够点击这里下载源代码（只是写了moz下的效果，webkit的就没写了）
盒子的HTML布局很复杂，以下：

12345678

复制代码

<div><div>前</div><div>后</div><div>左</div><div>右</div><div>上</div><div>下</div></div>

复制代码

一个年夜盒子包住“前、后、左、右、上、下”6个面，由于定位发生层高的干系，以是它的按次实际上是“后、下、左、前、上、右”，上面的div就会天然的叠在下面，就能够不写z-index了。
1、框架定位

初始化盒子面，顶好宽高、定位、背景致等属性，然后把变更原点设定在右上角。
盒子面一个个做，先从复杂的动手，前后摆布难度系数是一样的，一个斜切SKEW效果就能够完成，然后就是再分隔定位：“前、前面”用skew(0deg,20deg);Y轴正向斜切，“左、左面”用skew(0deg,-20deg);Y轴负向斜切，然后再定位对齐，基础的框就出来了。
然后就是鸡肋“上、上面”，它必要扭转后斜切才干完成，以是难度系数也就上升了，这里我说“扭转后斜切”，而不是“斜切后扭转”，是有区分的，我的写法以下：

-moz-transform:rotate(-40deg)skew(30deg,20deg);

复制代码

假如如许写：

-moz-transform:skew(30deg,20deg)rotate(-40deg);

复制代码

那跟预期的效果纷歧样，断定了的斜切效果会由于前面的扭转而变形。
不晓得你有无亲手做过谁人盒子，我在做的时分发明，为何它顶部的“盒子盖”比正面的“盒子壁”多嵌套了一层DIV，用来分别transform变更效果，我实验着只用一个DIV往完成，了局证实，只需先写rotate再skew就能够坚持skew的斜切效果，从而html布局跟css代码也就简便了良多。
2、边框线

假如你看了代码，没有头晕的话，会不会有这么一个困惑，为何不必border来写边框线?
假如用border来写的话，border的宽度会跟width堆叠，招致盒子占有的空间为200+1+1=202px，很恶心的数字，并且border也不贴着界限，如图：

以是用如许一种做法来完成边框效果：box-shadow/text-shadow；
一样平常我们是用border来给元素描边，头几天逛论坛的时分，看到如许一种做法：给笔墨描边。
一样平常头脑会想到text-shadow这个属性，可是它是投影，跟描边仍是有区分的，text-shadow写法以下：

text-shadow:2px0px0px#f00；

复制代码

投影效果如图：

详细的投影材料能够参考我这篇文章：CSS3暗影；
下面是在没有成仙的情形下向右偏移，但是text-shadow能够多重投影，那末假如向高低摆布四个偏向同时投影，会怎样呢?

text-shadow:2px0px0px#f00,0px-2px0px#f00,-2px0px0px#f00,0px2px0px#f00;

复制代码

投影效果如图：

就酿成顺应笔墨外形的描边效果了，现在由于border不克不及满意笔墨的描边需求，才想出如许的办法来完成描边，那如今反推，既然border不克不及用来描边了，那就用box-shadow投影描边的办法来完成边框。
做出来的效果以下：

我给底部写了个投影：

-webkit-box-shadow:-1px1px2pxrgba(50,50,50,0.1);

复制代码

少量的向前向右偏移，基础的外型效果就已出来了，可是如许还不可，盒子的通明是通明了，可是感到朦昏黄胧的，应当增强通明的处置，要否则表现不出通透性（能够跟第一个图对照下）。
3、通透性

每一个面受光分歧，以是通明度也应当有所区分，我把上，前，右对着扫瞄者的通明度调低于前面，然后拉出半通明到通明的突变叠加到基础的盒子色彩上，发生条理，我都是很淡的过渡色叠加，突变写法以下：

background:-moz-linear-gradient(-45deg,rgba(255,255,255,0.3),rgba(255,255,255,0.2)40%,rgba(255,255,255,0.2)70%,rgba(255,255,255,0.1));

复制代码

由左上到右下拉斜线突变，从0%0.3到40%0.2，70%0.2到100%0.1；色彩很淡，假如把系数调年夜调深的话，突变色就会很分明，因为内里各个面的突变各分歧，就纷歧一注释，信任看了源文件就会分明的了，我也是随着本人感到拉的突变，没有很专业的光芒投射研讨，假如有错的中央你看出来了还看指出。
当调剂出各个面的色彩以后，发明“前上右”面与面之间有边线支解，看起来很划一，可是前面我底本没有画边线，了局‘左’跟‘后’有点混，以是仍是12条边线逐一画出，妥善些，后面的边线通明度为0.6，正面的0.4，前面的0.2，凸起条理。
4、投影

底本想用reflect来完成投影的，可是效果不睬想，投影会同化着原始图片层的背景致，做不出来半通明到通明的效果来，并且reflect是webkit独有的，firefox没有，另想它法，但是不成能为了投影效果增加新标签，得失相当，在丢弃IE的情形下天然而然的会想到伪类，下面边框突变已用了after，以是这里的投影我用before来做，同时，伪类做投影另有个优点：伪类层是相对原始图片层的，以是修正原始图片层地位变外形态的时分，伪类层也会绝对的修正。定位在对应的面正下方，向着用户的只要前跟右，以是就做了两个投影，如图：

一般形态盒子是闭合的，如“前”面所示，伪类层也随着原始图片层一样举行了斜切变更，然后我设置了鼠标滑过就“翻开”的效果，仅仅是如许一行代码：

.box.box_right:hover{-moz-transform:skew(0deg,0deg);}

复制代码

让不必往修正伪类投影层，它主动的就顺应了原始图片层，恢复了变更形态。
另有一个点，就是投影是由上至下呈半通明至通明的突变，关于背景致这个很简单就能够完成，可是边框呢？
我还没处置边框的形态是如许的：

上面的投影是“平”，以是边框线的突变投影务必做出来，那怎样才干完成边框的纵向突变，网上有良多关于突变边框的做法，不外都是横向的使用多重边框的特征来制造，纵向的没有，我实验用border来写，给border-color写个突变，了局基本读不出来，单单调治border的通明度也只是做到单色通明，不克不及突变通明，察看以后，想出了个“烂点子”，我下面说了，投影是由上至下呈半通明至通明的突变，那末把两个不通明的器材叠加在一同会怎样？
好比一个通明度为0.3的层叠在别的一个通明度为0.3的层下面，那就会在交壤的中央发生一个通明度为0.6的地区，如图：

说到如许你应当懂了吧，我写了这么一句修正面的宽度：

.under.box_before:before{width:201px;}

复制代码

让两个面半通明面堆叠，如许两头堆叠地区就会变深，做出了“伪边框”的效果，至于到通明部分，0+0=0，以是通明的地区仍然通明，从而完成了边框纵向突变的效果。
5、内容

我底本只是想做个盒子，既然做出来了，固然要跟实践项目接洽一下，假如同意的话我也想使用到真实的项目上往，将盒子作为载体模块，在下面公布文章，乃至我想把他弄成能够扭转的做图片墙。
挂上笔墨后效果以下：

html代码以下：

<div><div>前</div><div>后</div><div>左</div><div>右</div><div>上</div><div>下</div></div>0

复制代码

之以是要在inBox内里套一个conBox，conBox用来设定内边距padding，如许做是由于inBox设定了width，假如width跟padding混在一同叠加，会使容器的宽度变形，以是一样平常分隔为妙；至于h3写个title，是由于我在写gotrip的时分，h1，h2，h3题目没有一致分级，利用凌乱，而css是如许写的，好比：.inBoxh1{};
事先写了一批以后有同事提出必要将h1改成h3，假如我一入手下手就如许写.inBox.title{}，那他说修正的时分我也就只必要修正html标签，我不必动css的，吃一堑长一智，这里写上去跟人人分享。固然偶然候也不用太甚强求，究竟起类名是一件很伤脑细胞的事哈。
</p>
你可以轻松地控制页面的布局。

作者: 愤怒的大鸟 时间: 2015-1-25 23:24
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

作者: 因胸联盟 时间: 2015-2-4 13:43
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 谁可相欹 时间: 2015-2-10 01:14
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

作者: 分手快乐 时间: 2015-2-28 15:19
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: 第二个灵魂 时间: 2015-3-10 03:18
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 精灵巫婆 时间: 2015-3-17 04:12
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 透明 时间: 2015-3-23 21:51
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

欢迎光临仓酷云 (http://ckuyun.com/)