我们在挑选贺卡时,总是根据好友或伴侣的喜好来选取最合他们品味的贺卡,那么你知道该送给程序员什么样的贺卡么?看完下面三种简单但却颇有创意的代码贺卡后,你或许就会有头绪了。

最近被一个布局问题给难住了,枉我一向自称掌握最好的前端技能是
CSS,写完博客就得敷脸去

图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换。

蛋诺鸡尾酒卡片

88必发在线娱乐 188必发在线娱乐 288必发在线娱乐 388必发在线娱乐 488必发在线娱乐 5

过生日想调蛋诺鸡尾酒(Egg
nog)给朋友喝,可是死程序员会调酒吗?蛋诺鸡尾酒卡片会贴心地告诉他需要多少鸡蛋、糖、朗姆酒、威士忌等材料。这套卡片中共有Python、Ruby、PHP和Javascript四种主流语言,程序员总能从中找到自己能看懂一张。卡片用珍珠白的Crane
Lettra棉纸制成的,卡片内部是空白的,你可以写上其他的祝福语。除此之外,每张卡片都配有一张信封。

需求是实现一个自适应的正方形卡片,效果如下:

无意中发现CSS3的方案,
 赶紧学习并总结如下

CSS新年快乐

88必发在线娱乐 688必发在线娱乐 788必发在线娱乐 8

这套卡片采用的是CSS代码,卡片内部印有大写的Futura 字体的”Happy New
Year!”字样。卡片材质与蛋诺鸡尾酒卡片相同。

88必发在线娱乐 9

先上代码(多数照搬自上述链接,有很大兼容问题,小心使用)

HTML爱心

88必发在线娱乐 1088必发在线娱乐 11

这张卡片使用的是HTML代码,这个代码在网页浏览器中会显示出一个心形的符号,卡片材质与蛋诺鸡尾酒卡片相同,卡片内部是空白的,所以你可以在你的“心”中写上任何你想写的话语。

以上每套卡片的价格是14美元,写上几行代码价格就翻倍了有没有。看起来自制程序员贺卡也不是难事,我们应该可以做出更有创意的贺卡。各位程序猿有什么好主意?

信息及图片来源: code-cards

顺便(开个坑)写个系列,总结那些设计精妙的布局结构

HTML:

 

<div class="flip-container">
    <div class="flipper">
        <div class="front">here is content : AA</div>
        <div class="back">here is content : BB</div>
    </div>
</div> 

 

CSS:

本次页面的 HTML 结构如下:

.flip-container {
    margin: 30px;
    display: inline-block;
    border: 1px solid #aaa;
    -webkit-perspective: 500;
    -moz-perspective: 500;
    -ms-perspective: 500;
    perspective: 500;
    -ms-transform: perspective(500px);
    -moz-transform: perspective(500px); /*重要*/
    transform-style: preserve-3d; /*重要*/
}
.flipper {
    position: relative;
    width: 200px;
    height: 200px;
    transition: 0.6s;
    transform-style: preserve-3d; /*重要*/
}
/* 触发翻转 */
.flip-container:hover .flipper{
    transform: rotateY(180deg);

}
.front ,.back{
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;  /*重要*/
    width: 100%;
    height: 100%;
}
.front {
    transform: rotateY(0deg);
    z-index: 2;
    background: red;
}
.back {
    transform: rotateY(-180deg);
    background: green;
}
<div class="row clearfix">
    <div class="col fl">
        <div class="card"></div>
    </div>
    <div class="col fl">
        <div class="card"></div>
    </div>
</div>
  • 在最外层的容器元素上设置整个动画区域的透视(perspective)属性。
  • 当外层容器元素遇到鼠标悬停事件时,内部存放卡片的容器旋转180度。这里也是控制旋转速度的地方。如果将旋转值设置为-180deg,是反向旋转。
  • 表示卡片正面和背面的元素都要绝对定位,这样它们才能在相同的位置相互遮挡。它们的背面可视性(backface-visibility)属性设置为隐藏,这样每个卡片的背面在翻转时都是看不见的。
  • 将卡片的正面设置为一个比背面要高的z-index值,这样保证卡片的正面在最上面。
  • 将背面卡片旋转180度,这样让它扮演背面的角色。

 

照搬结束,其中CSS中注释了重要的需要特别注意。

套路一、垂直 padding + 定位

88必发在线娱乐,perspective 属性定义 3D
元素距视图的距离,以像素计。直观现象就是内层的元素在翻转时会溢出外层边框,如果不写,或者属性值为0,则只在外层边框内变化。

