Kategori: CSS, CSS3

Dikey Menü Mouse Efekti

HTML
69 lines
<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <style>
body{padding: 0;margin: 0;border: 0;line-height: 1;}
ul,li{list-style: none;margin: 0;padding: 0;}
a{
  display: block;
  text-decoration: none;
  font-family: Arial,Tahoma,verdana, sans-serif;
  padding: 15px;
  color: #ffffff;
  font-size:12px;
  background: #333333;
  transition: all 0.3s ease;
}
#menu {
  position: relative;
  float: left;
}
#menu li {
  float: none;
  min-height: 1px;
  line-height: 1em;
  vertical-align: middle;
  position: relative;
}
#menu li.hover,#menu li:hover {
  position: relative;
  cursor: default;
}
#menu li a {/*ana menü*/
  color: #ffffff;
}
#menu li a:hover,#menu li:hover a,#menu li:hover ul {/*ana hover tüm arka plan*/
  background: #111133;
  visibility: visible;
}
#menu ul {
  visibility: hidden;
  position: absolute;
  width: 100%;
  top: 0px;
  left: 99%;
}
#menu ul li:hover a {/*alt menü hover*/
  background: #555f5f;
  color: #ffffff;
}
</style>
</head>
<body>
    <ul id='menu'>
      <li><a href='#'><span>Menü1</span></a>
          <ul>
             <li ><a href='#'><span>A1</span></a></li>
             <li ><a href='#'><span>A2</span></a></li>
          </ul>
       </li>
       <li><a href='#'><span>Menü2</span></a>
          <ul>
             <li ><a href='#'><span>B1</span></a></li>
             <li ><a href='#'><span>B2</span></a></li>
          </ul>
       </li>
    </ul>
</body>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Bütçe Hesaplama

HTML
177 lines
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <style>
        #container{
            padding-right: 15px;
            padding-left: 15px;
            padding-top: 15px;
            margin-right: auto;
            margin-left: auto;
        }
        table td{
            margin: 20px;
        }
        input{
            cursor: pointer;
        }
        #info{
            color:#ff1121;
            font-weight: bold;
        }
        #education .color,#educationBar{
            background: #4986E7;
        }
        #environment .color,#environmentBar{
            background: #16A765;
        }
        #military .color,#militaryBar {
            background: #E9B330;
        }
        #health .color,#healthBar{
            background: #ff1121;
        }
        #crime .color,#crimeBar{
            background: #A076DD;
        }
        .meter{
            background: #555;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            padding: 5px;
        }
        .meter span {
            background: #eff151;
            border-radius: 5px;
            height: 10px;
            display: block;
        }
        .color{
            width: 25px;
            height: 25px;
            border: 1px #000000 solid;
            float: left;
        }
        .bar{
            width: 50px;
            float: left;
            border: 1px rgba(255, 255, 255, 0) solid;
            margin-left: 10px;
        }
        #chart{
            border: 1px #000000 solid;
            width: 325px;
            height: 250px;
            float: left;
            padding: 10px;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="overAll">
        <table>
            <tr>
                <td style="width: 200px;"> <label>Toplam:  <span id="total"> 0%</span></label> </td>
                <td> : </td>
                <td style="width: 300px">
                    <div class="meter">
                        <span style="width: 0"></span>
                    </div>
                </td>
                <td id="info"> ! Bütçenizi Aşıyor </td>
            </tr>
        </table>
    </div>
    <br>
    <div style="width: 100%;float: left;margin-left: 0px">
        <div id="chart">
            <span id="educationBar" class="bar"></span>
            <span id="environmentBar" class="bar"></span>
            <span id="militaryBar" class="bar"></span>
            <span id="healthBar" class="bar"></span>
            <span id="crimeBar" class="bar"></span>
        </div>
    </div>
    <div id="division" style="float: left;margin-top: 2%">
        <table>
            <tr id="education">
                <td> <label>Eğitim:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
            <tr id="environment">
                <td> <label>Çevre:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
            <tr id="military">
                <td> <label>Güvenlik:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
            <tr id="health">
                <td> <label>Sağlık:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
            <tr id="crime">
                <td style="width: 200px;"> <label>Barınma:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
        </table>
    </div>
