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

7顶
0踩

Web前端

原创新闻 有趣的WebKit css gradients

2009-06-01 10:30 by 副主编 zly06 评论(2) 有7051人浏览
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 渲染帧帧 (...

  • 三相LCL并网逆变器：高精度快速响应的有功无功解耦控制技术,三相LCL并网逆变器，有功无功解耦控制，控制精度高，响应速度快 ,三相LCL并网逆变器; 有功无功解耦控制; 高控制精度; 快速响应 ,三

    三相LCL并网逆变器：高精度快速响应的有功无功解耦控制技术,三相LCL并网逆变器，有功无功解耦控制，控制精度高，响应速度快。 ,三相LCL并网逆变器; 有功无功解耦控制; 高控制精度; 快速响应。,三相LCL逆变器高精度快速响应解耦控制

  • 一种基于Lifelogging视频的文本标签生成模型.pdf

    一种基于Lifelogging视频的文本标签生成模型.pdf

  • 基于黏菌优化算法（SMA）的改进与复现-融合EO算法更新策略的ESMA项目报告,黏菌优化算法（SMA）复现（融合EO算法改进更新策略）-ESMA 复现内容包括:改进算法实现、23个基准测

    基于黏菌优化算法（SMA）的改进与复现——融合EO算法更新策略的ESMA项目报告,黏菌优化算法（SMA）复现（融合EO算法改进更新策略）——ESMA。 复现内容包括:改进算法实现、23个基准测试函数、多次实验运行并计算均值标准差等统计量、与SMA对比等。 程序基本上每一步都有注释，非常易懂，代码质量极高，便于新手学习和理解。 ,SMA复现;EO算法改进;算法实现;基准测试函数;实验运行;统计量;SMA对比;程序注释;代码质量;学习理解。,标题：ESMA算法复现：黏菌优化与EO算法融合改进的实证研究

  • 宿舍管理系统 免费JAVA毕业设计 2024成品源码+论文+数据库+启动教程.zip

    免费JAVA毕业设计 2024成品源码+论文+数据库+启动教程 启动教程：https://www.bilibili.com/video/BV1SzbFe7EGZ 项目讲解视频：https://www.bilibili.com/video/BV1Tb421n72S 二次开发教程：https://www.bilibili.com/video/BV18i421i7Dx

  • 基于数据挖掘的教师教育质量评价指标体系的构建.pdf

    基于数据挖掘的教师教育质量评价指标体系的构建.pdf

  • 编译技术领域自动机实验-从正则表达式RE到NFA的转换方法及其应用

    内容概要：本实验报告旨在介绍将正则表达式（RE）转化为非确定有限自动机（NFA）的过程与技术细节。内容包括了理论背景的介绍，比如为什么需要这样的转换以及它背后的数学逻辑；详细解释如何通过编写特定功能的程序完成从正则表达式到NFA的状态迁移图构建；并且探讨了后续将这个NFA再转变成DFA（确定有限自动机）并进行优化的方法。最后，通过一组具体的例子来进行验证性的实践操作，并讨论在整个过程中遇到的各种挑战及解决方案。此外，报告还包含了对于不同设计方案的选择考量，以及对于所选技术和工具的应用评估。 适用人群：对于希望深入理解编译原理、特别是形式语言和自动机构造的学生或专业人士来说是一份宝贵的学习资料。 使用场景及目标：本篇文章主要用于教育指导，适用于大学本科计算机科学专业相关课程的教学辅助材料，帮助学生更好地理解复杂概念之间的联系。通过动手实践可以强化他们对该领域关键知识点的记忆和技术能力。 其他说明：文中提供的源代码实例和图表有助于使用者更直观地领会转换过程的具体步骤，同时也有助于培养解决问题的能力和思维方式。

  • nodejs010-1.2-29.el6.centos.alt.x86_64.rpm

    nodejs010-1.2-29.el6.centos.alt.x86_64.rpm

Global site tag (gtag.js) - Google Analytics