search

TracerLee / tracerlee.github.io

Personal blog written by Tracer
4 stars 0 forks source link

CSS小代码 #9

Open TracerLee opened 8 years ago

TracerLee commented 8 years ago

CSS代码片段收集

旨在通过日常的开发中汲取一些可贵的代码片段，方便查阅和复习。

TracerLee commented 7 years ago

css reset

来自http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js

@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}
TracerLee commented 7 years ago

IE6透明滤镜写法

.class {
    _background:none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src="your-image.png");}
}
TracerLee commented 7 years ago

loading keyframes

.loading {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    margin-right: 20px;
    animation: loading 1s steps(1) infinite 0s;
    background: url(../images/loading-sm.png) no-repeat 0 0;
}

@keyframes loading {
    0%     {background-position: 0 0;}
    9.09%  {background-position: -16px 0;}
    18.18% {background-position: -32px 0;}
    27.27% {background-position: -48px 0;}
    36.36% {background-position: -64px 0;}
    45.45% {background-position: -80px 0;}
    54.54% {background-position: -96px 0;}
    63.63% {background-position: -112px 0;}
    72.72% {background-position: -128px 0;}
    81.81% {background-position: -144px 0;}
    90.90% {background-position: -160px 0;}
    100%   {background-position: -176px 0;}
}

loading序列动画（loading-sm.png）

TracerLee commented 7 years ago

-webkit-filter 的用法

-webkit-filter 用法是标准的 CSS 写法，如：

-webkit-filter: blur(2px);

-webkit-filter 支持的效果有：

TracerLee commented 7 years ago

文本溢出显示省略号(…)

先回顾一下单行的做法：

p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: [可选宽度];
}

多行的做法：

主要是通过借助WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp（文档）

p {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

其他javascript方案(Clamp.js)、兼容方案，请参考此文：

TracerLee commented 7 years ago

上下阴影效果

div {-webkit-mask-image: linear-gradient(180deg,hsla(0,0%,100%,0),#fff 10%,#fff 80%,hsla(0,0%,100%,.5) 90%,hsla(0,0%,100%,0));}
TracerLee commented 7 years ago

禁用A标签拖动

document.addEventListener("dragstart", function(event) { 
  if(event.target.tagName === 'A') event.preventDefault()
})
TracerLee commented 7 years ago

简易垂直居中

.selector {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
TracerLee commented 6 years ago

display:-webkit-box

<div class="wrap">
  <div class="parent">
    <div class="child-one">child-1</div>
    <div class="child-two">child-2</div>
    <div class="child-three">child-3</div>
    <div class="child-four">child-4</div>
  </div>
</div>
* {
  margin: 0;
  padding: 0;
}
.wrap {
  display: -webkit-box;
  -webkit-box-pack: center;
  border: 1px solid #000;
}
.parent {
  width: 500px;
  height: 200px;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: center;
}
.child-one {
  background: lightblue;
  -webkit-box-flex: 1;
  height: 100px;
}
.child-two {
  background: lightgray;
  -webkit-box-flex: 2;
  height: 110px;
}
.child-three {
  background: lightgreen;
  -webkit-box-flex: 3;
  height: 120px;
}
.child-four {
  background: pink;
  width: 100px;
  height: 50px;
}

演示： https://jsfiddle.net/TracerLee/1w8ufpc9/

TracerLee commented 6 years ago

table-cell 垂直居中

.center_table_cell {
    display: table;
}

.center_table_cell * {
    display: table-cell;
    vertical-align: middle;
}

BTW: table-cell 里面的内容如果是 inline-block 会无法居中。

TracerLee commented 6 years ago

table-cell 实现一列满足最小宽度

label {
    display: table-cell;
    width: 1px;
    white-space: nowrap;
}