concept

  • CSS3 adds some features to CSS

Range of new features

  • CSS 3 rounded corners

    div
{
    border-radius:25px;
}

  • CSS 3 box shadow

    div
{
    box-shadow: 10px 10px 5px #888;
}

  • CSS3 border picture

    div
{
    border-image:url(border.png) 30 30 round;
}

  • Range of background

    div
{
    background: url(img_flwr.gif);
}

  • CSS 3 gradient

    div
{
    background-image: linear-gradient(#e66465, #9198e5);
    background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

  • CSS3 text effects

    div
{
    text-shadow: 5px 5px 5px #FF0000;
    text-overflow: clip;
}

  • CSS 3 fonts

    @font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

  • CSS2D conversion

    div
{
    transform: translate(x,y);
}

  • CSS3D conversion

    div
{
    transform-style: preserve-3d;
    transform: translate3d(x,y,z);
}

  • CSS 3 transition

    div
{
    transition:width 2s;
}

  • CSS 3 animation

    @keyframes myfirst { 0% { background: red; } 100% { background: yellow; } } div { animation: myfirst 5s linear 2s infinite alternate; }

  • CSS 3 more columns

    div
{
    columns:100px 3;
}

  • CSS3 box model

    div
{
    box-sizing:border-box;
}

  • CSS3 elastic box

    div
{
    display: flex;
}

  • CSS3 Multimedia Query

    @media screen and (min-width: 480px) { body { background-color: lightgreen; }}

additional

  • This article is published through multiple platforms of “We Media” and will not be maintained after publication. If you have any objection to the content, you can discuss it in the GitHub below
  • The ongoing maintenance / 500 + face questions before update/notes 】 https://github.com/noxussj/In…
  • [3D city modeling using three. JS (Zhuhai City)] https://3d.noxussj.top/