柔情似水 发表于 2015-1-15 23:13:59

来看看: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:27

直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

因胸联盟 发表于 2015-2-4 13:43:50

俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。

谁可相欹 发表于 2015-2-10 01:14:50

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

分手快乐 发表于 2015-2-28 15:19:56

滚动条)层属性--溢出(visible/hidden/scroll/auto)

第二个灵魂 发表于 2015-3-10 03:18:35

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

精灵巫婆 发表于 2015-3-17 04:12:12

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。

透明 发表于 2015-3-23 21:51:46

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
页: [1]
查看完整版本: 来看看:CSS3计划静态平面盒子:CSS3通明水晶盒