</div>
<script>
    $(function(){
        $("#info").hide();
        var education,environment,military,health,crime;
        var total,chartValues;
        $("table").on("change mousemove",function(){
            education = $("#education").find("input").val();
            environment = $("#environment").find("input").val();
            military = $("#military").find("input").val();
            health = $("#health").find("input").val();
            crime = $("#crime").find("input").val();
            total=(Number(education/5)+Number(environment/5)+Number(military/5)+Number(health/5)+Number(crime/5));
            chartValues =[Number(education),Number(environment),Number(military),Number(health),Number(crime)];
            console.log(chartValues);
            valueUpdate();
        });
        function valueUpdate(){
            $("#education").find("label").find("span").text(education+"%");
            $("#environment").find("label").find("span").text(environment+"%");
            $("#military").find("label").find("span").text(military+"%");
            $("#health").find("label").find("span").text(health+"%");
            $("#crime").find("label").find("span").text(crime+"%");
            console.log(total);
            $("#educationBar").css({"height":education+"%"});
            //$("#educationBar").css({"height":education+"%","margin-top":education+"%"});
            $("#environmentBar").css({"height":environment+"%"});
            $("#militaryBar").css({"height":military+"%"});
            $("#healthBar").css({"height":health+"%"});
            $("#crimeBar").css({"height":crime+"%"});
            $("#overAll").find("progress").val(Math.ceil(total));
            $("#total").text(Math.ceil(total)+"%");
            $(".meter").find("span").width(Math.ceil(total)+"%");
            if(total>50){
                $("#info").show();
            }
            else{
                $("#info").hide();
            }
        }
    });
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

İçerik Haritasi

PHP
155 lines
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Responsive İçerik Haritasi (BreadCrumb)(Bootsrap veya Materialize Grid Uyumlu)</title>
<style type="text/css">
body {
    margin: 0;
    padding: 0;
    width: 100%;
}
#icerikharitasi {
    text-align: center;
    border-spacing: 0px;
    border-collapse: separate;
    width: 100%;
}
#icerikharitasi tr td {
    display: inline-block;
    width: 33%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    background: #3498db;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
    color: #fff;
    padding: 30px;
}
@media (max-width: 767px) {
    #icerikharitasi tr td {
        display: block;
        width: 100%;
    }
}
#icerikharitasi tr td:nth-child(1) {
    background-color: rgba(224, 34, 34, 1);
}
#icerikharitasi tr td:nth-child(2) {
    background-color: rgba(124, 133, 142, 1);
}
#icerikharitasi tr td:nth-child(3) {
    background-color: rgba(104, 114, 124, 1);
}
#icerikharitasi tr td:nth-child(1):hover {
    background-color: rgba(194, 34, 34, 1);
}
#icerikharitasi tr td:nth-child(2):hover {
    background-color: rgba(120, 120, 120, 1);
}
#icerikharitasi tr td:nth-child(3):hover {
    background-color: rgba(100, 100, 100, 1);
}
@media (min-width: 768px) {
    #icerikharitasi tr td:after {
        content: "";
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid rgba(224, 34, 34, 1);
        position: absolute;
        right: -10px;
        top: 40%;
        z-index: 1;
    }
    #icerikharitasi tr td:last-child:after {
        display: none;
    }
    #icerikharitasi tr td:nth-child(1):after {
        border-left: 10px solid rgba(224, 34, 34, 1);
    }
    #icerikharitasi tr td:nth-child(2):after {
        border-left: 10px solid rgba(124, 133, 142, 1);
    }
    #icerikharitasi tr td:nth-child(3):after {
        border-left: 10px solid rgba(104, 114, 124, 1);
    }
    #icerikharitasi tr td:nth-child(1):hover:after {
        border-left: 10px solid rgba(194, 34, 34, 1);
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }
    #icerikharitasi tr td:nth-child(2):hover:after {
        border-left: 10px solid rgba(120, 120, 120, 1);
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }
    #icerikharitasi tr td:nth-child(3):hover:after {
        border-left: 10px solid rgba(100, 100, 100, 1);
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }
}
#icerikharitasi tr td a {
    color: #fff;
    text-decoration: none;
}
#icerikharitasi tr td:hover a {
    color: #fff;
    text-decoration: none;
    opacity: 0.8;
}
</style>
</head>
<body>
<table id="icerikharitasi">
    <tr>
        <td><a href="#1">İçerik 1</a></td>
        <td><a href="#2">İçerik 2</a></td>
        <td><a href="#3">İçerik 3</a></td>
    </tr>
