1. CSS3 loading spinners without images • CSS & (X)HTML • Kilian Valkhof →

    Pretty cool. It uses Javascript to make the spinner rotate with interval break. But I think it can be easier controlled by CSS Animation. So I modified its animation CSS like this:

    @-webkit-keyframes rotateThis {

    0%, 12.49% {-webkit-transform:scale(0.5) rotate(0deg);}

    12.5%, 24.99% {-webkit-transform:scale(0.5) rotate(45deg);}

    25%, 37.49% {-webkit-transform:scale(0.5) rotate(90deg);}

    37.5%, 49.99% {-webkit-transform:scale(0.5) rotate(135deg);}

    50%, 62.49% {-webkit-transform:scale(0.5) rotate(180deg);}

    62.5%, 74.99% {-webkit-transform:scale(0.5) rotate(225deg);}

    75%, 87.49% {-webkit-transform:scale(0.5) rotate(270deg);}

    87.5%, 99.99% {-webkit-transform:scale(0.5) rotate(315deg);}

    100% {-webkit-transform:scale(0.5) rotate(360deg);}

    }

    Web Development CSS3 / 4 months ago  /  0 notes

  2. Opera 10.50 alpha beta comes with a set of nice improvements, including the long-waited HTML5 <video> tag, CSS Transform, CSS Transition, and some enhanced CSS3 properties like box-shadow or border-radius. To quickly sum up the usage of those newly supported properties, just notice: CSS Transform and Transition are implemented with the -o prefix, so properties look like -o-transform: rotate(5reg);. Other CSS3 properties are directly implemented without any prefix. Notice that border-radius property is implemented without prefix, too, unlike -webkit-border-raidus in Webkit and -moz-border-radius in Gecko. HTML5 <video> only supports ogg format, the same and open format supported by Gecko / Firefox. Visiting the Opera Developer Network may help you with further details.

    Opera 10.50 alpha beta comes with a set of nice improvements, including the long-waited HTML5 <video> tag, CSS Transform, CSS Transition, and some enhanced CSS3 properties like box-shadow or border-radius.

    To quickly sum up the usage of those newly supported properties, just notice:

    • CSS Transform and Transition are implemented with the -o prefix, so properties look like -o-transform: rotate(5reg);.
    • Other CSS3 properties are directly implemented without any prefix. Notice that border-radius property is implemented without prefix, too, unlike -webkit-border-raidus in Webkit and -moz-border-radius in Gecko.
    • HTML5 <video> only supports ogg format, the same and open format supported by Gecko / Firefox.

    Visiting the Opera Developer Network may help you with further details.

    Web Development Opera CSS3 HTML5 / 5 months ago  /  0 notes