精华内容
下载资源
问答
  • 按钮.btn 为按钮添加基本样式.btn-default 默认/标准按钮 .btn-primary 原始按钮样式(未被操作) .btn-success 表示成功的动作 .btn-info 该样式可用于要弹出信息的按钮 .btn-warning 表示需要谨慎操作的按钮 ...

    按钮

    .btn 为按钮添加基本样式

    .btn-default 默认/标准按钮
    .btn-primary 原始按钮样式(未被操作)
    .btn-success 表示成功的动作
    .btn-info 该样式可用于要弹出信息的按钮
    .btn-warning 表示需要谨慎操作的按钮
    .btn-danger 表示一个危险动作的按钮操作 .btn-link 让按钮看起来像个链接 (仍然保留按钮行为)

    .btn-lg 制作一个大按钮
    .btn-sm 制作一个小按钮
    .btn-xs 制作一个超小按钮

    .btn-block 块级按钮(拉伸至父元素100%的宽度)

    .active 按钮被点击
    .disabled 禁用按钮

    按钮组

    .btn-group
    该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。

    <div class="btn-group">
      <button type="button" class="btn btn-default">Button1</button>
       <button type="button" class="btn btn-default">Button2</button>
    </div>

    .btn-toolbar
    该 class 有助于把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中,一般获得更复杂的组件。

    <div class="btn-toolbar" role="toolbar">
      <div class="btn-group">...</div>
      <div class="btn-group">...</div>
    </div>

    .btn-group-lg, .btn-group-sm, .btn-group-xs

    这些 class 可应用到整个按钮组的大小调整,而不需要对每个按钮进行大小调整。

    <div class="btn-group btn-group-lg">...</div>
    <div class="btn-group btn-group-sm">...</div>
    <div class="btn-group btn-group-xs">...</div>

    .btn-group-vertical

    该 class 让一组按钮垂直堆叠显示,而不是水平堆叠显示。

    <div class="btn-group-vertical">

    图片

    .img-rounded:添加 border-radius:6px 来获得图片圆角。
    .img-circle:添加 border-radius:50% 来让整个图片变成圆形。
    .img-thumbnail:添加一些内边距(padding)和一个灰色的边框。



    文本(颜色,可用在p或者a标签等)

    .text-muted(灰色)
    .text-primary
    .text-success
    .text-info
    .text-warning
    .text-danger


    背景

    以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗:
    .bg-primary
    .bg-success
    .bg-info
    .bg-warning
    .bg-danger


    其他

    .pull-left 元素浮动到左边
    .pull-right 元素浮动到右边
    .center-block 设置元素为 display:block 并居中显示
    .clearfix 清除浮动
    .show 强制元素显示
    .hidden 强制元素隐藏
    .text-hide 将页面元素所包含的文本内容替换为背景图(隐藏文字)
    .caret 显示下拉式功能,<span class="caret"></span>

    下拉功能键

    <div class="container">
        <h2>实例</h2>
        <p> .caret 类显示了一个下拉的功能: <span class="caret"></span></p>
        <p> .caret 类在按钮中使用:</p>
        <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">一个链接</a></li>
                <li><a href="#">另一个链接 link</a></li>
                <li><a href="#">其他功能</a></li>
            </ul>
        </div>
    </div>

    下拉菜单

    基本

    .dropdown ——指定下拉菜单,下拉菜单都包裹在dropdown里
    .dropdown-menu ——用于创建下拉菜单

    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Java</a>
            </li>
        </ul>
    </div>

    通过class dropdown-header向下拉菜单添加标题

    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation" class="dropdown-header">下拉菜单标题</li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="#">Java</a>
            </li>
    </ul>

    向上下拉菜单

    <div class="container">
      <h2>向上下拉菜单</h2>
      <p>.dropup 类用于指定一个向上的下拉菜单。</p>
      <p>.dropdown-menu 类用于创建下拉菜单。</p>
      <div class="dropup">
        <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">教程
        <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
        </ul>
      </div>
    </div>

    .divider 类用于设置下拉菜单的分割线

    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">菜鸟教程</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">菜鸟教程</a></li>

    .disabled类用于设置下拉菜单中的禁用项




    下拉菜单与按钮组组合使用

    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮 1</button>
        <button type="button" class="btn btn-default">按钮 2</button>
        <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下列
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">下拉链接 1</a></li>
            <li><a href="#">下拉链接 2</a></li>
        </ul>
        </div>
    </div>

    //将btn-group换成btn-group-vertical即可得到垂直的下拉菜单

    分割的下拉菜单

    <div class="btn-group">
        <button type="button" class="btn btn-default">默认</button>
        <button type="button" class="btn btn-default dropdown-toggle" 
            data-toggle="dropdown">
            <span class="caret"></span>
            <span class="sr-only">切换下拉菜单</span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">功能</a></li>
            <li><a href="#">另一个功能</a></li>
            <li><a href="#">其他</a></li>
            <li class="divider"></li>
            <li><a href="#">分离的链接</a></li>
        </ul>
    </div>
    展开全文
  • 在 CSDN 上,经常有朋友问到不规则窗口或者不规则的按钮如何制作,在这里我介绍 个比较常用的 API 函数,来实现不规则窗口或者...二、下面我介绍一下程序主要用到的个 API 函数: 1. 创建一个圆角矩形 CreateR

    在 CSDN 上,经常有朋友问到不规则窗口或者不规则的按钮如何制作,在这里我介绍
    几个比较常用的 API 函数,来实现不规则窗口或者不规则按钮的制作。
    一、先看一下效果:
    点击一下圆形花边按钮,效果如下:
    这里写图片描述
    (蓝色的为桌面)
    这里写图片描述
    CSDN 社区电子杂志—POWERBUILDER 杂志创刊号
    二、下面我介绍一下程序中主要用到的几个 API 函数:
    1. 创建一个圆角矩形 CreateRoundRectRgn
    CreateRoundRectRgn
    PB 声明
    FUNCTION ulong CreateRoundRectRgn(Long x1, Long y1, Long x2, Long y2, Long x3, Long y3) library “gdi32”
    说明
    创建一个圆角矩形,该矩形由 X1, Y1-X2, Y2 确定,并由 X3, Y3 确定的椭圆描述圆角弧度
    返回值
    Long,执行成功则为区域句柄,失败则为 0
    参数表
    参数 类型及说明
    X1,Y1 Long,矩形左上角的 X, Y 坐标
    X2,Y2 Long,矩形右下角的 X, Y 坐标
    X3 Long,圆角椭圆的宽。其范围从 0(没有圆角)到矩形宽(全圆)
    Y3 Long,圆角椭圆的高。其范围从 0(没有圆角)到矩形高(全圆)
    注解
    不用时一定要用 DeleteObject 函数删除该区域
    用该函数创建的区域与用 RoundRect API 函数画的圆角矩形不完全相同,因为本矩形的右边和下边不包括
    在区域之内
    2. 创建一个由一系列点围成的区域 CreatePolygonRgn
    CreatePolygonRgn
    PB 声明
    FUNCTION ulong CreatePolygonRgn (ref ws_position lppt[], int cPoints, int fnPolyFillMode ) Library “gdi32”
    说明
    创建一个由一系列点围成的区域。 windows 在需要时自动将最后点与第一点相连以封闭多边形
    返回值
    Long,执行成功为创建的区域句柄,失败则为 0
    参数表
    参数 类型及说明
    lpPoint POINTAPI, nCount 个 POINTAPI 结构中的第一个 POINTAPI 结构
    nCount Long,多边形的点数
    nPolyFillMode
    Long,描述多边形填充模式。可为 ALTERNATE 或 WINDING 常数。参考
    SetPolyFillMode 函数对多边形填充模式的解释
    注解
    不用时一定要用 DeleteObject 函数删除该区域
    - 26 -
    CSDN 社区电子杂志—POWERBUILDER 杂志创刊号
    3. 创建一个椭圆 CreateEllipticRgn
    CreateEllipticRgn
    PB 声明
    FUNCTION ulong CreateEllipticRgn( Long x1, Long y1, Long x2, Long y2) library “gdi32”
    说明
    创建一个椭圆,该椭圆与 X1, Y1 和 X2, Y2 坐标点确定的矩形内切
    返回值
    Long,执行成功则为区域句柄,失败则为零
    参数表
    参数 类型及说明
    X1,Y1 Long,矩形左上角 X, Y 坐标
    X2,Y2 Long,矩形右下角 X, Y 坐标
    注解
    不用时一定要用 DeleteObject 函数删除区域。用 Ellipse API 函数绘出的椭圆与该椭圆区域不完全相同,
    因为本函数的绘图计算不包括矩形的下边和右边
    4. 改变窗口的区域 SetWindowRgn, 这是最重要的一个函数
    SetWindowRgn
    PB 声明
    FUNCTION ulong SetWindowRgn(ulong hWnd,ulong hRgn,boolean bRedraw) LIBRARY “user32”
    说明
    这是那些很难有人注意到的对编程者来说是个巨大的宝藏的隐含的 API 函数中的一个。 本函数允许您改变
    窗口的区域。 通常所有窗口都是矩形的——窗口一旦存在就含有一个矩形区域。 本函数允许您放弃该区域。
    这意味着您可以创建圆的、星形的窗口,也可以将它分为两个或许多部分——实际上可以是任何形状
    返回值
    Long,执行成功为非零值,失败为 0
    参数表
    参数 类型及说明
    hWnd Long,将设置其区域的窗口
    hRgn
    Long,将设置的区域的句柄,一旦设置了该区域, 就不能使用或修改该区域句
    柄,也不要删除它
    bRedraw Boolean,若为 TRUE,则立即重画窗口
    注解
    为区域指定的所有坐标都以窗口坐标(不是客户坐标) 表示, 它们以整个窗口(包括标题栏和边框) 的左
    上角为起点
    5. 合并区域函数 CombineRgn
    CombineRgn
    - 27 -
    CSDN 社区电子杂志—POWERBUILDER 杂志创刊号
    PB 声明
    FUNCTION ulong CombineRgn(Long hDestRgn, Long hSrcRgn1, Long hSrcRgn2, Long nCombineMode )
    LIBRARY “gdi32”
    说明
    将两个区域组合为一个新区域
    返回值
    Long,下列常数之一:
    COMPLEXREGION:区域有互相交叠的边界
    SIMPLEREGION:区域边界没有互相交叠
    NULLREGION:区域为空
    ERRORAPI: 不能创建组合区域
    参数表
    参数 类型及说明
    hDestRgn Long,包含组合结果的区域句柄
    hSrcRgn1 Long,源区域 1
    hSrcRgn2 Long,源区域 2
    Long,组合两区域的方法。可设为下述常数
    RGN_AND hDestRgn 被设置为两个源区域的交集
    RGN_COPY hDestRgn 被设置为 hSrcRgn1 的拷贝
    RGN_DIFF
    hDestRgn 被 设 置 为 hSrcRgn1 中 与
    hSrcRgn2 不相交的部分
    RGN_OR hDestRgn 被设置为两个区域的并集
    nCombineMode
    RGN_XOR
    hDestRgn 被设置为除两个源区域 OR 之
    外的部分
    6. 删除 GDI 对象 DeleteObject
    DeleteObject
    PB 声明
    FUNCTION ulong DeleteObject(ulong hObject) LIBRARY “gdi32.dll”
    说明
    用这个函数删除 GDI 对象, 比如画笔、 刷子、 字体、 位图、 区域以及调色板等等。 对象使用的所有系统资
    源都会被释放
    返回值
    Long,非零表示成功,零表示失败
    参数表
    参数 类型及说明
    hObject Long,一个 GDI 对象的句柄
    注解
    - 28 -
    CSDN 社区电子杂志—POWERBUILDER 杂志创刊号
    不要删除一个已选入设备场景的画笔、 刷子或位图。 如删除以位图为基础的阴影(图案) 刷子,位图不会
    由这个函数删除——只有刷子被删掉
    三、部分核心实现代码
    圆形窗口的代码:
    long ll_x1, ll_x2, ll_x3
    long ll_y1, ll_y2, ll_y3
    long ll_handle
    long ll_data
    //取窗口的宽度
    ll_data = UnitsToPixels(parent.width, xunitstopixels!)
    ll_data = PixelsToUnits(ll_data, ypixelstounits!)
    parent.height = ll_data
    ll_x1 = 10
    ll_y1 = 25
    ll_x2 = UnitsToPixels(parent.width, xunitstopixels!) - 10
    ll_y2 = UnitsToPixels(parent.height, yunitstopixels!) - 10
    //创建一个圆形区域
    ll_handle = CreateEllipticRgn(ll_x1, ll_y1, ll_x2, ll_y2)
    SetwindowRgn(handle(parent), ll_handle, true)
    return 1
    代码也比较简单,其它的我也不一一细说了,感兴趣的朋友可以整个窗口的源代码导入到 PBL 里自己运行
    一下试试。
    源码下载地址:
    http://blog.csdn.net/lzp_lrp/article/details/45668141

    展开全文
  • 写的比较简单,还在学习,欢迎大家指教。 知识点: WebComponent  CustomElementRegistry - customElements 对象  该接口提供注册自定义元素和查询已注册元素的方法  customElements.define(name, ...

    写的比较简单,还在学习中,欢迎大家指教。

    知识点:

    WebComponent

      CustomElementRegistry - customElements 对象

      该接口提供注册自定义元素和查询已注册元素的方法

      customElements.define(name, constructor, options)

      name:自定义元素名称,注意:自定义的元素名称必须是使用 - ,且不能包含大写字母

      constructor:自定义元素构造器

      options :控制元素如何定义. 目前有一个选项支持

      extends:指定继承的已创建的元素. 被用于创建自定义元素

     

    Shadow DOM

      一组JavaScript API,用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)并控制其关联的功能。通过这种方式,您可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突

     

      - 自定义元素的容器

      - 组件作用域

    Element.attachShadow(shadowRootInit)

      shadowRootInit包含:

      mode:一个指定Shadow DOM封装模式的字符串,可以是下列之一:

      open开放的封装模式

      closed关闭的封装模式

    Shadow DOM

    获取子元素

      组件.childNodes

      获取组件内部元素

      组件.shadowRoot

      modeopen,则返回shadowRoot

      modeclosed,返回null

     

    Component

      插槽(SLOT

      浏览器默认情况只渲染shadowDOM,不渲染子元素

      我们可以通过组件内部使用 <slot></slot> 来获取包含的子元素,并在组件内部适当的位置插入子元素

     

      具名插槽

      我们还可以在子元素上添加 slot属性并赋值

      <div slot=”a”></div>

      那么在组件内部就是使用 <slot name=”a”></slot>的方式来调用具名插槽了

     

     

    Component

      生命周期回调

      定义在自定义元素的类定义中的特殊回调函数 

      connectedCallback当自定义元素第一次被连接到文档DOM时被调用

      disconnectedCallback当自定义元素与文档DOM断开连接时被调用

    Component

      生命周期回调

      adoptedCallback当自定义元素被移动到新文档时被调用,比如移动到一个iframe窗口等

     

      attributeChangedCallback当自定义元素的一个属性被增加、移除或更改时被调用

      - 需要配合observedAttributes属性来监听指定的属性

     

      static get observedAttributes() {return [要监听的属性列表] }

    自定义事件:

    CustomEvent

      new CustomEvent(typeArg, customEventInit)

      typeArg:一个表示 event 名字的字符串

      customEventInit:一个字典类型参数,有如下字段

      detail:可选的默认值是 null 的任意类型数据,是一个与 event 相关的值(对象)

      bubbles:一个布尔值,表示该事件能否冒泡,默认值为 false

      cancelable:一个布尔值,表示该事件是否可以取消,默认值为 false

      composed:一个布尔值,表示事件是否会在影子DOM根节点之外触发侦听器,默认值为 false

    CustomEvent

      HTMLElement.dispatchEvent(event)

      event:通过new CustomEvent创建的事件

      HTMLElement.addEventListener(event, callback, options)

      event:事件名称

      callback:事件回调

      options:选项

    代码:

     

    //自定义一个组件的基类,自定义的html标签组件都需要继承HTMLElement父类
    class component extends HTMLElement{
        constructor(){
            super(); 
            this._data = {};
            this._data.tabData = [];
            this._data.index = 0;
            
        };
        /*
        * begin 给自定义元素用setAttribute设置属性时
        *必需要用static get observedAttributes -- 注册用setAttribute的属性
        *和attributeChangedCallback配合使用--当使用setAttribute之后会自动调用该方法,
        *在这个用getAttribute得到相应属性值
        * 
        */ 
        static get observedAttributes() {
            return ["tabData","index"];
        };
        attributeChangedCallback(){
            try{
                this._data.tabData = JSON.parse(this.getAttribute("tabData"));
                this._data.index = this.getAttribute("index");
            }catch(e){};
            this.creatLis(); 
        }; 
        initData(){
            //shadow不是<m-radio>中的子元素,它是一个容器,容器里的内容替换<m-radio>在html中的的
    //位置,我是把shadow当作一个document来看的,相当于在元素中也有一个document
            let shadow = this.attachShadow({
                mode: "open"
            });
        };
        //创建tab元素
        createTabDom(){
            /* 创建选项卡dom结构 */
    
            //创建div
            let container = document.createElement("div");
            container.classList.add("container");
            
            let fragment = document.createDocumentFragment();
            //创建ul
            let ul = document.createElement("ul");
            ul.classList.add("tabUl");
            fragment.appendChild(ul);
            container.appendChild(fragment);
            this.shadowRoot.appendChild(container);
            this.creatLis();   
        };
        
    }
    //选项卡构造方法 this指向的<my-radio>  dom元素
    class MyTab extends component{
        constructor(){
            super();
            this.initData();
            this.htmlStyle();
            this.createTabDom();
            this.createTabEvent();
    
        };
        //style样式
        htmlStyle(){
             /* style样式 */
             let style = document.createElement("style");
             style.textContent = `ul{
                 margin:0;
                 padding:0;
             }
             ul,li{
                 list-style: none;
             }
             li,div{
                 padding:0;
             }
             ul{
                 float: left;
             }
             li{
                 padding: 10px 20px; 
                 border: 1px solid #eeeeee;
                 float:left;
                 font-size: 14px;
                 cursor: pointer;
                 color: #666666;
             }
             li:hover{
                 color:#ffffff;
                 background: -webkit-linear-gradient(left,rgb(82, 211, 243),#eeeeee45,rgb(82, 211, 243));
             }
             .active{
                 color:#ffffff;
                 background: -webkit-linear-gradient(left,rgb(82, 211, 243),#eeeeee45,rgb(82, 211, 243));
             }
             .container{
                 overflow: auto;
             }`;
             
             this.shadowRoot.appendChild(style);
        };
        
        creatLis(){
           
            //创建li
            
            let tabData = this._data.tabData;
            if(tabData.length > 0){
                
                let lis = tabData.map((item,index) => {
                    if(this._data.index === index.toString()){
                        return `<li class="active" data-num="${index}">${item}</li>`
                    }else{
                        return `<li data-num="${index}">${item}</li>`
                    }
                }).join("");
                let ul = this.shadowRoot.querySelector(".tabUl");
                ul.innerHTML = lis;
                
            }
            
           
        };
        createTabEvent(){
            let me = this;
            
            /* 绑定事件 */
            this.shadowRoot.addEventListener("click",function(e){
                if(e.target.tagName.toUpperCase() == "LI"){
                    me._data.index = e.target.dataset.num;
                    me.setAttribute("index", me._data.index);
                    me.creatLis();
                   
                    //创建一个自己定义对象
                    let changeEvent = new CustomEvent("change",{
                        detail:{
                            index: me._data.index
                        }
                    });
                     //触发自定义事件
                    me.dispatchEvent(changeEvent);
    
                }
            });
            
            //this.shadowRoot.onclick this.shadowRoot不支持onclick这种绑定事件的方式(不支持dom0级的绑定方式)
            /* this.shadowRoot.onclick = function(e){
                console.log(e);
                if(e.targe == 'li'){
                    console.log(e);
                                    
                }
            } */
        }
    };
    
    customElements.define("my-tab",MyTab);  //html中写<my-tab></my-tab>标签,自动会调用MyTab类。
    <!--html中调用组件的方式-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
       
    </head>
    <body>
        <!--begin 调用了我封装的组件调用几次就会用几个组件显示-->
        <my-tab></my-tab>
        <my-tab tabData='["美国","伊朗"]' index="1"></my-tab>
        <!--end调用了我封装的组件-->
        <!-- <script src="./选项卡封装.js"></script> -->
        <script src="./选项卡继承式封装.js"></script>
        <script>
            let city = ["北京","上海","成都","重庆"];
            let tab = document.querySelector('my-tab');//或者第一个控件<my-tab></my-tab>
            tab.setAttribute("tabData",JSON.stringify(city));
    //动态的将数据传入组件中,用JSON的原因是setAttribute不接受复杂数据类型(对象,数组等)所以将这些转化成字符串,再在组件中用JSON转回来。
            //tab.setAttribute("index",0);//动态的给自定义元素设置属性及属性值,必须在对应的类中加入attributeChangedCallback:当自定义元素的一个属性被增加、移除或更改时被调用
    			//- 需要配合observedAttributes属性来监听指定的属性
    	
    	//static get observedAttributes() {return [要监听的属性列表] } 这两个方法
    
    //监听自定义事件
            tab.addEventListener("change",function(e){
                console.log(e.detail.index);
            })
        </script>
        
    </body>
    </html>
    展开全文
  • 用Photoshop制作款透明质感按钮

    千次阅读 2005-03-02 11:20:00
    几乎没有哪种按纽的受欢迎程度能与透明质感按纽相比。...透明质感的按钮种类之多,制作方法之广,无法尽数。在这里,我总结了种较为好看的却又比较简单的,供大家作为参考。 第一款:Aqua按纽 这是最常见的一种

       几乎没有哪种按纽的受欢迎程度能与透明质感按纽相比。自这种风格的按纽一问世,立刻风靡全球,从庞大的商务网站到简单的个人小站,处处都能看到剔透的风采。这种漂亮按纽最大的作用就是修饰网页,仅仅使用几个这样的按纽,就会给你的网页像水晶糖果一样诱人。透明质感的按钮种类之多,制作方法之广,无法尽数。在这里,我总结了几种较为好看的却又比较简单的,供大家作为参考。

      第一款:Aqua按纽

      这是最常见的一种透明按纽了,如果运用的好的话,效果是非常理想的。这种按纽的做法有很多种,有些真的是相当相当的麻烦。当然,效果也是相当相当的漂亮,漂亮到你会不舍得把它用于网页按钮。实际上,如果用那种耗费大量时间做成的按钮装饰网页的话,需要小心喧宾夺主:游客会不自觉的把注意力集中到漂亮夺目的按纽上,网页最重要的内容却会被忽略掉。说了这么多,好像偷懒是理所当然的了。那么这一次,我们应用图层样式来打造这个按钮,这样我们就可以一劳永逸,以后都可以坐享其成了。更重要的是,我们制作的是可以装饰你的网页的按纽,它仅仅起到了点缀的作用,就像是做菜时使用的鸡精,一点足以勾出鲜味,过多反而不好了。

      1. 新建文档,RGB模式,白色背景。建立图层1,设置前景色为RGB(51,143,206)。然后选择圆角矩形工具,在工具选项中,设置绘图方式为填充像素,将矩形的圆角半径设为50像素,选择消除锯齿。点击几何选项,将矩形的大小设为91×27像素,在画布正中点击一下,即会出现一个蓝色的圆角矩形。(图01)

    图01

      2. 现在我们开始添加图层样式了。首先选择投影:将投影的不透明度降低为33%,取消全局光,角度为134度,距离和大小均为1像素,扩展为0,品质不变;

      然后是内阴影样式:将内阴影的颜色设为RGB(0,56,113),不透明度为100%,取消全局光,角度为90度,距离为6像素,阻塞为15%,大小为16像素,品质保持不变,这样,按纽就具有了立体感。(图02)

    图02

      3. 接下来我们要制作光线从按纽中透出的感觉。选择内发光样式,将混合模式设为颜色减淡,不透明度为30%,颜色为白色,方法为较柔软,居中,阻塞为31%,大小为21像素,要特别注意等高线的形状,打开默认的等高线编辑器,将曲线设为图03的形状,选择消除锯齿,范围为31%;(图03,04)

      

    图03        图04


      4. 下面是最关键的一步——添加强烈的反光效果。选择斜面和浮雕样式,将样式设为内斜面,方法为平滑,深度为81%,方向为上,大小为9像素,软化为1像素,阴影的角度为90度,高度为73度,高光和暗调的不透明度均为100%,暗调的模式为正常,颜色为RGB(4,126,188),这样高光效果就出来了。

      但这样是不够的,我们希望高光效果更为贴切。选择等高线,注意是斜面等高线,而不是光泽等高线,将等高线类型选择为预设类型中的半圆,消除锯齿,范围为69%,这样就能得到逼真的反光效果。(图05)

    图05

      5. 为了使按钮看起来更好,我们添加一些简单的阴影效果。但我们的样式中已经采用了投影样式,所以要另外想办法。按住Ctrl键,载入按纽的不透明度区域,从编辑菜单中选择合并拷贝命令,在图层1之下新建一层,按Ctrl+V,将图像粘贴到新层中,取消选择。

      合并拷贝命令可以复制选区内所有图层的图像,包括图层样式在内,这里,我们所用这个命令就是为了拼合图层样式的效果。此外,在粘贴前,如果没有取消选择,那么图像会粘贴入选区中,否则的话,图像会被自动粘贴到图层的正中。

      对图层2使用高斯模糊,半径大概为5.5像素左右。再用移动工具将图层移动到按纽的右下方,作为透明阴影。(图06)

    图06

      6. 最后,在按纽上写上文字即可。如果你更喜欢淡灰色的透明按钮,这里有个简单的法子:打开通道面板,点击蓝色通道,仅显示这一个通道的图像,由于我们的按纽是蓝色调的,所以这个通道内的图像最能体现按纽的情况。如果你的按纽是红色调或是绿色调的,那么同样,分别选择红色通道和绿色通道,就能得到灰色的透明按钮了。(图07)

    图07


      第二款:LCD风格的按纽

      一般来说,液晶显示屏风格很适合各种面板的制作,也可以作为各种按钮的载体,大多数类型的按纽与之配合都会很好看。但这一次,我们要来制作一个液晶显示屏风格的按纽。

      1. 打开Photoshop,新建RGB模式的白色背景文档。新建图层1,这一层我们作为按纽的基础轮廓。用椭圆选框工具,按住Shift+Alt键,从中心向旁边拖出一个圆形的选区。将前景色设为RGB(176,192,224),用前景色填充选区,不要取消选择。(图08)

    图08

      2. 新建图层2,在这一层中制作按纽的内阴影。复位色板,选择描边命令,将描边宽度设为4像素,位置居中。取消选择,用高斯模糊处理图层,半径为4像素。载入图层1的选区,反选,在图层2中删除,取消选择。将图层的不透明度降低到28%。(图09)

    图09

      3. 新建图层3,我们要在这一层中做描边处理。再次载入图层1的选区,打开描边命令对话框,将描边宽度设为1像素,位置居中,取消选区。将图层的不透明度降低到32%,有必要的话,可以用半径为0.2的高斯模糊消除边缘细微的锯齿。(图10)

    图10

      4. 下面我们来制作按纽内部透出的光线效果。新建图层4,选择画笔工具中的喷枪选项,将画笔大小设为200像素的柔化笔刷,将图层的混合模式设为颜色减淡,填充不透明度为21%(不是图层的总体不透明度),再次载入图层1的选区,反转色板,用白色画笔在选区的下方点击一下,画笔范围可达到选区的中上部;再将画笔大小设为100像素,再点击一下,加强效果。由于颜色减淡模式的作用,图像会出现透光的效果。(图11)

    图11


      5. 接下来,我们来进行最关键的一步——给按纽增加高光效果。首先,我们来选取高光的区域。选择钢笔工具,勾出一条封闭路径,要包括按纽的上半部分,如图12所示。(图12)

    图12

      按Ctrl+Enter,将路径转换为选区,再选取和图层1相交的选区,方法是按住Shift+Ctrl+Alt键,点击图层1,载入图层1和现有选区相交的选区,如图13。选择渐变工具,复位并反转色板,选择线性渐变工具,将渐变设为从前景色到透明,从选区的顶端到底部做出渐变,然后取消选择。选择高斯模糊滤镜,将半径设为2.0像素,模糊渐变图层,用选择工具将图层向下移动几个像素,这样会使效果更逼真。(图14)

       

    图13       图14

      6. 这时,按纽基本上就已经完成了。不过我们可以为它增加一些装饰,使它看起来更漂亮。在图层1上新建一层,为图层6,这一层里,我们为它增加一些扫描线效果。基本上来说,1×2像素大小、上黑下透明的图案应该是你的Photoshop里差不多都会有的一种基本图案。如果没有,那么花半分钟时间做上一个也来得及。载入图层1的选区,打开填充对话框,在填充类型中选择图案,找到扫描线图案,用它来填充选区。取消选择,将图层的不透明度降低到8%,用模糊滤镜稍加模糊(图15)。

    图15

      如果你的图案是上黑下白的,那么在填充以后,需要将图层混合模式设为正片叠底,效果是一样的。

      7. 下面我们来添加文字部分。我们采用的像素字体为04b_03,大小为8点,如果不希望字体太过纤细,就将消除文字锯齿的方式设为明晰。添加了字体之后,来看看效果,似乎不如想象中的好(图16)。我们可以再来装饰一下文字部分。在最顶层的文字层之下新建图层7,将前景色设为白色,用矩形工具在按纽的上中部选择一细长矩形。将文字层和这一层链接起来,居中对齐。载入图层1的选区,反选,删除图层7的多余部分,取消选择。将填充不透明度降低为10%,图层混合模式为颜色减淡。(图17)

       

    图16       图17


      8. 我们来看看这个按纽的应用。我选择把它放置在一个金属面板上。首先,新建一个图层组,将按纽相关图层都放到图层组中。在序列1下面新建图层8,用椭圆选框工具选择一个圆形,填充黑色后取消选择。将图层8和序列1链接,选择序列1,使用对齐选项,将按纽和黑色圆形居中对齐,取消链接。

      现在,我们关闭序列1的显示,按ShiftCtrl+Delete,用白色填充图层8的不透明区域。打开图层样式,依次添加下列样式:

      渐变叠加:混合模式为正常,不透明性为82%,渐变为从灰色RGB(174,174,174)到白色,线性,与图层对齐,角度为-48度,缩放为70%;

      内发光:混合模式为正常,不透明度为23%,颜色为黑色,发光源在边缘,方法为较柔软,大小为10像素,范围为55%;

      斜面和浮雕:内斜面、平滑,深度为51%,大小为8像素,阴影角度为130度,取消全局光,高度为15度,暗调的不透明度为0%,将等高线类型设为预设的半圆,范围为53%,消除锯齿;
      外发光:混合模式为正常,不透明度为15%,大小为5像素,范围为33%;

      描边:大小为1像素,描边位置在外部,混合模式为正常,不透明度为31%,描边颜色为黑色;

      内阴影:混合模式为正常,颜色为RGB(115,115,115),不透明度为8%,角度为135度,取消全局光,距离为4像素,大小为2像素,等高线类型为预设的锥形;

      最后是投影:不透明度为11%,角度为135度,距离为4像素,大小为1像素(图18)。

    图18

      显示序列1,这时,我们的图像应该像图19一样了。

    图19

      9. 我们希望做出按纽内陷的效果。在图层8上新建图层9,选择一个比按纽稍大的圆形选区,填充白色,同样使圆形和按纽居中对齐。对它添加图层样式:先是渐变叠加,混合模式为正常,不透明度为55%,反向默认渐变,角度为90度,缩放为90%;其次是描边,大小为1像素,位置在外部,不透明度为40%,描边颜色为RGB(210,210,210)。这样,这个按纽就被很合适的镶嵌在面板上了。(图20)

    图20


      第三款:渐变透明按钮

      我知道,这个题目实在有些不合格。哪种透明效果中没有用到渐变呢?渐变几乎已经成为制作透明按纽的必备过程,拿它做标题实在有些应付差事的感觉。但是,我实在懒得再费心思在我们的按纽起一个响亮又贴切的名字了。(这些天来一直和按纽打交道,请大家原谅我的倦怠心理吧!)不过,这个按纽倒真的漂亮的没话说,就拿它来作为小小的补偿吧!这次的这个按纽,完全是由图层样式来决定的。完成之后,大家的样式面板中又可以多一种漂亮的风格了。

      1. 这一次,我们来新建一个透明背景的文档,大小根据按纽的大小来定。新建图层2,用椭圆工具选择一个正圆形,复位色板,用背景色填充选区。不要取消选择,按Ctrl+X将选区图像复制到剪贴板上,删除图层2。

      在图层1中,用Ctrl+V将白色圆形粘贴到图层1中。这样,白色圆形就会处于画布的正中。(图21)

    图21

      2. 下面,我们就开始为按纽添加了图层样式了。

      首先,我们为按纽添加基础的颜色。选择渐变叠加样式,将混合模式设为正常,不透明性为100%,点击编辑渐变色,将渐变的左端设为RGB(166,202,240),右端设为RGB(24,48,153),渐变样式为线性,角度为123度,缩放为100%;(图22)

    图22

      其次,我们用斜面和浮雕样式为按纽添加光泽:样式为内斜面,方法为平滑,深度100%,方向为上,大小为18像素,软化为3像素,阴影的角度为120度,取消全局光,高度为73度,暗调模式为颜色减淡,高光和暗调的其他各项设定保持不变;(图23)

    图23


      下面,我们用内阴影模式加强按纽的暗调部分:将阴影颜色设为暗褐色RGB(71,41,2),混合模式为正常,不透明度为38%,角度为90度,距离为7像素,大小为5像素,品质不变;(图24)

    图24

      接下来的投影和外发光,都是进一步修饰按纽边缘的:先来选择投影样式,将投影颜色设为RGB(9,66,130),不透明度为35%,角度为90度,距离和扩展为0,大小为1像素;然后是外发光样式,混合模式为正常,不透明度为38%,颜色为RGB(0,70,114),发光方法为较柔软,大小为2像素;(图25)

    图25

      最后,如果你觉得按纽的颜色单薄,可以选择内发光样式,混合模式为正片叠底,不透明度为39%,设置渐变发光,依图26来设置渐变,渐变色从左到右依次为黑色、棕红色RGB(187,83,7)、黄色RGB(255,249,157),两个颜色中点的位置均为50%,发光方法为较柔软,光源居中,大小为250像素,范围为50%。你也可以自己设定内发光的颜色,这样,按纽的颜色就丰富起来。(图27)

    图26

    图27


      3. 接下来,我们为按纽加一个简单的边框。在图层1下面新建图层2,载入图层1的不透明选区,用扩展命令将选区扩大8像素,填充白色。(图28)

    图28

      我们依然用图层样式添加立体效果。先选择斜面和浮雕样式,结构为内斜面,方法为雕刻清晰,深度为290%,方向为上,大小为4像素,软化为9像素,阴影角度为90度,高度为45度,高光和暗调保持默认;再来添加描边样式,大小为1像素,位置在外部,混合模式正常,不透明度100%,描边颜色为RGB(170,170,170)。(图29)

    图29

      这样,这个按纽就完成了。想要改变颜色的话,可以重新设定各图层样式中有关颜色的设置。添加文字层后,也可以添加图层样式效果。如果想把这种样式应用到其他大小的按纽上时,应注意缩放效果,使样式符合图像。
    展开全文
  • Bootstrap下拉菜单(Dropdowns)和按钮

    千次阅读 2016-06-12 11:14:07
    :把按钮组组合在一起 . btn -group -lg , . btn -group -sm , . btn -group -xs :整个按钮组大小的调整 . btn -group -vertical :按钮垂直堆叠显示,而不是水平堆叠显示 //按钮组,三个按钮在一行水平...
  • vc++按钮应用大全

    千次阅读 2012-02-19 10:53:37
    本文需要的主要工具: VC6.0 MSDN MFC类库详解(网上可以下载,对于英文不过关的人很方便) 等等… 本例源代码:vc++按钮应用大全 ...(一)在视图创建按钮 示例程序:Button 1、普通按钮
  • 使用XAML创建按钮

    千次阅读 2010-04-11 13:27:00
    本演练的目的在于介绍如何创建要在 Windows Presentation Foundation (WPF) 应用程序使用的动画按钮。本演练使用样式和模板来创建自定义的按钮资源,通过该按钮资源可以重用代码并将按钮逻辑与按钮声明分开。本...
  • 2) 在系统,每个类具有一定的职责,职责指的是类所担任的任务,即类要完成什么样的功能,要承担什么样的义务。一个类可以有多种职责,设计得好的类一般只有一种职责,在定义类的时候,将类的职责分解成为类的属性...
  • 【COM编程】如何往IE工具条添加按钮

    千次阅读 2012-04-17 10:06:12
    读完本文,您也可以将自己应用程序的按钮添加到IE的工具条。 基本原理: 从IE5开始便允许我们向工具栏添加自己的按钮,其本质就是修改注册表,添加创建此按钮所需的信息。 实现步骤: 1.创建此按钮的GUID...
  • 基于VC++ PNG按钮的实现【1】

    千次阅读 2009-09-23 13:41:00
    基于VC++PNG按钮的实现 荀康生 【摘 要】: 本文先介绍VC++编程的优势,接着详细介绍GDI+,GDI+是Windows XP的一个子系统,它主要负责在显示屏幕和打印设备输出有关信息,它是一通过C++类实现的应用程序编程接口...
  • 本人第一次写博客,也是刚...首先引入bootstrap-table的各种需要使用的css,js文件 需要说明的是,引入文件的方式最好是按这个顺序进行导入,否则可能会导致一些不必要的问题有些东西看不明白可以参考下列图片的导
  • 函数功能:该函数创建、...消息框含有应用程序定义的消息和标题,加上预定义图标与Push(下按)按钮的任何组合。 函数原型:int MessageBox(HWND hWnd,LPCTSTR IpCaption,UINT UType); 参数: hWnd:标识将被创
  • 电脑休眠按钮灰色的解决方法

    千次阅读 2011-05-27 00:20:00
     如果显示下列XXXXXX阻止进入睡眠状态,那就可能是软件问题,你安装的某个软件导致无法睡眠,这样的话你就俩者取其一吧,或者是要睡眠而卸掉软件,或者要软件而不管睡眠。  接下来就是比较诡异的了,输入命令后...
  • 子窗口控件——按钮(BUTTONS)

    千次阅读 2010-08-10 11:38:00
    这个消息的lParam参数是一个指向DRAWITEMSTRUCT结构体(这个结构体还用在Ower_Draw list box和Menu)的指针,它的重要的个域有:hDC(Button DC),rcItem(button size),CtrlID和ItemState(状态标志,与ODS开头状态...
  • Java Swing弹出对话框的种方式

    万次阅读 多人点赞 2014-03-11 10:48:28
    Swing提供了JOptionPane类来实现类似Windows平台下的MessageBox的功能,同样在Java也有,利用 JOptionPane类的各个static方法来生成各种标准的对话框,实现显示出信息、提出问题、警告、用户输入参数等功能。...
  • Swing弹出对话框的种方式

    千次阅读 2013-03-19 14:53:55
    Swing提供了JOptionPane类来实现类似Windows平台下的MessageBox的功能,同样在Java也有,利用 JOptionPane类的各个static方法来生成各种标准的对话框,实现显示出信息、提出问题、警告、用户输入参数等功能。...
  • Xcode 8 阶调试技巧

    千次阅读 2017-05-25 18:31:29
    原文:Intermediate Debugging with Xcode 8 作者:George Andrews ...软件开发唯一不变的主题就是 bug。让我们面对现实吧,没有人能够一次就能做对。从输出错误到不正确的假设,软件开发就好比是
  • 有一个文本文件存储了个名称,写一个程序实现随机获取一个人的名字(抽奖)
  • 函数、符号及特殊字符 声调 语法 效果 语法 效果 语法 效果 \bar{x} \acute{\eta} \check{\alpha} \grave{\eta} \breve{a} \ddot{y} \dot{x} \hat{\alpha} \t...
  • Unity 5 的全局光照技术详解

    千次阅读 2016-05-24 18:22:24
    同一场景里:没有照明(左),只有直接光源(),和有间接光源的全局光照(右)的表现,注意颜色如何在不同的表面进行光的”反弹”,产生更真实的结果。在本文,我们会描述全局光照如何在Unity里运作,带领你通
  • delphi的单元

    千次阅读 2012-04-05 19:00:13
    使用单元可以把一个大型程序分成多个逻辑相关的模块,并用来创建在不同程序使用的程序库。 8.1 Program单元  Program单元就是Delphi的项目文件。  Program单元是一个特殊的单元,类似于C语言的M
  • 最常用的策略

    千次阅读 2012-12-05 23:26:02
     选择“开始”→“运行”,在弹出窗口输入“gpedit.msc”,回车后进入策略窗口。策略窗口的结构和资源管理器相似,左边是树型目录结构,由“计算机配置”、“用户配置”两大节点组成。这两个节点下分别
  • PuTTY 中文教程[转]

    千次阅读 2010-06-02 22:06:00
    我的这些文字是从这年来的 PuTTY 使用经验慢慢得来的,也不仅仅是介绍 PuTTY,还包括了一些相关的软件,比如:优秀的 FTP 工具 FileZilla、功能强大的 SFTP 客户端 WinSCP。 杂七杂八的乱说了一些,这里把...
  • 苹果使用过程的小技巧(合集)

    万次阅读 2009-07-15 11:11:00
    苹果使用过程的小技巧(合集)苹果机通电开机后,底层会进行一系列自检,若能通过,就回听到那有名的“咚。。。”, 然后由openfirm引导OS启动。如果自检遇到问题,则会发出1至5声不等的“哔”鸣声,声音的长短...
  • 在swing,基于业务的考量,会有对话框来限制用户的行为及对用户的动作进行提示. Swing提供了JOptionPane类来实现类似Windows平台下的MessageBox的功能,同样在Java也有,利用JOptionPane类的各个static方法来...
  • 计算机组装与维护试题及答案

    万次阅读 多人点赞 2014-12-06 15:59:39
    11 在计算机系统,CPU起着主要作用,而在主板系统,起重要作用的则是主板上的(芯片) 12 计算机电源一般分为:(AT)和 (ATX)。 13 世界上最大的两个芯片(cpu)生产厂商是( AMD)和( INTEL ...
  • 除了动画监听器,动画组合也是各类动画常见的用法,比如把...比如应用宝的垃圾清理动画,它的初始画面由三个深红色的月牙环绕组成,效果如下图所示:然后在垃圾清理的过程,这三个月牙一边转,填充色也一边渐变,月
  • 程序“vim”已包含在下列软件包: * vim * vim -gnome * vim -tiny * vim -gtk * vim -nox 请尝试:apt -get install < 选定的软件包 > 按照提示输入安装 apt- get install vim ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,935
精华内容 10,374
关键字:

下列几组按钮中