belajar css3

7/27/2019 Belajar Css3

1/14

By: Jolimahendra B.S,S.Kom


2/14

CSS3 Borders

Dengan menggunakan css border anda dapat membuatborder yang melengkung, membuat bayangan dan

menjadikan gambar sebagai sebuah border- CSS3 Rounded Corners

sample script :

div{border:2px solid;border-radius:25px;-moz-border-radius:25px;}


3/14

- CSS3 Box Shadow

Sample script

- CSS3 Border Image

sample script

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

div

{border-image:url(border.png) 30 30 round;-moz-border-image:url(border.png) 30 30 round; /* Firefox */-webkit-border-image:url(border.png) 30 30 round; /* Safari andChrome */-o-border-image:url(border.png) 30 30 round; /* Opera */}


4/14

Css background size

CSS3 Multiple Background Images

div{background:url(img_flwr.gif);

-moz-background-size:80px 60px; /* Firefox 3.6 */background-size:80px 60px;background-repeat:no-repeat;}

body{background-image:url(img_flwr.gif),url(img_tree.gif);

}


5/14

CSS text shadow

CSS word Wrapping

h1{text-shadow: 5px 5px 5px #FF0000;

}

p.test

{width:11em;border:1px solid #000000;word-wrap:break-word;}


6/14

CSS Fonts

@font-face

{font-family: myFirstFont;src: url('Sansation_Light.ttf'),

url('Sansation_Light.eot'); /* IE9+ */}

div{font-family:myFirstFont;}


7/14

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 */

}


8/14

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 */}


9/14

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 */}


10/14

CSS3 Skew

div{

transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari andChrome */-o-transform: skew(30deg,20deg); /* Opera */-moz-transform: skew(30deg,20deg); /* Firefox */

}


11/14

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;}


12/14

@keyframes Specifies the animation 3animation A shorthand property for all the the animation properties, except the

animation-play-state property 3animation-name Specifies the name of the @keyframes animation 3animation-duration Specifies how many seconds or milliseconds an animation takes to

complete one cycle. Default 0 3animation-timing-function Describes how the animation will progress over one cycle of its

duration. Default "ease"3

animation-delay Specifies when the animation will start. Default 0 3animation-iteration-count Specifies the number of times an animation is played. Default 1 3animation-direction Specifies whether or not the animation should play in reverse on

alternate cycles. Default "normal" 3

animation-play-state Specifies whether the animation is running or paused. Default"running" 3
http://www.w3schools.com/cssref/css3_pr_animation-duration.asphttp://www.w3schools.com/cssref/css3_pr_animation-duration.asphttp://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asphttp://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asphttp://www.w3schools.com/cssref/css3_pr_animation-play-state.asphttp://www.w3schools.com/cssref/css3_pr_animation-play-state.asphttp://www.w3schools.com/cssref/css3_pr_animation-play-state.asphttp://www.w3schools.com/cssref/css3_pr_animation-play-state.asphttp://www.w3schools.com/cssref/css3_pr_animation-play-state.asphttp://www.w3schools.com/cssref/css3_pr_animation-direction.asphttp://www.w3schools.com/cssref/css3_pr_animation-direction.asphttp://www.w3schools.com/cssref/css3_pr_animation-direction.asphttp://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asphttp://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asphttp://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asphttp://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asphttp://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asphttp://www.w3schools.com/cssref/css3_pr_animation-delay.asphttp://www.w3schools.com/cssref/css3_pr_animation-delay.asphttp://www.w3schools.com/cssref/css3_pr_animation-delay.asphttp://www.w3schools.com/cssref/css3_pr_animation-timing-function.asphttp://www.w3schools.com/cssref/css3_pr_animation-timing-function.asphttp://www.w3schools.com/cssref/css3_pr_animation-timing-function.asphttp://www.w3schools.com/cssref/css3_pr_animation-timing-function.asphttp://www.w3schools.com/cssref/css3_pr_animation-timing-function.asphttp://www.w3schools.com/cssref/css3_pr_animation-duration.asphttp://www.w3schools.com/cssref/css3_pr_animation-duration.asphttp://www.w3schools.com/cssref/css3_pr_animation-duration.asphttp://www.w3schools.com/cssref/css3_pr_animation-name.asphttp://www.w3schools.com/cssref/css3_pr_animation-name.asphttp://www.w3schools.com/cssref/css3_pr_animation-name.asphttp://www.w3schools.com/cssref/css3_pr_animation.asphttp://www.w3schools.com/cssref/css3_pr_keyframes.asp


13/14

@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;}}


14/14

Pada css 3 anda dapat membuat kolomlayaknya tampilan pada majalah

div{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;}

belajar css3

Documents