Blog Kaleng

Senin, 07 Januari 2013

Membuat Background menarik dengan CSS

Kali ini saya post tentang background menaik dengan CSS setelah terinspirasi dari kakak johanes , mau tau caranya ? yo ikutin turtorialnya sekaligus lihat stylenya :

Style 1

{
stripes : [
    {
        color: '#092537',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 79,
        gap: 281,
        offset: 284
    },
    {
        color: '#092637',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 9,
        gap: 351,
        offset: 149
    },
    {
        color: '#1b5d84',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 135,
        gap: 225,
        offset: 95
    },
    {
        color: '#1b5d84',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 56,
        gap: 331,
        offset: 327
    },
    {
        color: '#E1F4FD',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 45,
        gap: 315,
        offset: 140
    },
    {
        color: '#E1F4FD',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 36,
        gap: 324,
        offset: 320
    }
],
bg : '#ffffff'
}

Style 2

{
stripes : [
    {
        color: '#bfbac2',
        rotation: 335,
        opacity: 50,
        mode: 'normal',
        width: 3,
        gap: 98,
        offset: 123
    },
    {
        color: '#bfbac2',
        rotation: 25,
        opacity: 50,
        mode: 'normal',
        width: 3,
        gap: 98,
        offset: 123
    },
    {
        color: '#3e122c',
        rotation: 25,
        opacity: 60,
        mode: 'normal',
        width: 100,
        gap: 100,
        offset: 156
    },
    {
        color: '#3e122c',
        rotation: 335,
        opacity: 60,
        mode: 'normal',
        width: 100,
        gap: 100,
        offset: 156
    }
],
bg : '#d1d1b6'
}

Style 3

{
stripes : [
    {
        color: '#ff0800',
        rotation: 45,
        opacity: 50,
        mode: 'plaid',
        width: 45,
        gap: 45,
        offset: 0
    }
],
bg : '#ffffff'
}

Style 4

{
stripes : [
    {
        color: '#055067',
        rotation: 291,
        opacity: 75,
        mode: 'normal',
        width: 50,
        gap: 40,
        offset: 0
    },
    {
        color: '#3ab1d6',
        rotation: 228,
        opacity: 47,
        mode: 'normal',
        width: 76,
        gap: 60,
        offset: 26
    },
    {
        color: '#ffb4e2',
        rotation: 143,
        opacity: 80,
        mode: 'normal',
        width: 30,
        gap: 10,
        offset: 0
    }
],
bg : '#ffffff'
}

Style 5

background: #36c;
background:
linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
#36c;
background-size: 15px 30px

Style 6

background:
linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background-color:#e1ebbd;
background-size: 128px 128px;

Kalau sudah copy ke bagian yang kamu inginkan

#Untuk Newbie yang belum mengerti,berikut cara'a.

Contoh pada background

Misal kan

body{
---;
---;
Isi CSS;
---;
---;
}

Kamu masukan salah satu style menjadi seperti ini

body{

background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

}

atau yang menggunakan div style,contoh:

html

<div class='style1'></div>

CSS

.style1 {

isi css..

}

Intinya kamu css diantara { isi css }

#untuk mengatur besar background gradient,tambahkan css dibawah ini

-webkit-background-size: 100px;
-moz-background-size: 100px;

Terinspirasi dari membuat template yang masih saya kerjakan lalu saya coba cari tools untuk mempermudah membuat template dan sampailah pada link-link berikut, disini kita bisa membuat kerangka template ataupun membuat tombol (button) dengan CSS3 Generator tersebut dan lain-lain lah.

Semua link dibawah ini adalah hasil yang udah saya cari mulai dari google :

http://csslayoutgenerator.com/
http://www.webtutorialplus.com/css3-generator.aspx
http://css3generator.com/
http://cssload.net/
http://www.joelambert.co.uk/morf/
http://westciv.com/tools/boxshadows/index.html
http://www.3dcsstext.com/
http://www.csstextwrap.com/
http://www.wordpressthemeshock.com/css-drop-shadow/
http://csswarp.eleqtriq.com/
http://border-radius.com/
http://codefuture.co.uk/css/css3-Transform.php
http://www.imgtocss.com/
http://css3button.net/
http://www.css3shapes.com/
http://www.text-image.com/
http://cssarrowplease.com/
http://cssround.com/
http://www.css3d.net/ribbon-generator/
http://css3please.com/
http://csscorners.com/
http://css3.mikeplate.com/
http://www.css3.me/
http://css3clickchart.com/
http://layerstyles.org/builder.html

JQuery Efek Nivo Slider Tanpa Plugin

Nivo Slider Like Effect Slideshow Without Plugin

HTML

