CSS3基础知识 - 图标的垂直定位

Vertical align icons。通过transform把图标定位于两个footer之间。

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1932
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* Global
***************************************************/
html,
body {
  width: 100%;
  height: 100%;
}
.Panel {
  display: flex;
  flex-direction: column;
  min-width: 270px;
  min-height: 500px;
  padding: 0 1rem;
  color: #3d2b27;
  background: #e6e6e6;
  z-index: 1;
  height: 100%;
  border: solid 20px transparent;
  border-image: url('http://www.davidelrizzo.com/heroquestonline/img/charactersheet/border.png') 20 round;
  background: #e9c89b url('http://www.davidelrizzo.com/heroquestonline/img/charactersheet/background.jpg') repeat;
  background-clip: padding-box;
  box-shadow: inset 0px 0px 40px 20px rgba(151, 82, 0, 0.33);
  filter: drop-shadow(0 0 10px #000000);
  user-select: none;
}
.Panel-section {
  flex: 0 1 auto;
  padding-top: 0.5rem;
  /*border-bottom: dashed 1px fade(@textColour,20%);
  border-bottom: solid 1px fade(@textColour,20%);
  box-shadow: 0 1px 0 0 hsla(0,0,100%,30%);*/
}
.Panel .Panel-section:last-child {
  border-bottom: none;
  box-shadow: none;
  margin-bottom: 0;
}
.btn-default {
  color: #eae1df;
  border-color: #27211d;
  background-image: linear-gradient(to bottom, #705e54, #352d28);
  text-shadow: 0 -1px 0 #443933;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 1px rgba(255, 255, 255, 0.5);
}
.btn-default:hover,
.btn-defaultfocus {
  color: #eae1df;
  border-color: #0a0807;
  background-image: linear-gradient(to bottom, #53453e, #181412);
}
.btn-default:active {
  box-shadow: inset 1px 1px 5px #27211d;
}
.btn-default.disabled {
  text-decoration: line-through;
  border-color: #352d28;
  text-shadow: none;
  opacity: 0.5;
  cursor: no-drop;
}
.btn-default.active {
  color: #0f3e0f;
  border-color: #145214;
  background-image: linear-gradient(to bottom, #70dc70, #2db92d);
  text-shadow: 0 -1px 0 #32cd32;
  box-shadow: inset 1px 1px 6px #145214;
}
.btn-primary {
  color: #eae1df;
  border-color: #2f0000;
  background-image: linear-gradient(to bottom, #af0000, #490000);
  text-shadow: 0 -1px 0 #620000;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 1px rgba(255, 255, 255, 0.5);
}
.btn-primary:hover,
.btn-primaryfocus {
  color: #eae1df;
  border-color: #160000;
  background-image: linear-gradient(to bottom, #950000, #2f0000);
}
.tooltip .sub {
  font-size: 85%;
  opacity: 0.6;
  white-space: nowrap;
}
.modal-body {
  color: rgba(61, 43, 39, 0.6);
  padding-bottom: 0;
}
.modal-title {
  font-family: 'heroquestregular' cursive;
  color: rgba(61, 43, 39, 0.8);
}
/* Section 1 - Title
***************************************************/
.Panel-title {
  margin: 0;
  text-align: center;
  font-size: 3.5rem;
  font-family: 'heroquestregular' cursive;
  line-height: 0.8;
  cursor: default;
}
.Panel-tagline {
  display: block;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.5;
  white-space: nowrap;
  color: #7b574f;
}
.Panel-basicInstructions {
  margin: 0.3em 0 1em 0;
  padding: 0;
  text-align: center;
  font-size: 1.15rem;
}
.Panel-basicInstructions li {
  margin: 0.6em 0;
  list-style-type: none;
  line-height: 1.2;
  cursor: default;
}
.MouseIcon {
  position: relative;
  display: inline-block;
  height: 0.9em;
  width: 0.75em;
  vertical-align: baseline;
  background: #ffffff;
  border-radius: 30% 30% 45% 45%;
  border: solid 1px #3d2b27;
}
.MouseIcon:before,
.MouseIcon:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  height: 45%;
  width: 50%;
  border-bottom: solid 1px #3d2b27;
}
.MouseIcon:before {
  left: 0;
  border-radius: 60% 0 0 0;
  border-right: solid 1px #3d2b27;
}
.MouseIcon:after {
  right: 0;
  border-radius: 0 60% 0 0;
}
.MouseIcon--leftBtn:before {
  background: #c3a7a0;
}
.MouseIcon--rightBtn:after {
  background: #c3a7a0;
}
.KeyIcon {
  position: relative;
  display: inline-block;
  height: 1em;
  width: 1em;
  vertical-align: baseline;
  border-radius: 0.18em;
  border: outset 0.1em #000000;
  background: #ffffff;
}
.KeyIcon:after {
  content: attr(data-value) "";
  position: absolute;
  width: 100%;
  text-align: center;
  color: #000000;
  font-size: 0.6em;
}
.KeyIcon--spacebar {
  width: 3em;
  height: 0.6em;
  vertical-align: middle;
}
/* Section 2 - Controls
***************************************************/
.Panel-controls {
  display: table;
  width: 100%;
}
.Panel-control-col {
  display: table-cell;
  width: 50%;
  padding-left: 1.5rem;
  text-align: center;
}
.Panel-btnGrp {
  position: relative;
  height: 12rem;
  margin-bottom: 1rem;
  margin-left: auto;
  margin: 0 auto 1rem auto;
}
.Panel-btnGrp .btn {
  position: absolute;
  width: 4rem;
  height: 4rem;
  padding: 0;
  text-align: center;
  line-height: 4rem;
  white-space: normal;
  font-size: 11px;
  border-radius: 0;
}
.Panel-btnGrp .btn.btn-top {
  top: 1px;
  right: 4rem;
  border-radius: 0.4em 0.4em 0 0;
}
.Panel-btnGrp .btn.btn-left {
  top: 4rem;
  right: 8rem;
  margin-right: -1px;
  border-radius: 0.4em 0 0 0.4em;
}
.Panel-btnGrp .btn.btn-mid {
  top: 4rem;
  right: 4rem;
}
.Panel-btnGrp .btn.btn-right {
  top: 4rem;
  right: 1px;
  border-radius: 0 0.4em 0.4em 0;
}
.Panel-btnGrp .btn.btn-bottom {
  bottom: 1px;
  right: 4rem;
  border-radius: 0 0 0.4em 0.4em;
}
.Panel-btnGrpTitle {
  position: absolute;
  width: 12rem;
  top: 0;
  left: -13.5rem;
  display: block;
  margin: 0 0 0 -0.3em;
  padding: 0;
  white-space: nowrap;
  transform: rotate(270deg);
  transform-origin: right top;
  text-transform: uppercase;
  font-weight: normal;
  text-align: center;
  line-height: 1.2rem;
  font-size: 1.2rem;
  color: rgba(61, 43, 39, 0.8);
  cursor: default;
}
.Panel-btnGrp--rotation {
  width: 12rem;
}
.Panel-btnGrp--rotation .btn:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 4px solid transparent;
}
.Panel-btnGrp--rotation .btn.btn-right:after {
  border-left-color: currentColor;
  top: 50%;
  right: 0;
  margin-top: -4px;
}
.Panel-btnGrp--rotation .btn.btn-bottom:after {
  border-top-color: currentColor;
  bottom: 0;
  right: 50%;
  margin-right: -4px;
}
.Panel-btnGrp--rotation .btn.btn-left {
  padding-left: 3px;
}
.Panel-btnGrp--rotation .btn.btn-left:after {
  border-right-color: currentColor;
  top: 50%;
  left: -1px;
  margin-top: -4px;
}
.Panel-btnGrp--rotation .btn.btn-top:after {
  border-bottom-color: currentColor;
  top: 0;
  right: 50%;
  margin-right: -4px;
}
.Panel-btnGrp--mode {
  width: 4rem;
}
.Panel-btnGrp--mode .btn.btn-top {
  right: 0;
}
.Panel-btnGrp--mode .btn.btn-mid,
.Panel-btnGrp--mode .btn.btn-bottom {
  right: 0;
  padding-top: 0.7rem;
  line-height: 1;
}
/* Section 3 Palette
***************************************************/
.Panel-section--palette {
  z-index: 0;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.Panel-paletteTabs {
  border-bottom: none;
}
.Panel-paletteTabs > li > a {
  width: 40px;
  height: 37px;
  margin-bottom: 1px;
  border-radius: 1rem 1rem 0 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-color: #3d2b27;
  border-bottom-color: transparent;
  background: white;
  transition: all 0.2s;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.2s ease-out;
}
.Panel-paletteTabs > li > a:hover {
  margin-top: -3px;
  border-color: #3d2b27;
  border-bottom-color: transparent;
  opacity: 0.7;
}
.Panel-paletteTabs > li > a:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background-repeat: no-repeat;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/HerqQuest_LevelEditor_TabIconSprite.png');
}
.Panel-paletteTabs > li.active > a {
  z-index: 1;
  height: 33px;
  border-color: #3d2b27;
  border-bottom-color: transparent;
  opacity: 1;
}
.Panel-paletteTabs > li.active > a:hover {
  margin-top: 0px;
  border-color: #3d2b27;
  border-bottom-color: transparent;
}
#tab-creatures:after {
  background-position: 0px 0;
}
#tab-furniture:after {
  background-position: -22px 0;
}
#tab-triggers:after {
  background-position: -44px 0;
}
#tab-walls:after {
  background-position: -66px 0;
}
#tab-floors:after {
  background-position: -88px 0;
}
.Panel-paletteWrapper {
  z-index: 0;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
  margin: -5px 0 1rem;
  padding: 0.4rem;
  background: white;
  border: 1px solid #3d2b27;
  border-radius: 0 0.4rem 0.4rem 0.4rem;
  transform: translate3d(0, 0, 0);
}
.Panel-palette {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: flex-start;
  align-items: flex-start;
  flex: 1 0 auto;
  width: 100%;
  min-height: 50px;
  height: 100%;
  padding: 5px;
  background: #333333;
  box-shadow: inset 0 0 2rem 0 #000000;
  border-top: solid 1px #cccccc;
  border-radius: 0.4rem;
  overflow-y: auto;
  text-align: center;
}
/* Section 4 - Actions
***************************************************/
.Panel-actions {
  display: flex;
  flex-wrap: wrap;
}
.Panel-actions .btn {
  margin: 0 0.3rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 0 auto;
}
/* Variables
*********************************/
/* Mixins
*********************************/
/* Global styles
*********************************/
*,
:before,
:after {
  box-sizing: border-box;
}
body {
  position: relative;
  display: flex;
  height: 100vh;
  width: 100vw;
}
/* Control Panel
*********************************/
.Panel {
  position: fixed;
  width: 25%;
  max-width: 346px;
  margin-left: 0.5rem;
  opacity: 0.95;
}
.Panel-btnGrp input[type='radio'] {
  display: none;
}
.Panel-paletteSwatch {
  position: relative;
  flex: 0 1 auto;
  width: 70px;
  height: 70px;
  margin: 5px;
  transition: all 0.4s;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: inset 0 0 0 35px transparent;
}
.Panel-paletteSwatch.is-loading:before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 25px;
  height: 25px;
  margin: -12.5px 0 0 -12.5px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-right-color: transparent;
  border-radius: 50%;
  animation: rotating 0.75s linear infinite;
}
@-webkit-keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.Panel-paletteSwatch:hover,
.Panel-paletteSwatch:focus {
  box-shadow: inset 0 0 0 35px rgba(0, 0, 0, 0.4);
}
.Panel-paletteSwatch:active {
  box-shadow: inset 0 0 0 35px rgba(50, 205, 50, 0.1);
}
#palette-creatures .Panel-paletteSwatch {
  border-radius: 50%;
}
#palette-furniture .Panel-paletteSwatch {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#palette-walls .Panel-paletteSwatch {
  background-position: -20px 0;
}
.Panel-paletteSwatch.is-active {
  box-shadow: inset 0 0 0 2px rgba(50, 205, 50, 0.8);
}
/* Grid
*********************************/
.Grid {
  flex: 1;
  position: relative;
  overflow: hidden;
  user-select: none;
  background-color: #000000;
  background-image: linear-gradient(rgba(255, 255, 255, 0.3) 2px, transparent 0), linear-gradient(90deg, rgba(255, 255, 255, 0.3) 2px, transparent 0), linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 0), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 0), url('http://www.davidelrizzo.com/heroquestonline/leveleditor/images/woodtexture_bg_dark.jpg');
  background-size: 350px 350px, 350px 350px, 70px 70px, 70px 70px, 240px 182px;
  z-index: 0;
}
.Grid-selector {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 2px;
  animation: pulse 2s infinite ease-in-out;
  z-index: 100;
  box-shadow: 0 0 30px currentColor;
  transform-origin: 35px 35px;
}
.Grid-selector.addMode {
  color: limegreen;
}
.Grid-selector.deleteMode {
  color: crimson;
}
.Grid-selector:after {
  content: "\25B6";
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  margin-right: -4px;
  text-align: right;
  font-size: 10px;
  line-height: 70px;
  transform-origin: center;
}
.Grid-selector[data-rotationMode='random']:after {
  content: "";
  text-align: center;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 30px currentColor;
  }
  50% {
    box-shadow: 0 0 10px currentColor;
  }
  100% {
    box-shadow: 0 0 30px currentColor;
  }
}
/* Grid tiles
*********************************/
.Tiles {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  transform: translate3d(0, 0, 0);
}
.Tiles-creatures {
  z-index: 5;
  -webkit-filter: drop-shadow(-7px 7px 10px #000000);
}
.Tiles-furniture {
  z-index: 4;
  -webkit-filter: drop-shadow(-3.5px 3.5px 3px #000000);
}
.Tiles-triggers {
  z-index: 3;
}
.Tiles-walls {
  z-index: 2;
  -webkit-filter: drop-shadow(-3.5px 3.5px 8.75px #000000) drop-shadow(-3.5px 3.5px 8.75px #000000) drop-shadow(-3.5px 3.5px 8.75px rgba(0, 0, 0, 0.5));
}
.Tiles-floors {
  -webkit-filter: drop-shadow(-7px 7px 10px #000000);
  z-index: 1;
}
.Tile {
  position: absolute;
  width: 70px;
  height: 70px;
  animation: block-in 0.15s 0 ease-out;
}
@keyframes block-in {
  0% {
    width: 0;
    height: 0;
    margin: 35px 35px;
    border-radius: 50%;
  }
  100% {
    width: 70px;
    height: 70px;
    margin: 0 0;
    border-radius: 0;
  }
}
.Tile-wall {
  margin: -3px 0 0 -3px;
  width: 146px;
  height: 76px;
  background-repeat: no-repeat;
  transform-origin: 38px 38px;
}

HTML

Vertical align icons。通过transform把图标定位于两个footer之间。

编辑器支持Emmet

快捷键

Vertical align icons。通过transform把图标定位于两个footer之间。

分别使用SVG path和CSS3 motion-path实现的粒子漂浮动画

使用CSS3构建的渐变色艺术画 - 山谷和云彩

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：