CSS 3.0語法

首頁隨意日誌 DGS小筆記 CSS筆記 CSS 3.0語法

2013-09-09

Using CSS 3.0 (只有部分瀏覽器支援)
1. 圓角(全部)

#roundCorderC{

font-family: Arial;

border: 5px solid #dedede;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

padding: 15px 25px;

height: inherit;

width: 590px;

}

2. 圓角(個別)

#roundCornerI{
font-family: Arial;
border: 5px solid #dedede;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 15px;
padding: 15x 25px;
height: inherit;
width: 590px;
}

3. 陰影(物件)

#boxShadow{

border: 5px solid #111;

-webkit-box-shadow: 5px 5px 7px #999;

-webkit-border-bottom-right-radius: 15px;

padding: 15px 25px;

height: inherit;

width: 590px;

}

3. 陰影(文字)

.textShadowSingle {

font-size: 3.2em;

color: #F5F5F5;

text-shadow: 3px 3px 7px #111;

text-align: center;

}

According to App developing issue from your last post, we were wondering if we provide a clear description in App, that tells users about the feature difference in between register and non-register users, and this can solve the issue that we meet to Guideline 17.2 of App Store Review Guidelines.

Or it might be helpful that you could possibility provide us some suggestion, thanks!

Using CSS embed font

@font-face {
font-family: "Ace Crikey";
src: url(ace.ttf);
}
.your_class_name {
font-family: "Ace Crikey";
font-size: 230%;
}

note: IE need to convert ttf file type to eot
download transfer tool on HERE

IE code:

/* $WEFT -- Created by: francky on 03-09-06 -- */
@font-face {
font-family: IE_ace;
font-style: normal;
font-weight: normal;
src: url(acekrik0.eot);
}
.ie-ace {
font-family: IE_ace, "Times New Roman", serif;
font-size: 230%;
}

Mobile device reference for web screen design
Optimizing web content with media query

two ways to optimizing your web content by define your style sheet

link reference

< link media="only screen and (max-device-width: 480px)" href="small-device.css" type="text/css" rel="stylesheet" />

style sheet content

@media screen and (min-device-width: 481px) { ... }

Description (link reference)

attribute

value

media

all, screen, handheld, print

and

(max-device-width / min-device-width: 480px)
(max-device-height / min-device-height: 480px)
(max-width / min-width: 480px)
(min-width / min-height: 480px)

(orientation:portrait / landscape)

(device-aspect-ratio: 16/9 , 32/18 , 1280/720 , 2560/1440)

(color / min-colorr: 1 , 2 “8-bit”)
(color-index / min-color-index: 1 , 128 , 256 , ...)

(monochrome / min-monochrome: 1 , 2) -->Print

(min-resolution: 118dpcm / 300dpi) -->Print

(scan: progressive) -->TV

***for Andriod***

(-webkit-device-pixel-ratio: 0.75)

#terminology:

dpi: dots per inch (ex. 300dpi = 300 dots per inch)

dpcm: dots per centimeter (ex. 118dpcm = 118 dots per centimeter)

monochrome: black and white channel

EX:

If set to minimum device width of 480px, and apply to handheld.css style sheet:

< link media="only screen and (min-device-width: 480px)" href="handheld.css" type="text/css" rel="stylesheet" />

Express that there is one style sheet for color pages and another for monochrome:

< link media="only print and (monochrome)" href="mono.css" type="text/css" rel="stylesheet" />

Style apply to content when screen width is minimum 500px:

@media all and (min-width:500px) { … }

For general purpose use, please check the following code:

< link rel="stylesheet" href="style_print.css" media="print" type="text/css" />

< link rel="stylesheet" href="style.css" media="screen and (min-device-width: 481px)" type="text/css" />

< link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="style_mobile.css" />

< link type="text/css" rel="stylesheet" media="only screen and (max-width: 480px)" href="style_mobile.css" />

table border setup

table{
border-spacing: 0;
border-collapse: collapse;
}

將youtube embed的影品隨螢幕尺寸調整比例CSS解法 CSS筆記 Google提供的免費繁體中文字體

Contact

Github

Codepen

Visitors【630646】