如何使用CSS和HTML创建这些框

Question

如果我去这个网站https://www.odesk.com/然后向下滚动一下，就会有一些方框在下面＆＃34;找到有才华的自由职业者准备好了＃34;而我想知道如何使用CSS创建这些？

同样在网站http://www.lynda.com/上有一些漂亮的盒子在悬停时翻转，我想知道是否还有重建它们。

Answer 1

对于翻转动画：

你必须创建四个div：两个用来容纳整个东西，一个是前面的，并且保存前面显示的内容，最后是后面的一个，它显示在悬停上。

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">

<!-- This is the front of the card, put your initial content here -->

    <div class="front">
        <h1>Hello</h1>      
    </div>

<!-- This is the back of the card, put the content to be displayed on flip here-->

    <div class="back">
        <h1>Hello again!</h1>
    </div>
</div>

CSS：

/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
   .flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
width: 155px;
height: 150px;
}

/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;
}

/* front pane, placed above back */
.front {
border: 2px black solid;
text-align: center;
background-color: #76EE00;
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    border: 2px black solid;
    text-align: center;
background-color: #66CD00;
transform: rotateY(180deg);
}

JSFiddle：http://jsfiddle.net/jofish999/twuddn6f/

<小时/>

另一个网站上的方框......

如果你感兴趣的话，作为旁注，这里是来自网站的CSS框。

<强> CSS

