Pure CSS Tab.

1/02/2015 07:00:00 AM

•

CSS

Pure CSS Tab ataupun membuat tab hanya dengan menggunakan css, gambar berikut ini merupakan screen shoot dari hasil akhir dati latihan css untuk kali ini, atau anda juga bisa langsung mengunjungi halaman demonya langsung.

Demo
Berikut scriptnya yang harus kita buat :

CSS :

@import url(http://fonts.googleapis.com/css?family=Oswald:300);
*, *:after, *:before {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
  font-family: 'Oswald', sans-serif;
}
.page-wrap {
  width: 70%;
  margin: 0 auto;
}
h1 {
  font-size: 2rem;
  font-weight: bold;
  padding: 0;
  margin: 20px 0;
  color: #000;
  text-align: center;
}
p {
  font-size: 1rem;
  line-height: 1.5rem;
  color:#000;
}
input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.tab-wrap {
  width: 100%;
  float: none;
  list-style: none;
  position: relative;
  margin: 0 auto;
  padding: 0;
  text-align: justify;
  color:#000;
}
.tab-wrap li {
  float: left;
  display: block;
}
.tab-wrap label {
  position: relative;
  display: inline-block;
  padding: 1.5em 1.5em 1em;
  color: inherit;
  text-decoration: none;
  margin: 0 10px 0 0px;
}
.label-1 {
  z-index: 100;
}
.label-2 {
  z-index: 90;
}
.label-3 {
  z-index: 80;
}
.tab-wrap label:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 10px;
  left: 0;
  z-index: -1;
  border: .1em solid #aaa;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1)));
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
  background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
  -webkit-transform: perspective(5px) rotateX(2deg);
    transform: perspective(5px) rotateX(2deg);
   
  -webkit-transform-origin: left;
      -ms-transform-origin: left;
          transform-origin: left;
}
.tab-wrap .tab-content {
  z-index: 200;
  display: none;
  overflow: hidden;
  width: 100%;
  position: absolute;
  top: 53px;
  left: 0;
  padding: 20px;
  background: #fff;
  border-radius: 3px;
  border: .1em solid #aaa;
  border-top: 0;
}
.tab-wrap [id^="tab"]:checked + label {
  z-index: 200;
  margin-bottom: -1px;
  border-top-width: 1px;
}
.tab-wrap [id^="tab"]:checked + label:before {
  background: #fff;
}
.tab-wrap [id^="tab"]:checked ~ .tab-content{
  display: block;
}

HTML :

<div class="page-wrap">
  <h1>
    Pure CSS Tab
  </h1>
  <ul class="tab-wrap">
    <li>
      <input type="radio" id="tab-1" name="tab" checked />
      <label for="tab-1" class="label-1">
        Tab 1
      </label>
      <article class="tab-content">
        <p>Letakkan Content Anda disini...</p>
      </article>
    </li>
    <li>
      <input type="radio" id="tab-2" name="tab" />
      <label for="tab-2" class="label-2">
        Tab 2
      </label>
      <article class="tab-content">
        <p>Letakkan Content Anda disini...</p>
        <p>Letakkan Content Anda disini...</p>
        <p>Letakkan Content Anda disini...</p>
        <p>Letakkan Content Anda disini...</p>
        <p>Letakkan Content Anda disini...</p>
      </article>
    </li>
    <li>
      <input type="radio" id="tab-3" name="tab" />
      <label for="tab-3" class="label-3">
        Tab 3
      </label>
      <article class="tab-content">
        <p>Letakkan Content Anda disini...</p>
        <p>Letakkan Content Anda disini...</p>
        <p>Letakkan Content Anda disini...</p>
      </article>
    </li>
  </ul>
</div>

Demikian saja yang dapat saya sampaikan dikesempatan yang sangat singkat ini, semoga bermanfaat, jika masih kurang silahkan lihat artikel saya yang lainnya di Design.

READ MORE

Membuat ghost writer menggunakan CSS dan Javascript.

10/15/2014 08:19:00 AM

•

Javascript

Ghost Writer yang di maksud disini adalah tulisan yang seolah-olah di tulis oleh makhluk lain, alias tak terlihat siapa yang menulis, tulisan tersebut tampil dengan sendirinya di layar komputer anda. Script ini saya dapatkan dari kompi teman dan saya rasa sangat menarik untuk dishare kembali di blog kecil saya ini sebagai bahan latihan seputar css dan javascript. Oke... untuk mempersingkat waktu berikut ini CSS dan Javascriptnya, selamat mencoba dan selamat berkreasi.

