CSS3 Google Chrome Minimalis

Tabel Konten
  1. HTML 
  2. CSS 
Google Chrome
CSS3 Google Chrome

Peramban Google Chrome minimalis yang terbuat dari CSS3:

HTML 

<div class="chrome-window">
    <h1>Window Title</h1>
    <div class="right-buttons">
        <a title="Minimize" class="minimize-btn" href="#minimize">Minimize</a>
        <a title="Maximize" class="maximize-btn" href="#maximize">Maximize</a>
        <a title="Close" class="close-btn" href="#close">Close</a>
    </div>
    <div class="window-header">
        <input type="text" onfocus="this.select();" spellcheck="false" value="chrome://chrome">
    </div>
    <div class="window-inner">
        Contents...
    </div>
</div>

CSS 

/* Window */
.chrome-window {
  background-color:#3B68B5;
  background-image:-webkit-linear-gradient(#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
  background-image:-moz-linear-gradient(#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
  background-image:-ms-linear-gradient(#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
  background-image:-o-linear-gradient(#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
  background-image:linear-gradient(#5F91DC 0%,#3B68B5 25px,#3B68B5 100%);
  width:600px;
  border:1px solid;
  border-color:#595959 #444 #444 #494949;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  -webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  -moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-300px;
  margin-top:-150px;
  overflow:hidden;
  font:normal normal 12px Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#222;
  z-index:999;
}

/* Window title */
.chrome-window h1 {
  font:inherit;
  font-weight:bold;
  color:white;
  margin:0 0;
  padding:4px 0 4px 10px;
}

/* Window address bar */
.window-header {
  margin:0 2px;
  padding:1px 0;
  border:1px solid #2E518C;
  border-bottom-color:#AAAAAB;
  background-color:white;
  position:relative;
}

.window-header:before {
  content:"";
  display:block;
  width:10px;
  height:13px;
  background-color:#eee;
  border:1px solid #949495;
  border-bottom-color:#838384;
  -webkit-box-shadow:inset 0 0 0 1px white,0 1px 2px #ccc;
  -moz-box-shadow:inset 0 0 0 1px white,0 1px 2px #ccc;
  box-shadow:inset 0 0 0 1px white,0 1px 2px #ccc;
  position:absolute;
  top:6px;
  left:8px;
}

.window-header input {
  width:592px;
  display:block;
  margin:0 auto;
  padding:4px 4px 5px 24px;
  font:inherit;
  color:inherit;
  border:1px solid #B4BCC7;
  outline:none;
  background-color:white;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

/* Window body */
.window-inner {
  height:200px;
  border:1px solid #2E518C;
  border-top:none;
  margin:0 2px 2px;
  background-color:white;
  -webkit-box-shadow:inset 0 0 0 1px #DFDFDF;
  -moz-box-shadow:inset 0 0 0 1px #DFDFDF;
  box-shadow:inset 0 0 0 1px #DFDFDF;
  padding:4px;
  word-wrap:break-word;
  overflow:auto;
  cursor:text;
}

/* Buttons */
.right-buttons {
  position:absolute;
  top:-1px;
  right:4px;
  font:0/0 a;
  text-shadow:none;
}

.right-buttons a {
  display:block;
  float:left;
  margin:0 0 0 -1px;
  width:26px;
  height:16px;
  border:1px solid #345181;
  -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);
  -moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.2);
  text-decoration:none;
  position:relative;
  cursor:default;
  -webkit-transition:all .2s ease-out;
  -moz-transition:all .2s ease-out;
  -ms-transition:all .2s ease-out;
  -o-transition:all .2s ease-out;
  transition:all .2s ease-out;
}

.right-buttons a:after {
  content:"";
  display:block;
  position:absolute;
}

.right-buttons .minimize-btn {
  -webkit-border-radius:0 0 0 3px;
  -moz-border-radius:0 0 0 3px;
  border-radius:0 0 0 3px;
}

.right-buttons .minimize-btn:after {
  right:7px;
  bottom:4px;
  left:7px;
  height:3px;
  background-color:#BCCFEF;
  border:1px solid #233656;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
}

.right-buttons .maximize-btn:after {
  top:4px;
  right:8px;
  bottom:4px;
  left:8px;
  border:2px solid #BCCFEF;
  -webkit-box-shadow:0 0 0 1px #233656,inset 0 0 0 1px #233656;
  -moz-box-shadow:0 0 0 1px #233656,inset 0 0 0 1px #233656;
  box-shadow:0 0 0 1px #233656,inset 0 0 0 1px #233656;
  -webkit-border-radius:1px;
  -moz-border-radius:1px;
  border-radius:1px;
}

.right-buttons .close-btn {
  -webkit-border-radius:0 0 3px 0;
  -moz-border-radius:0 0 3px 0;
  border-radius:0 0 3px 0;
}

.right-buttons .close-btn {
  width:42px;
}

.right-buttons .close-btn:after {
  content:"x";
  font:normal normal 14px/13px Verdana,Arial,Sans-Serif;
  color:#BCCFEF;
  text-shadow:0 1px #233656,1px 0 #233656,-1px 0 #233656,0 -1px #233656;
  top:0;
  right:0;
  bottom:0;
  left:0;
  text-align:center;
}

.right-buttons a:hover {
  background-color:#8BAEE4;
  -webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);
  -moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);

}

.right-buttons a.close-btn:hover {
  background-color:#DA4D4B;
}

.right-buttons .minimize-btn:hover:after {background-color:white}
.right-buttons .maximize-btn:hover:after {border-color:white}
.right-buttons .close-btn:hover:after {color:white}

Lihat Demo

11 Komentar

  • Anonim

    eh imut amat chromenya,,enaknya buat apa ya box imut kaya gitu ?

    oia kang pertanyaan ane yg di sini lom di jawab
    _http://www.dte.web.id/2013/01/jquery-carousel.html?showComment=1359244070111#c2698454124320463561 :'(

    • Taufik Nurrohman

      Tidak semua pertanyaan harus dijawab. Cari jawabannya sendiri sampai mas merasa hampir mati baru boleh bertanya kepada orang lain. Supaya tidak merepotkan. Mas masih butuh banyak belajar mengenai cara bertanya.

      • Anonim

        waduh kang kok gitu, maafkan sy klw sekiranya saya mengajukan pertanyaan ada yg salah,

        cuma bukan sy membela diri, malah sy ikutin rule bagaimana cara bertanya, n setiap pertanyaan yg saya ajukan disini, juga tidak begitu jauh dari isi artikel yg ada, sehingga nanti juga bisa buat manfaat untuk tmn2 yg baca,,,coba di koreksi saya salah dimana???

        apa sy kurang sopan dalam mengajukan pertanyaan? apa sy tidak tau berterima kasih dalam setiap pertanyaan yg di ajukan???
        apa kata tolong tidak mewakili sebuah pertanyaan,,,apa harus di tambah kata "KUMOHON master javascript TAUFIK NURAHMAN"

        ada istilah semakin berat padi semakin merunduk

        Setidaknya kang taufik harus membuat satu rule buat bertanya, yaitu jika di mana memang terlalu susah atau terlalu merepotkan ada biaya untuk jawaban dari pertanyaan tsb.
        Jadi tdk ada basa basi lagi sebuah pertanyaan harus digantung jawabannya!

        • Taufik Nurrohman

          Masalahnya bukan begitu kok. Area komentar blog ini berfungsi untuk memecahkan masalah bersama. Kalau pertanyaannya terlalu lokal, maka jawaban yang akan dihasilkan hanya bermanfaat untuk satu orang saja. Selain itu, tidak mungkin semua pertanyaan bisa dijawab di area komentar. Saya juga belum tentu bisa menjawab pertanyaanmu. Begitu.

          • Anonim

            saya setuju kang,,malah terkadang banyak harta terpendam dari area diskusi itu sendiri

            klw masalah pertanyaan terlalu lokal, itu sudah juga sy berusaha mencari topik/diskusi yg masih bersangkutan, yg ternyata setelah sy ubek2 belum ada yg membahas

            sbnrnya di mata saya sbg pembaca DTE, khusus pemakai blogger kiblat suatu masalah yg ada di blogger itu bisa di pecahkan di sini. bisa di hitung dgn jari blog yg berkualitas se-niche seperti DTE di indonesia, cuma yg paling enak penyelesaiannya ya ala kang taufik :-bd

            cuma alangkah baiknya untuk lebih kualitasnya blog DTE kedepan, usulan saya soal pertanyaan premium itu di terapkan kang, sy yakin tmn2 juga tidak keberatan untuk ini. jadi ada beberapa tag pertanyaan, dimana bersifat premium, tidak bisa terjawab, ataupun terlalu basic untuk di pertanyakan, plus di buatkanya ruang buat pertanyaan2 tsbt ataupun ruang khusus untuk pertanyaan OOT.

            pribadi sy Fiverr adalah jawaban untuk semua pertanyaan terakhir terbaik yg sy cari dan "serasa hampir mati" untuk mendapatkan jawabannya.

            maaf kang jika kesannya terlalu blak2an,,setidaknya ini lebih baik, buat kedepannya DTE ataupun tmn2 yg datang kesini, lebih baik di akhiri saja diskusi ini, karena sudah menjadi sgt OOT :)

            Terima Kasih
            Cepot.Indo

            • Taufik Nurrohman

              Tidak perlu minta maaf mas/pak...
              Kalau masalah usul/saran-saran pembuatan semacam forum atau grup khusus untuk membahas pertanyaan-pertanyaan yang lebih rumit atau keluar topik sebenarnya sudah ada sejak dulu, tapi sekali lagi Saya cuma bisa mengatakan bahwa Saya tidak sanggup. Mengurus satu buah blog saja sudah kewalahan apalagi menciptakan forum baru. Dunia internet itu tidak sesempit yang kamu kira. Kalau pertanyaanmu tidak bisa dijawab/tidak terjawab di sini, mungkin masih bisa di jawab di luar. Cari saja pasti ada. Saya juga begitu.

              Orang-orang biasanya memilih untuk menghubungi Saya melalui email untuk menanyakan pertanyaan-pertanyaan yang belum pernah terbahas di sini. Tapi sekali lagi Saya tidak bisa menjamin bahwa pertanyaan-pertanyaan yang masuk bisa dijawab. Saya tidak sehebat itu.

  • Unknown

    woow..
    sngat mirip dengan aslinya.. :-bd
    btw mau nanya nih mas..
    mungkin agak OOT..
    bagaimana cara membungkus css bawaan google dengan tag comment seperti yang mas laukan di blog mas??
    maksud saya yang ini :
    <!--<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' />
    <link type="text/css" rel="stylesheet" href="//www.blogger.com/dyn-css/authorization.css?targetBlogID=298900102869691923&zx=ebed959b-60ba-4fc1-adba-8cdeea0d1d95"/>
    <style type='text/css'></style>-->

    karena saya sdah coba tapi tetap muncul versi dari bloggerx..
    dan karena munculnya authorization.css yang memiliki tanda & membuat errornya di validator w3 bertambah 1..
    apa ada solusi mas??

  • uki

    Wah keren nih kalau di terapkan kedalam template blogger,hehehe...ijin ya :)

  • Putra

    apa lagi kalo itu bisa dibuat iframe, url nya langsung di address bar :)

  • Unknown

    keren gan, boleh saya ambil ya \o/

Komentar telah ditutup.