![[css] Fungsi IF pada CSS](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrRKIWV8jzffWWNheNuLT5jCICZ_UfJjVu-fMnfkdrYf5FY9bfjGxRB2a3zVGBPR1g-4efSbUyCcQTdmJgp4KRl5flvD2V7_y5-OZkDtlZbT6A8nXuxO0XX5Knq8vtIEiOwx6owbn529DQ/w800/oke.png "[css] Fungsi IF pada CSS")
<html>
<head>
<title> IF CSS By: Al-mBantuli </title>
<style>
.potw {
}
.potw .menuheader {
width: 165px;
color: white;
background-color: #0089e2;
margin-bottom: 0px;
margin: auto;
font-weight: bolder;
text-align: center;
padding: 10px 4px 10px 4px;
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #fff;
-webkit-box-shadow: 0px -3px 10px #222;
-moz-box-shadow:0px -3px 10px #222;
box-shadow:0px -3px 10px #222;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
}
.potw .menuheader:hover {
color: #0089e2;
background-color: #ccc;
cursor: hand;
height:auto;
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #fff;
-webkit-box-shadow: 0px -3px 10px #222;
-moz-box-shadow:0px -3px 10px #222;
box-shadow:0px -3px 10px #222;
}
.potw ul {
width: 170px;
list-style-type: none;
margin: auto;
padding: 0;
margin-bottom: 8px;
-webkit-box-shadow: 0px 0px 10px 1px #222;
-moz-box-shadow:0px 0px 10px 1px #222;
box-shadow:0px 0px 10px 1px #222;
}
.potw ul:hover ul li{
opacity:1;
}
.potw ul li{
padding: 5px;
text-align: right;
position: absolute;
opacity:0;
webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.potw ul:before{
content: "?";
position: absolute;
font-weight: 800;
background: rgba(255,255,255,0.75);
text-shadow: 0 0 5px white;
color: black;
width: 24px;
height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
opacity: 0.4;
position: absolute;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
}
.potw ul:hover:before{
opacity:0.1;
}
.potw ul li:hover {
text-shadow: 0px 0px 5px #fff;
text-align: right;
opacity:1;
position: absolute;
padding: 5px;
width: 10em;
padding-bottom: 20px;
background: -webkit-linear-gradient(left,rgba(55,55,55,1) , rgba(55,55,55,0.0));
background: -moz-linear-gradient(left,#111 , #333);
background: -ms-linear-gradient(left,#111 , #333);
background: -o-linear-gradient(left,#111 , #333);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
}
</style>
</head>
<body>
<div class="potw">
<div class="menuheader">Teacher Of The Week</div>
<ul class="submenu">
<li class="name">Nama</li>
<img src="DSC08786.jpg" width="170px" alt="" />
</ul>
</div>
</body>
</html>
dan Hasilnya akan sepeti ini
Izinkan saya menjelaskan syntaxnya sedikit
webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
Itu maksudnya akan ganti ketika akan ganti ketika dihover dalam waktu 0.5 detik. coba saja.
.potw ul:hover ul li
nah ini. Ini yang namanya fungsi if di css. artinya --> di class potw jika ul dihover maka ul li akan. . . .
.potw ul:before
kalo yang ini maksudnya jika ul sebelum dihover atau dilakukan apapun maka . . ..
kira-kira begini yang dapat saya sampaikan
Semoga dapat dipahami
0 Comments: