29 Nisan 2015 Çarşamba

Parallax Header ve Görse Geçişleri

HTML
------
<div class="contain">
<header class="header">
    <div class="bg"></div>
    <div class="logo"></div>
    <div class="karga"></div>
</header>
Devamı »
Gönderen zaman: Hiç yorum yok:

Güzel Form Yapımı Dripple Tarzı

 HTML
----------
<form class="guzelForm">
    <input type="text" id="i1"><label for="i1" class="l1">Adınızı Yazın</label>
    <input type="text" id="i2"><label for="i2" class="l2">Email Adresiniz</label>
    <input type="submit" value="Gönder">
</form>


Devamı »
Gönderen zaman: Hiç yorum yok:

28 Nisan 2015 Salı

Müziğe Göre Hareket Eden Audio Player

HTML
    <article id="palyer">
        <div class="player">
            <div class="dis"></div>
            <div class="ic"></div>
            <div class="playpause"></div>
        </div>

        <audio data-bpm="86">
            <source src="m1.mp3" type="audio/mp3">
            <source src="m1.ogg" type="audio/ogg">
        </audio>
    </article>

Devamı »
Gönderen zaman: Hiç yorum yok:

27 Nisan 2015 Pazartesi

Soldan Kayan menü yapımı

HTML

<input type="checkbox" name="" id="l1">

<div class="ana">

    <label for="l1" class="l1">&#9776;</label>

    <div class="icerik">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptate dolorem
    </div>

Devamı »
Gönderen zaman: Hiç yorum yok:

26 Nisan 2015 Pazar

Radio ve checkbox button plugini iCheck

 https://github.com/fronteed/iCheck
    <link href="futurico/futurico.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="icheck.min.js"></script>
    <script>
        $(document).ready(function(){
          $('input').iCheck({
            checkboxClass: 'icheckbox_futurico',
            radioClass: 'iradio_futurico',
            increaseArea: '10%' // optional
          });
        });
    </script>

Devamı »
Gönderen zaman: Hiç yorum yok:

Custom radio button ve checkbox yapımı

--Css content ile yapımı--
HTML KISMI
     <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <form>
        <input type="checkbox" name="" id="c1"><label for="c1">Chek 1</label><br>
        <input type="checkbox" name="" id="c2"><label for="c2">Chek 2</label>
    </form>

Devamı »
Gönderen zaman: Hiç yorum yok:

25 Nisan 2015 Cumartesi

404 hATASI çÖZÜmü

 http://www.site.com/asd-dsa-sss-116.html  //url yapısı
------
$get_url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$url = "http://".$_SERVER['HTTP_HOST']."/".seo_url($say['url'])."-".$say['id'].".html";
//echo $get_url."<br>".$url;die();

if ($get_url<>$url) {
    header( 'HTTP/1.1 404 Not Found' );
include( $_SERVER['DOCUMENT_ROOT'] . '/404.php' );
    }
if($say){ ?>
<? }else{ ?>

Devamı »
Gönderen zaman: Hiç yorum yok:

24 Nisan 2015 Cuma

owl carousel kullanımı

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Carousel</title>
    <link rel="stylesheet" href="owl.carousel.css">
    <link rel="stylesheet" href="owl.theme.css">
    <link rel="stylesheet" href="style.css">
   
Devamı »
Gönderen zaman: Hiç yorum yok:

21 Nisan 2015 Salı

Spotlight Yapımı Jquery

    <link rel="stylesheet" href="style.css">
    <script src="jquery.min.js"></script>
    <script src="js.js"></script>

<div class="kutu">
        Kutucuk
        <div class="tooltip">Buraa Dikkat</div>
    </div>
---------------

Devamı »
Gönderen zaman: Hiç yorum yok:

Canvas Resim Döndürme

<body>
    <canvas width="1280" height="720" id="canvas"> </canvas>
    <script>
      var resim = new Image();
      resim.src= "r.png";  
Devamı »
Gönderen zaman: Hiç yorum yok:

NiceScroll.js

    <script src="jquery.nicescroll.js"></script>
    <script>
        $(document).ready(
          function() {
           $("html").niceScroll();
           $(".deneme").niceScroll();
          }
        );
    </script>

--------------
nicescroll.js
http://areaaperta.com/nicescroll/
https://github.com/inuyaksa/jquery.nicescroll
Gönderen zaman: Hiç yorum yok:

Circle ProgressBar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Circle Progress Bar</title>
    <script src="jquery.min.js"></script>
    <script src="rotater.js"></script>

Devamı »
Gönderen zaman: Hiç yorum yok:

Jquery Fixed header

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>

        $(window).on('load scroll', headerFixed);
        function headerFixed() {
            var scrollTop = $(window).scrollTop();
            if (scrollTop > 130) {
                $(".menu").addClass('fixed');
            }else{
                $(".menu").removeClass('fixed');
            }
        }
     </script>
Gönderen zaman: Hiç yorum yok:

8 Nisan 2015 Çarşamba

Siteyi Responsive Çevirme

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


/*---------------iPad & Samsung Galaxy Tablets portrait---------------*/
/*___________________________________________________________________*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/*---------------iPhone & Samsung Mobiles landscape---------------*/
/*___________________________________________________________________*/
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

/*---------------iPhone & Samsung Mobiles landscape---------------*/
/*___________________________________________________________________*/
@media only screen and (min-width: 320px) and (max-width: 479px) {

}

/*Mobil Menü İçin*/
jQuery(document).ready(function($) {
var a=0;
    $(".menu-mobil").click(function(){
       
        if(a == 0){
            $(this).text("KAPAT");
            a++;
        }else{
            $(this).text("MENÜ");
            a=0;
        }
        $("#categories").toggle();
    });

});
Gönderen zaman: Hiç yorum yok:
Kaydol: Kayıtlar (Atom)