</table>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function resicerik() {
    var ih1 = "#icerikharitasi tr td:nth-child(1)";
    var ih2 = "#icerikharitasi tr td:nth-child(2)";
    var ih3 = "#icerikharitasi tr td:nth-child(3)";
    $(ih1).css('height', 'auto');
    $(ih2).css('height', 'auto');
    $(ih3).css('height', 'auto');
    var i1 = $(ih1).height();
    var i2 = $(ih2).height();
    var i3 = $(ih3).height();
    if (i3 > i2) {
        i = i3
    } else if (i3 === i2) {
        i = i2
    } else if (i2 > i1) {
        i = i2
    } else if (i2 === i1) {
        i = i1
    } else {
        i = i1
    }
    $("#icerikharitasi tr td").height(i);
}
$(document).ready(function() {
    $(window).resize(function() {
        if ($(window).width() > 767) {
            resicerik();
        }else{
            var ih1 = "#icerikharitasi tr td:nth-child(1)";
            var ih2 = "#icerikharitasi tr td:nth-child(2)";
            var ih3 = "#icerikharitasi tr td:nth-child(3)";
            $(ih1).css('height', 'auto');
            $(ih2).css('height', 'auto');
            $(ih3).css('height', 'auto');
        }
    });
});
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Demo için Tıklayınız

Transparan Açılır Kapanır Sabitlenmiş İletişim Formu

HTML
213 lines
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <style type="text/css">
 @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
