最新消息:欢迎大家来到小月博客

CSS 原来可以这样写(二)

web前端 小月 829浏览 0评论

CSS 原来可以这样写(二)

 

接着 CSS 原来可以这样写(一) 估计大家对css 的一些基础写法了解了一些吧。大家不要感觉这个基础的没必要去学习,当你没有绝对牛逼的经验的时候,真的有必要去学习去牢记以下的哦!

总是我承认我是菜鸟我需要学习的哈哈哈!

 

疯狂的动物成

疯狂的动物成(让小伙的技术也这样子焕然一新吧)

1.  渐变:

.a{
    background:-webkit-gradient(linear,left top,left bottom,from(#69bdf9),to(#4aa7e8));
    background:-moz-linear-gradient(top,#67bcf8,#3b96d6);
    background:-o-linear-gradient(top,#67bcf8,#3b96d6);
    background:linear-gradient(top,#67bcf8,#3b96d6);
}

注:不懂 gradient 的请好好看看基础哦小伙伴!自己动手试试吧。

分享一个网站不要偷笑哦:http://www.colorzilla.com/gradient-editor/

2. 投影:

.b{
    box-shadow:inset 1px -1px 0 #f1f1f1;
    text-shadow:1px 1px 0px #630;
}
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#99000000',endColorstr='#99000000');
background:rgba(0,0,0,.6);
background:rgba(0,0,0,0.5);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#50000000',endColorstr='#50000000')\9;

注:看哪个startColorstr和endColorstr,一共8位,后6位是RGB的颜色代码,前两位是16进制的,比如60%透明,就是256×0.6=154,再换算成16进制=9A

background-image:-ms-linear-gradient(top, #fff, #ddd); ie10渐变

alpha透明兼容代码生成:http://leegorous.net/tools/bg-alpha.html

3. 进制的转换

http://www.zhangxinxu.com/wordpress/2010/05/rgba%E9%A2%9C%E8%89%B2%E4%B8%8E%E5%85%BC%E5%AE%B9%E6%80%A7%E7%9A%84%E5%8D%8A%E9%80%8F%E6%98%8E%E8%83%8C%E6%99%AF%E8%89%B2/

3. search占位

::-webkit-input-placeholder {}
::-moz-input-placeholder {}
input:focus::-webkit-input-placeholder { 
    color: transparent; 
}
-webkit-appearance:none; google边框去除
input[type="search"]{
    -webkit-appearance:textfield;   // 去除chrome默认样式
} 
line-height: normal; /* for non-ie */
line-height: 22px\9; /* for ie */

4.HTML中的title换行问题

title 换行:

在title属性中使用AscII码:

<a HREF="#" TITLE='第一行&#13;第二行'>A</A>

5. CSS 实现 textArea 的 placeholder 换行

由于placeholder属性是可以用css操作的,所以我们可以用:after来把placeholder的内容写到CSS中,曲线救国。

textarea::-webkit-input-placeholder:after{
  display:block;
  content:"line@ \A line#";/*  \A 表示换行  */
  color:red;
};

以上是webkit的代码,Firefox类也有相应的版本:

textarea::-moz-placeholder:after{
  content:"line@ \A line#";/*  \A 表示换行  */
  color:red;
};

 

6.阻止默认事件

pointer-events:none;

7. 变灰 gray:

html{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

8. firefox 阻止选中:

-moz-user-focus:ignore;
-moz-user-input:disabled;
-moz-user-select:none;

9. 箭头

display:block;
border:solid transparent;
line-height: 0;
width:0; 
height:0;
border-top:solid #0288ce
;border-width:8px 6px 0 6px;
border-style:solid;
border-width:7px; 
border-color:transparent transparent transparent #ff7020;
position:absolute;
top: 0;
left: 0;
border-width:20px;
border-style:solid;
border-color:#d1ddde transparent transparent #d1ddde;

注:ie6 bug测试,把border-style设为dashed.

10. 取消textarea右下角可拖动手柄:

resize:none;

 

 

 

转载请注明:小月博客 » CSS 原来可以这样写(二)

一点心意×
 收藏 (2)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册