50个强大璀璨的CSS3/JS技术运用实例

50例强大璀璨的CSS3/JS 技术运用。CSS3来了。虽然支持的浏览器很有限,但许多设计师都在实验它的强大功能。本文可以让你了解css3的新技术和功能。

Visual Effects and Layout Techniques With CSS3

CSS3 Analogue Clock
Analogue clock created using webkit transition and transform CSS. JavaScript is only used to pull in the current time.

Use CSS3 to Create a Dynamic Stack of Index Cards
We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).

dynamic PNG shadow position & opacity
When the light is turned on, the position and opacity of the logo shadow will change dynamically, depending on the position and distance of the light bulb. Don’t forget to drag the logo and/or the light bulb around!

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
So, what about a vertical sliding panel that would act as some sort of drawer instead of the usual top horizontal sliding panel that pushes everything else down when it opens? While thinking of alternatives to the usual horizontal panels, I thought it would be nice to create something that works in a similar way, but that is a bit more flexible.

Awesome Overlays with CSS3
The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile
What if we could replace almost all of the graphical UI elements within Fennec with CSS created equivalents? As a designer, am I comfortable bypassing Photoshop and letting CSS run the pixel rodeo? After a few initial tests, the answer to both of those questions was a very solid “yes”. A solid “friggin’ right” if in Cape Breton.

How To Create Depth And Nice 3D Ribbons Only Using CSS3
We will use box-shadow to create a drop-shadow with RGBa, a color model that allows an optimized contrast with any kind of backgrounds. RGBa is the standard RGB model (0,0,0 – 255,255,255) and it adds the last option (a) for the opacity. We can use this model also for other properties and it works with the new browser.

Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3
This custom dialog box is one of the scripts in that website and I think it will be quite useful for all of us. The reason I have this custom dialog box is to overcome the inconsistencies across different browsers. And, of course, it uses CSS3 to style everything.

Drop-In Modals with CSS3
For those using WebKit based browsers (Safari and Chrome), CSS3 effects and properties can help you create fast, simple modals by using transforms, animation, and some subtle design cues.

Newspaper Layouts with Columns and Image Masks
The faux-newspaper look goes in and out of style online pretty frequently, but these tricks can be used for quite a few cool applications. What we’ll talk about here is using -webkit-mask-image and -webkit-column-count.

时间: 2016-03-27

50个强大璀璨的CSS3/JS技术运用实例的相关文章

Css3+Js 漂亮时钟

原文 http://blog.csdn.net/guoxuepeng123/article/details/8842794 Css3+Js 漂亮时钟 浏览器支持 IE9/GoogleChrome/FireFox/Safari 效果图: 代码下载:http://download.csdn.net/detail/guoxuepeng123/5293759 HTML代码 [html] view plaincopyprint? <!DOCTYPE html> <html> <head

html5+css3网页制作实例:制作comingsoon页面

文章简介:这个页面用到了html5的标签元素和css3的线性渐变.圆角.阴影效果,以及当前流行的parallax视差特效和一些其他结合jquery的动画,在chrome,Safari,opera,firefox下都可以完美显示,如果你还使用IE浏览器,我想效果支持的并不是那么完美,不过尽管这样,我还是对IE6,7,8 这个页面用到了html5的标签元素和css3的线性渐变.圆角.阴影效果,以及当前流行的parallax视差特效和一些其他结合jquery的动画,在chrome,Safari,ope

CSS3网页布局实例代码:始终在网页底部代码2则

文章简介:CSS3网页布局实例代码:始终在网页底部代码2则 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>始终在底部(1)</title><style>body{margin:0} html, body{height:100%}

css3制作网页实例:点击切换不同的CSS列表

文章简介:css3制作网页实例:点击切换不同的CSS列表. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><met

JS练习实例:javascript实现全选/全不选/反选

文章简介:JS练习实例:javascript实现全选/全不选/反选. javascript实现全选/全不选/反选 功能 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtm

node.js入门实例helloworld详解_node.js

本文实例讲述了node.js入门实例helloworld.分享给大家供大家参考,具体如下: 将下面的代码保存为:server.js存到E盘下面的node目录中. var http = require('http'); function myNode(request, response){ response.writeHead(200, {'Content-type':'text/plain'}); response.write('hello world'); //hello world resp

JS hashMap实例详解_javascript技巧

Hashmap是一种非常常用的.应用广泛的数据类型.本文通过实例代码给大家介绍js hashMap的相关知识,具体代码内容如下所示: /** * MAP对象,实现MAP功能 * * 接口: * size() 获取MAP元素个数 * isEmpty() 判断MAP是否为空 * clear() 删除MAP所有元素 * put(key, value) 向MAP中增加元素(key, value) * remove(key) 删除指定KEY的元素,成功返回True,失败返回False * get(key)

js getElementById 实例教程

js getElementById 实例教程 在做网站网页是getElementById会经常用一,它可以获取一个指定id窗口的内容或改变容器的内容下面我们来看看关于getElementById实例. <div id="111cn"></div> <a href="###">增加 or 删除</a> <script>  var aa =getElementById('111cn');//这是了得对象啊  a

简单的JS时钟实例讲解_javascript技巧

本文实例介绍了JS时钟实现代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="gb2312"> <title>Document</title> <script type="text/javascript"> function startTime