1. Hello Guest, selamat datang di Forum WinPoin. Kamu bisa bertanya, berdiskusi, sharing, dan ngobrolin apapun seputar Windows, Windows Phone, PC, Gadget, atau hal seputar Teknologi lainnya. Selamat berkomunitas! ;)

Cara membuat CSS sederhana ala Metro

Discussion in 'Developer Corner' started by Ambrizal Suryadinata, Mar 11, 2014.

  1. Ambrizal Suryadinata

    Ambrizal Suryadinata Saya Ganteng Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,592
    Haloo member atau pengunjung WinPoin dimanapun kalian berada :ketawa:
    Kali ini saya akan sharing tentang cara membuat CSS sederhana ala Metro namun sebelum terjun bebas ke intinya mungkin bisa mengetahui ciri-ciri CSS yang menggunakan gaya ala Metro ( bukan ala sabuncolek lagi :ketawa: )

    1. Metro UI identik dengan kotak-kotak, jika dibandingkan dengan yang lain Metro UI merupakan Style yang simple tapi menarik karena berkesan lebih bersih daripada yang ada lengkung-lengkung alias bootstrap :ketawa:,
    2. CSS code agar bisa membuat Metro UI cukup sedikit dan mungkin bisa dibayangkan berapa kecepatan loading yang akan anda gunakan.
    3. Metro UI juga lebih berasa jika menggunakan font Segoe UI Light, font ini sudah bisa kalian temui di seluruh sistem Windows.

    Kekurangan Metro UI yang saya temui biasanya adalah

    1. Hanya beberapa browser yang mensupport gaya Metro namun untuk IE efek Metro yang kita buat sangat terlihat modern dan lebih bagus dari code aslinya.

    Metro UI biasanya memiliki karakteristik code seperti :

    1. Nilai padding yang besar biasanya ukurannya lebih dari 5px atau juga bisa dikatakan lebih besar dari biasanya.
    2. Penggunaan margin yang cukup banyak.
    3. ukuran width (lebar) dan height (tinggi) biasanya dalam bentuk persentasi seperti 100%, 50%, sampai 10%.

    jadi disini saya akan mengajarkan sedikit ilmu saya cara membuat satu halaman untuk membuat CSS sederhana ala Metro.

    Pertama masukkan code ini terlebih dahulu di notepad :

    Code:
    <!DOCTYPE html>
