Professional Documents
Culture Documents
Belajar Css3
Belajar Css3
Kom
CSS3 Borders
Dengan menggunakan css border anda dapat membuat border yang melengkung, membuat bayangan dan menjadikan gambar sebagai sebuah border
CSS Fonts
<style type="text/css"> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div { font-family:myFirstFont; } </style>
CSS3 2D Rotate
Digunakan untuk merotasi sebuah elemen div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ }
CSS3 Translate
Digunakan untuk merubah posisi suatu elemen
div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ }
CSS3 Scale
Digunakan untuk meresize suatu elemen
div { transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari and Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ }
CSS3 Skew
div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ }
CSS3 Transition
div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } div:hover { width:300px; }
@keyframes
animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count
A shorthand property for all the the animation properties, except the 3 animation-play-state property Specifies the name of the @keyframes animation Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0 Describes how the animation will progress over one cycle of its duration. Default "ease" Specifies when the animation will start. Default 0 Specifies the number of times an animation is played. Default 1 3 3 3 3 3
animation-direction
animation-play-state
Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal"
Specifies whether the animation is running or paused. Default "running"
3
3
@keyframes myfirst { from {background: red;} to {background: yellow;} } div { animation: myfirst 5s; }
@keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }
Pada css 3 anda dapat membuat kolom layaknya tampilan pada majalah
div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; }