在 CSS 中,margin 和 padding 的百分比数值总是相对于父元素的宽度来计算

且属性值需要特别注意和需要翻转的元素的宽高相适应,太少溢出很夸张,太多了和设为0的区别不大。区别效果如下图所示

利用这个特性,只要将 padding-top 或者 padding-bottom 设置为与 width
相同的百分比,再将 height 设为 0,最后通过定位实现自适应的正方形盒子

88必发在线娱乐 12

.col {
  width: 25%;
  height:0;
  padding-bottom: 25%;  
  position: relative;
}
.card {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #C0C0C0;
}

transform-style:
preserve-3d; transform-style 属性规定如何在 3D
空间中呈现被嵌套的元素(照抄自w3cschool)。

有很多文章都提到过,因为设置了 height: 0; 导致 max-height 无效

flip-container 和 flipper
都需要设置,flip-container不设置会导致溢出的3D效果缺少,flipper
不设置则容器翻转后,我们看到的还是front的背面,backface-visibility:
hidden不能体现效果。

通常会使用伪类元素来解决这个问题,但同时也会有高度溢出的情况

比较坑的是transform-style即使在IE11中都是不支持的。

如果采用我上面的 html 结构,只需要将 max-height 写到 .card
上,就不会有这个问题,也就用不着伪类元素了

所以还有一个兼容IE的方案,就是不翻转容器,而是同时翻转front和back,幸好IE还是支持backface-visibility:
hidden的,所以翻转效果和上一个方案一致。

 

HTML如下:

 

<div class="flip-container">
    <div class="front">here is content : AA</div>
    <div class="back">here is content : BB</div>
</div>  

套路二、新单位 vw

由于直接翻转front和back,flipper就显得多余了,去掉了flipper。

参考文章:

CSS代码如下(经过多方试验,尽量支持各个浏览器,并降级处理了不支持CSS3翻转的浏览器,保留了切换效果)

除了常用的 px,em,rem 之外,CSS 中还有很多单位,比如 pt,ch,vh,vmin

 

这里提到的单位 vw 是一个 相对于浏览器内部的可视区域(viewport)宽度的单位(敲黑板,不是父元素)

.flip-container {
    -webkit-perspective: 500;
    -moz-perspective: 500;
    -ms-perspective: 500;
    perspective: 500;
    -ms-transform: perspective(500px);
    -moz-transform: perspective(500px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    margin: 30px;
    display: inline-block;
    border: 1px solid #aaa;
    position: relative;
}
/*由于内层绝对定位导致高度缺少,这里显式设置了宽高*/
.flip-container, .front, .back {
    width: 200px;
    height: 200px;
}

.flip-container:hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flip-container:hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    z-index: 3; /* 降级处理不支持CSS3的浏览器,只是简单的将back上升盖住front */
}

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
    transition: 0.6s;
    position: absolute;
    top: 0px;
    left: 0px;
}
.front {
    background: red;
    z-index: 2;
}
.back {
    background: green;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

vw 等于 viewport 宽度的
1%,假设浏览器内部宽度为 1000px,那么 1vw = 10px

以上也许有许多不必要的兼容代码,水平有限了,欢迎交流更简练的写法。

 

还有一个小TIPS,在其他情况使用hover触发元素翻转时应如下使用,固定宽高的父元素触发,子元素翻转

然后 CSS
代码就很简单了

.outer {
    width: 200px;
    height: 200px;
}
.inner {
    transition: 0.6s;
}
.outer:hover .inner{
    transform: rotateY(180deg);
}
.col {
  width: 25%;
  height:25vw;
}
.card {
  width: 100%;
  height: 100%;
  border: 1px solid #C0C0C0;
}

如下直接对元素hover触发翻转会有很大的使用问题,因为元素翻转过程中,元素区域变小,光标就脱离元素了,于是元素还原,又触发hover变小,造成不顺畅

 

.inner {
    width: 200px;
    height: 200px;
  transition: 0.6s;
}
.inner:hover{
    transform: rotateY(180deg);
}

 

 

套路三、用透明图片扩充内容

关于CSS3 transform的更详细介绍,参见大神文章好吧,CSS3 3D
transform变换,不过如此!

极不推荐!!

大学的时候见过这种布局,这种套路是黔驴技穷的表现,了解一下就行

在 HTML 结构中添加一个  <img> 标签

<div class="col fl">
    <img src="" alt="正方形透明图片" width="100%"/>
    <div class="card"></div>
</div>

.col {
  width: 25%;
  height: 0;
  position: relative;
}
.card {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #C0C0C0;
}

相关文章