belajar css3
Post on 14-Apr-2018
233 Views
Preview:
TRANSCRIPT
-
7/27/2019 Belajar Css3
1/14
By: Jolimahendra B.S,S.Kom
-
7/27/2019 Belajar Css3
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;}
-
7/27/2019 Belajar Css3
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 */}
-
7/27/2019 Belajar Css3
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);
}
-
7/27/2019 Belajar Css3
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;}
-
7/27/2019 Belajar Css3
6/14
CSS Fonts
@font-face
{font-family: myFirstFont;src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */}
div{font-family:myFirstFont;}
-
7/27/2019 Belajar Css3
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 */
}
-
7/27/2019 Belajar Css3
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 */}
-
7/27/2019 Belajar Css3
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 */}
-
7/27/2019 Belajar Css3
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 */
}
-
7/27/2019 Belajar Css3
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;}
-
7/27/2019 Belajar Css3
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 -
7/27/2019 Belajar Css3
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;}}
-
7/27/2019 Belajar Css3
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;}
top related