css给你灵感-排出杂志的效果

wumei2008-06-02 23:41:47

你知道吗?在网站设计中,通过改变文字字号,字体行间距,字母间距,外边距,浮动位置,颜色,透明度等等,就可以排出很漂亮的版面。这就是一个通过Css改变文字字号,字体行间距,字母间距,外边距,浮动位置,颜色,透明度等等来进行排版的一些例子。看起来就象杂志一样,Freeren希望它能给你带来一些灵感。在今后的网站设计中,更够活学活用。

杂志样式的秘密

20 +ways toBlogTO PLAY IN YOUR

The joy of CSS. Here we are using font sizes, margins, floats, and line height to position the text exactly where we want it. The browsers don't handle the code exactly the same but one style will suit some while the other style will suit others.

 

20 +waysBlogTO PLAY IN YOUR

The joy of CSS. Here we are using font sizes, margins, floats, and line height to position the text exactly where we want it. The browsers don't handle the code exactly the same but one style will suit some while the other style will suit others. The differences are nits. I think.

 

css透明文字效果

很多人都问过,如何在Ffirefox下做文字的透明效果,下面的例子会告诉你。

Text Overlay


图文混排

BeadCSS 通过设定文字的大小的浮动,很容易做首子下沉的效果.图片或span元素都可以通过Css设定左右浮动,来达到想要的图文混排效果。 What I noticed was the fine balance of the three simple classes to coordinate the image with the dropcap and the pullquote. ...you don't have to know CSS to use this one It was very nicely done. It looked something like this post. We are using shorthand CSS here. Using shorthand notation can help keep the size, or weight, of the page to a minimum if the style sheet is growing. For readability we tend to leave our CSS style long and the style sheet is growing too fast. Either way works. And, no you don't have to know CSS to use this one. It's served copy-and-paste style and with the external CSS.

杂志样式

...this will look like some of the pullquotes or subtitles we see in magazinelayout...

We are in a div here that has a width of 500 pixels. The pullquote to the right is 150 pixels wide. It helps to have enough text on the left to make the pullquote looked pulled. This will look like some pull quotes we see in magazine layout.

The spill is intentional but not necessary. Also, you can type in as much text as you want. The colors are easy to change. We used the colors #FF6600, gold, and orange.

透明翻转文字图像效果

你知道吗?ie和firefox的图片透明效果可以结合鼠标悬停这样用。

Opacity


图片上的文字

Forever
Has
Lasted
Too
Long

带图片的blockquote

这是一个带图片的blockquote,有一个开始的引号,你也可以再加一个结束的引号。当然根据你的创意,图片你可以任意换。

带左边线的Blockquote

这是左边有实线的blockquote。


带框线的Blockquote

这是带边线的blockquote。目的是使我们对这里的文字更关注。


文字引用样式

这是上面说的带图片blockquote, 我们添加了两个引号图片,把文字引用起来。

带背景的上下居中的文字块

这是一个带边线的完全居中的文本块。也是很多人问过的问题,如何让文本在一个带背景颜色的块里上下左右居中显示。不要想的那么复杂,看一看这个吧。背景颜色设定为#FF6600。文本块宽300px,文字边距是5px,文字颜色是黑色,边框颜色为黑色。


文字浮动

Mandarin

This sample begins with a floating Mandarin at 36points using float:left;. Here we are just continuing to type so that we can demonstrate how the text will wrap around this floating word. The float style is used often with both text and images.

上一篇:css给你灵感-带指示的导航菜单
下一篇:css给你灵感-排出漂亮的版面

有什么想说的吗?