如何让元素水平居中于动态宽度页面或容器中

现如今,自适应窗口的页面布局已经十分常见了,那么不同的显示器,不同的人群可能在查看页面时的显示效果必然不会相同.为了保证风格整体一致,那么在一个动态变化宽度的页面或容器中,元素居中将被常常用到.这里我并不是简简单单的给div加上一个text-align:center;属性后,其单独的块级子元素(例如img)自动居中,这种方法估计人人皆知.我将用另一个办法解决这个问题,例如子元素内比较复杂的导航条等等.这里我就以导航条的居中为例.

先来看看相关效果:

http://jsfiddle.net/kingterrors/AqTJV/embedded/result,html,css/

PS:由于近日(2014年6月)jsfiddle无法正常访问,可能受内网影响,现将之前所有jsfiddle预览去除,不过你仍然可将以上地址拷贝到浏览器预览,或选择尝试以下代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontally center elements of a dynamic width</title>
<style type="text/css">
ul {display:table;margin:10px auto;min-width:320px;}
li {float:left;list-style:none;margin-left:5px;padding:5px 0;}
li:first-child { margin-left:0;}
li a {background:#82B5DA;border:1px solid #599CCE;border-radius:3px;box-shadow:0 0 3px rgba(0,0,0,0.3);padding:5px;color:#333;text-decoration:none;text-shadow:1px 1px 0 rgba(255,255,255,0.3);}
li a:hover { background:#599CCE;}
</style>
</head>
<body>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Tutorials</a></li>
  <li><a href="#">About whidy</a></li>
</ul>
</body>
</html>

如果点了CSS查看,大家会发现这里用了display: table;这个估计很少会有人用,而且它有个很大的问题,就是这种居中的方式仅仅支持IE8+,那么IE7-不是悲剧了.因此,这里又提供一个更好的方案:

http://jsfiddle.net/kingterrors/AgxR5/embedded/result,html,css/

PS:由于近日(2014年6月)jsfiddle无法正常访问,可能受内网影响,现将之前所有jsfiddle预览去除,不过你仍然可将以上地址拷贝到浏览器预览,或选择尝试以下代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontally center elements of a dynamic width</title>
<style type="text/css">
ul {margin-top:10px;text-align:center;min-width:330px;}
li {display:inline-block;list-style:none;margin-left:5px;padding:5px 0;}
li:first-child {margin-left:0;}
li {background:#82B5DA;border:1px solid #599CCE;border-radius:3px;box-shadow:0 0 3px rgba(0,0,0,0.3);padding:5px;color:#333;}
li:hover {background:#599CCE;}
li a {color:#333;text-decoration:none;text-shadow:1px 1px 0 rgba(255,255,255,0.3);}
li {*display:inline;zoom:1;}
</style>
</head>
<body>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Tutorials</a></li>
  <li><a href="#">About whidy</a></li>
</ul>
</body>
</html>

这里有几点需要说明的是,块级元素前面已经提到是可以直接用text-align:center;居中的,而内联的也就是含有浮动的块级元素怎么处理呢,IE7对这个内联块级支持仍然不是很好.那么我们还要给li元素增加一个inline-block. zoom: 1;这样IE7就能很好的工作了.IE6好像还有点问题,那么就让IE 6 去shit吧.

总结:这是一个十分简单的关于动态宽度的页面或容器内元素自动居中的例子,我也参考过其他网友的方法,比如利用父子关系的定位,父级元素相对定位,子级元素按照百分比绝对定位的方法,不过个人感觉过于复杂,大部分情况下如果采用此文的方法也许会更好些.当然,面对不同的情景,大家也就根据自己需要进行选择了.

参考文章:http://css-plus.com/2012/05/how-to-horizontally-center-elements-of-a-dynamic-width/

如何为第一个或最后一个元素甚至是某类规律元素添加样式?

有时候,我们在写DIV+CSS的时候,在某一类相同的元素内想给其中的第一个元素或者最后一个元素,甚至是其中某些特定的有规则的排列的元素添加特别的CSS样式,我们该如何下手?下面我将给大家将就一些在CSS中十分实用的方法.

首先,你可以手动使用下面这段代码来应用修改某个元素的效果(当然这个办法很笨,是个人都知道):

http://jsfiddle.net/kingterrors/szCM9/embedded/result,html,css/

PS:由于近日(2014年6月)jsfiddle无法正常访问,可能受内网影响,现将之前所有jsfiddle预览去除,不过你仍然可将以上地址拷贝到浏览器预览,或选择尝试以下代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>how to remove margins for first last elements</title>
<style type="text/css">
ul {
    border: 1px solid #000;
    margin: 0;
    padding: 0;
    list-style: none;
    float:left;
}
ul li {
    background:#eee;
    color: #F00;
    margin: 50px;
}
.first {
    color: #000;
    margin-top: 0 !important;
    margin-left: 0 !important;
}
.last {
    color: #0f0;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
}
</style>
</head>
<body>
<ul>
  <li class="first">Hello, This is first element</li>
  <li>WOW, so many elements</li>
  <li>WOW, so many elements</li>
  <li>WOW, so many elements</li>
  <li class="last">Here it is, The last element</li>
</ul>
</body>
</html>

当然你也可以利用:first-child伪类和:last-child伪类(当然这种效果IE6完全不支持,IE7,IE8部分支持,其中IE7和IE8效果相同,不支持:last-child),比如:

http://jsfiddle.net/kingterrors/44GzJ/embedded/result,html,css/

PS:由于近日(2014年6月)jsfiddle无法正常访问,可能受内网影响,现将之前所有jsfiddle预览去除,不过你仍然可将以上地址拷贝到浏览器预览,或选择尝试以下代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>how to remove margins for first last elements</title>
<style type="text/css">
ul {
    border: 1px solid #000;
    margin: 0;
    padding: 0;
    list-style: none;
    float:left;
}
ul li {
    background:#eee;
    color: #F00;
    margin: 50px;
}
ul li:first-child {
    color: #000;
    margin-top: 0 !important;
    margin-left: 0 !important;
}
ul li:last-child {
    color: #0f0;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
}
</style>
</head>
<body>
<ul>
  <li>Hello, This is first element</li>
  <li>Whidy! so many elements</li>
  <li>Whidy! so many elements</li>
  <li>Whidy! so many elements</li>
  <li>Here it is, The last element</li>
</ul>
</body>
</html>
IE6,IE7,IE8都不能完好支持first-child和last-child伪类

其中还有种很另类的方式,给任意元素的规则性的添加伪类.比如你有5个li元素,你想让每两个li有区别,比如应用在有些特殊列表,你给每两行加上不同的背景色,我这里随便做了个效果给大家参考:

http://jsfiddle.net/kingterrors/76jxP/embedded/result,html,css/

PS:由于近日(2014年6月)jsfiddle无法正常访问,可能受内网影响,现将之前所有jsfiddle预览去除,不过你仍然可将以上地址拷贝到浏览器预览,或选择尝试以下代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>how to remove margins for first last elements</title>
<style type="text/css">
ul {
    border: 1px solid #000;
    margin: 0;
    padding: 0;
    list-style: none;
    float:left;
}
ul li {
    background:#eee;
    color: #F00;
    margin: 50px;
}
ul li:nth-child(2n) {
    color: #000;
    margin-top: 0 !important;
    margin-left: 0 !important;
}
</style>
</head>
<body>
<ul>
  <li>Hello, This is first element</li>
  <li>Whidy! so many elements</li>
  <li>Whidy! so many elements</li>
  <li>Whidy! so many elements</li>
  <li>Here it is, The last element</li>
</ul>
</body>
</html>

当然这个在IE8以下包括IE8的版本都是不被支持的 8O !

最后总结一下:first-child和:last-child伪类在IE6下是完全不支持的,而IE7和IE8仅支持:first-child,IE9是完全支持的.而:nth-child只有IE9支持,其他的比如Safari 3+, Firefox 3.5+ and Chrome 1+是完全支持以上效果的.

另外,你也可以用jq来控制某个任意元素的样式,之前我也提到过,有兴趣可以看看列表中最后一个元素样式清除修改方法 :roll:

如果有兴趣可以参考下原文,Remove Margins for First/Last Elements

有趣的透视屏幕图~

今天在看smashingMagazine的时候看到一篇十分有趣的文章Beautiful Examples of Transparent Screen Trick Photos,大致内容是这样的:

“我们找到了一些独特的而且有创意的东西来提升你的精神和挑战你的创造力,一旦将这些显眼的,有吸引力的幻想应用到电脑屏幕上,结果会变得十分有趣和幻觉一般…那么就拍一张”透明的”显示器图片吧.这个创意十分简单:你拍一张周围环境的图片,将它处理一下后设置为显示器桌面壁纸,当你的角度恰好的时候,你将发现神奇一般的效果,显示器好像是透视了一样,既然如此简单我们又能通过它做点什么神奇的事情呢?”

接下来我将展示几张它们做的十分神奇的图片

很显然其中有一张比较粗糙的图是我做的,HOHO,,,纯属娱乐了,,,觉得还是很有意思的,嗯嗯,有兴趣的朋友也可以试一下更加奇妙的效果,,,睡觉咯~

部分内容转载自:http://www.smashingmagazine.com/2010/08/07/beautiful-examples-of-transparent-screen-trick-photos/

WordPress 3.1 Beta 1 发布

前天,wordpress官方网站新闻更新了说wp 3.1beta1版本发布了,比较激动,去看了看,,,以下是我简单的原文翻译:

又到了一个开发周期的发布时刻了,此时所有基本功能已经完成,也消除了很多BUG.请喜欢追新的朋友尝试一下这个新版本吧!当然,现在这个版本还在开发阶段,我们不建议你将它作为目前正在使用的网站上,最好是仅仅用来测试,当然如果你发现了问题,及时通知我们,当然如果有可能的话,未尝不可帮我们解决这个问题,我们将很高兴!

如果一切都很顺利的话,wordpress 3.1将于年底发布,当然实际情况将取决于这个测试版的测试结果了,你帮我们查到的问题越快越多,我们也将更快的推出稳定的版本.

如果你想成为测试人员,你需要了解有关报告错误的知识(<<如何提交错误(原文:how to report bugs)>>)一下将介绍这次更新带来的变化:

  1. 发布文章的格式(详见:#14746)
  2. 主题搜索 (详见:#14936)
  3. 内部链接 (详见:#11420)
  4. 管理工具条(详见:#14772)
  5. 交互式管理(详见:#14579)
  6. 更新TinyMCE(即编辑器,详见:#12574)
  7. 多分类查询(详见:#12891)
  8. 自定义文章索引页(详见:#13818)
  9. CSS清除管理(详见:#14770)
  10. 用户管理(详见:#14696)
  11. 网络管理(详见:#14435)
  12. 更新密码重置方式(Password Reset Redux,详见:#5919)

当然,还有一些待验证的问题,还没有完全的完成,在这个测试版中没有提到.它会将在3.1普及使用之前解决的….(后面一大串,我就不详述了,大致的更新内容简单介绍到这里,也希望,WP能更好的完善部分功能,其实我还是比较期待内置编辑器的变化~)

时间不早了,睡觉了~

测试版本下载地址:Download WordPress 3.1 Beta 1

原文来自:http://wordpress.org/news/2010/11/wordpress-3-1-beta-1/

通过photoshop的阴影/高光工具调整相片曝光问题(下)

上次翻译了一半<<通过photoshop的阴影/高光工具调整相片曝光问题(上)>>.近期比较忙,今天抽点时间继续写完,以了心事

高光

调节阴影的部分和高光的作用相同,只不过是减少高光替换成了减少阴影,即使你觉得必须对高光部分进行修改,也不要紧:你所有做的事情对这个整体的对比都会产生很大的影响.其实我觉得我很少用到高光部分.来看看究竟什么是对你有效的.

调整

首先,我们来看这最后两个滑动块:颜色校正中间调对比度.实际上颜色校正滑块应该叫做饱和度滑块,当它单独滑动时来提高或降低饱和度的.在阴影高光调整之前,我用它来重新调整其饱和度让它看起来很合适.当然比起这里的饱和度调整,我更加偏向于使用调整图层来使修改变得更加简单.

中间调对比度滑块可以被用来提高或降低中间色调的对比度.完美而又简单:就是名副其实.然后我继续重复刚才的操作.这次将对比度还原,保持原始的效果.

在上面这张图中,通过阴影部分的调整,我又重新调整了颜色校正中间调对比度这样使树叶(也就是图上的圈圈部分)看起来更加真实.(这里并没有调整高光区域).在修正了阴影和高光后,我可以通过色相/饱和度或者是添加其他调整图层来实现不同的效果.

实例

OK,拖了若干天,总算完成了,心得也不想写了,不过学的知识是活用的,希望大家在了解了这个工具的同时,能够更好的运用到平时的设计中~

原文出处: Correcting Exposure with the Shadows & Highlights Tool

通过photoshop的阴影/高光工具调整相片曝光问题(上)

这篇文章通过photoshop的”阴影/高光”工具调整相片曝光来展现出相片的最美一面!

引言

复制图层

今天我们来共同了解下这个极其有用的,不可思议的工具:阴影/高光调整工具

当我们在拍照的时候,很难或者说几乎不可能在每次拍出来的照片中获得最佳的曝光度. 尤其是在户外,拍摄高反差的景物时,经常会把要拍的东西拍得曝光过度或者曝光不足.那么,阴影/高光调整工具将会充分发掘你所拍的照片的最大潜力.
那么接下来就让我们一起看看吧!

阴影/高光介绍

工具面板

首先,它并不算是一个调整图层一样的东西,所以你可以通过Ctrl+J(Win)或Command+J(Mac)先复制图层,这样你就可以直接修改这个图,当然感觉不好的话也可以还原,因为你有原始图层.

复制完图层后,接下来我们开始进入正题!

其次,Image>Adjustments>Shadows/Highlights…(图像>调整>阴影/高光 *因为我也是用的英文版PS CS5,不知道中文版是不是这样的,若不是请及时通知我~)打开阴影/高光,在这个面板的底部,找到Show More Options(查看更多选项)的选择框,并勾上,这样这些对于新手看似复杂的更多的调整项目就展现出来了,接下来我们一个个看,相信我,你将十分感谢居然有如此强大的控制功能.

最后这一步,你可做可不做,这不过是我的个人习惯罢了.这里的所有值都是photoshop默认的.当你在处理不同的图片时这些值对你来说毫无用处.当然我更加偏向于在处理图片之前将Shadows(阴影) 和 Highlights(高光)框框里面的Amount(数量)Tonal Width(色调宽度), 和 Radius(半径) 设置为0 (也就是全部调整至最左边). 把在Adjustments(调整)框内的Color Correction(颜色校正)Midtone Contrast(中间调对比度) 设置为0 (也就是滑动条的中央). 最后点击 Save as Defaults(存储为默认值)这个按钮. 那么以后每当你打开Shadows/Highlights(阴影/高光)时它永远都不会改变了.

数量,色调宽度和半径

你可以在阴影框和高光框内看到这三个滑动条,我们先来看看阴影框.

数量

数量

我是这样理解的,它会根据你的调整对图像进行较大的改变(当然即使不勾上Show More Options(查看更多选项)依然能够直接调),这里你可以分别将阴影部分调亮或者高亮部分调暗.这个好像可以两边滑动的小刷子,我想你也许用过,也知道它的作用,当然我重点要说的是下面两个滑块的作用.

色调宽度

色调宽度

这里我们来看看怎么样的一个范围可以影响图片.滑块调整到0%,意味着只有阴影部分最黑的地方会被改变,通过向右拖动滑块,慢慢的会影响到中间色调.

半径

半径

半径滑块决定了你想调整的区域在图片该处的其他多大的范围将会被渲染.当然你必须输入一个大于0的值,否则图片看起来灰又像被洗过的.这样你就会知道它对图片的影响效果有么多好了,在3-15px这个值之间,不多也不少,看起来图片变得清爽而干净.我十分喜欢这个感觉,在20px或更高的时候效果变得使图片的区别更加大,不是感到混到一起了就是感觉模糊了.那么设置的越高,就越混…(*其实我对原文理解不够,我尝试着在图片上修改,真的没感觉到什么变化,其实我也不是很会用这个囧rz)

笔记

其实你可以看出来,正如我所说,你无法将每个调整至完美,我经常使用的方法是将数量调到35%左右,色调宽度则必须提高(*作者没有说调至多少.那估计看效果行事了~)最后将半径调整至5px,最后根据当前状态进行细微调整.

哎呀,第一次翻译外国的文章才发现原来这么辛苦,自己经常看国外的好东西,感觉好像理解起来很简单,但是对不懂E问的童鞋来说,估计看了我的也算是很杯具.除此翻译多多包涵.(话说搞了三个小时,头都大了,除了翻译,版式总是调不好…休息下,今天到此为止吧~)

原文出处: Correcting Exposure with the Shadows & Highlights Tool