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

 

  1. link reference

< link media="only screen and (max-device-width: 480px)" href="small-device.css" type="text/css" rel="stylesheet" />
  1. 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;

Contact

Github

Codepen

歡迎參觀我的賣場
© 2013 Copyright Digishot Web | Design Tools
Visitors【652449】
digishot webdesign studio