css3 Archives - MalaysiaSky https://www.malaysiasky.com/tag/css3/ Travel, Coffee, Code Sun, 22 Sep 2019 14:50:43 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.5 https://www.malaysiasky.com/wp-content/uploads/2018/06/favicon.png css3 Archives - MalaysiaSky https://www.malaysiasky.com/tag/css3/ 32 32 Moving Pacman in Pure CSS3 https://www.malaysiasky.com/moving-pacman-in-pure-css3/ https://www.malaysiasky.com/moving-pacman-in-pure-css3/#respond Tue, 23 Feb 2016 07:43:30 +0000 http://www.malaysiasky.com/?p=106 Below example are moving pacman created with fully pure in css3 and HTML5.  So far this pacman write with two vendor prefix Mozilla and webkit. So please open with these two browser only....

The post Moving Pacman in Pure CSS3 appeared first on MalaysiaSky.

]]> Below example are moving pacman created with fully pure in css3 and HTML5.

So far this pacman write with two vendor prefix Mozilla and webkit. So please open with these two browser only. You can add other prefix by yourself.

HTML

<body>
<div class=”pacman”>
<div class=”mouthUp”>
<div class=”eye”></div>
</div>
<div class=”mouthDown”></div>
</div>

<div class=”food”>
<div class=”dot1″></div>
<div class=”dot2″></div>
<div class=”dot3″></div>
<div class=”dot4″></div>
</div>
</body>

 

CSS

<style>
.food{
top:50px;
left:100px;
width: 700px;
height:30px;
position:absolute;
}
.dot1, .dot2, .dot3, .dot4{
background: #000 ;
width:30px;
height:30px;
border-radius:20px;
margin:0 70px 0 33px;
display: inline-block;

}

.dot1{
-moz-animation: habisFood 9s infinite;
-webkit-animation: habisFood 9s infinite;
}

.dot2{
-moz-animation: habisFood2 9s infinite;
-webkit-animation: habisFood2 9s infinite;
}
.dot3{
-moz-animation: habisFood3 9s infinite;
-webkit-animation: habisFood3 9s infinite;

}
.dot4{
-moz-animation: habisFood4 9s infinite;
-webkit-animation: habisFood4 9s infinite;
}

.pacman{
position: absolute;
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid red;
border-left: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
-moz-animation: startEat 9s infinite;
-webkit-animation: startEat 9s infinite;
}

.mouthUp{
position: absolute;
left:-60px;
top:-60px;
width: 0px;
height: 0px;
border-right: 60px solid red;
border-top: 60px solid transparent;
border-left: 60px solid transparent;
border-bottom: 60px solid transparent;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;
-moz-transform:rotateZ(-90deg);
-moz-animation: UpMouth 1s infinite;
-webkit-transform:rotateZ(-90deg);
-webkit-animation: UpMouth 1s infinite;
}

.mouthDown{
position: absolute;
left:-60px;
top:-60px;
width: 0px;
height: 0px;
border-right: 60px solid red;
border-top: 60px solid transparent;
border-left: 60px solid transparent;
border-bottom: 60px solid transparent;
border-top-right-radius: 60px;
border-bottom-right-radius: 60px;
-moz-transform:rotateZ(84deg);
-moz-animation: DownMouth 1s infinite;
-webkit-transform:rotateZ(84deg);
-webkit-animation: DownMouth 1s infinite;
}

.eye{
background: #FFF;
width:10px;
height:10px;
position: absolute;
top:-10px;
left:34px;
border-radius:3px;
}
@-moz-keyframes UpMouth{
to{
-moz-transform:rotateZ(-45deg);
-webkit-transform:rotateZ(-45deg);
}
}

@-moz-keyframes DownMouth{
to{
-moz-transform: rotateZ(45deg);
}
}

@-webkit-keyframes DownMouth{
to{
-webkit-transform: rotateZ(45deg);
}
}