<figure id="slider">
    <div class="container">
        <img src="image/slide-1.jpg" alt="Deskripsi slide 1">
        <img src="image/slide-2.jpg" alt="Deskripsi slide 2">
        <img src="image/slide-3.jpg" alt="Deskripsi slide 3">
        <img src="image/slide-4.jpg" alt="Deskripsi slide 4">
    </div>
    <figcaption></figcaption>
    <nav id="slider-nav"></nav>
</figure>

CSS

/* Slider */
#slider {
  display:block;
  border:4px solid #000;
  width:400px; /* slider width */
  height:250px;; /* slider height */
  margin:0 auto;
  background:white url('img/loading.gif') no-repeat 50% 50%;
  overflow:hidden;
  position:relative;
}

/* For caption */
#slider figcaption {
  display:block;
  background-color:black;
  font:normal normal 11px Arial,Sans-Serif;
  color:white;
  opacity:.8;
  padding:10px 15px;
  position:absolute;
  right:0;
  bottom:-100px; /* hide the caption with this way :) */
  left:0;
  z-index:99;
}

#slider img {
  display:block;
  margin:0 0;
  width:400px; /* slide width */
  height:250px; /* slide height */
  position:absolute;
  top:0;
  left:0;
}

/* Navigation */
#slider-nav {
  display:block;
  position:absolute;
  top:10px;
  right:10px;
  margin:0 0;
  padding:0 0;
  z-index:99;
}

#slider-nav a {
  display:block;
  float:left;
  width:10px;
  height:10px;
  background-color:#111;
  font-size:0;
  color:transparent;
  overflow:hidden;
  text-indent:-99px;
  margin:0 2px 0 0;
  border:2px solid white;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}

#slider-nav .active {
  background-color:#2589B4;
}

/* Hide all element inside the '#slider' until the page has been loaded! */
#slider .container, #slider figcaption {display:none}
#slider-nav {opacity:0}

JQuery

/**
 * NIVO SLIDER LIKE EFFECT SLIDESHOW BY TAUFIK NURROHMAN
 * URL: https://plus.google.com/108949996304093815163/about
 * Based on this slideshow framework: http://hompimpaalaihumgambreng.blogspot.com/2012/09/simple-useful-jquery-slideshow.html
 */

(function($) {

// ==================================================================================
// Configuration here:
// ----------------------------------------------------------------------------------
    var config = {
        slices: 10, // number of slices
        speed: 600, // slideshow speed
        easing: null, // easing type
        interval: 3000 // slideshow interval
    };
// ==================================================================================

    // Some variables...
    var $slider = $('#slider'),
        $caption = $slider.find('figcaption'),
        $container = $slider.find('.container'),
        $nav = $('#slider-nav'),
        $slide = $container.children(),
        autoSlide = null,
        $first = $slide.first();

    // Auto append navigation item based on the slides length
    $slide.each(function(index) {
        var i = index + 1;
        $nav.append('<a href="#slide-'+i+'">'+i+'</a>');
        $(this).attr('id', 'slide-'+i);
    });

    // Set the slices size
    var slice_w = $slider.width() / config.slices,
        slice_h = $slider.height();

    // Build the slices
    for (var i = 0; i < config.slices; i++) {
        $('<div class="slice" />').css({
            'position':'absolute',
            'width':slice_w,
            'height':slice_h,
            'left':slice_w*i,
            'z-index':4,
            'background-color':'transparent',
            'background-repeat':'no-repeat',
            'background-position':'-' + slice_w*i + 'px 0'
        }).appendTo($slider);
    }

    // Catch the slices, and also set the different position between odd and even slices
    var $sliceOdd = $slider.find('.slice:odd').css('bottom',0),
        $sliceEven = $slider.find('.slice:even').css('top',0);

    // Click to switch!
    $nav.find('a').on("click", function() {

        $nav.find('.active').removeClass('active');
        $(this).addClass('active');

        var pos = $(this).index(),
            text = $slide.eq(pos).attr('alt'),
            bg = $slide.eq(pos).attr('src');

        $slide.hide().eq(pos).trigger("load").show();

        // Do the caption and slices animation here!
        $caption.stop().animate({bottom:'-100px'}, config.speed/2);

        $sliceOdd.each(function(i) {
            $(this).stop().delay(i*100).animate({bottom:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
                $(this).css({
                    'background-image':'url('+bg+')',
                    'bottom':0,
                    'opacity':1
                });
            });
        });
        $sliceEven.each(function(i) {
            $(this).stop().delay(i*100).animate({top:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
                $(this).css({
                    'background-image':'url('+bg+')',
                    'top':0,
                    'opacity':1
                });
            });
        }).promise().done(function() {
            $caption.html(text).stop().animate({bottom:'0'}, config.speed/2);
        });

        clearInterval(autoSlide);
        autoSlide = setInterval(slideShow, config.interval);

        return false;

    }).first().addClass('active');

    // Init slideshow
    $caption.html($slide.first().attr('alt')).stop().animate({bottom:'0'}, config.speed);

    // Navigation clicker
    function slideShow() {
        if ($nav.find('.active').next().length) {
            $nav.find('.active').next().trigger("click");
        } else {
            $nav.find('a').first().trigger("click");
        }
    }

    // Run the slideshow on page load...
    $(window).on("load", function() {

        // remove the 'loading background-image' of '#slider'
        $slider.css('background-image','none');

        // Show the '.container', 'figcaption' and '#slide-nav' when the page has been loaded!
        $container.show();
        $caption.show();
        $nav.css('opacity',1);

        // Another init slideshow
        $slider.find('.slice').css('background-image', 'url('+$first.attr("src")+')');

        // Then, start the interval...
        autoSlide = setInterval(slideShow, config.interval);

    });

})(jQuery);