.oBtn {
  height: 35px;
  line-height: 35px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  display: inline-block;
  background: transparent;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 14px;
  line-height: 35px;
  border-radius: 6px;
  background-clip: padding-box;
  padding: 5px 14px 3px;
  -webkit-font-smoothing: antialiased;
  font-smoothing: always
}
.oBtn.isDisabled,
.oBtnDisabled,
.oBtn[disabled],
.oBtn.isDisabled:active,
.oBtnDisabled:active,
.oBtn[disabled]:active,
.oBtn.isDisabled:hover,
.oBtnDisabled:hover,
.oBtn[disabled]:hover {
  color: #a7a7a2;
  border: 1px solid #e0e0de;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  text-shadow: none;
  background: #f0f0ee;
  cursor: default
}
.oBtn:hover {
  text-decoration: none
}
.oBtnPrimary {
  color: white;
  background: #7bd454;
  background: #7bd454 -webkit-linear-gradient(top, #7bd454, #62c831 95%, #53bf29);
  background: #7bd454 -moz-linear-gradient(top, #7bd454, #62c831 95%, #53bf29);
  background: #7bd454 -o-linear-gradient(top, #7bd454, #62c831 95%, #53bf29);
  background: #7bd454 linear-gradient(top, #7bd454, #62c831 95%, #53bf29);
  border: 1px solid #509e19;
  border-bottom-color: #198d0f;
  border-top-color: #6dbe38;
  -webkit-box-shadow: 0 1px 3px rgba(38, 151, 72, 0.5), inset 0 1px 0 #9fe662;
  -moz-box-shadow: 0 1px 3px rgba(38, 151, 72, 0.5), inset 0 1px 0 #9fe662;
  box-shadow: 0 1px 3px rgba(38, 151, 72, 0.5), inset 0 1px 0 #9fe662;
  text-shadow: 0 1px 0 #25a811
}
.oBtnPrimary:hover {
  background: #93dd64;
  background: #93dd64 -webkit-linear-gradient(top, #93dd64, #72d239 95%, #6fcc37);
  background: #93dd64 -moz-linear-gradient(top, #93dd64, #72d239 95%, #6fcc37);
  background: #93dd64 -o-linear-gradient(top, #93dd64, #72d239 95%, #6fcc37);
  background: #93dd64 -ms-linear-gradient(top, #93dd64, #72d239 95%, #6fcc37);
  background: #93dd64 linear-gradient(top, #93dd64, #72d239 95%, #6fcc37);
  -webkit-box-shadow: 0 1px 3px rgba(38, 151, 72, 0.5), inset 0 1px 0 #9fe662;
  -moz-box-shadow: 0 1px 3px rgba(38, 151, 72, 0.5), inset 0 1px 0 #9fe662;
  box-shadow: 0 1px 3px rgba(38, 151, 72, 0.5), inset 0 1px 0 #9fe662;
  border: 1px solid #6dbe38;
  border-bottom: 1px solid #198d0f;
  color: white
}
.oBtnPrimary:active {
  background: #6ec54f;
  background: #6ec54f -webkit-linear-gradient(top, #6ec54f, #56b92d);
  background: #6ec54f -moz-linear-gradient(top, #6ec54f, #56b92d);
  background: #6ec54f -o-linear-gradient(top, #6ec54f, #56b92d);
  background: #6ec54f -ms-linear-gradient(top, #6ec54f, #56b92d);
  background: #6ec54f linear-gradient(top, #6ec54f, #56b92d);
  border: 1px solid #239365;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: white
}
.oBtnPrimary:visited {
  color: white
}
.oBtnPrimaryBlue {
  background: #00aaec;
  background: #00aaec -webkit-linear-gradient(top, #00aaec, #00a7ec 95%, #0096e8);
  background: #00aaec -moz-linear-gradient(top, #00aaec, #00a7ec 95%, #0096e8);
  background: #00aaec -o-linear-gradient(top, #00aaec, #00a7ec 95%, #0096e8);
  background: #00aaec linear-gradient(top, #00aaec, #00a7ec 95%, #0096e8);
  color: white;
  border: 1px solid #007de8;
  border-bottom-color: #1d60dd;
  border-top-color: #0a81d4;
  -webkit-box-shadow: 0 1px 3px rgba(15, 59, 141, 0.31), inset 0 1px 0 #00c1f0;
  -moz-box-shadow: 0 1px 3px rgba(15, 59, 141, 0.31), inset 0 1px 0 #00c1f0;
  box-shadow: 0 1px 3px rgba(15, 59, 141, 0.31), inset 0 1px 0 #00c1f0;
  text-shadow: 0 1px 0 #0069de
}
.oBtnPrimaryBlue:hover {
  background: #00b6ee;
  background: #00b6ee -webkit-linear-gradient(top, #00b6ee, #00b0ee 95%, #00a1eb);
  background: #00b6ee -moz-linear-gradient(top, #00b6ee, #00b0ee 95%, #00a1eb);
  background: #00b6ee -o-linear-gradient(top, #00b6ee, #00b0ee 95%, #00a1eb);
  background: #00b6ee -ms-linear-gradient(top, #00b6ee, #00b0ee 95%, #00a1eb);
  background: #00b6ee linear-gradient(top, #00b6ee, #00b0ee 95%, #00a1eb);
  -webkit-box-shadow: 0 1px 3px rgba(15, 59, 141, 0.31), inset 0 1px 0 #00c1f0;
  -moz-box-shadow: 0 1px 3px rgba(15, 59, 141, 0.31), inset 0 1px 0 #00c1f0;
  box-shadow: 0 1px 3px rgba(15, 59, 141, 0.31), inset 0 1px 0 #00c1f0;
  text-shadow: 0 1px 0 #0069de;
  border: 1px solid #007de8;
  border-bottom-color: #1d60dd;
  border-top-color: #0a81d4;
  color: white
}
.oBtnPrimaryBlue:active {
  background: #1a9fec;
  background: #1a9fec -webkit-linear-gradient(top, #1a9fec, #1a9fec);
  background: #1a9fec -moz-linear-gradient(top, #1a9fec, #1a9fec);
  background: #1a9fec -o-linear-gradient(top, #1a9fec, #1a9fec);
  background: #1a9fec -ms-linear-gradient(top, #1a9fec, #1a9fec);
  background: #1a9fec linear-gradient(top, #1a9fec, #1a9fec);
  color: white;
  border: 1px solid #156ee8;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none
}
.oBtnPrimaryBlue:visited {
  color: white
}
.oBtnSecondary {
  cursor: pointer;
  font-family: "Helvetica", Arial, sans-serif;
  font-weight: normal;
  font-size: 16px;
  padding: 12px;
  color: #80807c;
  background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #f4f4f2), color-stop(100%, #e5e5e3));
  background-image: -webkit-linear-gradient(#f4f4f2, #e5e5e3);
  background-image: -moz-linear-gradient(#f4f4f2, #e5e5e3);
  background-image: -o-linear-gradient(#f4f4f2, #e5e5e3);
  background-image: linear-gradient(#f4f4f2, #e5e5e3);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #d1d1d1;
  border-bottom-color: #b7b7b7;
  box-shadow: 0 2px 2px rgba(204, 202, 202, 0.51), inset 0 1px 0 rgba(229, 228, 228, 0.51);
  text-shadow: 0 1px 0 rgba(128, 128, 124, 0.1);
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline
}
.oBtnSecondary:hover {
  color: #80807c;
  background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #f8f8f7), color-stop(100%, #ededec));
  background-image: -webkit-linear-gradient(#f8f8f7, #ededec);
  background-image: -moz-linear-gradient(#f8f8f7, #ededec);
  background-image: -o-linear-gradient(#f8f8f7, #ededec);
  background-image: linear-gradient(#f8f8f7, #ededec);
  border: 1px solid #d6d6d4;
  border-bottom-color: #bdbdba;
  box-shadow: 0 2px 2px rgba(204, 202, 202, 0.51), inset 0 1px 0 rgba(229, 228, 228, 0.51);
  text-shadow: 0 1px 0 rgba(128, 128, 124, 0.1)
}
.oBtnSecondary:active {
  color: #80807c;
  background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #d2d2d0), color-stop(100%, #dddddc));
  background-image: -webkit-linear-gradient(center top, #d2d2d0 0, #dddddc);
  background-image: -moz-linear-gradient(center top, #d2d2d0 0, #dddddc);
  background-image: -o-linear-gradient(center top, #d2d2d0 0, #dddddc);
  background-image: linear-gradient(center top, #d2d2d0 0, #dddddc);
  border: 1px solid #d2d2d0;
  border-top-color: #b9b9b6;
  box-shadow: 0 2px 2px rgba(183, 183, 183, 0.4) inset;
  text-shadow: 0 1px 0 white
}
.oBtnSecondary:visited {
  color: #80807c
}
.oBtnSecondary.oDisabled,
.oBtnSecondary[disabled] {
  cursor: default;
  opacity: .5
}
.oBtnSecondary.oDisabled:hover,
.oBtnSecondary.oDisabled.active,
.oBtnSecondary.oDisabled.visited,
.oBtnSecondary[disabled]:hover,
.oBtnSecondary[disabled].active,
.oBtnSecondary[disabled].visited {
  background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0%, #f4f4f2), color-stop(100%, #e5e5e3));
  background-image: -webkit-linear-gradient(#f4f4f2, #e5e5e3);
  background-image: -moz-linear-gradient(#f4f4f2, #e5e5e3);
  background-image: -o-linear-gradient(#f4f4f2, #e5e5e3);
  background-image: linear-gradient(#f4f4f2, #e5e5e3);
  box-shadow: 0 2px 2px rgba(204, 202, 202, 0.51), inset 0 1px 0 rgba(229, 228, 228, 0.51);
  text-shadow: 0 1px 0 rgba(128, 128, 124, 0.1);
  border: 1px solid #d1d1d1;
  border-bottom-color: #b7b7b7
}
.oBtnPrimary,
.oBtnSecondary,
.oBtnTertiary,
.oBtnPrimaryBlue,
.oBtnPrimaryGradient,
.oBtnBlueGradient {
  display: inline-block;
  text-align: center
}
.oBtnTertiary {
  color: #00afef;
  background: transparent;
  border: none
}
.oBtnTertiary:hover {
  color: #006489
}
.oBtnTertiary:active {
  color: #383838
}
.oBtnPrimaryGradient {
  display: inline-block;
  font-family: "Helvetica", Arial, sans-serif;
  font-weight: bold;
  background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #68b339), color-stop(49%, #68b339), color-stop(51%, #5ea32b));
  background: -ms-linear-gradient(top, #68b339 0, #68b339 49%, #5ea32b 51%, #5ea32b 100%);
  background: linear-gradient(to bottom, #68b339 0, #68b339 49%, #5ea32b 51%, #5ea32b 100%);
  font-size: frompx(18);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 1rem 2.5rem;
  margin: 0;
  border-radius: .25rem;
  border: 0 solid transparent;
  box-shadow: 0 1px .99px .01px rgba(0, 0, 0, 0.2);
  color: white
}
.oBtnPrimaryGradient:hover {
  background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #5eaa2c), color-stop(49%, #5eaa2c), color-stop(51%, #51991a));
  background: -ms-linear-gradient(top, #5eaa2c 0, #5eaa2c 49%, #51991a 51%, #51991a 100%);
  background: linear-gradient(to bottom, #5eaa2c 0, #5eaa2c 49%, #51991a 51%, #51991a 100%);
  box-shadow: none;
  cursor: pointer;
  color: white
}
.oBtnPrimary:not(#postJob):not(#findJob) {
  width: auto;
  display: inline-block;
  font-family: "Helvetica", Arial, sans-serif;
  font-weight: bold;
  background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #30bcf2), color-stop(49%, #30bcf2), color-stop(51%, #00adef), color-stop(100%, #00adef));
  background-image: -webkit-linear-gradient(to bottom, #30bcf2 0, #30bcf2 49%, #00adef 51%, #00adef 100%);
  background-image: -moz-linear-gradient(to bottom, #30bcf2 0, #30bcf2 49%, #00adef 51%, #00adef 100%);
  background-image: -o-linear-gradient(to bottom, #30bcf2 0, #30bcf2 49%, #00adef 51%, #00adef 100%);
  background-image: linear-gradient(to bottom, #30bcf2 0, #30bcf2 49%, #00adef 51%, #00adef 100%);
  font-size: frompx(18);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
  text-transform: uppercase;
  color: white;
  padding: 12px 30px;
  margin: 0;
  border-radius: .25rem;
  border: 0 solid transparent;
  box-shadow: 0 1px .99px .01px rgba(0, 0, 0, 0.1);
  color: white
}
.oBtnPrimary:not(#postJob):not(#findJob):hover {
  background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #30b1e2), color-stop(49%, #30b1e2), color-stop(51%, #009fdb), color-stop(100%, #009fdb));
  background-image: -webkit-linear-gradient(to bottom, #30b1e2 0, #30b1e2 49%, #009fdb 51%, #009fdb 100%);
  background-image: -moz-linear-gradient(to bottom, #30b1e2 0, #30b1e2 49%, #009fdb 51%, #009fdb 100%);
  background-image: -o-linear-gradient(to bottom, #30b1e2 0, #30b1e2 49%, #009fdb 51%, #009fdb 100%);
  background-image: linear-gradient(to bottom, #30b1e2 0, #30b1e2 49%, #009fdb 51%, #009fdb 100%);
  box-shadow: none;
  cursor: pointer
}
.oBtnPrimary:not(#postJob):not(#findJob):visited {
  color: white
}
.oBtnSecondary:not(.oPageBtn):not(.oButton) {
  display: inline-block;
  font-family: "Helvetica", Arial, sans-serif;
  font-weight: bold;
  background: white;
  color: #00adef;
  text-transform: uppercase;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  border: 4px solid #e2e2e2;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 4px 10px
}
.oBtnSecondary:not(.oPageBtn):not(.oButton):hover,
.oBtnSecondary:not(.oPageBtn):not(.oButton):visited {
  color: #00adef
}
.oMed {
  overflow: hidden;
  zoom: 1;
  margin: 5px 0
}

And the HTML...

<a class="oBtn oBtnPrimary" href="#" id="findJob">Want a job? Sign up!</a>
<a class="oBtn oBtnPrimary oBtnPrimaryBlue" href="#" id="postJob">Want to hire? Post a job!</a>

http://jsfiddle.net/jofish999/twuddn6f/1/