.feed {
-webkit-transition: 0.3s;
transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
-moz-transition: 0.3s;
 position:absolute;
 margin:-150px 320px;
 padding:2px 4px;
 border: 1px solid rgba(0,0,0,.2);
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 background-color: #0082ff; 
 overflow: hidden; 
 z-index:9999;
 color:white;
 cursor:pointer;
}
#developer {
-webkit-transition: 0.3s;
transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
-moz-transition: 0.3s;
 position:fixed;
 top:100px;
 left:-340px;
 width: 320px;
 height: 333px;
 padding:20px;
 border: 1px solid rgba(0,0,0,.2);
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box;
 background: rgba(0, 0, 0, 0.5); 
 -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
 -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
 box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
 overflow: hidden; 
 z-index:9998;
 padding-top:10px;
}
#developer textarea{
 background: rgba(255, 255, 255, 0.4); 
 width: 296px;
 height: 90px;
 border: 1px solid rgba(255,255,255,.6);
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box; 
 display:block;
 font-family: 'Source Sans Pro', sans-serif;
 font-size:18px;
 color:#fff;
 padding-left:20px;
 padding-right:0px;
 padding-top:12px;
 margin-bottom:10px;
 overflow:hidden;
}
#developer input {
 width: 296px;
 height: 48px;
 border: 1px solid rgba(255,255,255,.4);
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 -moz-background-clip: padding;
 -webkit-background-clip: padding-box;
 background-clip: padding-box; 
 display:block;
 font-family: 'Source Sans Pro', sans-serif;
 font-size:18px;
 color:#fff;
 padding:auto 10px;
 margin-bottom:10px;
}
#developer input[type=submit] {
 cursor:pointer;
}
#developer input.name {
 background: rgba(255, 255, 255, 0.4); 
 padding-left:20px;
}
#developer input.email {
 background: rgba(255, 255, 255, 0.4);
 padding-left:20px;
}
#developer input.message {
 background: rgba(255, 255, 255, 0.4) ;
 padding-left:20px;
}
::-webkit-input-placeholder {
 color: #fff;
}
:-moz-placeholder{ 
 color: #fff; 
}
::-moz-placeholder {
 color: #fff;
}
:-ms-input-placeholder { 
 color: #fff; 
}
#developer input:focus, #developer textarea:focus { 
 background-color: rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
 -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
 box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
 overflow: hidden; 
}
.btn {
 width: 138px;
 height: 44px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 display:block;
 border: 1px solid #253737;
 background: #416b68;
 background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
 background: -webkit-linear-gradient(top, #6da5a3, #416b68);
 background: -moz-linear-gradient(top, #6da5a3, #416b68);
 background: -ms-linear-gradient(top, #6da5a3, #416b68);
 background: -o-linear-gradient(top, #6da5a3, #416b68);
 background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
 padding: 10.5px 21px;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px;
 -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 text-shadow: #333333 0 1px 0;
 color: #e1e1e1;
}
.btn:hover {
 border: 1px solid #253737;
 text-shadow: #333333 0 1px 0;
 background: #416b68;
 background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
 background: -webkit-linear-gradient(top, #77b2b0, #416b68);
 background: -moz-linear-gradient(top, #77b2b0, #416b68);
 background: -ms-linear-gradient(top, #77b2b0, #416b68);
 background: -o-linear-gradient(top, #77b2b0, #416b68);
 background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
 color: #fff;
 }
.btn:active {
 margin-top:1px;
 text-shadow: #333333 0 -1px 0;
 border: 1px solid #253737;
 background: #6da5a3;
 background: -webkit-gradient(linear, left top, left bottom, from(#416b68), to(#416b68));
 background: -webkit-linear-gradient(top, #416b68, #609391);
 background: -moz-linear-gradient(top, #416b68, #6da5a3);
 background: -ms-linear-gradient(top, #416b68, #6da5a3);
 background: -o-linear-gradient(top, #416b68, #6da5a3);
 background-image: -ms-linear-gradient(top, #416b68 0%, #6da5a3 100%);
 color: #fff;
 -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
 }
 </style>
 <form id="developer">
 <input name="name" placeholder="Adınız?" class="name" required />
 <input name="emailaddress" placeholder="E-Mail Adresiniz?" class="email" type="email" required />
 <input name="url" placeholder="url" class="email" type="url" disabled value="<?php echo "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];?>"/>
<textarea rows="4" cols="50" name="subject" placeholder="Hata Raporu" class="message" required></textarea>
 <input name="submit" class="btn" type="submit" value="Bildir" />
 <div class="feed">+</div>
 </form>
 <script type="text/javascript">
 var deger=1;
$(".feed").click(function() {
 if(deger == 1){
 $("#developer").css("left", "+=340");
 deger=0;
 }else{
 $("#developer").css("left", "-=340");
 deger=1;
 }
});
 </script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Css Url Ayrıştırma

HTML
37 lines
·<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <style type="text/css">
 div{
 background-color:#eee;
 padding:5px;
 }
 span{
 background-color:#4fc81f;
 display:block;
 padding:5px;
 }
 </style>
 <title></title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
 <span class="result1"></span>
 <span class="result2"></span>
 <div id="test1">background-image: url(../images/background.png)</div>
 <div id="test2">background-image: url('../images/background.png')</div>
 <div id="test3">background-image: url("/assets/images/loginlogo.png")</div>
 <div id="test4">background-image: url(/assets/images/loginlogo.png)</div>
 <div id="test4">background-image: url(assets/images/loginlogo.png)</div>
 
 <script type="text/javascript">
 var al= $( "#test3" ).text();
 var url=/url\((.*?)\)/.exec(al);
 purl=url[1].replace('"','').replace("'","").replace('"',"").replace("'","");
$( ".result1" ).html(url[0]);
$( ".result2" ).html(purl);
 </script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Internet Explorer için RGBA Renk Oluşturma

Eski Internet Explorer tarayıcılar için RGBa kullanma mantığını ele alacağız.

CSS
1 lines
background: rgba(255, 255, 255, 0.3); <br>filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Str=># 4cFFFFFF=>opacity+renk
Örnekte görüldüğü üzere start ve end color str hex değerlerinde ff rengi, 4c opacity i belirtiyor.
mesela rgba(0,0,0,1) için #ff000000 veya rgba(255,255,255,1) için #ffffffff
rgba(0,0,0,0) için #00000000 veya rgba(255,255,255,0) için #00ffffff
rgba(0,0,0,0.3) için #4c000000 veya rgba(255,255,255,0.3) için #4cffffff
Opacity mantığı
hex değerleri bu karakterlerden oluşur=>fedcba9876543210

255 renk için opacity değerleri
0.1 opacity=25.renk=19
0.2 opacity=51.renk=33
0.3 opacity=76.renk=4c
0.4 opacity=102.renk=66
0.5 opacity=127.renk=7f
0.6 opacity=153.renk=99
0.7 opacity=178.renk=b2
0.8 opacity=204.renk=cc
0.9 opacity=229.renk=e5

ff=0 opacity’e eşittir,00=1 opacity’e eşittir

Hex değeri nasıl hesaplarım?

PHP
11 lines
<?php $opacity=0.7;//buraya istediğiniz değeri girin.Ben 0.7 yaptım
$renkbul=floor(255*$opacity);
echo $renkbul.".renk hex =>".dechex($renkbul);//çıktısı 178.renk =>b2
?>
<style>
body{
    /*0.7 opaklığa sahip siyah için*/
    background: rgba(255, 255, 255, 0.7); /* diğer tarayıcılar */
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#b2000000', endColorstr='#b2000000'); /* IE */
}
</style>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Şifre Zorluğu Gösterimi

HTML
161 lines
<html>
<head>
<style>
body
{
    /*ie needs this*/
    margin:0px;
    padding:0px;
    /*set global font settings*/
    font-size:10px;
    font-family:Tahoma,Verdana,Arial;
}
a:hover
{
    color:#fff;
}
#user_registration
{
    border:1px solid #cccccc;
    margin:auto auto;
    margin-top:100px;
    width:400px;
}
#user_registration label
{
        display: block;  /* block float the labels to left column, set a width */
    float: left; 
    width: 70px;
    margin: 0px 10px 0px 5px; 
    text-align: right; 
    line-height:1em;
    font-weight:bold;
}
#user_registration input
{
    width:250px;
}
#user_registration p
{
    clear:both;
}
#submit
{
    border:1px solid #cccccc;
    width:100px !important;
    margin:10px;
}
h1
{
    text-align:center;
}
#passwordStrength
{
    height:10px;
    display:block;
    float:left;
}
.strength0
{
    width:250px;
    background:#cccccc;
}
.strength1
{
    width:50px;
    background:#ff0000;
}
.strength2
{
    width:100px;    
    background:#ff5f5f;
}
.strength3
{
    width:150px;
    background:#56e500;
}
.strength4
{
    background:#4dcd00;
    width:200px;
}
.strength5
{
    background:#399800;
    width:250px;
}
</style>
</style>
<script>
function passwordStrength(password)
{
    var desc = new Array();
    desc[0] = "Çok Zayıf";
    desc[1] = "Zayıf";
    desc[2] = "İdare Eder";
    desc[3] = "Orta";
    desc[4] = "Güçlü";
    desc[5] = "Çok Güçlü";
    var score   = 0;
    //if password bigger than 6 give 1 point
    if (password.length > 6) score++;
    //if password has both lower and uppercase characters give 1 point  
    if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
    //if password has at least one number give 1 point
    if (password.match(/d+/)) score++;
    //if password has at least one special caracther give 1 point
    if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
    //if password bigger than 12 give another 1 point
    if (password.length > 12) score++;
     document.getElementById("passwordDescription").innerHTML = desc[score];
     document.getElementById("passwordStrength").className = "strength" + score;
}
</script>
</head>
<body>
<form method="post" action="" id="user_registration" name="user_registration">
        <p><h1>Kayıt Formu</h1></p>
        <p> 
        <label for="user">Kullanıcı Adı</label><input type="text" name="user" id="user"/>
        </p>
        <p> 
            <label for="pass">Şifre</label><input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)"/>
        </p>
        <p>
            <label for="passwordStrength">Şifre Zorluğu</label>
            <div id="passwordDescription">Şifre Girilmedi</div>
            <div id="passwordStrength" class="strength0"></div>
        </p>
        <p> 
        <input type="submit" name="submit" id="submit" value="Kayıt Ol">
        </p>
</form> 
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Üçgen Yapımı

style tagı içerisine bu kodu ekleyiniz.

CSS
31 lines
.yukari {
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-bottom:12px solid #09F;
    width:0;
    height:0;
}
 
.asagi {
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-top:12px solid #0B0;
    width:0;
    height:0;
}
 
.sol {
    border-right:12px solid #B00;
    border-top:12px solid transparent;
    border-bottom:12px solid transparent;
    width:0;
    height:0;
}
 
.sag {
    border-left:12px solid #F60;
    border-top:12px solid transparent;
    border-bottom:12px solid transparent;
    width:0;
    height:0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

sayfa içerisinde bu kodu kullanın

HTML
4 lines
<div class="yukari"></div>
<div class="asagi"></div>
<div class="sol"></div>
<div class="sag"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Google Map Arama ve Marker Ekleme

 

PHP
142 lines
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<?php
if($_POST){
?>
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <script type='text/javascript' src="http://maps.google.com/maps/api/js?sensor=true&.js"></script>
  <script type='text/javascript' src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script>
  <style type='text/css'>
    html,
body,
#map {
    display: block;
    width: 70%;
    height: 90%;
}
  </style>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
    
    var options = {
      center : new google.maps.LatLng(<?php echo $_POST["lat"]; ?>, <?php echo $_POST["lng"]; ?>),
      zoom : 15
    };
    
    var div = document.getElementById('map');
    var map = new google.maps.Map(div, options);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(<?php echo $_POST["lat"]; ?>,<?php echo $_POST["lng"]; ?>),
        map: map,
        title: ''
    });
});
//]]></script>
</head>
<body>
  <div id="map"></div>
</body>
</html>
<?php
}else{
?>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
  
  var placeSearch,autocomplete;
  var component_form = {
'street_address' : 'long_name',
'route' : 'long_name',//sadece sokak varsa
'country' : 'long_name',//ülke
'administrative_area_level_1' : 'long_name',//il
'administrative_area_level_2' : 'long_name',//ilçe
'administrative_area_level_3' : 'long_name',
'locality' : 'long_name',//il
'sublocality' : 'long_name',//alt bölge
'neighborhood' : 'long_name',//sadece ilçe varsa
'postal_code' : 'long_name',//posta kodu
'street_number' : 'long_name'
  };
  
  function initialize() {
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), { types: [ 'geocode' ] });
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
      fillInAddress();
    });
  }
  
  function fillInAddress() {
    var place = autocomplete.getPlace();
    var lat = place.geometry.location.lat();
    var lng = place.geometry.location.lng();
    
    var name = place.name;
    var phone = place.formatted_phone_number;
    var fullAddress = place.formatted_address;
    for (var component in component_form) {
      document.getElementById(component).value = "";
      document.getElementById(component).disabled = false;
    document.getElementById("long").value = lng;
    document.getElementById("lat").value = lat;
    document.getElementById("fa").value = fullAddress;
    
    }
    
    for (var j = 0; j < place.address_components.length; j++) {
      var att = place.address_components[j].types[0];
      if (component_form[att]) {
        var val = place.address_components[j][component_form[att]];
        document.getElementById(att).value = val;
      }
    }
  }
    
  function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var geolocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
        autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
      });
    }
  }
</script>
</head>
<body onload="initialize()">
    
  <div id="locationField">
    <input id="autocomplete" placeholder="Adresinizi Giriniz" onFocus="geolocate()" type="text"></input>
  </div>
  <form action="" method="post">
    Full Adres:<input id="fa" name="fa"/><br>
Cadde<input id="street_address" disabled="true"/><br>
Sokak<input id="route" disabled="true"/><br>
Ülke<input id="country" disabled="true"/><br>
İl<input id="administrative_area_level_1" disabled="true"/><br>
İlçe<input id="administrative_area_level_2" disabled="true"/><br>
Köy<input id="administrative_area_level_3" disabled="true"/><br>
Bölge<input id="locality" disabled="true"/><br>
Alt Bölge<input id="sublocality" disabled="true"/><br>
Mahalle<input id="neighborhood" disabled="true"/><br>
Posta<input id="postal_code" disabled="true"/><br>
Sokak No<input id="street_number" disabled="true"/><br>
Enlem<input type="text" name="lat"  id="lat" /><br>
Boylam<input type="text" name="lng"  id="long" /><br>
   <button type="submit">Gönder</button>
    </form>
    
  </body>
</html>
<?php } ?>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Responsive Modal Box

Hazır kütüphaneler kullanmadan yapabileceğiniz bir uyumlu açılır pencere çalışması.

Sayfamıza ilk olarak uyumlu olması için metaları ekleyelim

HTML
7 lines
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

style tagı içerisine kodlarımızı ekleyelim.

CSS
109 lines
.kalici-kaplama {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: 1ms opacity ease;
  -moz-transition: 1ms opacity ease;
  -ms-transition: 1ms opacity ease;
  -o-transition: 1ms opacity ease;
  transition: 1ms opacity ease;
  background: rgba(0,0,0,.6);
}
.kalici-kalici {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  opacity: 0;
  width: 94%;
  padding: 24px 20px;
  -webkit-transition: 1ms opacity ease;
  -moz-transition: 1ms opacity ease;
  -ms-transition: 1ms opacity ease;
  -o-transition: 1ms opacity ease;
  transition: 1ms opacity ease;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: #fff;
}
.kalici-kalici.kalici-acik.kalici-baglantili {
  top: 20px;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.kalici-kalici.kalici-acik { opacity: 1; }
.kalici-kaplama.kalici-acik { opacity: 1; }
.kalici-kapat {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 12px;
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px 7px 7px;
  cursor: pointer;
  color: #fff;
  border: 0;
  outline: none;
  background: #e74c3c;
}
.kalici-kapat:hover { background: #c0392b; }
.kalici-kaplama.karart-ve-kaldir {
  display: block;
  opacity: 0;
}
.kalici-kalici.karart-ve-kaldir {
  top: -300%;
  opacity: 1;
  display: block;
}
.kalici-kalici.karart-ve-kaldir.kalici-acik {/*kararmadan sonra kalici çıkış*/
  top: 50%;
  -webkit-transition: 500ms top 1ms ease;
  -moz-transition: 500ms top 1ms ease;
  -ms-transition: 500ms top 1ms ease;
  -o-transition: 500ms top 1ms ease;
  transition: 500ms top 1ms ease;
}
.kalici-kalici.karart-ve-kaldir.kalici-acik.kalici-baglantili {
  -webkit-transition: 500ms top 500ms ease;
  -moz-transition: 500ms top 500ms ease;
  -ms-transition: 500ms top 500ms ease;
  -o-transition: 500ms top 500ms ease;
  transition: 500ms top 500ms ease;
}
.kalici-kaplama.karart-ve-kaldir.kalici-acik {/*arka plan kararış*/
  top: 0;
  -webkit-transition: 100ms opacity ease;
  -moz-transition: 100ms opacity ease;
  -ms-transition: 100ms opacity ease;
  -o-transition: 100ms opacity ease;
  transition: 100ms opacity ease;
  opacity: 1;
}
.kalici-kalici.karart-ve-kaldir {
  -webkit-transition: 500ms top ease;
  -moz-transition: 500ms top ease;
  -ms-transition: 500ms top ease;
  -o-transition: 500ms top ease;
  transition: 500ms top ease;
}
.kalici-kaplama.karart-ve-kaldir {/*arka plan kararış iptal*/
  -webkit-transition: 100ms opacity 100ms ease;
  -moz-transition: 100ms opacity 100ms ease;
  -ms-transition: 100ms opacity 100ms ease;
  -o-transition: 100ms opacity 100ms ease;
  transition: 100ms opacity 100ms ease;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

script tagı içerisine kodlarımızı ekleyelim.

JavaScript
92 lines
    (function() {
      this.Kalici = function() {
        this.kaplama = null;
        this.kalici = null;
        this.kapatButonu = null;
        this.gecisSonu = gecisSec();
        var varsayilan = {
          className: 'karart-ve-kaldir',
          kapatButonu: true,
          icerik: "",
          maxWidth: 600,
          minWidth: 280,
          kaplama: true
        }
        if (arguments[0] && typeof arguments[0] === 'object') {
          this.ayarlar = varsayilanEk(varsayilan, arguments[0]);
        }
      }
      Kalici.prototype.acik = function() {
        olusturma.call(this);
        initializeEvents.call(this);
        window.getComputedStyle(this.kalici).height;
        this.kalici.className = this.kalici.className +
          (this.kalici.offsetHeight > window.innerHeight ? ' kalici-acik kalici-baglantili' : ' kalici-acik');
        this.kaplama.className = this.kaplama.className + ' kalici-acik';
      }
      Kalici.prototype.kapat = function() {
        var _ = this;
        this.kalici.className = this.kalici.className.replace(' kalici-acik', '');
        this.kaplama.className = this.kaplama.className.replace(' kalici-acik', '');
        this.kalici.addEventListener(this.gecisSonu, function() {
          _.kalici.parentNode.removeChild(_.kalici);
        });
        _.kalici.parentNode.removeChild(_.kalici);
        this.kaplama.addEventListener(this.gecisSonu, function() {
          if (_.kaplama.parentNode) _.kaplama.parentNode.removeChild(_.kaplama);
        });
      }
      function gecisSec() {
        var el = document.createElement('div');
        if (el.style.WebkitTransition) return "webkitTransitionEnd";
        if (el.style.OTransition) return "oTransitionEnd";
        return 'transitionend';
      }
      function varsayilanEk(kaynak, ozellikler) {
        var ozellik;
        for (ozellik in ozellikler) {
          if (ozellikler.hasOwnProperty(ozellik)) {
            kaynak[ozellik] = ozellikler[ozellik];
          }
        }
        return kaynak;
      }
      function olusturma() {
        var icerik, icerikTutucu, belgeParcasi;
        if (typeof this.ayarlar.icerik === 'string') {
          icerik = this.ayarlar.icerik;
        } else {
          icerik = this.ayarlar.icerik.innerHTML;
        }
        belgeParcasi = document.createDocumentFragment();
        this.kalici = document.createElement('div');
        this.kalici.className = 'kalici-kalici ' + this.ayarlar.className;
        this.kalici.style.minWidth = this.ayarlar.minWidth + 'px';
        this.kalici.style.maxWidth = this.ayarlar.maxWidth + 'px';
        if (this.ayarlar.kapatButonu === true) {
          this.kapatButonu = document.createElement('button');
          this.kapatButonu.className = 'kalici-kapat kapat-button';
          this.kapatButonu.innerHTML = 'x';
          this.kalici.appendChild(this.kapatButonu);
        }
        if (this.ayarlar.kaplama === true) {
          this.kaplama = document.createElement('div');
          this.kaplama.className = 'kalici-kaplama ' + this.ayarlar.className;
          belgeParcasi.appendChild(this.kaplama);
        }
        icerikTutucu = document.createElement('div');
        icerikTutucu.className = 'kalici-icerik';
        icerikTutucu.innerHTML = icerik;
        this.kalici.appendChild(icerikTutucu);
        belgeParcasi.appendChild(this.kalici);
        document.body.appendChild(belgeParcasi);
      }
      function initializeEvents() {
        if (this.kapatButonu) {
          this.kapatButonu.addEventListener('click', this.kapat.bind(this));
        }
        if (this.kaplama) {
          this.kaplama.addEventListener('click', this.kapat.bind(this));
        }
      }
    })();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

sonra sayfa kodlarımızı ekleyelim

HTML
13 lines
</head>
<body>
    <a href="#" id="calistirKaliciButton">Aç</a>
    test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
    test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
    test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
    test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
    test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
    test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
    test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
    test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
    test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

script tagı içerisine kapatma komutlarını ekleyelim

JavaScript
7 lines
    var kalicim = new Kalici({
            icerik: 'Test1 <b>Test2</b>'
        });
        var calistirKalici = document.getElementById('calistirKaliciButton');
        calistirKalici.addEventListener('click', function() {
            kalicim.acik();
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

sayfa kapanış kodlarımızı ekleyelim

HTML
1 lines
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX