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

7顶
0踩

Web前端

原创新闻 有趣的WebKit css gradients

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

  • 原生js图片圆形排列按钮控制3D旋转切换插件.zip

    原生js图片圆形排列按钮控制3D旋转切换插件.zip

  • 类似c++数组的python包

    内含二维数组与三维数组,分别为list2nd,list3rd

  • 原生js颜色随机生成9x9乘法表代码.zip

    原生js颜色随机生成9x9乘法表代码.zip

  • 原生js实现图片叠加滚动切换代码.zip

    原生js实现图片叠加滚动切换代码.zip

  • 【Academic tailor】学术小裁缝必备知识点：全局注意力机制（GAM）TensorFlow

    【Academic tailor】学术小裁缝必备知识点：全局注意力机制（GAM） 注意力机制是深度学习中的重要技术，尤其在序列到序列（sequence-to-sequence）任务中广泛应用，例如机器翻译、文本摘要和问答系统等。这一机制由 Bahdanau 等人在其论文《Neural Machine Translation by Jointly Learning to Align and Translate》中首次提出。以下将详细介绍这一机制的背景、核心原理及相关公式。 全局注意力机制（Global Attention Mechanism, GAM）由 《Global Attention Mechanism: Retain Information to Enhance Channel-Spatial Interactions》提出，是一篇针对计算机视觉任务提出的方法。这篇文章聚焦于增强深度神经网络中通道和空间维度之间的交互，以提高分类任务的性能。与最早由 Bahdanau 等人提出的用于序列到序列任务的注意力机制 不同，这篇文章的重点是针对图像分类任务，并未专注于序

  • 基于SpringBoot的“篮球论坛系统”的设计与实现（源码+数据库+文档+PPT).zip

    本项目在开发和设计过程中涉及到原理和技术有: B/S、java技术和MySQL数据库等；此文将按以下章节进行开发设计； 第一章绪论；剖析项目背景,说明研究的内容。 第二章开发技术；系统主要使用了java技术， b/s模式和myspl数据库，并对此做了介绍。 第三章系统分析；包罗了系统总体结构、对系统的性能、功能、流程图进行了分析。 第四章系统设计；对软件功能模块和数据库进行详细设计。 第五章系统总体设计；对系统管理员和用户的功能进行描述， 第六章对系统进行测试， 第七章总结心得；在论文最后结束章节总结了开发这个系统和撰写论文时候自己的总结、感想,包括致谢。

  • 毕业设计&课设_iOS 商城项目，含购物与商家管理功能，用 Sqlite，有账号示例，适合 iOS 开发练习.zip

    1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。

Global site tag (gtag.js) - Google Analytics