存档:

文章标签 ‘CSS’
16

将 Chrome 新建标签页变为动态的 Windows 8 Metro UI

2011年10月29日

Chrome V15带来了全新的触控风格的新建标签页界面,但它似乎并不讨喜,好多人不喜欢它。这枚叫做Awesome New Tab Page的Chrome扩展可以解决你的烦恼,它会将你的新建标签页变成Windows 8的Metro UI风格。

别小看了这枚扩展,它可不是简单的把图标堆砌在Chrome新建标签页上,其实每个Metro UI的小格子都可以是一个可动态实时变化的widget,目前内置了一些widget,包括Google+、Facebook、Twitter、Google Calendar、Google Reader、YouTube、UrbanDictionary每日一词、数字时钟等等。

更厉害的是你可以通过简单的CSS3+HTML 5来编写自己的widget(其实也是以一个Chrome扩展的形式存在),装扮Chrome,打造完全个性化的Chrome新建标签页!就是说这个Chrome扩展里又可以读取并显示另外的Chrome扩展,进行嵌套显示,最终目的就是打造一个实用而丰富的Chrome新建标签页页面。

Via Chrome Story

0

可将 Flash 转为 HTML 5 的 Swiffy 逃离 Google Labs 死亡线

2011年9月9日

尽管还顶着beta的帽子,但Swiffy已经从随时可能葬身的Google Labs里胜利大逃亡到Double Click,还被赋予了时髦的g.co短地址:g.co/swiffy

另外Swiffy也做了一些改进,包括可通过SVG、CSS和JavaScript支持图形tweening、阴影、模糊和闪烁过滤器,可上传转换1MB以上的Flash文件,转换完毕后可得到一个QR码方便你直接在移动设备上预览动画的显示情况。如果你有需求,还可以自己托管Swiffy的运行时

Via Google Code Blog

9

不用装扩展也可自定义 Chrome 滚动条的样式

2011年8月31日

有不少可以帮你修改Chrome默认滚动条样式的扩展,Scroll Bar X就是其中的佼佼者,但是这个扩展在安装的时候提示说会存取所有的网站数据,这就让人感觉很难以接受了。其实咱们可以自己动手,丰衣足食。首先在自己的系统里找到如下这个.css文件:

Windows:
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Mac:
/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

Ubuntu:
~/.config/chromium/Default/User\ StyleSheets/Custom.css

用任何一款文字编辑器打开之,加入以下代码:

::-webkit-scrollbar-track-piece{
	background-color:#fff;
	-webkit-border-radius:0;
}
::-webkit-scrollbar{
	width:8px;
	height:8px;
}
::-webkit-scrollbar-thumb{
	height:50px;
	background-color:#999;
	-webkit-border-radius:4px;
	outline:2px solid #fff;
	outline-offset:-2px;
	border: 2px solid #fff;
}
::-webkit-scrollbar-thumb:hover{
	height:50px;
	background-color:#9f9f9f;
	-webkit-border-radius:4px;
}

保存之后重新打开你的Chrome浏览器,看到变化了吧?其实这些都是基础的CSS代码,所以你可以随心所欲的定制。比如你觉得滚动条太细了,即可编辑以下这段代码里的宽度:

::-webkit-scrollbar{
	width:16px;
}

另外,其实Chrome的Web Inspector也是可以通过修改CSS来定制页面风格的,其CSS文件地址:

Windows:
%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Mac:
/Users/YourUsername/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

Ubuntu:
~/.config/chromium/Default/User\ StyleSheets/Custom.css

Via GTricks

作者: 分类: Google技巧 标签: , ,
37

【快乐周末】挑战 Google 字谜游戏

2011年8月28日

Google 日本团队与「リアル脱出ゲーム」(真实逃生游戏)主办方 SCRAP 联合制作了这款 The Google Puzzle 字谜游戏。这次 SCRAP 的奇思妙想得以以最新的 HTML5 与 CSS 3 技术呈现。

Google logo 中的黄色字母“o”被关到旁边窗口中,这款游戏的目标就是救出小“o”。解决所有字谜后,“o”将重获自由,与谷家团聚。

虽然字谜难度逐步增加,但前沿技术带来的用户体验才是最值得享受的——包括“o”在窗口中挣扎、出题板、多窗口同步绘制、拖放等特效绝非言语可以形容,请读者务必亲身体验一下!

被难题卡住了也不用担心,游戏进度存储在 LocalStorage 中,下次只要使用同一台电脑就能继续解谜。

