请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物,来参加蓝色理想积分兑换吧! 联系招聘客服 蓝色理想帮你找工作! 万元奖励等你拿——点点网模板设计大赛

查看: 3450|回复: 34

[其它] 本人css3写的几面国旗 [复制链接]

sfzheng2007 楼主
帖子
158
体力
543
威望
2
居住地
广东省 广州市
发表于 2010-5-24 22:26:23 |显示全部楼层

 提示:您可以先修改部分代码再运行


兼容最新的 FF Opera Safari Chrome 。IE9没装 没得看。IE9以下不兼容 呵呵

要点:
1、定位
四面国旗都用到了定位
2、层次
在韩国国旗四角用了层次 z-index 控制显示
3、旋转
四面国旗都用到旋转,控制五星的角度跟刚果国旗红色部分旋转,通过溢出隐藏的方法,把多余的内容隐藏
4、半圆
利用border-radius圆角,如上半圆,只设置上面两个圆角,另外两个设为零,高度设为半径,宽度为直径,就可以得到半圆,可以在韩国国旗的样式了解
5、其他
比如box-shadow、skew等css3才有的属性

[ 本帖最后由 sfzheng2007 于 2010-5-25 01:22 编辑 ]
已有 2 人评分威望 收起 理由
yoom + 1 做的很好!
goos + 1 鼓励探索与尝试 +1

总评分: 威望 + 2   查看全部评分

No cross, no crown
西部数码顶级域名注册商39元抢注!
iifksp 

葵中剑

金牌会员 手机认证 

帖子
2633
体力
3904
威望
26
发表于 2010-5-24 23:02:06 |显示全部楼层
和机器猫的多圆角相比,这个用了很多旋转。
不错啊,五角星转的挺准的~
租服务器,上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

帖子
126
体力
422
威望
1
居住地
广东省 深圳市
发表于 2010-5-24 23:37:41 |显示全部楼层
楼主, 有耐心
SSD

使用道具 举报

14px 

秋末

荣誉管理

帖子
1616
体力
4211
威望
52
居住地
湖南省 长沙市
发表于 2010-5-25 00:32:46 |显示全部楼层
不失为练习和学习的一种好办法...

使用道具 举报

sfzheng2007 楼主
帖子
158
体力
543
威望
2
居住地
广东省 广州市
发表于 2010-5-25 01:02:52 |显示全部楼层
谢谢各位!我也是最近看到机器猫产生了对css3兴趣,所以学习了皮毛!
No cross, no crown

使用道具 举报

六月阳光

银牌会员

帖子
869
体力
2199
威望
2
发表于 2010-5-25 09:22:01 |显示全部楼层
很厉害,学习下~!

使用道具 举报

帖子
268
体力
780
威望
0
发表于 2010-5-25 10:12:01 |显示全部楼层
相当不错啊!支持了!
个人感觉就是代码太过繁琐了,重复那些,很累……

使用道具 举报

温和

银牌会员

帖子
420
体力
1108
威望
1
发表于 2010-5-25 10:55:56 |显示全部楼层
太强大了!佩服!

使用道具 举报

互动的动

中级会员

帖子
135
体力
337
威望
0
发表于 2010-5-25 13:07:55 |显示全部楼层
无条件帮顶

使用道具 举报

CSS魔术师

荣誉管理 手机认证 

帖子
2452
体力
5010
威望
4
发表于 2010-5-25 13:24:22 |显示全部楼层
不错的创意,练习 CSS3 的好方法。
■ 提问请贴图贴代码。  ● 我的微博  ● 我的博客 (已恢复)

使用道具 举报

帖子
68
体力
212
威望
0
居住地
广东省 惠州市
发表于 2010-5-25 16:25:46 |显示全部楼层
不错!

使用道具 举报

帖子
307
体力
836
威望
0
发表于 2010-5-27 17:05:32 |显示全部楼层
CSS3好强大!

使用道具 举报

蓝蓝的天空

版主 手机认证 

帖子
3439
体力
2305
威望
1
居住地
湖南省 长沙市
发表于 2010-5-27 17:11:33 |显示全部楼层
这个很强大啊,我对CSS3的认识还很模糊,只是听说可以运用多重背景,圆角和分列显示等功能。
集中精力,六年专家,十一年权威,十六年世界第二。