<html>
<head>
<style>
body{margin:0; padding:0; font-family:"Segoe UI", "Segoe UI Light"; background:#ccc;}
h1,h2,h3{padding:0; margin:0; font-family:"Segoe UI Light"}
</style>
<title>Halaman Page Satu</title>
</head>
<body>
<div id="header">
<div class="wrapper">
<h1>Header H1 bagian header</h1>
</div>
</div>

<div id="content">
	<div class="wrapper">
        <div class="konten-sidebar">
                <h2 class="title">Judul Sidebar</h2>
        	<div class="konten-wrapper">
                <p>Isi Konten</p>
            </div>
        </div>
        <div class="konten">
	<h2 class="title">Judul Konten</h2>
		    <div class="konten-wrapper">
				<p> Konten itu seperti apa misalkan isinya itu gambar, tulisan, video dan lain-lain pokoknya bisa ditempatkan sebagai konten website gitu aja deh</p>
			</div>
		</div>
    </div>
</div>
</body>
</html>
    Untuk keterangan tag CSS :

    • body : margin dan padding diset ke nilai 0 bertujuan untuk menghindari adanya lahan kosong yang dibuat secara cuma-cuma, kalau anda tidak percaya silahkan hilangkan margin dan paddingnya.
    • h1,h2,h3 : code yang digunakan untuk mereset heading default.

    Untuk hasil kira-kira seperti ini :

    [​IMG]
    Sekarang saya akan menambahkan code CSS lagi agar isi dari konten memiliki sedikit gaya metro.

    Code:
    #header h1 {font-family:"Segoe UI Light"; color:white; margin:0; padding:50px;}
#header {background:#666; height:150px;}
.wrapper {width:90%; margin:0px auto;}
#content {background: #ccc; margin:10px; padding:0px; width:100%; height:auto;}
.konten-sidebar {float:left; background: #FFF; width:25%;  height:200px;}
.konten-wrapper {padding:30px;}
.konten {float:right; width:70%; background: #FFF;}
.title {background:#000; color:#fff; padding:30px; line-height:10px;}
    code ini ditaruh pada sela-sela tag code <style>

    Code:
    <style>
.....
</style>
    Penjelasan code tag CSS :


    • #header h1 digunakan untuk memberikan gaya untuk heading satu dan hanya berlaku pada kawasan header, jika diluar itu style ini tidak akan berfungsi.
    • #header digunakan untuk memberikan gaya pada header pada tag tersebut saya membuat background dengan kode warna #666 dengan tinggi 160px.
    • #content digunakan untuk memberikan gaya pada content pada tag tersebut saya membuat background dengan kode warna #ccc dengan margin 10px dan lebar 100% sesuai dengan resolusi layar.
    • .konten-sidebar digunakan untuk memberikan gaya pada sidebar tag tersebut saya membuat posisinya berada di kiri atau left.
    • .konten-wrapper digunakan untuk memberi gaya pada setiap tag content, pada code ini saya memasangkan padding sepanjang 30px.
    • Sisanya sama seperti diatas.

    dan kira-kira hasilnya seperti ini :

    [​IMG]

    ini adalah tutorial dasar jadi kalian bisa oprek sesuka kalian.
    Ada pertanyaan silahkan reply nanti om bales :ketawa:.

    Note : Menambah tile atau kotak.
     
    Ambrizal Suryadinata, Mar 11, 2014
    #1
  2. Febian

    Febian Administrator Staff Member

    Joined:
    May 7, 2013
    Messages:
    8,029
    Akhirnya raja desain keluar juga dari sarangnya :ketawa:
    Nice share sob, konsep metro emang lagi ngetrend..semua-mua-mua keliatan bagus kl dijadiin metro. Terlihat sangat simple tapi elegan.
    Utk website, load desain yang berkonsep metro juga lebih wazz wuzz daripada konsep lama yang kebanyakan shadow dll
     
    Febian, Mar 11, 2014
    #2
  3. Jazz

    Jazz Windows Freak Staff Member

    Joined:
    Jan 6, 2014
    Messages:
    14,720
    ...
     
    Last edited: May 27, 2017
    Jazz, Mar 11, 2014
    #3
  4. marwanto.se

    marwanto.se New Member

    Joined:
    May 7, 2013
    Messages:
    7,653
    Mantab nih share-nya mas Ambrizal, cocok bagi yang ingin membuat desain tampilan web sendiri bergaya Modern UI yang sedang trend saat ini. Ditunggu share-share menarik/bermanfaat lainnya :goodjob:
     
    marwanto.se, Mar 11, 2014
    #4
  5. Ambrizal Suryadinata

    Ambrizal Suryadinata Saya Ganteng Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,592
    mana ni yang request tadi kok gak datang :ketawa:
     
    Ambrizal Suryadinata, Mar 11, 2014
    #5
  6. Jazz

    Jazz Windows Freak Staff Member

    Joined:
    Jan 6, 2014
    Messages:
    14,720
    Dari pada Thread ini Hanya mendapat Pujian tapi ga ada yg Test, coba test aja Nih om Cabun Hasilnya...
    yaa sedikit lah Coba-coba ganti CSS Warnanya untuk beberapa Tampilan...
    Ada yg inginku tanyakan nih om Ambrizal, Gimana caranya..
    • Untuk Tile Pertama yg Kecil itu bisa di Buat Lebar Tilenya Sesuai Banyak tulisannya?
    • Gimana cara Nambahin Tilenya lagi? (Lebih dari 2), Apakah Ketika di tambahkan Perlu Penyesuaian lagi untuk Tile lainnya?
    :ketawa:
     
    Jazz, Mar 11, 2014
    #6
  7. Ambrizal Suryadinata

    Ambrizal Suryadinata Saya Ganteng Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,592
    yang pertama dulu ya, kalau mau ngubah lebarnya bisa kok langsung dari code ini :

    Code:
    .konten-sidebar {float:left; background: #FFF; width:25%;  height:200px;}
.konten {float:right; width:70%; background: #FFF;}
    nah disana kan ada width:70% atau 25%, nah itu ganti aja terserah sesuai dengan selera mu maksimal 100% jadi anggap aja kayak itung-itungan 100 - (70+25) = 5% jadi jaraknya cuman 5%.

    wekekke gak kepikiran sampe sana aku yaudah ini aku buatin :

    Code:
    <!DOCTYPE html>
<html>
<head>
<style>
body{margin:0; padding:0; font-family:"Segoe UI", "Segoe UI Light"; background:#ccc;}
h1,h2,h3{padding:0; margin:0; font-family:"Segoe UI Light"}
#header h1 {font-family:"Segoe UI Light"; color:white; margin:0; padding:50px;}
#header {background:#666; height:150px;}
.wrapper {width:90%; margin:0px auto;}
#content {background: #ccc; margin:10px; padding:0px; width:100%; height:auto;}
.sidebar {float:left; width:25%;}
.konten-sidebar{background: #FFF;margin-bottom:10px;}
.konten-wrapper {padding:30px;}
.konten {float:right; width:70%;}
.isi-konten{background: #FFF; margin-bottom:10px;}
.title {background:#000; color:#fff; padding:30px; line-height:10px;}


</style>
<title>Halaman Page Satu</title>
</head>
<body>
<div id="header">
<div class="wrapper">
<h1>Header H1 bagian header</h1>
</div>
</div>

<div id="content">
	<div class="wrapper">
        <div class="sidebar">
			<div class="konten-sidebar">
				<h2 class="title">Judul Sidebar</h2>
				<div class="konten-wrapper">
					<p>Isi Konten</p>
				</div>
			</div>
			<div class="konten-sidebar">
				<h2 class="title">Judul Sidebar</h2>
				<div class="konten-wrapper">
					<p>Isi Konten</p>
				</div>
			</div>
        </div>
        <div class="konten">
			<div class="isi-konten">
				<h2 class="title">Judul Konten</h2>
				<div class="konten-wrapper">
					<p> Konten itu seperti apa misalkan isinya itu gambar, tulisan, video dan lain-lain pokoknya bisa ditempatkan sebagai konten website gitu aja deh</p>
					<h1>Heading Satu</h1>
					<h2>Heading Dua</h2>
					<h3>Heading TIga</h3>
				</div>
			</div>
			<div class="isi-konten">
				<h2 class="title">Judul Konten</h2>
				<div class="konten-wrapper">
					<p> Konten itu seperti apa misalkan isinya itu gambar, tulisan, video dan lain-lain pokoknya bisa ditempatkan sebagai konten website gitu aja deh</p>
					<h1>Heading Satu</h1>
					<h2>Heading Dua</h2>
					<h3>Heading TIga</h3>
				</div>
			</div>
		</div>
    </div>
</div>

</body>
</html>
    kalau mau nambahin tile sidebar bisa langsung nambah code ini :

    Code:
    			<div class="konten-sidebar">
				<h2 class="title">Judul Sidebar</h2>
				<div class="konten-wrapper">
					<p>Isi Konten</p>
				</div>
			</div>
    disela-sela code ini

    Code:
    <div class="sidebar">
.....
</div>
    terus kalau mau nambah tile di content pake code ini :

    Code:
    			<div class="isi-konten">
				<h2 class="title">Judul Konten</h2>
				<div class="konten-wrapper">
					<p> Konten itu seperti apa misalkan isinya itu gambar, tulisan, video dan lain-lain pokoknya bisa ditempatkan sebagai konten website gitu aja deh</p>
					<h1>Heading Satu</h1>
					<h2>Heading Dua</h2>
					<h3>Heading TIga</h3>
				</div>
			</div>
    disela-sela code ini :

    Code:
    <div class="konten">
....
</div>
    jadi hasilnya kayak gini :

    [​IMG]
     
    Ambrizal Suryadinata, Mar 11, 2014
    #7
  8. Jazz

    Jazz Windows Freak Staff Member

    Joined:
    Jan 6, 2014
    Messages:
    14,720
    kwkwkwk dh Bisa kog... :ketawa:
    Icha mau tanya lagi donk om...
    Bisa ga ini di Deploy ke Blog?
    :kagum:
    Sepertinya Icha harus Konsultasi Lebih lanjut mengenai ini...
     
    Jazz, Mar 11, 2014
    #8
  9. Ambrizal Suryadinata

    Ambrizal Suryadinata Saya Ganteng Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,592
    wohh bisa kok cuman biasanya codenya bisa nambah lagi tergantung dari penggunanya sendiri.
    saya aja udah coba di forum localhost saya :ketawa:
     
    Ambrizal Suryadinata, Mar 11, 2014
    #9
  10. stefanus aggasia

    stefanus aggasia Active Member

    Joined:
    Nov 8, 2013
    Messages:
    2,999
    iya ini aku udah datang keren ni sop sharenya tapi aku belom bisa praktekin ya laptop ku lagi dipake sama ortu:goodjob:
    nanti kalau udah bisa coba aku kabarin.
    ini aku balesnya pake android:ketawa:
     
    stefanus aggasia, Mar 11, 2014
    #10
  11. Ambrizal Suryadinata

    Ambrizal Suryadinata Saya Ganteng Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,592
    Saya dikamar terus gak pernah keluar dari kamar.
    #akurapopo :ketawa:
     
    Ambrizal Suryadinata, Mar 12, 2014
    #11
  12. Mayza MyZone

    Mayza MyZone Super Moderator Staff Member

    Joined:
    Dec 16, 2013
    Messages:
    4,945
    weh,, manteeppp... Raja CSS dateng ni... hahhhaa..

    Rep dah
     
    Mayza MyZone, Mar 12, 2014
    #12
  13. stefanus aggasia

    stefanus aggasia Active Member

    Joined:
    Nov 8, 2013
    Messages:
    2,999
    oh ya mas hasilnya good, aku suka sama desainya, tidak ada yang mau aku tanyakan semuanya sudah jelas + pertanyaan dari kak Icha menambah jelas semuanya :goodjob:
    aku tunggu css berikutnya ya :kagum:
    dan karena aku merasa puas maka aku berikan +rep buat anda:goodjob:
     
    stefanus aggasia, Mar 12, 2014
    #13
  14. Ambrizal Suryadinata

    Ambrizal Suryadinata Saya Ganteng Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,592
    CSS = Colek Saja Saya, jadi kalai digabungin sama nick saya jadi gini.
    Colek Saja Saya kan Saya SabunColek :ketawa:.

    Tengkyu :ketawa:
     
    Ambrizal Suryadinata, Mar 12, 2014
    #14
    • Like Like x 1
  15. Mayza MyZone

    Mayza MyZone Super Moderator Staff Member

    Joined:
    Dec 16, 2013
    Messages:
    4,945
    GUBARAAAKKKK :woa:
     
    Mayza MyZone, Mar 12, 2014
    #15
  16. kalera

    kalera New Member

    Joined:
    Apr 9, 2015
    Messages:
    1
    Om numpang tanya bagaimana cara nya supaya footer nya tidak berantakan,
    saya maunya ketika post sedikit footer tetap dibawah dan tile dan content memanjang otomatis kebawah,
    dan ketika pos banyak dan terbentuk scrool footer tidak tertimpa oleh tile dan content
    mohon dijawab om saya coba itu tapi kendala di footer
     
    kalera, Apr 9, 2015
    #16

Share This Page