1. 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
  2. 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
  3. 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
  4. Sass和Compass必备技能之Compass篇-02 模块简介

    1. Layout简介

    http://compass-style.org/reference/compass/layout/

    @import "compass/layout"
    @import "compass/layout/grid-background"
    @import "compass/layout/sticky-footer"
    @import "compass/layout/stretching"
    

    2. CSS3模块

    使用率最高的模块,提高跨浏览器的CSS3效果 http://compass-style.org/reference/compass/css3/

    @import "compass/css3";
    .webdemo-sec{
        @include box-shadow(1px 1px 3px 2px #cfcecf ...
    Tagged as : CSS SASS
  5. Sass和Compass必备技能之Compass篇-01 Compass核心模块概述及Reset模块

    1. Compass核心模块

    images/compass-1.png

    Reset(@import "compass/reset";)和Layout(@import "compass/layout";)并没有包含在compass的核心模块中,需要单独引用。

    @import "compass";包含了CSS3/Helpers/Typography/Utilities模块: - CSS3模块

    2. 使用normalize.css替换reset

    《grunt beginer》

    http://necolas.github.io/normalize.css/

    可以使用compass插件:

    2.1 安装

    gem install compass-normalize

    2.2 在config.rb中引入

    require 'compass-normalize' 注意:config.rb中的require 'compass/import-once/activate'是防止多次引入 ...

    Tagged as : CSS SASS
  6. Sass和Compass必备技能之Sass篇-04 Sass语法介绍(高级篇)

    1. @media

    sass中的@media跟CSS区别:

    sass中的media query可以内嵌在css规则中,在生成CSS的时候, media query 才会被提到样式的最高级

    好处:避免了重复书写选择器或者打乱样式表的流程。

    @mixin col($width){
        @media(min-width: 768px){
            width: $width;
            float: left;
        }
    }
    

    2. @at-root

    指定嵌套的内容生成CSS时,在最底层

    .main-sec{
        font-family: $main-sec-ff;
        @at-root{
            .main-sec-headline{
                font:{
                    family: $main-sec-ff;
                    size: 16px;
                }
            }
    
            .main-sec-detail{
                font-size: 12px;
            }
        }
    }
    

    3. 逻辑

    @mixin col($width){
        @if type-of($width) != number ...
    Tagged as : CSS SASS
  7. Sass和Compass必备技能之Sass篇-03 Sass语法介绍(进阶篇)

    1. 变量操作

    变量操作有两种方式,第一种是直接操作,第二种是通过函数。

    通过函数: - 跟代码块无关的函数,多是自己内置函数,称functions - 可重用的代码块,称mixin: @include和 @extand的方式来应用,

    运算符: >= <= > < == != ()

    CSS3增加了HSL的颜色,SASS会自动转换HSL为RGB,完美解决兼容。

    sass支持@function来声明函数。

    2. 混合器mixin和include

    @mixin来定义混合器 @include来使用混合器

    //声明
    @mixin col-6{
        width: 50%;
        float: left;
    }
    
    //调用
    .webdemo-sec {
        @include col-6(); //括号可以省略
    
        &:hover{
            background-color: #F5F5F5;
        }
    }
    

    2.1 何时使用混合器

    如果你能找到一个很好的短名字来描述属性样式,比如rounded-cornersfancy-font或者no-bullets ...

    Tagged as : CSS SASS
  8. Sass和Compass必备技能之Sass篇-02 Sass语法介绍(基础篇)

    1. sass和scss形式的相互转换

    $sass-convert main.sass main.scss
    或者
    $sass-convert main.scss main.sass
    

    2. 创建应用

    $compass create learn-sass-syntax
    $cd learn-sass-syntax
    $compass watch
    

    3. 语法

    SASS CSS默认都是UTF-8,所以写不写@charset "UTF-8"

    编码问题,如果出现中文编译失败,打开rubygems\gems\sass\lib\sass\engine.rb文件,在require后面添加Encoding.default_external=Encoding.find('utf-8')

    3.1 ...

    Tagged as : CSS SASS
  9. Sass和Compass必备技能之Sass篇-01 安装

    1. ruby安装

    RVM: Ruby Version Manager(Ruby多版本管理器)

    安装RVM

    mac下安装homebrew cakebrew

    $ gem sources --remove https://rubygems.org/
    $ gem sources -a https://ruby.taobao.org/
    $ gem sources -l
    *** CURRENT SOURCES ***
    https://ruby.taobao.org
    
    # 请确保只有 ruby.taobao.org
    $ gem install rails #安装
    $ gem update #更新
    $ gem install sass --version=3.3
    $gem ...
    Tagged as : CSS SASS

Page 1 / 1