Demo

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:500);
body{
    background:none;
    color:#C0C0C0;
}
@-webkit-keyframes colorFade {
    0%   {color:#C0C0C0;}
    50%  {color: #FFFFBE;}
}
@-moz-keyframes colorFade{
    0%   {color:#C0C0C0;}
    50%  {color: #FFFFBE;}
}
@keyframes colorFade{
    0%   {color:#C0C0C0;}
    50%  {color: #FFFFBE;}
}
section{
    width:100%;
    margin:5% 10% 0 10%;
    font-family: 'Source Code Pro';
}
textarea{
    background:#FFFFBE;
    padding:1em;
    width:80%; 5%;
  height:10em;
    font-size:1em;
    line-height:1.5em;
    vertical-align:middle;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
}
button{
    text-align:center;
    border:none;
    width:25%;
    padding:1em;
    font-family: 'Source Code Pro';
    font-size:1em;
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
button:active{
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
}

Javascript

<script type='text/javascript'>
/*Bounce effect - do not edit unless you get it!*/
function bounce(progress) {
  for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
    if (progress >= (7 - 4 * a) / 11) {
      return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
    }
  }
}
/*Animation time interval function - do not edit*/

function animate(opts) {
 
  var start = new Date  

  var id = setInterval(function() {
    var timePassed = new Date - start
    var progress = timePassed / opts.duration

    if (progress > 1) progress = 1
   
    var delta = opts.delta(progress)
    opts.step(delta)
   
    if (progress == 1) {
      clearInterval(id)
    }
  }, opts.delay || 10)
 
}
/*the text typing animation function*/
animateText(document.getElementById('textExample'));

function animateText(textArea) {

 /*Predefine text to be animated into the textarea*/

  var text = "Aku ada dibelakang mu...., jangan melihat kebelakang jika kamu tak berani melihat keanehan yang mungkin belum pernah engkau lihat di duniamu....!!"
 
  /*Declare animation starting point at 0, through the full length of text*/
 
  var to = text.length, from = 0
 
 /*Typical animation settings*/

  animate({
    delay: 40,
    duration: 10000,
    delta:bounce,
    step: function(delta) {
   
      /*Animates the forward typing then deleting and retyping effect*/
     
      var typedResult = (to-from) * delta + from
     
      /*Assign the value of textarea to the string assigned to 'text' variable*/
     
      textArea.value = text.substr(0, Math.ceil(typedResult))
    }
  })
};

/*Again, Again!! Clear text area, run animateText() again when button is clicked*/

document.getElementById('type').onclick = typeAgain;
function typeAgain(textArea){
   var text=''
   animateText(document.getElementById('textExample'));
  };
</script>

HTML

    <section>
        <p>
        <textarea id="textExample" style="border: 1px solid #BBB; color:#444" rows="4" cols="60"></textarea>
        </p><br/>
        <p>
            <button id='type'>Type Again!</button>
        </p>
    </section>

Nah... itulah smua kode-kodenya, selamat berkreasi, jika ada masalah... mari kita diskusikan bersama di sini pada kotak komentaryang telah disediakan, dan jangan lupa beri saya sundulan pada iklan yang ada, setidaknya untuk menyemangati saya dalam meng-update artikel.

READ MORE

Tutorial CSS, HTML | Meniru tampilan homepage treehouse.

5/03/2014 11:53:00 AM

•

CSS

Cara meniru tampilan homepage treehouse ini sama caranya dengan cara meniru template blog orang lain seperti yang sudah saya ulas pada artikel pertama kali saya ngeblog, tapi sayangnya artikel tersebut sudah saya hapus beberapa bulan yang lalu kerena ada perubahan konsep dan niche dari blog ini, secara singkatnya, untuk meniru tampilan ini saya menggunakan tehnik melihat pagesource dari situs tersebut dengan cara menekan tombol ctrl + u dan mengambil bagian-bagian code css, javascript, dan html yang saya inginkan.

Demo
HTML :

<copy class="copy">
  <h1 class="logo">Logo</h1>
  <ul class="nav">
    <li><a href="#">Features</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Sign In</a></li>
    <li><a href="#">Free Trial</a></li>
  </ul>
</copy>

CSS :

/******************************
Flexbox Layout
*******************************/
.copy, .nav {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.copy {
  justify-content: space-between;
}
.nav {
  -webkit-flex: 1;
  flex: 1;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
@media all and (min-width: 640px) {
  .copy, .nav {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
}
@media all and (min-width: 1030px) {
  .nav {
    -webkit-flex: none;
    flex: none;
  }
}
/******************************
Treehouse Styling
*******************************/
body {
  margin: 0;
  font-family: Helvetica;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/25480/hero-img.jpg') top center no-repeat;
  background-size: cover;
}
.copy {
  padding: 20px 0;
  margin: 0 auto;
}
.logo {
  background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/25480/treehouse-white.svg') center center no-repeat;
  width: 195px;
  background-size: contain;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.nav {
  list-style: none;
}
.nav li {
  margin: 12px 0 12px 28px;
}
.nav li a {
  text-decoration: none;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
}
.nav li a:hover {
  color: rgba(255,255,255,0.7);
}
.nav li:last-child a {
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  transition: 200ms ease-in-out;
  padding: 8px 16px 7px;
}
.nav li:last-child a:hover {
  background: rgba(255,255,255,0.5);
  color: #fff;
}
@media all and (min-width: 1030px) {
  .copy {
    width: 1030px;
    min-width: 768px;
  }
}

Demikian saja mengenai Tutorial CSS, HTML | Meniru tampilan homepage treehouse, jika ada pertanyaan silahkan ajukan pertanyaan Anda pada kotak komentar yang telah disediakan, dan jika tertarik untuk melihat trick-trick CSS lainnya silahkan menuju kategori Design yang ada pada menu navigasi, akhirkata terimakasih banyak atas kunjungannya.

READ MORE

Membuat screen saver dengan javascript dan CSS.

5/02/2014 01:53:00 AM

•

Javascript

Tutorial javascript. Pada kesempatan kali ini saya ingin share pada sahabat mengenai membuat screen saver dengan menggunakan javascript, trick javascript kali ini tidak begitu sulit kerena hanya dengan menggunakan beberapa kode yang menurut saya ini sangat simpel namun tak pernah terfikirkan oleh kita semua bangaimana cara membuatnya, screensaver ini dibuat oleh Yash Bhardwaj salah seorang blogger yang berasal dari mumbai, india, script membuat screen saver ini saya ambil dari portfolionya di codepen, sreeen saver ini sangat menarik dan saya rasa sangat bagus untuk saya share di blog ini untuk kita pelajari bersama, baiklah berikut screen shot, demo, beserta kode yang akan kita gunakan.

Demo
HTML :

<canvas id='world'></canvas>

CSS :

body{
    padding: 0;
    margin: 0;
}
#world{
    display: block;
    background-color: #000000;
   
}

Javascript :

!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!
function(d, w){
    var FPS = 30;//FPS
    var F = 300;//焦点距離
    var N = 3;//軌跡の本数
    var VERTEX_MAX = 10;//軌跡の長さ
    var TRAIL_QUALITY = 4000;//軌跡のクオリティ
    var mu = 0.5;//前のアンカーポイントへの依存具合
    var bmRandom = function(mu, sigma){
        var x, y, r, tmp=null, tmp2;
        return function(){
            if(tmp !== null){
                tmp2 = tmp;
                tmp = null;
                return y*tmp2+mu;
            }
            do{
                x = Math.random()*2-1;
                y = Math.random()*2-1;
                r = x*x+y*y;
            }while(r>=1);
            tmp = sigma*Math.sqrt(-2*Math.log(r)/r);
            return x*tmp+mu;
        };
    };
    pointCopy = function(src, dst){
        dst.x = src.x;
        dst.y = src.y;
        dst.z = src.z;
        return dst;
    };
    Trail = function(pos, t, color_f){
        this.pos={x:0,y:0,z:0};
        this.start={x:0,y:0,z:0};
        this.goal={x:0,y:0,z:0};
        this.anchor_1={x:0,y:0,z:0};
        this.anchor_2={x:0,y:0,z:0};
        this.start_time = 0;
        this.take_time = 1;
        this.vertexes = [];
        this.anchors_1 = [];
        this.anchors_2 = [];
        this.color_f = color_f;
        pointCopy(pos, this.pos);
        pointCopy(pos, this.start);
        pointCopy(pos, this.goal);
        this.setNextGoal(t);
    };
    Trail.prototype.setNextGoal = function(t, target){
        pointCopy(this.goal, this.start);
        this.anchor_1.x = this.start.x+(this.start.x-this.anchor_2.x)*mu;
        this.anchor_1.y = this.start.y+(this.start.y-this.anchor_2.y)*mu;
        this.anchor_1.z = this.start.z+(this.start.z-this.anchor_2.z)*mu;
        if(target){
            this.anchor_2.x = (this.anchor_1.x+target.x)/2+myrand();
            this.anchor_2.y = (this.anchor_1.y+target.y)/2+myrand();
            this.anchor_2.z = (this.anchor_1.z+target.z)/2+myrand();
            this.goal.x = target.x;
            this.goal.y = target.y;
            this.goal.z = target.z;
        }else{
            this.anchor_2.x = this.anchor_1.x+myrand();
            this.anchor_2.y = this.anchor_1.y+myrand();
            this.anchor_2.z = this.anchor_1.z+myrand();
            this.goal.x = this.anchor_2.x+myrand();
            this.goal.y = this.anchor_2.y+myrand();
            this.goal.z = this.anchor_2.z+myrand();
        }
        this.start_time = t;
        this.take_time = 200+Math.random()*200;
        this.vertexes.push(pointCopy(this.start, {x:0,y:0,z:0}));
        this.anchors_1.push(pointCopy(this.anchor_1, {x:0,y:0,z:0}));
        this.anchors_2.push(pointCopy(this.anchor_2, {x:0,y:0,z:0}));
        if(this.vertexes.length > VERTEX_MAX){
            this.vertexes.splice(0,this.vertexes.length-VERTEX_MAX);
            this.anchors_1.splice(0,this.anchors_1.length-VERTEX_MAX);
            this.anchors_2.splice(0,this.anchors_2.length-VERTEX_MAX);
        }
    };
    Trail.prototype.update = function(t, target){
        bezier3(
            t-this.start_time,
            this.start,
            this.anchor_1,
            this.anchor_2,
            this.goal,
            this.take_time,
            this.pos
            );
        if(t-this.start_time > this.take_time){
            this.setNextGoal(this.start_time+this.take_time, target);
            this.update(t, target);
        }
    };
    Trail.prototype.draw = function(ctx, camera, t){
        var i, dz, dt, ddt, rt, a, v={x:0, y:0, z:0};
        var ps = {x:0, y:0};
        ctx.beginPath();
        if(perspective(this.vertexes[0], camera, ps)){
            ctx.moveTo(ps.x, ps.y);
        }
        var x0 = ps.x;
        rt = (t-this.start_time)/this.take_time;
        for(i=1; i<this.vertexes.length; i++){
            ddt = 0.01;
            for(dt=0; dt<1; dt+=ddt){
                bezier3(dt,
                        this.vertexes[i-1],
                        this.anchors_1[i-1],
                        this.anchors_2[i-1],
                        this.vertexes[i],
                        1,
                        v);
                if(perspective(v, camera, ps)){
                    dz = v.z-camera.z;
                    a = 1-(this.vertexes.length-i+1-dt+rt)/VERTEX_MAX;
                    this.color_f(ctx, a, dz);
                    ctx.lineTo(ps.x, ps.y);
                    ctx.stroke();
                    ctx.beginPath();
                    ctx.moveTo(ps.x, ps.y);
                    ddt = dz/TRAIL_QUALITY+0.01;
                }
            }
        }
        ddt = 0.01;
        for(dt=0; dt<rt; dt+=ddt){
            bezier3(dt,
                    this.start,
                    this.anchor_1,
                    this.anchor_2,
                    this.goal,
                    1,
                    v);
            if(perspective(v, camera, ps)){
                dz = v.z-camera.z;
                a = 1-(1-dt+rt)/VERTEX_MAX;
                this.color_f(ctx, a, dz);
                ctx.lineTo(ps.x, ps.y);
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(ps.x, ps.y);
                ddt = dz/TRAIL_QUALITY+0.01;
            }
        }
        if(perspective(this.pos, camera, ps)){
            dz = this.pos.z-camera.z;
            a = 1-1/VERTEX_MAX;
            this.color_f(ctx, a, dz);
            ctx.lineTo(ps.x, ps.y);
            ctx.stroke();
        }
    };
    bezier3 = function(t, a, b, c, d, e, dst){
        t /= e;
        dst.x =
            a.x*(1-t)*(1-t)*(1-t)+
            b.x*3*t*(1-t)*(1-t)+
            c.x*3*t*t*(1-t)+
            d.x*t*t*t;
        dst.y =
            a.y*(1-t)*(1-t)*(1-t)+
            b.y*3*t*(1-t)*(1-t)+
            c.y*3*t*t*(1-t)+
            d.y*t*t*t;
        dst.z =
            a.z*(1-t)*(1-t)*(1-t)+
            b.z*3*t*(1-t)*(1-t)+
            c.z*3*t*t*(1-t)+
            d.z*t*t*t;
    };
    perspective = function(point, camera, dst){
        var dx = point.x-camera.x;
        var dy = point.y-camera.y;
        var dz = point.z-camera.z;
        if(dz > 0){
            dst.x = F*dx/dz;
            dst.y = F*dy/dz;
            return true;
        }
        return false;
    };
    updateScene = function(ctx){
        var i, goal;
        time_now = new Date().getTime();
        var time_d = time_now-time_pre;
        trails[0].update(time_now);
        for(i=1; i<trails.length; i++){
            trails[i].update(time_now, trails[i-1].pos);
        }
        camera.x += (trails[0].pos.x-camera.x)*0.0005*time_d;
        camera.y += (trails[0].pos.y-camera.y)*0.0005*time_d;
        camera.z += (trails[0].pos.z-camera.z-100)*0.0005*time_d;
        time_pre = time_now;
    };
    drawScene = function(ctx){
        var i;
        ctx.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
        for(i=0; i<trails.length; i++){
            trails[i].draw(ctx, camera, time_now);
        }
    };
    var myrand = bmRandom(0,20);
    var canvas = d.getElementById("world");
    var ctx = canvas.getContext("2d");
    var trails = [];
    var i;
    var time_now = new Date().getTime();
    var time_pre = time_now;
    var camera = {x:0, y:0, z:-200};
    for(i=0; i<N; i++){
        trails.push(new Trail({x:myrand(), y:myrand(), z:myrand()},
                              time_now,
                              function(a,z){return "#FFFFFF";}));
    }
    for(i=0; i<N; i++){
        switch(i%3){
            case 0:
                trails[i].color_f=function(ctx, a, dz){
                    var b = dz<10?0:a*F/dz;
                    b = (b>1?1:b)*(dz<30?(dz-10)/20:1);
                    ctx.strokeStyle = "rgba(255,"+Math.floor(255*a)+",0,"+b+")";
                    ctx.lineWidth = F/dz;
                    ctx.lineCap = b>0.8?"round":"butt";
                };
                break;
            case 1:
                trails[i].color_f=function(ctx, a, dz){
                    var b = dz<10?0:a*F/dz;
                    b = (b>1?1:b)*(dz<30?(dz-10)/20:1);
                    ctx.strokeStyle = "rgba(0, 255,"+Math.floor(255*a)+","+b+")";
                    ctx.lineWidth = F/dz;
                    ctx.lineCap = b>0.8?"round":"butt";
                };
                break;
            default:
                trails[i].color_f=function(ctx, a, dz){
                    var b = dz<10?0:a*F/dz;
                    b = (b>1?1:b)*(dz<30?(dz-10)/20:1);
                    ctx.strokeStyle = "rgba("+Math.floor(255*a)+",0,255,"+b+")";
                    ctx.lineWidth = F/dz;
                    ctx.lineCap = b>0.8?"round":"butt";
                };
                break;
        }
    }
    canvas.width = w.innerWidth;
    canvas.height = w.innerHeight;
    ctx.translate(canvas.width/2, canvas.height/2);
    setInterval(function(){
        updateScene();
        drawScene(ctx);
    }, 1000/FPS);
}(document, window);

Demikian saja ulasan mengenai membuat screen saver dengan menggunakan javascript dan css, berilah komentar yang santun dan relevan dengan topik pembahasan agar saya berkunjung kembali, kerena tanpa interaksi dari Anda saya tidak akan tau dari mana Anda datang, sisipkan alamat blog Anda setelah komentar, dan jangan lupa untuk share artikel ini ke teman-teman Anda.

READ MORE