只有解开所有谜题的读者,才能享受到最新最酷炫技术带来的震撼!当然了,虽然网站支持所有主流浏览器,但 Chrome 无疑是观看压轴大戏的最佳选择。

via Google Japan Blog

《Google 字谜》游戏有英文日文两种版本。点击“Enter”会看到“o”被劫走并关到单独窗口中的情景,然后点击“Get O Back”(“把 O 救回来!”)开始游戏。游戏过程中可点击右上角抢走小“o”的指针获取提示。

为帮助读者欣赏全程美景,下面附上闯关攻略,选中黑色背景部分即可查看!

闯关攻略

第零题:如果访问不了,但网络支持 IPv6,请尝试这把钥匙:2404:6800:8005::79 www.thegooglepuzzle.com

第一题:“隐藏的单词是什么”,考察 Google Maps 卫星影像视图,答案:Global

第二题:“首字母组成什么国家名”,考察 Google Translate “侦测语言”翻译的使用,Ireland。(日文版答案:マケドニア

第三题:填词“I ___ you.”,考察 YouTube 视频评注的运用,Heart。(日文版答案:

第四题:“5×5 ↓”,考察 Chrome 窗口尺寸调节,“人类最好的朋友”是 dog。(日文版答案:アロハ

第五题:“谁的日程表”,Google Calendar 服务,“作有《Eine Kleine Nachtmusik》”,Google 可知是 Mozart。(日文版答案:石田三成

倒数第二关:将指针拖放到倒计时板;将“很有用的”六边形拖到与魔方重合的位置。

最后一关:“Bridge the O and O”,在俩 O 之间搭桥,需要观察网址中的“Google”,在 o 与 o 之间插入“bridge”再访问

3

移动版 Gmail 增加下拉刷新和更清晰的图标

2011年8月4日

今天移动版的Gmail继续为iOS系统做出优化。首先是iOS标准的下拉刷新功能(如上图),只要往下拉动页面,即可自动刷新,还伴有动画。这一效果除了可以在iOS上体验,还包括黑莓的Playbook,Android是无福消受了。

另外一个改进就是更高精度的图标,这样在iPhone 4的Retina显示屏上看起来就更细腻了,而不是以前的一团糊(如下图)。

最后是过渡动画效果。当你在邮件正文、邮件列表等视图之前切换的时候,会出现页面像左右过渡的动画效果,让你的浏览体验更顺畅平滑。

Google说他们使用了8种不同的CSS3过渡动画和Javascript来得到的这些效果。

Via Gmail Blog

7

将来的 Google+ 允许你分享自己的圈子

2011年7月2日

有人在Google+的sprite图标中发现了几个预示该服务新功能的图片,未来的Google+将会整合游戏、问答等功能,而一个叫共享圈子的功能也许会成为Google战胜Facebook的杀手锏(下图)。

Google+_shared_circles

目前Google+用圈子来帮助用户管理好友,用户可以把自己的好友放到不同的圈子里,共享圈子允许你将圈子分享给其他人。这个功能有点像Twitter的列表功能,用户将自己感兴趣的people分门别类创建为一个个列表,提供给其他用户订阅。

同时这也是一个不错的帮助新手迅速融入到Google+的工具。你的好友无需再自己维护所有的关系,只要订阅你分享的圈子即可。也许这能够改进Twitter列表功能长久以来的不足——你无法用其他用户创建的列表直接作为你自己的初始feed。

共享圈子应该可以在一定范围内允许用户一同维护,这样,不同用户间的社交圈会相互融合,用户间的关系可以更加快速的建立,社区整体的参与成本也会降低。

via:ReadWriteWeb

作者: 分类: 故事/传闻 标签: , , ,
24

弹吉他 doodle 太好玩了,Google 决定再放一天让大家玩个痛快

2011年6月10日

昨天纪念莱斯·保罗电吉他之父诞辰 96 周年的doodle实在太好玩了,于是Google决定把这个doodle再放一天,让莱斯·保罗再接着过一次生日。

不过现在Google.com.hk已经看不到这个doodle了,可能是总部临时的决定,所以香港这边已经由于到日子而下线了?大家必须到Google.com继续玩这个doodle。美国版其实还跟其它国家的有所不同,因为它不仅可以用键盘和鼠标演奏,还可以将演奏录下来(最多30秒),同时生成一个goo.gl的短网址,将该网址发送给别人,即可让他也听到你的作品,很赞的设计!

Google表示这个doodle动用了Javascript、HTML 5 Canvas、CSS、Flash(只是为了播放声音)和包括Google Font API, goo.glApp Engine在内的一些开发工具。

另外感谢读者 Twitter@chnp101 的提醒,有人抓包自建了一个吉他doodle,以后可以常年在这里玩(可惜是无法录音的非美国版本)。

Update:感谢读者 Twitter@orange0422 的提醒,有人把吉他的源代码提取出来了,传到自己的空间随时可以玩(这个也是无法录音的非美国版本)。

Update 2:补充两个老外的演奏视频,曲目分别是Hey Jude和Canon(欢迎大家自己录制视频投稿给我们):

阅读全文...

2

Google Maps 为标记点增加动画效果,不支持 IE6

2010年12月6日

在Maps API v2里,拖动标记点的时候会看到一个短暂的动画,就是标记点腾空而起。而在Maps API v3里,Google为标记点下落做了一个新的动画,你可以看到它一下一下跳跃着从空中落地──这个动画效果被称为DROP。而还有一个叫做BOUNCE的效果,就是选中多个标记点,然后这些标记点都会一直蹦啊蹦的,表示目前在选中状态。

这两个新的效果依赖于CSS和Javascript,这样在所有设备上都能获得平滑的效果,不过IE6杯具了,它不支持这个动画效果,当然操作是没问题,只不过看不到动画效果。

触发动画效果的文档在此

你可以在下面体验DROP和BOUNCE这两个标记点的动画效果:

阅读全文...

1

周四凌晨的 Google Search 发布会能有什么?

2010年9月8日

searchon

我们知道北京时间周四凌晨会有一场号称“绝对不能错过的”Google搜索新产品发布会,那么Google到底能带给我们什么绝对不能错过的惊喜?一般来说Google不会突然发布一个未经测试过的新产品(除了近两年的Google Buzz和Wave,他们的现状大家也知道了……),尤其是搜索类的产品,这个Google赖以生存的基础服务要推出什么改变的话,Google会提前找用户进行随机测试。最近被用户察觉到的搜索方面的测试包括:

1.AJAX搜索结果

使用AJAX驱动的Google搜索,当你在Google搜索的时候,尽管搜索结果页面变化了,但如果注意地址栏的话会发现URL是不变的,就是说网页并未刷新,而利用了AJAX技术在页面内自动刷新,这样可以大大提高用户看到搜索结果页面的速度。已经有人看到了这种AJAX搜索页面。

2.每页20或30条搜索结果

WebmasterWorldGoogle Web Search Help很多人都报告他们被强制限定每页显示30条搜索结果条目,昨天我们也报道了这一事件,这可能是为了让用户不必考虑到翻页问题。

3.搜索结果居中显示

谷奥读者 Garrid Lou 发现,尽管只是在CSS里加了一句“CSS:margin:0px auto”,但足以让整个Google搜索结果页面大变了。居中后的页面可以让超大屏幕用户使用起来感到舒服一些。

4.新的导航栏设计

这是谷奥读者 FanQiuwen 率先发现的,新导航条里的链接没有了下划线,且采用块状的设计,右侧的Settings文字被替换成了扳手图标,有趣的是其方向跟Chrome浏览器里的扳手是反的。

5.边输入文字边出现搜索结果

这是SEO顾问Rob Ousbey发现的,随着你在搜索框里输入文字,Google搜索结果页面将自动刷新给你当时输入文字的搜索条目和广告。效果很酷,但实用性和对用户电脑的性能要求就不禁要让人打个问号了。

发布会将在太平洋时间9月8日早上9:30,北京时间9月9日00:30开始,届时谷奥也将在 @guao 和网站同时为大家进行中文直播,欢迎大家到时关注。

Via Search Engine Roundtable

作者: 分类: 故事/传闻 标签: , ,
7

全能型 Chrome 扩展 Chrome Pig 可以帮你干各种杂活

2010年8月26日

通常来说Chrome的扩展都是术业有专攻的,不过韩国人做的Chrome Pig却好像是Chrome扩展里的瑞士军刀,它可以做到:

  • 截屏(整页截屏、可见部分网页截屏、选中网页区域截屏)
  • 检查Gmail邮箱更新
  • 用Google Docs在线打开其支持的文档格式
  • 编辑网页的CSS代码
  • 让你在那些禁用右键的网页使用右键
  • 搜索你正在浏览的网页
  • 用IE打开当前网页(Windows Only当然是)
  • 将复制到剪贴板里的图片设置为桌面壁纸
  • 快速在Google Dictionary里搜索
  • 自动填写表单
  • 网页翻译

Chrome Pig的这些功能可一一禁用,只保留你需要的,其配置文件可被导出,便于备份或转移到其它电脑上使用。

Via Download Squad