代码改变世界

随笔分类 - CSS

有用还免费的在线CSS菜单生成器集

2012-05-31 06:29 by coderidea, 6517 阅读, 收藏, 编辑
摘要: 有许多免费的CSS在线工具,为节省开发时间的工具.今天是我们展示的是免费的CSS菜单生成器.如果你想创建非常简单水平,垂直或甚至面包屑导航下拉菜单,你可以轻松地定制,得到代码,看看它是如何编码。IzzyMenu-Online Menu BuilderIzzyMenu是一个在线的菜单生成器,你可以免... 阅读全文

25+漂亮的创意导航设计

2012-02-01 10:05 by coderidea, 2481 阅读, 收藏, 编辑
摘要: 一个网站的导航重要性不容忽视的。这就是为什么设计人员花费额外的努力与方法,使导航菜单不仅很好看,也很容易使用。下面为您推荐导航设计Beautiful TypeDrupalcon DenverCXXVIUnfoldTinkering MonkeyShoutSellected StudioWebvisionary AwardsDavid DesandroTEDxPortlandBluecadet InteractiveanCnocLounge.Gene’s Sausage ShopLuke DornyVisual RepublicWigoliaFacio DesignCollaborative F 阅读全文

30 +创意的登录页面设计灵感

2011-12-30 08:09 by coderidea, 3062 阅读, 收藏, 编辑
摘要: 今天编译了登录页面列表,所有的人都有创造性地设计。1.WP login page2.Member Login Page3.Virtual Login Page4.Green Globe Ideas5.Yahoo! Login Page6.Login Window7.Mail Chimp8.Music Battle login9.How-r-u10.Mobile Me11.Mig3312.Skuba Login13.Wakoopa14.Acrobat15.tuts+16.Tick Spot17.Jatek18.20×20019.Joost20.Mouse To Minx21.Conve 阅读全文

CSS: 清除浮动-使用:Overflow

2011-10-10 13:41 by coderidea, 8649 阅读, 收藏, 编辑
摘要: 在使用Div+Css布局的时候我们所面临的共同问题之一是,包装容器不扩到子元素的浮动元素的高度。你也可以使用overflow属性来解决这个问题 ?这不是一个新的CSS技巧。今天,我想重新拾起这几个技巧的话题。演示地址:http://webdesignerwall.com/demo/clear-float/演示1: 下面的演示中显示的浮动子元素在父容器高度不自动适应的问题。为了解决这个问题,您可以简单地添加CSS属性overflow:auto (or overflow:hidden)的包装容器。这也许是最简单的方法来清除浮动。.container { overflow: auto;... 阅读全文

使用 CSS3 创建下拉菜单

2011-10-03 08:30 by coderidea, 1631 阅读, 收藏, 编辑
摘要: 当我在为WordPress编写Notepad 主题时,顺道学习了一些新的CSS3特性,现在此分享。查看演示可以看到一款类似 Mac 风格的多级下拉菜单,使用 border-radius,box-shadow 和 text-shadow 创建。在Firefox,Safari 和 Chrome 浏览器中能够完美地渲染。即便是诸如 IE7+ 等不兼容CSS3的浏览器,也可以正常呈现页面,只不过忽略了对圆角和阴影的渲染。演示地址:http://www.webdesignerwall.com/demo/css3-dropdown-menu预览下图展示了不兼容CSS3情况下的菜单样式。使用了一个渐变图.. 阅读全文

CSS3 基本要素概览

2011-10-02 08:24 by coderidea, 1871 阅读, 收藏, 编辑
摘要: 这篇文章将对CSS的几个新属性 (text-shadow,box-shadow,and border-radius) 做基本介绍。这些CSS3属性通常用来加强页面布局。RGBA前面的 3 个值是 RGB 颜色值,最后一个值是透明度的级别(0 = 透明,1 = 不透明)。RGBA 可以应用于与颜色的任何属性,如字体颜色,边框颜色,背景颜色,阴影颜色等。Text Shadow文字阴影的结构顺序为:x 轴偏移,y 轴偏移,模糊,颜色。设置一个负值的 x 轴偏移将阴影转移到左侧。设置一个负值的 y 轴偏移转将阴影转移到顶部。别忘了,你可以在阴影颜色中应用 RGBA 值。您也可以指定一个文本阴影列表.. 阅读全文

漂亮的 CSS3 搜索表单设计

2011-10-01 07:41 by coderidea, 4032 阅读, 收藏, 编辑
摘要: 最近一直把玩CSS3相关的东西,也发现了一些新的CSS技巧。你知道如何使用 border-radius 创建圆形图案、使用 box-shadow 创建内部阴影效果吗?带你仔细阅读这份使用CSS3的gradient、border-radius 及 box-shadow 属性所制作的漂亮的搜索表单案例。它能够在支持CSS3的浏览器中完美呈现,对于不支持CSS3的浏览器也可以良好降级,以保持可用性。查看演示DEMO:http://www.webdesignerwall.com/demo/css3-search-form.html圆形图形技巧你可以通过为 border-radius 属性指定一个... 阅读全文