使用道具 举报

sfzheng2007 楼主
帖子
158
体力
543
威望
2
居住地
广东省 广州市
发表于 2010-5-27 17:20:43 |显示全部楼层

回复 13# ling3492 的帖子

我也感觉css3很强大!可以在专门css3网站看看,学习学习。
No cross, no crown

使用道具 举报

帖子
39
体力
173
威望
0
居住地
安徽省 黄山市
发表于 2010-5-27 19:54:20 |显示全部楼层
哇塞,CSS3 实在太强大了,太有诱惑了  

使用道具 举报

王玮

银牌会员 手机认证 

帖子
330
体力
1945
威望
1
发表于 2010-5-28 09:26:48 |显示全部楼层
哇塞,CSS3 实在太强大了

使用道具 举报

雨中无伞

高级会员 手机认证 

帖子
229
体力
703
威望
0
发表于 2010-5-28 09:33:34 |显示全部楼层
很帅。期待IE6的灭亡
javascript小白

使用道具 举报

lhnlj2 

水舞流漠

银牌会员

帖子
441
体力
1393
威望
0
居住地
江苏省 徐州市
发表于 2010-5-28 09:38:54 |显示全部楼层
堪称精品
创意设计 www.xuzhouc.com

使用道具 举报

帖子
135
体力
510
威望
0
发表于 2010-5-28 10:11:34 |显示全部楼层
挺好不过这些东西应该更适合网页游戏。

使用道具 举报

sww518 
帖子
104
体力
331
威望
0
发表于 2010-6-10 17:57:51 |显示全部楼层
css5绝对是革命~

使用道具 举报

sfzheng2007 楼主
帖子
158
体力
543
威望
2
居住地
广东省 广州市
发表于 2010-6-10 18:01:47 |显示全部楼层

回复 20# sww518 的帖子

html5 我就听说过 呵呵
应该是css3吧
No cross, no crown

使用道具 举报

WKXSAC 
帖子
17
体力
52
威望
0
发表于 2010-6-11 13:58:09 |显示全部楼层
IE 显示下悲剧了。。。。。。。。

[ 本帖最后由 WKXSAC 于 2010-6-11 13:59 编辑 ]

使用道具 举报

帖子
328
体力
3490
威望
0
居住地
河南省 郑州市
发表于 2010-6-11 16:12:37 |显示全部楼层
值得学习~~~~~~~~~~
美之源-韩国安姬秀、法国莱斯贝儿化妆品专业店http://92mzy.taobao.com

使用道具 举报

帖子
17
体力
1384
威望
0
居住地
河南省 郑州市
发表于 2010-6-11 16:28:27 |显示全部楼层
欣赏!!!

使用道具 举报

聪明的一休

中级会员 手机认证 

帖子
140
体力
469
威望
0
居住地
浙江省 台州市
发表于 2010-6-12 15:35:39 |显示全部楼层
可惜不实用,IE不能看,中国国旗还好~~~
我想我还能再抢救一下

使用道具 举报

帖子
142
体力
574
威望
0
居住地
湖北省 襄樊市
发表于 2010-6-12 16:07:36 |显示全部楼层
CSS3???看来要更努力的学习了呀

使用道具 举报

wtwcom 
帖子
138
体力
1605
威望
0
居住地
广西壮族自治区 南宁市
发表于 2010-6-18 10:55:05 |显示全部楼层
等待中,IE8以下的版本退出江湖之日才是css3翻身之时

使用道具 举报

帖子
172
体力
702
威望
0
居住地
辽宁省 沈阳市
发表于 2010-6-18 14:23:34 |显示全部楼层
强大。。中国国旗最好。呵呵

使用道具 举报

coac 
帖子
246
体力
394
威望
0
居住地
广东省 深圳市
发表于 2010-6-19 09:52:38 |显示全部楼层
CSS3强大啊

使用道具 举报

小P孩

高级会员

帖子
700
体力
957
威望
0
居住地
河北省 石家庄市
发表于 2010-6-24 10:43:30 |显示全部楼层
楼主的五角星直接用★啊,也可以用div弄的
http://bbs.blueidea.com/viewthread.php?tid=2963327&highlight=

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-9 15:48 , Processed in 0.153734 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部