css – zcw的博客

揭开clearfix和overflow的神秘面纱 🔑 clearfix Reloaded + overflow:hidden Demystified

2020年7月7日由 zciii 发表

About the author: Thierry Koblentz is a front-end engineer at Yahoo! He owns TJK Design and ez-css.org. You can follow Thierry on Twitter at @thierryk 继续>

Flex整页布局避免底部被撑掉 🔑 Flexbox Full Page Web App Layout

2020年2月25日由 zciii 发表

From: http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout I was working on a web app layout, and since we require a modern b 继续>

Simple CSS3 Dropdown Menu

2015年12月28日由 zciii 发表

<ul><li>Home</li>
  <li>About</li>
  <li>
    Portfolio
    <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>Illustrations</li>
    </ul>
  </li>
  <li>Blog</li>
  <li>Contact</li>
</ul>

<li>About</li>

<li>

Portfolio

<ul>

<li>Web Design</li>

<li>Web Development</li>

<li>Illustrations</li>

</ul>

</li>

<li>Contact</li>

</ul>

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

body {

font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;

padding: 20px 50px 150px;

font-size: 13px;

text-align: center;

background: #E3CAA1;

}

ul {

text-align: left;

display: inline;

margin: 0;

padding: 15px 4px 17px 0;

list-style: none;

-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);

-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);

box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);

}

ul li {

font: bold 12px/18px sans-serif;

display: inline-block;

margin-right: -4px;

position: relative;

padding: 15px 20px;

background: #fff;

cursor: pointer;

-webkit-transition: all 0.2s;

-moz-transition: all 0.2s;

-ms-transition: all 0.2s;

-o-transition: all 0.2s;

transition: all 0.2s;

}

ul li:hover {

background: #555;

color: #fff;

}

ul li ul {

padding: 0;

position: absolute;

top: 48px;

left: 0;

width: 150px;

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

display: none;

opacity: 0;

visibility: hidden;

-webkit-transiton: opacity 0.2s;

-moz-transition: opacity 0.2s;

-ms-transition: opacity 0.2s;

-o-transition: opacity 0.2s;

-transition: opacity 0.2s;

}

ul li ul li {

background: #555;

display: block;

color: #fff;

text-shadow: 0 -1px 0 #000;

}

ul li ul li:hover { background: #666; }

ul li:hover ul {

display: block;

opacity: 1;

visibility: visible;

}

from:http://cssdeck.com/labs/another-simple-css3-dropdown-menu

Cross-browser custom CSS cursors

2013年8月27日由 zciii 发表

origin|转载来源：http://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/ You can see that big portion is for making the design work in 继续>

如何简单快速的修改Bootstrap

2013年7月26日由 zciii 发表

Bootstrap并不是单单意味着HTML/CSS界面框架，更确切的说，它改变了整个游戏规则。这个囊括了应有尽有的代码框架使得许多应用和网站的设计开发变得简便许多，而且它将大量的HTML框架普及成了产品。可悲的是，它纯粹的功能唤起了我们本能的懒惰，很多人始终坚持使用它的默认设置。现在，你要知道，这继续>

Smooth CSS transitions by forcing GPU rendering

2013年7月5日由 zciii 发表

Let’s say you have a CSS transition that takes an element and scales it two times on mouseover. Your code probably looks like this: [crayon-673ee47dd8 继续>

CSS渲染器：将Photoshop Filters效果带入网络

2013年5月25日由 zciii 发表

Chrome的Canary频道和Sarafi的WebKit nightly build，这两者现在都已经支持CSS渲染器的Photoshop风格混合模式，Adobe将Photoshop样式的过滤工具带入了网络。要应用最新的混合模式，你需要获取最新的Chrome Canary版本或者是WebKit 继续>

CSS 中文字体的英文名称宋体微软雅黑等

2013年4月26日由 zciii 发表

在网页前端开发制作中经常遇到需要使用微软雅黑，宋体等中文字体的情况，一般我们直接使用

font-family:"微软雅黑";

1	font-family:"微软雅黑";

这样的写法，然而在一些英文系统或者MAC中直接在CSS中使用中文可能会无法读取，或者你是像我一样，看到在CSS中出现中文就心里不爽的人，那么，介绍C 继续>