资讯频道 → Web前端
阅读更多

7顶
0踩

Web前端

原创新闻 有趣的WebKit css gradients

2009-06-01 10:30 by 副主编 zly06 评论(2) 有6986人浏览
webkit CSS

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Chris Williams像我们推荐了CSS gradients。即使没有图片，CSS gradients也能创造出美观的效果。

他是如何使用CSS的？

.albumInfo {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#626262), to(#000000), color-stop(.5, #202020), color-stop(.5, #000000));
        height: 8em;
        padding: 1em;
        border-top: 1px solid #858585;
        border-bottom: 1px solid #505050;
}

.albumInfo h1 {
        font-weight: bold;
        text-shadow: 0px -1px 1px black;
        font-size: 1.2em;
}
 
ul.tracks {
        background: -webkit-gradient(radial, 50% -70, 0, 50% 0, 200, from(#595959), to(#0d0d0d)) #0d0d0d;
        width: 25.7em;
}
 
ul.tracks li.odd {
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.05)), to(rgba(255,255,255,.05)));
}



效果：



点击查看示例：

Example 1. “Killer Queen”

Example 2.  CSS日历

点击查看详情：http://www.martinilab.com/blog/104/fun-with-webkit-css-gradients/

 

  • 大小: 108.3 KB
来自: ajaxian
7
顶
0
踩
评论 共 2 条 请登录后发表评论
2 楼 whaosoft 2009-06-02 09:43
源码呢?没找到
1 楼 inosin 2009-06-01 12:37
私有属性，有什么用呢？

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • GWT开发效率困境与解决之道

    GWT开发效率困境与解决之道GWT初学的人员都觉得GWT学习曲线高，开发慢，你可能一气之下把这个IDE给扔掉冲动。根据以往的GWT培训来看，GWT的开发效率主要集中在以下几点：编译时间过长 – 每修改了一次，我就编译一...

  • web标准，表现与数据分离，web语义化，页面布局和架构

    页面布局和架构 布局 架构 开发人员会有一些困惑： 开发经理也会有一些困惑： 用户会对这些事情感到烦恼： 架构的本质是什么？其实也是一种管理。 常见的前端产品形态包括： END web标准 Web...

  • 这几个CSS概念你了解吗？

    ❝前沿: 聊起css，印象最深刻的就是刚毕业那会刚开始从事前端开发岗位工作的时候，身为一名 cut picture boy （切图仔），在页面布局及还原设计图中广泛使用css来开发页面，我...

  • 升级 Vue3 大幅提升开发运行效率

    考虑到还有少量业务复杂的页面，在微前端模式下，子项目的各种数据多经过一层 qiankun 的 proxy 代理，性能有损耗，影响了页面更新，于是一次性将剩余的页面全部迁移到 Vue3 项目中。 实践证明，除非比较复杂的项目...

  • GWT简介

    1.1 GWT的定义 GWT是开源的， GWT是Google Web Toolkit的简称。GWT是一个以Java语言为工具，以类似Swing的方式编写UI组件，之后通过GWTCompiler编译，他是一个开发Ajax应用的框架，它使程序员用Java同时开发客户端...

  • GWT入门学习与理解

    最近在一家公司实习，公司使用的是GWT技术进行开发。作为一个新菜鸟对这方面完全不熟。因此笔者接下来会进入到GWT得初步学习中，整理一些知识点，写入博客，希望大家一起交流。 GWT技术简介 来源：网络、《GWT...

  • 用GWT实现基于Ajax的Web开发

    简介： Google Web Toolkit (GWT) 是一个可以使用 Java 代码开发具有 Ajax 功能的应用框架。使用 GWT，开发人员可以更加高效地开发和部署主流 Web 应用程序。GWT Designer 是 Google 新推出的可视化开发插件，大大...

  • Angular JS的Java起源：Angular vs JSF vs GWT

    超级英雄的Javascript框架需要一个良好的起源故事。 让我们尝试将其修补在一起，同时探讨在企业Java世界中使用Angular JS以及Angular在MVC上的应用。... Angular vs GWT Angular vs jQuery MVC（或MVW...

  • 《GWT揭秘》

    《GWT揭秘》 书名：GWT揭秘作者：徐 彬ISBN：9787111294016丛书名：揭秘系列丛书出版社：机械工业出版社出版日期：2010 年1月 开本：16页码：320版次：1-1定价：49元豆瓣网讨论地址：...

  • GWT UiBinder部分官方介绍的翻译

    页面来源：http://code.google.com/intl/zh-CN/webtoolkit/doc/latest/DevGuideUiBinder.html 随便硬译的，没有检查，没有修改。。。刚刚搜索了一下，发现网上已经有翻译好的了。。。Orz。。。->...

  • 使用 GWT 实现基于 Ajax 的 Web 开发

    使用 GWT Designer，开发人员只需通过简单拖拽可视化组件，即可完成组件的添加而无须繁琐的重复编码，同时使用 GWT Designer 也可以最大限度地完成布局管理等界面设计的工作。 回页首 基于 Eclipse 的 GWT ...

  • 浅谈使用GWT + GXT开发项目的感受

    GWT+GXT开发大型项目感受 一.项目环境： 前端： GWT2.4 + GXT2.2.5 后端： Rest , Mule ESB 3.0, Mybatis , Spring 3.0 二、使用工具：  1.设计思想：  以面向服务的设计模式;  前端：  1.公司有...

  • 【React】1077- React Fiber架构浅析

    1.浏览器渲染为了更好的理解 React Fiber, 我们先简单了解下渲染器进程的内部工作原理。参考资料:从内部了解现代浏览器(3)[1]渲染树构建、布局及绘制[2]1.1 渲染帧帧 (...

  • tensorflow-2.9.2-cp39-cp39-win-amd64.whl

    python爬虫案例

  • 2023年下半年计算机等级考试-公共基础-WPS-PS.zip

    2023年下半年计算机等级一级考试Photoshop考点梳理 2023年下半年计算机等级一级考试WPS office考点汇总 2023年下半年计算机二级考试公共基础知识科目考点汇总 根据实际考试情况进行的总结。

  • Introduction to Data Science Data With R 英文

    Introduction to Data Science Data Analysis and Prediction Algorithms with R 英文原版，完整带目录，非常好的数据分析资料，有基于R的完整数据分析过程

  • 数电实验三：74LS151逻辑功能测试、74LS153逻辑功能测试、74LS153全加器、三输入多数表决电路

    数电实验三：74LS151逻辑功能测试、74LS153逻辑功能测试、74LS153全加器、三输入多数表决电路

  • 农业机械维修记录（表式）.doc

    农业机械维修记录（表式）.doc

  • go语言优质学习资源和工具与案列应用场景.txt

    go语言优质学习资源和工具与案列应用场景.txt

  • 网络攻防课程seed-labs实验-Spectre_Attack.zip

    网络攻防课程seed-labs实验-Spectre_Attack.zip

Global site tag (gtag.js) - Google Analytics