GIF animation

最近又搞一些有的沒的東西

搞到都沒去玩

CSS是我本行裡的東西我當然沒問題

但PS,AI那類東西,始終只是玩玩

突然想搞個animated gif

因為這東西,輕巧又實際

不用像Flash那麼複雜

效果又ok

尤其在應付痴痴呆呆

只想有東西在網頁動的人最見效果

所以決定去搞一搞省下自己應付痴呆人的時間

看了一堆教學

還找了甚麼gif construction professional的工具

結果原來Adobe的image ready就有在做了 囧

PS是處理圖片,AI是處理vector

原來image ready可以用來做gif,切開圖片,生成html

不過最重要還是gif和切開圖片再用來layout吧

這是我看教學跟著做的作品

又簡單又快又爽,真是爽死了

最後多謝這位曾老師

首先import folder as frame或者用你的方法加入到frame

然後save optimized as… 就搞定了

要記得設定frame停留的時間值

CSS Units

Measurements

Unit	Description
%	percentage
in	inch
cm	centimeter
mm	millimeter
em	1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then ‘2em’ is 24 pt. The ‘em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
ex	one ex is the x-height of a font (x-height is usually about half the font-size)
pt	point (1 pt is the same as 1/72 inch)
pc	pica (1 pc is the same as 12 points)
px	pixels (a dot on the computer screen)

Colors

Unit	Description
color_name	A color name (e.g. red)
rgb(x,x,x)	An RGB value (e.g. rgb(255,0,0))
rgb(x%, x%, x%)	An RGB percentage value (e.g. rgb(100%,0%,0%))
#rrggbb	A HEX number (e.g. #ff0000)

use absolure size in,cm,mm only for printing.

use em,ex for block elements which contain text.

use px for layout.

IE-Mac hack and IE problem

IE-Mac is even worse on CSS than IE.

Thanks to our buddy Bill again.

straight to the solution:
/* Hide from IE-Mac \*/
#header {margin-bottom: 3em;}
#footer {margin-top: 1.5em;}
/* End hide */

Do whatever in these to take precedence in other browser
after you done doing layout on IE-Mac.
That is you need to layout at least three times…
IE-Mac>IE>others…

Text spilling out of its container in non-IE browsers

Internet Explorer, unlike other browsers, will expand borders and background colours so text doesn’t spill out of its containing element. Take a look at the following example:

If you’re viewing this in Internet Explorer, the box should look fine. In all other browsers the text is spilling out of the right-hand side of the box. The box has been assigned class="box" and has the following CSS commands assigned to it:

.box {
width: 40px;
border: 2px solid #781351;
padding: 3px;
background: #d7b9c9;
white-space: nowrap
}

Non-IE browsers will adhere to the width: 40px CSS command, which is why the box doesn’t expand in these browsers. IE instead interprets width as min-width, and therefore expands the box to fit the text (the same applies with height and min-height).

To ensure the text doesn’t spill out of the box in all browsers, you’ll need to use the following CSS rule, in addition to the first one:

html>body .box
{
width: auto;
min-width: 40px
}

IE will ignore this CSS command, as the command has html>body at the front of it (see the article, CSS hacks & browser detection⁸ for more on this). As such, this CSS command is only for non-IE browsers. The first CSS rule, width: auto, cancels out the original width rule. The second command, min-width: 40px then assigns a minimum width to the box, so the box will always expand to fit the text.

Check out the box again (you won’t see any difference in Internet Explorer, so open this up in another browser to see the change):

Much better!

Unstyled version of web page appearing in IE

When your website loads up in Internet Explorer, does an unstyled version of the page appear for a second or two, before the styled version kicks in this? If so, your website may be suffering from what’s known as the Flash Of Unstyled Content⁹ (or FOUC).

The simple solution to this illogical problem is an equally illogical solution – insert either a link or a script element into the header:

• <script type="text/javascript" src="scripts.js"></script>
• <link rel="stylesheet" href="styles.css" type="text/css" media="print" />

It doesn’t matter which one you insert (or even if you insert both). If you provide a print stylesheet, using the link element to reference it (as indicated in the example above), then you’ll never see the FOUC phenomenon.

CSS hacks more – html>body & /**/

html>body

html>body is child selector command which IE can’t understand

So, html>body refers to the child, body, contained within the parent, html.

CSS:

for All browsers

#header {margin-bottom: 3em;}

for non-IE
html>body #header {margin-bottom: 1em;}

because the later CSS will take precedence to the previous one.

This together result in CSS in the first line is for IE, second line is for others.

/**/

IE5’s misinterpretation of the box model. When specifying the width of an element in CSS, padding and borders aren’t included in this value. IE5 however, incoporates these values into the width value causing element widths and heights to become smaller in this browser.

#header {padding: 2em; border: 0.5em; width: 15em; width/**/:/**/ 10em;}

The 15em value will then be overridden by the second width value of 10em by all browsers except IE5,

which for some reason can’t understand CSS commands with empty comment tags either side of the colons.

Vertical text alignment – Continue with Horizontal aligment!

for text element use

.style{text-align:center;}

for block element like <div> use

.style{

margin-left:auto;

margin-right:auto;

}

for more detail you can reference here.

If you are using vertical centering from my previous post Vertical text alignment – CSS _ and # hacks!

You will find yourself in trouble in IE as I do.

because I didn’t define the width of the inner elements!

just add width to the inner element same as the outer width.

and you are okay.