1. CSS3扁平化风格博客

    1. 页面整体分析

    做一个网页或者网站,第一步就是先定义网页与网站的结构,这是所有任务的前提。


    2 准备工作

    在这个案例中,我们将使用Gulp, SASS和Compass来创建。

    2.1 安装Gulp

    Gulp是为了后期进行自动化工作而做的。

    • 如果电脑没有安装node,那么第一步就是下载node,并且安装。
    • 安装http-server来查看网页: npm install -g http-server
    • 全局安装gulp:sudo npm install -g gulp
    • 初始化项目:npm init
    • 安装gulp及常用库
    npm install gulp --save-dev
    npm install gulp-concat --save-dev
    npm install gulp-uglify --save-dev
    npm install gulp-rename --save-dev
    npm install ...
    Tagged as : CSS3
  2. CSS3笔记03-变形transform

    1. 缩放scale

    transform:scale(1.2);
    

    transform-origin:缩放开始位置

    transform-origin: bottom left;
    

    2. box-shadow 阴影

    用法同text-shadow

    3. 旋转rotate

    transform:scale(1.2)rotate(-10deg)
    

    4. 倾斜skew

    transform:scale(1.2)skew(-5deg, 30deg);
    

    skew的参数分别是x坐标角度和y坐标角度,也可以给相同的角度skew(30deg)

    5. 平移translate

    transform:scale(1.2)translate(20px, 40px ...
    Tagged as : css3 compass sass
  3. CSS3笔记02-悬停效果

    1. 首先需要了解几个伪类:

    • :hover选择器:当鼠标悬停在所指定的元素上时所使用的样式;
    • :active选择器:当所指定的元素处于激活状态(鼠标在元素上按下还没有松开)时所使用的样式;
    • :focus选择器:当元素获得光标焦点时使用的样式,主要用在文本框输入文字时使用.

    2. rgba

    color: #eee;
    color: rgba(255, 255, 255, 0.7);
    

    rgba增加了透明度,在上面例子中多添加一个color:#eee;是为了使不支持rgba的浏览器仍然有color可用。

    3. 文本阴影(text-shadow)

    a{
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    }
    

    text-shadow的属性如下:

    text-shadow: h-shadow v-shadow blur color ...
    Tagged as : css3 compass sass
  4. CSS3笔记01-过渡transition

    使用compass:

    @import "compass/css3/transition";
    div.foo{
        width: 50px;
        padding: 5px 10px;
        background: #9f3;
        @include transition-property(background, width);
        @include transition-duration(0.5s);
        @include transition-timing-function(ease-in);
    }
    
    div.foo:hover{
        background: #690;
        width: 100px;
    }
    

    对应的css3:

    div.foo {
      width: 50px;
      padding: 5px 10px ...
    Tagged as : css3 compass sass

Page 1 / 1