文档章节

助你美化网站的实用css3技巧(2)

lotozhou
 lotozhou
发布于 2015/12/02 13:56
字数 335
阅读 53
收藏 4

「深度学习福利」大神带你进阶工程师,立即查看>>>

CSS3 calc() 的使用

calc() 用法类似于函数,能够给元素设置动态的值:

.simpleBlock {
  width: calc(100% - 100px);
}
 
.complexBlock {
  width: calc(100% - 50% / 3);
  padding: 5px calc(3% - 2px);
  margin-left: calc(10% + 10px);
}

文本渐变

文本渐变效果很流行,使用 CSS3 能够很简单就实现:

h2[data-text] {
  position: relative;
}
h2[data-text]::after {
  content: attr(data-text);
  z-index: 10;
  color: #e3e3e3;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));

禁止鼠标事件

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件,例如,一个连接如果设置了下面的样式就无法点击了。

.disabled { pointer-events: none; }

盒子效果

下面的代码可以实现一个漂亮的盒子效果:

p {
 padding: 5px 10px;
  margin: 10px;
  background: #ff0030;
  color: #fff;
  font-size: 21px;
  line-height: 1.3em;
  border: 2px dashed #fff;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
  -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
  box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
  text-shadow: -1px -1px #aa3030;
}

自定义滚动条

过去一直都只有 IE 才能设置滚动条样式,现在好了,Webkit 也提供了设置滚动条的属性:

::-webkit-scrollbar {
  width: 12px;
}
 
::-webkit-scrollbar-track {
  background: none;
}
 
::-webkit-scrollbar-thumb {
  background: -webkit-linear-gradient(left, #547c90, #002640);
  border: 1px solid #333;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
}

模糊文本

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}


lotozhou
粉丝 9
博文 51
码字总数 51524
作品 0
苏州
程序员
私信 提问
加载中
请先登录后再评论。
SQLServer实现split分割字符串到列

网上已有人实现sqlserver的split函数可将字符串分割成行,但是我们习惯了split返回数组或者列表,因此这里对其做一些改动,最终实现也许不尽如意,但是也能解决一些问题。 先贴上某大牛写的s...

cwalet
2014/05/21
9.7K
0
tiny php template--TPT

关于TPT TPT是php实现的用于模板解析小工具,全部实现仅仅60行代码。 配置 DIRCOMPILED和DIRTEMPLATE,分别表示模版编译目录和模版文件目录: define('DIRCOMPILED','/compileddiy');define(......

红猪-侠
2013/03/03
1K
1
静态博客网站生成器--Hexo

Hexo 是一个基于nodejs 的静态博客网站生成器,作者是来自台湾的 Tommy Chen 特点: 不可思议的快速 ─ 只要一眨眼静态文件即生成完成 支持 Markdown 仅需一道指令即可部署到 GitHub Pages 和...

匿名
2013/04/05
2.9W
4
超快的css selector引擎--kquery 2.0

kquery是一款基于javascript完整实现css3选择器引擎. 兼容所有主流浏览器ie6+/chrome/firefox/opera/safari, 压缩和gzip之后仅8kb大小。智能编译引擎优化去除不必要的逻辑, 查询速度远胜于...

aaron.xiao
2012/10/23
721
0
PHP博客系统--WBlog

Wblog是一个基于thinkphp3.1框架开发的轻量级的简洁实用的PHP博客系统,倡导“大道至简,开发由我”的理念,用最少的代码完成更多的功能。更多功能仍在完善中。。。 目前主要功能:   主博...

匿名
2012/11/02
2.9K
0

没有更多内容

加载失败,请刷新页面

加载更多

spring @Async异步方法使用及原理说明

异步类: package com.example.spring.async; import org.springframework.scheduling.annotation.Async; import org.springframework.stereotype.Service; import com.example.spring.MyLog......

不知道啊
05/21
0
0
python pandas拆分单元格

拆分单元格是excel中经常遇到的内容之一。那么在pandas中如何实现呢? 例如有如下数据: >>> import pandas as pd >>> import numpy as np >>> df=pd.read_excel(r'D:/myExcel/1.xlsx') >>> d......

python小工具
06/20
0
0
Electron开发跨平台桌面程序入门教程

最近一直在学习 Electron 开发桌面应用程序,在尝试了 java swing 和 FXjava 后,感叹还是 Electron 开发桌面应用上手最快。我会在这一篇文章中实现一个HelloWord的应用程序,记录学习过程中...

薛勤i
03/13
0
0
Java8中的流操作-基本使用&性能测试

一、流(Stream)简介 流是 Java8 中 API 的新成员,它允许你以声明式的方式处理数据集合(通过查询语句来表达,而不是临时编写一个实现)。这有点儿像是我们操作数据库一样,例如我想要查询出...

我没有三颗心脏
2019/08/03
0
0
能力不错的大厂高P,为什么过不了小厂的试用期?

图片 :来自Pexels 前阵子,我的一个大学同学跟我吐槽,“他去年从大厂跳槽到了一家C轮创业公司担任技术leader,今天居然被老板通知试用期没通过!” 这位同学在加入小厂之前,有过两段大厂经...

IT人的职场进阶
03/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部