Notes: Revisited CSS3

1, CSS3 border

• border-radius
• box-shadow
• border-image

2, CSS3 background

• background-image
• background-size
• background-origin
• background-clip

Different background images available comma

<style>
#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}
</style>

Origin-background: Content-Box / padding-Box / Box border-
background-area Origin attribute specifies the location of the background image

content-box / padding-box / border-box: background-clip
drawing area specified background-clip property background

3, CSS3 gradients

• linear gradient of a linear-gradient direction
• radial-gradient is defined by a center radial gradient

<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red, green); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(red, green); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(red, green); /* Firefox 3.6 - 15 */
    background: linear-gradient(red, green); /* 标准的语法（必须放在最后
    /* background: linear-gradient(to right, red, green); 渐变方向向右 */
    /* background: linear-gradient(to bottom right, red, green); 渐变方向向右下角 */
    /* background: linear-gradient(35deg, red, green); 渐变方向 渐变线35deg */
    /* background: linear-gradient(to right, red, green, blue, orange); 使用多个颜色节点 */
    /* background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 渐变颜色可设置透明度*/
    /* background: repeating-linear-gradient(red, yellow 10%, green 20%); 可重复线性渐变 */
    /* background: radial-gradient(red, green, blue); 径向渐变 */
    /* background: radial-gradient(circle, red, yellow, green); 设置形状的径向渐变 */
    
}
</style>

9 and earlier versions of Internet Explorer do not support gradient.

4, CSS3 Text Effects

• text-shadow
• box-shadow
• text-overflow
• word-wrap
• word-break

Text effect text sfdfsfsdfsfsf

<h5 style="text-shadow: 5px 5px 5px #FF0000;">文字效果 text sfdfsfsdfsfsf</h5>

text-overflow: ellipsis; excess text display omitted ...

word-wrap: break-word; allows long text wrapping

word-break: keep-all / break-all word is split wrap

5, CSS3 Fonts

You need to choose fonts

<style> 
@font-face
{
    font-family: myfontname;
    src: url(font.woff);
}
div
{
    font-family:myfontname;
}
</style>

6, CSS3 conversion

Elements for moving, scaling, rotation, elongation or stretching.

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

transform property

• translate () method, from the left (X-axis) and a top (Y-axis) position of the given parameter, the element from its current position.
• rotate () method, a given number of degrees clockwise rotational element.
• scale (2,3) transition width 2 times the original size, and 3 times as large as its original height.
• skew (30deg, 20deg) element in the X and Y axes tilted 20 degrees to 30 degrees.
• rotateX(120deg);
• rotateY(130deg);

7, CSS3 transitions

Element gradually changes from one style to another effect.

div
{
    width:100px;
    height:100px;
    background:red;
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;/* Safari or Chrome on MacOS*/
}
div:hover
{
    width:300px;
}

transition property

• I want to add the effect of CSS properties
• Specify the duration of the effect.

7, CSS3 animation

@keyframes create an animation

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}
@keyframes myframes
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myframes /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

animation properties

• animation-name Specifies the name of @keyframes animation
• animation-duration seconds or milliseconds predetermined animation completes takes one cycle. The default is 0
• animation-timing-function animation predetermined speed profile. The default is "ease: Slow speed"; " Linear: constant "; "ease-in: low start"
• animation-fill-mode, the default none; Forwards : When the animation is complete, or there is a delay when the animation does not start playing when you want to apply the style element.
• animation-delay specify when the animation starts. The default is 0
• the number of times the animation is played animation-iteration-count requirements. The default is 1; " Infinite: Unlimited Play ."
• animation-direction specifies whether the animation to play in reverse to the next cycle. The default is "normal".

8, CSS3 segment sequences

• Number of columns in column-count split
• column-gap clearance between the column
• column-rule-style borders between columns
• Column-rule-width between the column border width
• Between column-rule-color border color column
• column-rule
• column-span to specify how many columns the default element spans 1, / all
• column-width 列宽

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
    
}
h2 {column-span: all;}

9, CSS3 layout elastic

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

• direction-Flex : Row | Reverse-Row | column | Reverse column-
  specified position of the elastic sub-element in the parent container.
• Content-The justify : Start-Flex | Flex-End | Center | Space-BETWEEN | Space-specified content around the horizontal axis in alignment
• items-align = left : Start-Flex | Flex-End | Center | Baseline | Stretch child elements aligned on the longitudinal axis
• wrap-Flex : nowrap | wrap | wrap-Reverse | Initial | the inherit specified child element of wrapping

• align-content: flex-start | flex-end | center | space-between | space-around | stretch

• Self-align = left : Auto | Flex-Start | Flex-End | Center | Baseline | the Stretch child element of their alignment