HTML letakan didalam kode/dibawah <body> atau diatas kode </body> (terserah tergantung tempat anda meletakanya )
CSS letakan dikode ]]><b:skin>
Jquery diletakan diatas kode </script>

Konfigurasi

Opsi	Keterangan
slices	Jumlah potingan slide.
speed	Kecepatan slideshow.
easing	Tipe easing animasi.
interval	Interval slideshow.

Pure CSS3 Animated Monster

Hi rakasa kecil, apakah kamu lapar? Ini semua hanya CSS3 Animasi bereksperimen dengan nilai acak untuk membuat makhluk hidup seperti sebuah rakasa : )

Download

Sumber : DTE

Minggu, 06 Januari 2013

Emoticon Blogger Otomatis dengan JQuery

JQuery Auto Emoticons for Blogger — Emoticon otomatis untuk komentar Blogger

Saya baru memutuskan bahwa eksperimen ini telah berhasil sekitar satu hari yang lalu (sepertinya begitu). Ini adalah fasilitas emoticon otomatis yang akan mengubah simbol-simbol seperti :), :(, dan yang lainnya menjadi gambar tertentu yang telah ditentukan. Saya menggunakan JQuery karena mungkin konsep emoticon dengan JQuery belum ada. Dan juga, lagipula Saya belum begitu berbakat untuk menuliskan kode dengan JavaScript metah. Meskipun di luar sana sudah ada beberapa tutorial sejenis misalnya Add Yahoo Smiley Emoticons on Blogger Comment, tapi Saya hanya ingin memberikan sesuatu yang sedikit berbeda dan dengan proses instalasi yang sangat mudah.
Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode ini:
</body>
Salin kode di bawah ini dan letakkan di atasnya:

<style type='text/css'>
.emoWrap {
  background-color:#EEDE86;
  border:2px solid #D3BA59;
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}

img.emo, input.emoKey {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}

input.emoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//CDATA[
var emoRange    = "#comments p, div.emoWrap",
    putEmoAbove = "#comment-editor",
    emoMessage  = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/jquery.autoemoticons.js' type='text/javascript'></script>

Klik Simpan Template dan lihat hasilnya.

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!

Menyembunyikan Scroll Bar dengan CSS, namun Tetap Mempertahankan Fungsi Scroll

Ini adalah teknik sederhana untuk menyembunyikan scrollbar tanpa membuat area menjadi tidak bisa digulung. Dengan mendeklarasikan margin negatif pada sisi kanan area, maka scrollbar secara otomatis akan tersembunyi jauh di sebelah kanan sana. Dan kita masih bisa menggulung area dengan mouse wheel atau... layar sentuh mungkin?

HTML

<div class='hidden-scrollbar'>
    <div class='inner'>
      Teks atau sesuatu yang panjang di sini...
    </div>
</div>

CSS

.hidden-scrollbar {
  background-color:black;
  border:2px solid #666;
  color:white;  
  overflow:hidden;
  text-align:justify;    
}

.hidden-scrollbar .inner {
  height:200px;
  overflow:auto;
  margin:15px -300px 15px 15px;
  padding-right:300px; /* Samakan dengan besar margin negatif */
}

DEMO :

Sumber : DTE

Blog Kaleng

Senin, 07 Januari 2013

Membuat Background menarik dengan CSS

Kumpulan CSS3 Generator

Terinspirasi dari membuat template yang masih saya kerjakan lalu saya coba cari tools untuk mempermudah membuat template dan sampailah pada link-link berikut, disini kita bisa membuat kerangka template ataupun membuat tombol (button) dengan CSS3 Generator tersebut dan lain-lain lah.

JQuery Efek Nivo Slider Tanpa Plugin

HTML

CSS

JQuery

Konfigurasi

Pure CSS3 Animated Monster

Minggu, 06 Januari 2013

Emoticon Blogger Otomatis dengan JQuery

Menyembunyikan Scroll Bar dengan CSS, namun Tetap Mempertahankan Fungsi Scroll

HTML

CSS

Follow this

Translate This Page

Followers

Visitor

About Me

Backlink

Blog list

Blog Archive

Popular Posts