@-moz-keyframes startEat{
from{
left: 0px;
}
to{
left: 700px;
}
}

@-webkit-keyframes startEat{
from{
left: 0px;
}
to{
left: 700px;
}
}

@-moz-keyframes habisFood{
0%{
opacity: 1;
}
7%{
opacity:0;
}
90%{
opacity:0;
}
}

@-webkit-keyframes habisFood{
0%{
opacity: 1;
}
7%{
opacity:0;
}
90%{
opacity:0;
}
}
@-moz-keyframes habisFood2{
0%{
opacity: 1;
}
15%{
opacity: 1;
}
25%{
opacity:0;
}
90%{
opacity:0;
}
}

@-webkit-keyframes habisFood2{
0%{
opacity: 1;
}
15%{
opacity: 1;
}
25%{
opacity:0;
}
90%{
opacity:0;
}
}
@-moz-keyframes habisFood3{
0%{
opacity: 1;
}
15%{
opacity: 1;
}
28%{
opacity:1;
}
32%{
opacity:0;
}
90%{
opacity:0;
}
}

@-webkit-keyframes habisFood3{
0%{
opacity: 1;
}
15%{
opacity: 1;
}
28%{
opacity:1;
}
32%{
opacity:0;
}
90%{
opacity:0;
}
}

@-moz-keyframes habisFood4{
0%{
opacity: 1;
}
15%{
opacity: 1;
}
38%{
opacity:1;
}
40%{
opacity:0;
}
90%{
opacity:0;
}
}

@-webkit-keyframes habisFood4{
0%{
opacity: 1;
}
15%{
opacity: 1;
}
38%{
opacity:1;
}
40%{
opacity:0;
}
90%{
opacity:0;
}
}
</style>

Hopefully this snippet code on how to create moving pacman using pure CSS3 and HTML5 only can help you

Here also few other relate post that might interested you

The post Moving Pacman in Pure CSS3 appeared first on MalaysiaSky.

]]> https://www.malaysiasky.com/moving-pacman-in-pure-css3/feed/ 0 How to change placeholder color with css https://www.malaysiasky.com/how-to-change-placeholder-color-with-css/ https://www.malaysiasky.com/how-to-change-placeholder-color-with-css/#respond Thu, 07 Jan 2016 08:34:00 +0000 By default, if you put placeholder, the color is grey, but can we change it to our desire color? yes we can. Since this is HTML5 attribute , so vendor prefix still required at...

The post How to change placeholder color with css appeared first on MalaysiaSky.

]]> By default, if you put placeholder, the color is grey, but can we change it to our desire color?
yes we can.
Since this is HTML5 attribute , so vendor prefix still required at this time
example.

<input type="text" placeholder="placeholder default input">

what we get is like this

placeholder-default

So, how we gonna do change placehodler color? how we can change it to our desire color?

here are the CSS

::-webkit-input-placeholder {
color: green;
}
:-moz-placeholder { /* Firefox 18- */
color: green;
}
::-moz-placeholder {  /* Firefox 19+ */
color: green;
}
:-ms-input-placeholder {
color: green;
}

so it will change into something like this
placeholder-green

cool right? but wait, another placeholder need different color. yes still can.
first, create the html with ID/Class

<input type="text" id="input_rare" placeholder="placeholder input rare">

CSS:

#input_rare::-webkit-input-placeholder {
color: red;
}
#input_rare:-moz-placeholder { /* Firefox 18- */
color: red;
}
#input_rare::-moz-placeholder {  /* Firefox 19+ */
color: red;
}
#input_rare:-ms-input-placeholder {
color: red;
}

the you will get placeholder with this color
placeholder-red

and now, we are done. lets see the html and css involved.

Output:

placeholder-full

The post How to change placeholder color with css appeared first on MalaysiaSky.

]]> https://www.malaysiasky.com/how-to-change-placeholder-color-with-css/feed/ 0