Babble of Ibnoec: Design

Pengertian HTML ini merupakan artikel pelengkap dari artikel-artikel yang sudah ada pada blog ini, adapun tujuan saya memposting artikel ini supaya siswa-siswa saya dapat dengan mudah menyelesaikan tugas-tugasnya disekolah, mengexplorasi pengetahuannya mengenai pemrograman web yang mereka pelajari disekolah.

HTML atau Hypertext Marksup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web. Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni bahasa yang mengandung tanda (tag) tertentu yang digunakan untuk mengatur format tampilan suatu dokumen. Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < ) dan tanda lebih besar ( > ).

HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk mentransfer data atau document yang berformat HTML dari web server ke browser (Internet Explorer, Netscape Navigator, NeoPlanet, dll). Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan melihat halaman web.

Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor biasa. Namun sekarang ini di pasaran terdapat banyak sekali HTML authoring (software yang digunakan untuk membuat atau mendesain halaman web). Tetapi tanpa mengetahui dasar- dasarnya Anda tidak akan memperoleh hasil yang maksimal. Mengapa? Karena walaupun software-software tersebut semakin menawarkan kemudahan dalam membuat halaman web, tetapi biasanya seseorang masih perlu untuk mengedit halaman web tersebut secara manual. Terutama untuk halaman web yang sangat komplek.

Membuat tape under contructions menggunakan CSS.

5/01/2014 08:37:00 PM

•

Pada kesempatan kali ini saya ingin share mengenai tips mempercantik blog dengan cara menggunakan CSS, perlu untuk diketahui trick CSS ini bukan hasil pemikiran saya sendiri, melainkan trick CSS ini saya dapatkan dari CSSDeck.com, dan disini saya hanya ingin sekedar share mengenai trick ini. Menurut saya trick ini sangat menakjubkan, kerena hanya dengan serangkaian kode CSS kita bisa membuat tape under contruction layaknya seperti sebuah gambar yang di olah dengan menggunakan aplikasi photoshop, dulu jika ingin membuat sebuah gambar saya selalu menggunakan photoshop, tapi ternyata dengan serangkaian kode gambar itu bisa kita buat. Pada latihan CSS kali ini kita akan mengenal linear gradient yang mana penulisannya secara berulang. baiklah berikut screen shoot project kita kali ini :

Membuat tape under contructions menggunakan CSS.

HTML :

    <h1 class="tape">
        <span>Under Construction</span>
    </h1>

CSS :

body {
            background: #222;
            font-family:verdana,Tahoma,Arial;
            text-align:center;
        }
.tape {
font-size:3em;
            margin: 5% 0 0;
            height: 160px;
            background-image: -webkit-linear-gradient(0deg,#222,transparent,#222),linear-gradient(transparent 30px, #ff0 30px), repeating-linear-gradient(45deg, transparent, transparent 35px, #ff0 35px, #ff0 70px);
            background-image: -moz-linear-gradient(90deg,#222,transparent,#222),linear-gradient(transparent 30px, #ff0 30px), repeating-linear-gradient(45deg, transparent, transparent 35px, #ff0 35px, #ff0 70px);
            background-image: -o-linear-gradient(90deg,#222,transparent,#222),linear-gradient(transparent 30px, #ff0 30px), repeating-linear-gradient(45deg, transparent, transparent 35px, #ff0 35px, #ff0 70px);
            background-image: linear-gradient(90deg,#222,transparent,#222),linear-gradient(transparent 30px, #ff0 30px), repeating-linear-gradient(45deg, transparent, transparent 35px, #ff0 35px, #ff0 70px);
            background-size: auto,auto 132px,auto;
        }
        .tape span{
            cursor:default;
            color:#222;
            display:block;
            padding:1em;
white-space:nowrap;
        }

Demikian saja sharing saya kali ini, semoga bermanfaat untuk meningkatkan skill CSS kita semua, disini saya juga belajar, apa-apa yang saya bagikan saya pelajari terlebih dahulu, jika mnarik saya bagikan kembali dengan Anda semua para pembaca yang setia mengunjungi blog saya yang sangat kecil ini, terimakasih atas kunjungannya dan jangan lupa untuk berbagi jika artikel ini Anda rasa menarik, dan berikan komentar atau masukan yang bersifat membangun.

Sumber referensi : http://cssdeck.com/labs/under-construction-tape

Membuat infographic interactive menggunakan SVG CSS.

4/28/2014 03:24:00 AM

•

Membuat infographic interactive menggunakan SVG CSS. Latihan berikut ini merupakan lanjutan ulasan saya sebelumnya mengenai Membuat efect animasi pada border, mengapa saya katakan lanjutan...?, kerena masih ada hubungannya pada latihan ini yaitu mengenai penggunaan SVG. SVG adalah singkatan dari Scalable Vector Graphics, format ini tidak sama dengan file format PNG, JPG atau GIF, grafis vektor yang terkandung dalam file SVG benar-benar scalable untuk berbagai ukuran dan akan ditampilkan di setiap resolusi atau layar kerapatan tanpa kehilangan kualitas satu apapun. Dalam banyak kasus, file SVG juga akan jauh lebih kecil dalam ukuran file dan proses downloadnya lebih cepat. Berikut untuk screen shoot hasil latihan kali ini :

Demo Download Source

Untuk demonya silahkan click tombol demo di atas kemudian silahkan download sourchnya, o ya adapun halaman demo tutorial design ini saya hosting di google drive, jika tertarik untuk meng-host file blog Anda di google drive silahkan lihat artikel saya sebelumnya pada artikel Hosting gratis di google drive, bagi sobat yang juga berminat untuk membuat halaman demo tutorialnya di Google Drive insyaallah akan saya bahas pada ulasan berikutnya. Akhirkata demikian saja mengenai Membuat infographic interactive menggunakan SVG CSS, silahkan beri komentar Anda mengenai ulasan ini, dan share keteman Anda jika artikel ini menarik.

Sumber referensi : Interactive Infographic

Tips Desain Website Terbaik | Bagaimana Desain Website Terbaik Untuk Bisnis Anda.

4/28/2014 01:49:00 AM

•

Tips Desain Website Terbaik | Bagaimana Desain Website Terbaik Untuk Bisnis Anda, alasan lain orang semakin beralih ke Internet adalah bahwa pemasaran dilakukan dengan memberikan informasi, dan bukan oleh persuasi. Semakin banyak orang lebih memilih untuk melakukan bisnis dan membuat pilihan dengan cara ini. Sementara pemasaran bisnis Anda mungkin menarik perhatian orang dan membuat mereka untuk mengambil tindakan, desain web Anda berulang kali akan memutuskan apakah atau tidak mereka melakukan pembelian. Jika situs Web Anda sulit, tidak profesional atau membingungkan, itulah kesan para tamu akan memiliki bisnis Anda. Desain yang baik memberikan kesempatan apapun untuk prestasi dari situs Anda. Jadi, apakah Anda sedang merancang situs web Anda sendiri dari awal atau mengontrak seorang desainer untuk menciptakan sebuah web, Anda harus berakhir di tempat yang sama, dengan sebuah website yang mendukung bisnis Anda. Berikut adalah beberapa tips desain website untuk membuat website terbaik untuk bisnis Anda.

1. Attention-Grabbing Headlines | Hal pertama yang orang lihat ketika mereka mengunjungi situs Anda harus menjadi headline yang menarik yang menggambarkan manfaat yang paling penting produk atau penawaran layanan. Tetapi dalam dunia dibombardir oleh dalam jumlah banyak gangguan telah menjadi semakin sulit untuk menarik perhatian dan memastikan pesan Anda terdengar. Apa gunanya kunci dari konten Anda? Itulah yang headline atau judul harus mencerminkan. Ketika Anda membuatnya terlalu kreatif Anda dapat kehilangan poin utama dari konten Anda dan kehilangan pembaca Anda sepenuhnya. Cobalah untuk menyeimbangkan keduanya dengan memberikan judul yang cukup karakter untuk menarik perhatian pembaca.

2. Clean Layout | Pengguna internet rata-rata hanya memindai melalui konten bukannya membaca semuanya. Atur jarak paragraf dan minimal panjangnya. Memformat teks dalam kolom Sejalan dengan gaya surat kabar adalah cara yang baik untuk membuat teks lebih mudah untuk dipindai. Pastikan semuanya tampak bersih dan mudah dinavigasi. Sebuah desain web merupakan wajah bisnis online di internet. Ini memberikan bisnis individualitas unik di antara jutaan situs web yang ada didunia maya. Kesederhanaan dalam mendesain web berarti bagaimana mudah dan efektif situs web Anda dapat mengkomunikasikan pesan perusahaan.

3. Brand Building | Setiap citra yang Anda gunakan untuk menarik orang ke situs web Anda ( atau toko ) dianggap sebagai merek visual. Pertama, mewujudkan keunggulan pemasaran visual. Logo atau fotolah yang pertama akan menarik perhatian mata ke brand Anda, website, atau selebaran. Jika terlihat tidak profesional atau tidak memiliki daya tarik, Anda akan segera kehilangan perhatian pemirsa. Pemilihan palet warna yang baik sangat penting dalam branding. Warna tidak hanya estetika - merangsang banyak perasaan dan disertai dengan asosiasi bawah sadar untuk berbagai hal dan karakteristik. Juga, menanamkan merek Anda dengan sedikit karakter dapat membantu Anda menentukan apa singkatan dari brand atau merek yang Anda miliki. Fokuslah untuk membangun dan memelihara situs web untuk pembaca Anda, pengunjung, atau klien.

4. Social Media Integration | Ini menjadi rutinitas untuk menemukan ikon media sosial di website bisnis yang memiliki pranala ke jaringan sosial di mana perusahaan memiliki kehadiran. Facebook, Twitter, Pinterest, LinkedIn, dan Google + semua situs media sosial di mana terdapat banyak klien potensial Anda menghabiskan banyak waktu, dan mencari jawaban atau rekomendasi. Dengan menggabungkan media sosial dengan situs web Anda, Anda membuka lebih banyak cara untuk prospek untuk menemukan dan terlibat dengan Anda. Media sosial mendorong keterlibatan dan membantu membangun hubungan yang kuat dengan pengunjung Anda sehingga mereka merasa seperti bagian dari tim Anda. Menjadi bagian dari sesuatu yang terasa besar, dan itu juga merupakan karakteristik penting dari perilaku manusia.

5. User-Friendly Navigation | Navigasi adalah salah satu kunci penting untuk kegunaan web. Beberapa orang akan mengatakan itu adalah kunci yang paling penting. Pengguna harus dapat menemukan apa yang mereka cari dengan cepat dan dengan minimal energi. Anda perlu memastikan navigasi website Anda menawarkan pengalaman positif dari sudut pandang kegunaan. Dengan kata lain Anda harus merancang navigasi Anda dalam pendekatan yang masuk akal untuk pengguna situs.

Demikian saja ulasan kali ini, terimakasih atas kunjungannya, semoga bermanfaat, berikan interaksi Anda terhadap artikel ini baik itu sharing ke teman-teman Anda di akun sosial media yang Anda miliki dengan cara click ikon share pada akhir artikel ini, atau dengan cara memberikan komentar berupa kritik ataupun saran yang bersifat membangun.

3 Hal yang perlu dipertimbangkan untuk pengembangan web yang efektif.

4/27/2014 08:06:00 PM

•

3 Hal yang perlu dipertimbangkan untuk pengembangan web yang efektif. Di era modern kemajuan teknologi, pengembangan website adalah salah satu keahlian yang paling dihormati sebuah perusahaan konsultan IT. Pengembangan Web dapat dianggap sebagai ilmu pengetahuan serta seni. Ketika Anda menyatukan keahlian teknis dari tim untuk menciptakan jenis situs web yang mereka butuhkan, itu adalah ilmu, namun, hal itu juga dapat dianggap sebagai seni.

Dari manajemen persediaan, pemrosesan pembayaran, akuntansi, manajemen hubungan pelanggan dan dukungan pelanggan, setiap jenis bisnis meliputi beberapa proses yang harus aktif dan bekerja setelah transaksi konsumen mulai dan selesai. Tantangan nyata dari pengembangan web adalah ketika Anda harus memastikan proses cepat dan aman dari semua fungsi tersebut secara online. Sebuah website memainkan peran penting dalam pengelolaan kegiatan bisnis Anda. Dalam rangka untuk memulai proses kelancaran masing-masing fungsi internal, perusahaan harus mengembangkan strategi untuk mengintegrasikan proses bisnis dengan teknologi web.

Pengembangan web telah menjadi relatif mudah dengan pengenalan alat pengembangan seperti Joomla dan Wordpress, yang telah membuat lebih mudah untuk membuat website. Anda tidak perlu memiliki banyak pengetahuan teknis untuk menggunakan alat ini untuk mengembangkan situs Anda sendiri. Proses pengembangan website biasanya terlibat mencakup tahapan tertentu disebut sebagai desain, pengembangan, pengujian dan implementasi. Tergantung pada ukuran dan sifat proyek Anda, fase ini bekerja dengan cara sekuensial dan dapat mengambil bulan untuk menyelesaikan. Saat ini, proses pembangunan web digambarkan oleh kegiatan dan proses yang dilakukan dengan cepat dan lebih secara bersamaan, bukan berurutan.

Ada 3 hal yang perlu dipertimbangkan untuk pengembangan web yang efektif yaitu sebagai berikut :

1. Fokuskan pengguna pada design. Ranking website Anda di mesin pencari seperti Google, Bing, dan Yahoo menentukan keberhasilan situs Web Anda. Waktu yang dihabiskan pengguna di situs web Anda adalah salah satu faktor kunci dalam algoritma mesin pencari yang menentukan peringkat website Anda. Ada dua aspek dari sebuah situs web yang meyakinkan pengguna untuk tinggal lebih lama di situs Anda, desain antarmuka pengguna dan relevansi dan kebermaknaan konten. Untuk mencapai peringkat yang lebih tinggi, web designer harus mengadopsi fokus pengguna. Hal ini melibatkan menganalisis perilaku pengguna, memahami apa yang menarik mereka yang paling dan mempertahankan kepentingan mereka.

2. Hirarki datar manajemen proyek. Sebuah komunikasi terbuka antara masing-masing dan setiap anggota proyek, terutama antara konsumen dan tim pengembangan sangat penting untuk menjamin keberhasilan pengembangan situs web. Untuk memfasilitasi komunikasi yang baik, sebuah organisasi harus memiliki struktur manajemen proyek datar yang lebih seperti jaringan sosial, bukan hirarki top-down. Hal ini akan memicu pengembang yang berbeda dan desainer untuk bekerja sama untuk mencapai hasil yang diinginkan.

3. Pengujian yang tepat dari komponen eksternal. Internet adalah jaringan global komputer yang harus bekerja dengan baik dengan satu sama lain untuk mencapai sasaran mutu. Hal ini tidak perlu bahwa apa pun yang bekerja dalam lingkungan pengembangan juga akan berfungsi jika situs tersebut dirilis. Lingkungan prototipe membantu Anda menggunakan kawasan lindung dari jaringan yang sama di mana website akan akhirnya "go live ", sehingga untuk menyelesaikan pengembangan web dan pengujian. Share artikel ini jika menarik atau beri komentar berupa kritik, saran, atau masukan yang membangun, terimakasih atas kunjungannya, semoga bermanfaat.

Hosting gratis di google drive.

4/26/2014 06:06:00 AM

•

Hosting gratis di google drive yang dimaksud disini adalah kita bisa menyimpan file berupa gambar, video, CSS, HTML, Javascript, dan masih banyak lagi file-file lainnya baik itu video maupun audio, dan layanan ini merupaan gratis alias tidak berbayar. Adapun blog ini juga menggunakan hosting gratis dari google drive, yang mana file yang saya host disini berupa file gambar, css untuk demo tutorial, file javascript dan masih banyak file lainnya yang saya upload disini. Hosting menggunakan google drive merupakan yang terbaik selain hosting dengan google code, saya sangat merekomendasikan untuk hosting menggunakan google drive kerena cara uploadnya yang lebih mudah dibandingkan dengan google code, performa google drive juga tidak ada kalahnya dengan google code.

Prosedur resmi untuk hosting website di Google Drive melibatkan beberapa langkah, Anda perlu meng-upload file website Anda ke folder di dalam Google Drive, mengatur hak akses berbagi folder itu sebagai publik, kerena jika Anda tidak merubah hak aksesnya menjadi publik maka file yang sudah kita upload tidak dapat dipakai di web yang kita miliki. Proses ini mungkin tidak rumit tapi sedikit memakan waktu. Ada cara yang lebih baik meskipun yang akan membiarkan Anda mempublikasikan situs Anda ke Google Drive dalam satu langkah dari komputer Anda ke Google Drive dalam satu langkah dengan cara menempatkan semua aset website Anda dalam file zip.

Berikut langkah-langkah untuk melakukan hosting gratis di google drive :

1. Silahkan masuk ke https://drive.google.com/.
2. Buat folder file yang akan Anda download dengan mengclick tombol buat yang ada pada sudut kiri atas. Setelah selesai membuat folder yang diinginkan lanjut ke langkah 3.
3. Click icon upload pada sudut kiri atas pada google drive.
4. Setelah click icon upload maka akan muncul window baru, pilih file yang akan Anda upload, tunggu proses uploadnya hingga selesai.

Cara menggunakan file yang sudah di upload di google drive dan cara menerapkannya pada blog.

Setelah melewati beberapa langkah hosting gratis di google drive diatas, click kanan pada folder file yang akan digunakan, pilih bagikan >> bagikan, lalu copy url yang di block dengan warna biru dan pastekan pada notapad dulu untuk mengambil id foldernya nanti, langkah selanjutnya click ubah, pada opsi visibilitas pilih Publik di web, untuk lebih jelasnya lihat gambar dibawah, jika sudah click simpan lalu click selesai.

Langkah selanjutnya, agar script atau gambar yang di upload bisa berjalan di blog atau web Anda gunakan url berikut ini :

https://googledrive.com/host/0BzbBBDkeg59vc2hJMFY0cy1QTnM/fav.ico

Keterangan :
Ganti kode yang berwarna merah dengan id folder yang sudah di pastekan pada notapad tadi, dan tulisan yang berwarna biru adalah nama file yang akan Anda gunakan atau nama file yang sudah Anda upload, demikian saja yang dapat saya sampaikan mengenai Hosting gratis di google drive, jika ada yang ingin ditanyakan silahkan bertanya pada kotak komentar yang sudah disediakan, akhir kata terimakasih atas kunjungannya, semoga bermanfaat.

Mengganti warna selector block menggunakan css.

4/22/2014 03:00:00 AM

•

Mengganti warna selector block menggunakan css ini tidak berpengaruh terhadap SEO blog kerena disini kita tidak berbicara masalah seo dan tips ini tidak untuk SEO Blog, melainkan untuk mempercantik tampilan blog dengan cara merubah warna selector blocknya dengan menggunakan CSS, secara defult warna selector block berwarna biru, untuk merubahnya diperlukan sedikit modifikasi dengan cara menambahkan kode CSS kedalam template blog atau web, sebenarnya trick ini sudah banyak diposting oleh sahabat blogger lainnya namun tak ada salahnya saya membagikannya pada blog ini. Baiklah berikut langkah-langkah cara mengganti warna selector block menggunakan CSS.

Langkah pertama yang perlu kita lakukan adalah login terlebih dahulu keblog yang kita miliki, ini sudah tentu harus kita lakukan kerena bagaimana caranya untuk mengedit tampilan blog tanpa login, ga mungkinkan...??? hehhe..., langkah selanjutnya setelah login pergi ke template, edit html, lalu cari kode ]]></b:skin> lalu tempatkan CSS berikut ini tepat di atasnya :

::selection {background:#fe57a1; color:#ffffff}
::-moz-selection {background:#fe57a1; color:#ffffff}
::-webkit-selection {background:#fe57a1; color:#ffffff}

Keterangan :
Kode #fe57a1 diatas bisa kita ganti dengan kode warna lainnya, yaitu warna backgound atau latar yang akan berubah saat teks di Blok, silahkan pilih warnanya sesuai selera.
Kode #fffff diatas bisa juga kita ganti dengan kode warna lainnya yang sesuai dengan selera, fungsinya yaitu untuk merubah warna tulisan pada saat tulisan di blok.

Nah sampailah kita kepuncak langkah yang sesungguhnya apabila langkah-langkah diatas sudah selesai dilakukan , yang mana langkah ini adalah penentu hasil akhir dari semua yang sudah kita lakukan, yaitu untuk meng-click save, kerena pekerjaan kita akan sia-sia begitu saja tanpa melakukan save hehe...., ya demikian saja yang dapat saya sampaikan mengenai cara mengganti warna text dan warna background pada blog apabila diseleksi, jika ada yang ingin ditanyakan silahkan sampaikan pertanyaan Anda pada kotak komentar yang telah disediakan, jika ingin berbagi artikel ini di akun sosial medianya sangat dipersilahkan, akhir kata terimakasih banyak atas kunjungannya.

Membuat tombol slide menggunakan CSS.

4/21/2014 12:04:00 AM

•

Membuat tombol slide menggunakan CSS. Latihan CSS berikut ini sangat mudah dan begitu simpel, hanya dengan menggunakan sedikit CSS dan kode HTML kita sudah memiliki satu buah tombol dengan efek slide layaknya menggunakan javascript atau sejenisnya, latihan CSS berikut ini saya dapatkan dari situs WDC, adapun membuat tombol slide ini murni menggunakan css, atau tanpa menggunakan script lain-lain. Berikut screen shoot dan demo tombol slide menggunakan css.

HTML :

<a href="#" class="btn-slide">
<span class="circle"><span><b>→</b></span></span>
<span class="title">Slide to Unlock</span>
<span class="title-hover">Unlocked!</span>
</a>

CSS :

.btn-slide {font-family:arial;font-weight:bold;color:#333;
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0 20px;
    -moz-box-shadow:0 1px 0 #fff;-ms-box-shadow:0 1.3px 0 #fff;-o-box-shadow:0 1.3px 0 #fff;-webkit-box-shadow:0 1.3px 0 #fff;box-shadow:0 1.3px 0 #fff;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
transition: .5s;
-webkit-transition: .5s;
border: 1px solid rgba(0,0,0,0.15);
}
.btn-slide:hover {
    background-color: #b6b6b6;-moz-box-shadow:0 1px 0 #fff;-ms-box-shadow:0 1.3px 0 #fff;-o-box-shadow:0 1.3px 0 #fff;-webkit-box-shadow:0 1.3px 0 #fff;box-shadow:0 1.3px 0 #fff;
}
    .btn-slide:hover span.circle {
      left: 100%;
      margin-left: -45px;
      background-color: #b0b0b0;-moz-box-shadow:0 1px 0 #fff;-ms-box-shadow:0 1.3px 0 #fff;-o-box-shadow:0 1.3px 0 #fff;-webkit-box-shadow:0 1.3px 0 #fff;box-shadow:0 1.3px 0 #fff;
    border: 1px solid rgba(0,0,0,0.15);
    }
    .btn-slide:hover span.title {
      left: 40px;
      opacity: 0;
    }
    .btn-slide:hover span.title-hover {
      opacity: 1;
      left: 40px;
    }
.btn-slide span.circle {
    display: block;
    background-color:#b0b0b0;-moz-box-shadow:0 1px 0 #fff;-ms-box-shadow:0 1.3px 0 #fff;-o-box-shadow:0 1.3px 0 #fff;-webkit-box-shadow:0 1.3px 0 #fff;box-shadow:0 1.3px 0 #fff;
    border: 1px solid rgba(0,0,0,0.15);
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    -webkit-transition: .5s;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
.btn-slide span.title,
.btn-slide span.title-hover {
    position: absolute;
    left: 80px;
    transition: .5s;
    -webkit-transition: .5s;
}
.btn-slide span.title-hover {
    left: 80px;
    opacity: 0;
}

Membuat text 3D menggunakan CSS.

4/19/2014 09:49:00 PM

•

Membuat text 3D menggunakan CSS atau variasi text menggunakan kode css atau lebih dikenal dengan Typhography yang biasanya digunakan oleh sobat-sobat blogger yang hobby dengan bloggazine, mereka menggunakan text 3D menggunakan css ini untuk mempercantik tampilan artikel den juga untuk mempercantik tampilan blog, pada latihan CSS kali ini kita akan menerapkan text shadow pada text, baik lah kita langsung saja berikut screen shoot untuk hasil akhir dari latihan CSS pada kesempatan kali ini, untuk lebih lengkapnya bisa lihat pada demo.

CSS :

.Three-Dee{
font-family:Arial, sans-serif;
line-height: 1em;
color:#ffffff;
font-weight:bold;font-size:134px;
text-shadow:0px 0px 0 rgb(231,231,231),1px 1px 0 rgb(216,216,216),2px 2px 0 rgb(202,202,202),3px 3px 0 rgb(187,187,187),4px 4px 0 rgb(173,173,173),5px 5px 0 rgb(158,158,158), 6px 6px 0 rgb(144,144,144),7px 7px 6px rgba(0,0,0,0.6),7px 7px 1px rgba(0,0,0,0.5),0px 0px 6px rgba(0,0,0,.2);}

HTML :

<div class="Three-Dee">3D CSS Text</div>

Demikian saja yang dapat saya sampaikan mengenai Membuat text 3D menggunakan CSS, jika terdapat kekurangan dalam penyampaian dan penulisan mohon dimaafkan, jika ada yang ingin menambahkan sangat dipersilahkan, dan jika ada pertanyaan silahkan bertanya pada kotak komentar yang telah disediakan, jika artikel ini menarik silahkan share keteman-teman Anda melalui tombol share sosial media yang telah disediakan, akhir kata terimakasih banyak atas kunjungannya semoga bermanfaat.

Membuat kotak kontainer responsif dengan CSS.

4/18/2014 07:25:00 PM

•

Dengan meningkatnya penggunaan smartphone dan tablet, permintaan dan manfaat dari desain web responsif menjadi sangat penting dan semakin meningkat. Sebuah desain web responsif berarti desain yang bekerja secara fleksibel pada lebar berbagai resolusi layar, dari smartphone sampai ke komputer desktop. Sebagai pengembang web yang masih terhitung pemula seperti saya, hal ini membuat saya penasaran untuk belajar bagaimana desain responsif dapat diciptakan. Untungnya, kurva belajar tidak rumit sama sekali. Bahkan, ada banyak kerangka desain responsif dapat kita gunakan untuk membantu. Kerangka desain gratis populer disebut Bootstrap, dirilis di bawah lisensi MIT yang telah menjadi favorit di antara banyak pengembang dan merupakan pilihan yang perlu dipertimbangkan jika kita perlu untuk merancang sebuah situs web sepenuhnya responsif dari awal. Untuk tujuan pasal ini, saya ingin berbagi tips bagaimana untuk membuat kotak kontainer yang fleksibel dan merespon secara dinamis ke ruang horisontal tanpa JavaScript, full CSS.

Membuat kotak kontainer responsif dengan CSS.

Demo

HTML :

<div>Container 1</div>
<div>Container 2</div>
<div>Container 3</div>

CSS :

div{
   float: left;
   width: 33.333%;
   height: 100px;
   }

@media screen and (max-width: 800px){
   div{
   float: none;
   width: 100%;}
   }

Seperti yang terlihat di situs demo yang saya buat ada tiga kontainer berukuran sama, Jika lebar viewport 800 piksel atau kurang, kontainer akan disesuaikan dengan lebar 100 %; ideal untuk smartphone. @media screen and (max-width: 800px) adalah permintaan media yang berfungsi untuk menyesuaikan tampilan sesuai dengan ukuran pixel viewport yang menampilkannya. Hal ini memungkinkan kode CSS tertentu yang akan terbatas pada beberapa jenis perangkat atau resolusi. Media query tidak didukung di IE 8 dan sebelumnya, untuk mendukung browser lama, kita harus menggunakan sebuah perpustakaan JavaScript seperti Respond.js. Demikian saja yang dapat saya sampaikan pada kesempatan yang sangat singkat ini, semoga bermanfaat dan terimakasih banyak atas kunjungannya.

Referensi : http://blog.eukhost.com/webhosting/creating-responsive-html-containers-css/

Membuat jam digital menggunakan CSS dan Javascript.

4/06/2014 09:28:00 PM

•

Tutorial kali ini hanyalah sebagai latihan saja kerena besar kemungkinan akan mempengaruhi loading blog jika diterap pada blog, sebenarnya tutorial ini saya dapatkan dari situs tetangga waktu blogwalking dan membuat saya merasa tertarik untuk memposting ulangnya di blog saya kerena pada CSS tutorial ini menggunakan pseudo element dan class seperti yang telah saya share pada artikel sebelumnya yaitu pada artikel Mengenal Pseudo Elemen pada CSS dan Mengenal Pseudo Class pada CSS, berikut ini adalah screen shoot dari hasil akhir latihan CSS dan Javascript kita kali ini, lihat juga demonya.

Membuat jam digital menggunakan CSS dan Javascript.

Langkah yang pertama kita membuat markup HTML seperti dibawah :

<div id="clock" class="light">
       <div class="display">
       <div class="weekdays"></div>
       <div class="ampm"></div>
       <div class="alarm"></div>
       <div class="digits"></div>
</div>
</div>

Pada latihan kali ini ada dua jenis tema, dark dan light, jadi Sobat tinggal pilih yang mana, berikut cssnya yang sudah saya gabungkan untuk kedua tema tersebut, kerena kalau dipisahkan cukup sulit untuk menjelaskannya.

/*-------------------------
    The clocks
--------------------------*/
#clock{
    width:370px;
    padding:40px;
    margin:200px auto 60px;
    position:relative;
}
#clock:after{
    content:'';
    position:absolute;
    width:400px;
    height:20px;
    border-radius:100%;
    left:50%;
    margin-left:-200px;
    bottom:2px;
    z-index:-1;
}
#clock .display{
    text-align:center;
    padding: 40px 20px 20px;
    border-radius:6px;
    position:relative;
    height: 54px;
}
/*-------------------------
    Light color theme
--------------------------*/
#clock.light{
    background-color:#f3f3f3;
    color:#272e38;
}
#clock.light:after{
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
}
#clock.light .digits div span{
    background-color:#272e38;
    border-color:#272e38;
}
#clock.light .digits div.dots:before,
#clock.light .digits div.dots:after{
    background-color:#272e38;
}
#clock.light .alarm{
    background:url('https://googledrive.com/host/0B3jLde10mzwDRW9tRmhWYXZKVkU/alarm_light.jpg');
}
#clock.light .display{
    background-color:#dddddd;
    box-shadow:0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #fafafa;
}
/*-------------------------
    Dark color theme
--------------------------*/
#clock.dark{
    background-color:#272e38;
    color:#cacaca;
}
#clock.dark:after{
    box-shadow:0 4px 10px rgba(0,0,0,0.3);
}
#clock.dark .digits div span{
    background-color:#cacaca;
    border-color:#cacaca;
}
#clock.dark .alarm{
    background:url('https://googledrive.com/host/0B3jLde10mzwDRW9tRmhWYXZKVkU/alarm_dark.jpg');
}
#clock.dark .display{
    background-color:#0f1620;
    box-shadow:0 1px 1px rgba(0,0,0,0.08) inset, 0 1px 1px #2d3642;
}
#clock.dark .digits div.dots:before,
#clock.dark .digits div.dots:after{
    background-color:#cacaca;
}
/*-------------------------
    The Digits
--------------------------*/
#clock .digits div{
    text-align:left;
    position:relative;
    width: 28px;
    height:50px;
    display:inline-block;
    margin:0 4px;
}
#clock .digits div span{
    opacity:0;
    position:absolute;
    -webkit-transition:0.25s;
    -moz-transition:0.25s;
    transition:0.25s;
}
#clock .digits div span:before,
#clock .digits div span:after{
    content:'';
    position:absolute;
    width:0;
    height:0;
    border:5px solid transparent;
}
#clock .digits .d1{            height:5px;width:16px;top:0;left:6px;}
#clock .digits .d1:before{    border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;}
#clock .digits .d1:after{    border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;}
#clock .digits .d2{            height:5px;width:16px;top:24px;left:6px;}
#clock .digits .d2:before{    border-width:3px 4px 2px;border-right-color:inherit;left:-8px;}
#clock .digits .d2:after{    border-width:3px 4px 2px;border-left-color:inherit;right:-8px;}
#clock .digits .d3{            height:5px;width:16px;top:48px;left:6px;}
#clock .digits .d3:before{    border-width:5px 5px 0 0;border-right-color:inherit;left:-5px;}
#clock .digits .d3:after{    border-width:5px 0 0 5px;border-left-color:inherit;right:-5px;}
#clock .digits .d4{            width:5px;height:14px;top:7px;left:0;}
#clock .digits .d4:before{    border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}
#clock .digits .d4:after{    border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}
#clock .digits .d5{            width:5px;height:14px;top:7px;right:0;}
#clock .digits .d5:before{    border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}
#clock .digits .d5:after{    border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}
#clock .digits .d6{            width:5px;height:14px;top:32px;left:0;}
#clock .digits .d6:before{    border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;}
#clock .digits .d6:after{    border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;}
#clock .digits .d7{            width:5px;height:14px;top:32px;right:0;}
#clock .digits .d7:before{    border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;}
#clock .digits .d7:after{    border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;}
/* 1 */
#clock .digits div.one .d5,
#clock .digits div.one .d7{
    opacity:1;
}
/* 2 */
#clock .digits div.two .d1,
#clock .digits div.two .d5,
#clock .digits div.two .d2,
#clock .digits div.two .d6,
#clock .digits div.two .d3{
    opacity:1;
}
/* 3 */
#clock .digits div.three .d1,
#clock .digits div.three .d5,
#clock .digits div.three .d2,
#clock .digits div.three .d7,
#clock .digits div.three .d3{
    opacity:1;
}
/* 4 */
#clock .digits div.four .d5,
#clock .digits div.four .d2,
#clock .digits div.four .d4,
#clock .digits div.four .d7{
    opacity:1;
}
/* 5 */
#clock .digits div.five .d1,
#clock .digits div.five .d2,
#clock .digits div.five .d4,
#clock .digits div.five .d3,
#clock .digits div.five .d7{
    opacity:1;
}
/* 6 */
#clock .digits div.six .d1,
#clock .digits div.six .d2,
#clock .digits div.six .d4,
#clock .digits div.six .d3,
#clock .digits div.six .d6,
#clock .digits div.six .d7{
    opacity:1;
}
/* 7 */
#clock .digits div.seven .d1,
#clock .digits div.seven .d5,
#clock .digits div.seven .d7{
    opacity:1;
}
/* 8 */
#clock .digits div.eight .d1,
#clock .digits div.eight .d2,
#clock .digits div.eight .d3,
#clock .digits div.eight .d4,
#clock .digits div.eight .d5,
#clock .digits div.eight .d6,
#clock .digits div.eight .d7{
    opacity:1;
}
/* 9 */
#clock .digits div.nine .d1,
#clock .digits div.nine .d2,
#clock .digits div.nine .d3,
#clock .digits div.nine .d4,
#clock .digits div.nine .d5,
#clock .digits div.nine .d7{
    opacity:1;
}
/* 0 */
#clock .digits div.zero .d1,
#clock .digits div.zero .d3,
#clock .digits div.zero .d4,
#clock .digits div.zero .d5,
#clock .digits div.zero .d6,
#clock .digits div.zero .d7{
    opacity:1;
}
/* The dots */
#clock .digits div.dots{
    width:5px;
}
#clock .digits div.dots:before,
#clock .digits div.dots:after{
    width:5px;
    height:5px;
    content:'';
    position:absolute;
    left:0;
    top:14px;
}
#clock .digits div.dots:after{
    top:34px;
}
/*-------------------------
    The Alarm
--------------------------*/
#clock .alarm{
    width:16px;
    height:16px;
    bottom:20px;
    background:url('https://googledrive.com/host/0B3jLde10mzwDRW9tRmhWYXZKVkU/alarm_light.jpg');
    position:absolute;
    opacity:0.2;
}
#clock .alarm.active{
    opacity:1;
}
/*-------------------------
    Weekdays
--------------------------*/
#clock .weekdays{
    font-size:12px;
    position:absolute;
    width:100%;
    top:10px;
    left:0;
    text-align:center;
}
#clock .weekdays span{
    opacity:0.2;
    padding:0 10px;
}
#clock .weekdays span.active{
    opacity:1;
}
/*-------------------------
        AM/PM
--------------------------*/
#clock .ampm{
    position:absolute;
    bottom:20px;
    right:20px;
    font-size:12px;
}
/*-------------------------
        Button
--------------------------*/
.button-holder{
    text-align:center;
    padding-bottom:100px;
}
a.button{
    background-color:#f6a7b3;
    background-image:-webkit-linear-gradient(top, #f6a7b3, #f0a3af);
    background-image:-moz-linear-gradient(top, #f6a7b3, #f0a3af);
    background-image:linear-gradient(top, #f6a7b3, #f0a3af);
    border:1px solid #eb9ba7;
    border-radius:2px;
    box-shadow:0 2px 2px #ccc;
    color:#fff;
    text-decoration: none !important;
    padding:15px 20px;
    display:inline-block;
    cursor:pointer;
}
a.button:hover{
    opacity:0.9;
}

Setelah memasukkan CSS selanjutnya memasukkan javascript berikut,

$(function(){

    // Cache some selectors

    var clock = $('#clock'),
        alarm = clock.find('.alarm'),
        ampm = clock.find('.ampm');

    // Map digits to their names (this will be an array)
    var digit_to_name = 'zero one two three four five six seven eight nine'.split(' ');

    // This object will hold the digit elements
    var digits = {};

    // Positions for the hours, minutes, and seconds
    var positions = [
        'h1', 'h2', ':', 'm1', 'm2', ':', 's1', 's2'
    ];

    // Generate the digits with the needed markup,
    // and add them to the clock

    var digit_holder = clock.find('.digits');

    $.each(positions, function(){

        if(this == ':'){
            digit_holder.append('<div class="dots">');
        }
        else{

            var pos = $('<div>');

            for(var i=1; i<8; i++){
                pos.append('<span class="d' + i + '">');
            }

            // Set the digits as key:value pairs in the digits object
            digits[this] = pos;

            // Add the digit elements to the page
            digit_holder.append(pos);
        }

    });

    // Add the weekday names

    var weekday_names = 'MON TUE WED THU FRI SAT SUN'.split(' '),
        weekday_holder = clock.find('.weekdays');

    $.each(weekday_names, function(){
        weekday_holder.append('<span>' + this + '</span>');
    });

    var weekdays = clock.find('.weekdays span');

    // Run a timer every second and update the clock

    (function update_time(){

        // Use moment.js to output the current time as a string
        // hh is for the hours in 12-hour format,
        // mm - minutes, ss-seconds (all with leading zeroes),
        // d is for day of week and A is for AM/PM

        var now = moment().format("hhmmssdA");

        digits.h1.attr('class', digit_to_name[now[0]]);
        digits.h2.attr('class', digit_to_name[now[1]]);
        digits.m1.attr('class', digit_to_name[now[2]]);
        digits.m2.attr('class', digit_to_name[now[3]]);
        digits.s1.attr('class', digit_to_name[now[4]]);
        digits.s2.attr('class', digit_to_name[now[5]]);

        // The library returns Sunday as the first day of the week.
        // Stupid, I know. Lets shift all the days one position down,
        // and make Sunday last

        var dow = now[6];
        dow--;

        // Sunday!
        if(dow < 0){
            // Make it last
            dow = 6;
        }

        // Mark the active day of the week
        weekdays.removeClass('active').eq(dow).addClass('active');

        // Set the am/pm text:
        ampm.text(now[7]+now[8]);

        // Schedule this function to be run again in 1 sec
        setTimeout(update_time, 1000);

    })();

    // Switch the theme

    $('a.button').click(function(){
        clock.toggleClass('light dark');
    });

});

Dan url script berikut ini yang sudah saya upload di google drive :

<script type="text/javascript" src="https://googledrive.com/host/0B3jLde10mzwDMkVwR0JuOWIwWTQ/jquery.min.js"/>
<script type="text/javascript" src="https://googledrive.com/host/0B3jLde10mzwDMkVwR0JuOWIwWTQ/moment.min.js"/>

Demikian saja untuk latihan CSS dan javascript, semoga bermanfaat dan terimakasih banyak atas kunjungannya.
Sumber referensi : http://tutorialzine.com/2013/06/digital-clock/

Mengatur spasi menggunakan CSS.

4/05/2014 02:05:00 PM

•

Pada artikel kali ini saya mengulas tentang cara mengatus spasi antara karakter atau huruf, mengatur jarak atau spasi antara kata, dan mengatur jarak baris kalimat, pada artikel ini kita akan mengenal letter-spacing yang berfungsi untuk mengatur spasi atau jarak antar karakter / huruf, kemudian word-spacing yang berfungsi untuk mengatur jarak antara kata yang terdapat pada artikel, dan yang terakhir kita mengenal line-height yang berfungsi untuk mengatur jarak antara baris pada kalimat yang terdapat pada artikel blog. Baiklah berikut ini contoh penerapan kode css untuk mengatur jarak antara, huruf, kata, dan kalimat.

Contoh penggunaan letter-spacing

Mengatur jarak antara huruf menggunakan letter-spacing

Bentuk penerapan atau contoh penulisan kode css letter-spacing seperti contoh diatas :

letter-spacing:10.6pt;

Contoh penggunaan word-spacing

Mengatur jarak antara kata menggunakan word-spacing

Bentuk penerapan atau contoh penulisan kode css word-spacing seperti contoh diatas :

word-spacing: 20.2pt;

Contoh penggunaan line-height

Mengatur jarak antara baris menggunakan line-height
Mengatur jarak antara kata menggunakan word-spacing
Mengatur jarak antara huruf menggunakan letter-spacing.

Bentuk penerapan atau contoh penulisan kode css line-height seperti contoh diatas :

line-height: 3.2;

Demikian saja ulasan singkat saya pada kesempatan kali ini, semoga bermanfaat dan terimakasih atas kunjungannya, jika Anda rasa artikel ini menarik silahkan berbagi keteman-teman Anda melalui tombol sosial media yang telah saya sediakan dibawah, jika memiliki banyak waktu baca juga artikel lainnya pada lebel Desain.

Mengenal Pseudo Class pada CSS.

4/05/2014 09:28:00 AM

•

Mengenal Pseudo Class pada CSS ini merupakan artikel lanjutan dari artikel sebelumnya yaitu Mengenal Pseudo Element, mungkin sobat sudah sering mendengar kata pseudo ataupun mungkin sudah sangat paham dengan pseudo dan sudah sering menggunakannya, disini saya membuat artikel ini hanya untuk melengkapi dari artikel saya mengenai pseudo element, pseudo class digunakan untuk memberikan efek terhadap selektor tertentu. Sebagai contoh, satu tautan (link) bisa berubah-ubah warna, biru sebelum dikunjungi, ungu ketika disentuh mouse, merah ketika aktif, dan hijau setelah dikunjungi. Adapun contoh pseudo class adalah sebagai berikut :

:link - yaitu tautan sebelum dikunjungi.
:hover - yaitu ketika mouse disimpan di atasnya.
:active - yaitu link yang sedang aktif (misalnya menu yang sedang diklik akan diberi warna berbeda dengan warna sebelumnya.
:visited - yaitu link yang sudah dikunjungi (ini untuk mempermudah pengguna, dalam membedakan mana link yang sudah dikunjungi dan belum)
Sebagai contoh perhatikan blok menu dibawah ini, pertama lihat warna, kedua arahkan mouse diatas warna biru, ketiga klik dan tahan.

HomeContactContoh Link

Blok di atas berwarna biru, ketika mouse diarahkan di atasnya akan berubah menjadi ungu, itulah pseudeo class :hover. Kemudian ketika diklik dan ditahan, akan berwarna merah, itulah pseudeo class :active. Tulisan Contoh link berwarna hijau, karena link mengarah ke postingan ini dan Anda sudah mengunjunginya, itulah pseudeo class :visited.

Untuk standar pseduo class adalah seperti ini :

a:link{
/* deklarasi */
}
a:visited{
/* deklarasi */
}
a:hover{
/* deklarasi */
}
a:active{
/* deklarasi */
}
a:focus{
/* deklarasi */
}

:focus - :focus ini tidak hanya terbatas pada link saja, akan tetapi sering digunakan pada kolom isian (textarea). Sebagai contoh lihat kolom isian di bawah, klik pada kolom.

Nama	:
Alamat	:

:disabled - yaitu untuk menonaktifkan kolom isian, untuk pengguna blogspot hal ini tidak terlalu penting karena jarang digunakan.
Untuk contoh :disabled lihat isian alamat diblok dengan warna orange.

Nama	:
Alamat	:

Contoh CSS

input.data:disabled{
background:#e57609;
border:1px solid#999;
color:#fff;
}

Untuk kode HTML-nya kurang lebih seperti ini :

<input class="fake-area"type="text"disabled="disabled"value="Mohon maaf, untuk sementara kolom dinonaktifkan!"/>

:enable - untuk membalik dari keadaan :disabled, sebenarnya tanpa enable pun bisa, hapus saja kode disabled="disabled"
:target - target biasanya dibarengi dengan hash tag (#) pseudeo class :target ini mengarahkan kepada elemen tertentu. Contoh saya membuat CSS target seperti ini:

#coba-target:target{
background:#ddd;
border:2px solid #333;
padding:70px 50px;
width:<50%; }

Untuk mencoba perhatikan kolom isian yang disabled kemudian KLIK DISINI, Untuk me-refresh klik DISINI.
:lang() - biasanya digunakan untuk membedakan dalam bahasa, seperti Bahasa Indonesia dan Inggris. Akhir kata berakhir pulalah topik bahasan kita mengenai Pseudo class, semoga bermanfaat dan terimakasih banyak atas kunjungannya.
Sumber referensi : http://blog.kangismet.net/2013/05/mengenal-pseudo-class-dan-pseudo-elemen.html.

Mengenal Pseudo Elemet pada CSS.

4/04/2014 07:32:00 PM

•

Elemen Semu atau lebih dikenal dengan pseudo element ataupun unsur palsu yang terdapat pada rangkaian kode css yang mungkin sebagian orang sulit untuk memahaminya, begitupun saya. Artikel ini saya buat berdasarkan apa yang ingin saya ketahui, sebenarnya di internet sudah banyak bertebaran artikel-artikel yang membahas tentang Pseudo element ataupun unsur semu, namun pada blog ini saya masih tetap ingin share kerena bag saya tidak ada kata terlambat untuk belajar, mengetahui, dan berbagi ilmu. Sebenarnya saya tidak begitu mengetahui apa definisi khusus ataupun uraian dari pengertian Pseudo element pada CSS, hanya saja pada artikel ini saya akan memberi contoh seperti apa pseudo element tersebut dan saya harap semoga saja para pembaca dapat menarik kesimpulannya, baiklah berikut ini contoh dari Pseudo element.

Contoh

p:first-letter {
color:#ff3300;
font-size:xx-large;
}

Hasilnya:

Lihat pada awal kalimat yang mempunyai karakter lebih besar dari lainnya dan itu menggunakan :ferst-letter element pseudo.

Jika di gabungkan antara :first-line dan :first-letter.
dan penggunaan css nya seperti ini.

p:first-line{
color:#0000ff;
font-variant:small-caps;
}
p:first-letter {< color:#ff3300; font-size:xx-large; }

Hasilnya:

Yang terjadi bila kita melakukan kombinasi pada kedua pseudo elemen tersebut.
maka hasilnya akan seperti pada kalimat ini pada garis pertama

CSS-:Before Elements
Masukan content sebeleum elemen.
Contoh:

h1:before {
content:url(smiley.gif);}

hasilnya:

Babble of Ibnoec Heading
:before pseudo element tempatkan content sebelum elemen

CSS-:After Elements
Masukan Content setelah elemen.
Contoh

h1:after {content:url(smiley.gif);}

hasilnya:

Babble of Ibnoec Heading
:after pseudo element tempatkan content seteleh elemen

Di atas dasar-dasar penggunaan pseudo elemen. dan dengan pseudo elemen kita dapat membuat macam-macam style yang unik dan menarik. mungkin di antara kalian akan banyak yang lebih memahami tentang pseudo ini dan mudah untuk belajar, berikut tabel penjelasan atribut pseudo element yang terdapat pada template.
Tabel Penjelasan pseudo elements.

Seleksi	Contoh	Penjelasan Contoh
:link	a:link	Pengaturan link yang belum dikunjungi
:visited	a:visited	Pengaturan link yang sudah dikunjungi
:active	a:active	Memilih link aktif
:hover	a:hover	Memilih link pada saat mengarahkan mouse
:focus	input:focus	Memilih elemen input yang memiliki fokus
:first-letter	p:first-letter	Memilih huruf pertama dari setiap elemen <p>
:first-line	p:first-line	Memilih baris pertama dari setiap elemen <p>
:first-child	p:first-child	Memilih elemen <p> setiap yang merupakan elemen pertama dari elemen induk.
:before	p:before	Memasukkan konten sebelum setiap elemen <p>
:after	p:after	Memasukkan konten setelah setiap elemen <p>
:lang(language)	p:lang(it)	Memilih setiap elemen <p> dengan nilai atribut lang mulai dengan "it"

Catatan : agar semua pseudo element bisa bekerja dengan baik, maka browser yang anda gunakan harus selalu update dan mendukung atribut CSS, semoga artikel ini bisa bermanfaat dan berguna bagi Anda yang sedang memodifikasi template, terutama bagi anda pengguna layanan blogger, selamat berkreasi dan terimakasih banyak atas kunjungannya.

Sumber referensi : http://under-88.blogspot.com/2012/06/belajar-mengenal-pseudo-element.html#axzz2xqOSO7Kc

Membuat efect animasi pada border.

4/01/2014 10:35:00 AM

•

Pada artikel ini kita akan mengeksplorasi efek animasi pada border, artikel ini merupakan sebagai tingkat lanjut dari artikel sebelumnya, mungkin Anda tertark untuk membacanya silahkan melihat Multi Color Border menggunakan CSS3. Adapun efek yang terdapat pada artikel kali ini pure menggunakan css dengan kata lain tanpa menggunakan Javacript atau JS. Harap dicatat bahwa teknik ini sangat eksperimental, jadi besar kemungkinan tidak bekerja dengan baik pada setiap browser.

Ketika melihat efeknya, mungkin tidak segera jelas apa yang terjadi, tetapi ketika Anda melihat secara dekat pada satu border, katakanlah, border atas, maka Anda akan melihat bahwa pertama, lebar garis putih menurun dari kanan ke kiri dan baris baru bergerak dari kanan dengan sedikit keterlambatan. Ketika menambahkan semua sisi lain, tampak seolah-olah bagian atas bergerak di sekitar sudut ke sisi kiri, sisi kiri bergerak ke sisi bawah, dan sebagainya. Untuk lebih jelasnya silahkan click tombol demo dibawah.

Demo Download Source

Anda pasti dapat membuat efek ini tanpa SVG, bahkan tanpa elemen tambahan, hanya menggunakan pseudo-elemen. Tapi di sini kita ingin menjelajahi apa yang bisa kita lakukan dengan SVG dan bagaimana kita dapat mengontrol melalui CSS daripada menggunakan JavaScript. Sekarang, berpikir tentang bagaimana untuk membuat efek ini menggunakan SVG, kita bisa menghidupkan stroke-dashoffset stroke persegi panjang atau menarik garis langsung, untuk tutorial lebih lengkapnya Anda bisa mengunjungi tympanus.net.

3 Cara meletakkan CSS pada template.

4/01/2014 10:34:00 AM

•

3 Cara meletakkan CSS pada template berikut caranya :
1. Internal CSS
yaitu dengan menuliskan secara langsung script CSS kedalam file HTML.

Contoh :

<html>
<head>
<title>Babble of Ibnoec</title>
<style type=”text/css”>
p {color: blue;}
body {background-color: green;}
</style>
</head>
<body>
<p>Definisi CSS</p>
</body>
</html>

2. External CSS yaitu dengan cara kita membuat file CSS tersendiri dengan eksistensi *.css dan kita menyimpan file tersebut pada folder berbeda atau pada blogspot kita bisa menyimpannya pada hosting gratis seperti drive.google.com, atau dropbox.com.

Contoh :

<html>
<head>
<title>CSSku</title>
<link rel=”stylesheet” type=”text/css” href=”url file.css”/>
</head>
<body>
<p>Definisi Javascript</p>
</body>
</html>

3. Inline CSS yaitu dengan menuliskan secara langsung script CSS kedalam tag HTML.

Contoh :

<html>
<head>
<title>CSS ku</title>
</head>
<p style=”background: purple; color: blue;”>Definisi HTML</p>
</body>
</html>

Demikian saja tutorial yang sangat singkat ini, semoga bermanfaat.

Membuat effect lengkung pada border.

3/31/2014 09:44:00 PM

•

Masih seputar border, pada artikel kali ini ada sedikit penambahan dari artikel sebelumnya pada artikel Modifikasi border untuk desain blog, pada artikel sebelumnya tidak ada efek lengkung, dan untuk kesempatan kali ini saya menambahkan kode untuk memberikan efek lengkung pada border dengan cara menambahkan kode border-radius agar penapilan border pada blog semakin modis, baca juga Multi Color Border menggunakan CSS3, baiklah berikut cara Membuat effect lengkung pada border.

DOUBLE
border: 3px double #333;border-radius: 30px 0px 30px 0px;-moz-border-radius: 30px 0px 30px 0px;-webkit-border-radius: 30px 0px 30px 0px;

DOUBLE
border: 3px double #333;border-radius: 0px 30px 0px 30px;-moz-border-radius: 0px 30px 0px 30px;-webkit-border-radius: 0px 30px 0px 30px;

DOUBLE
border: 3px double #333;border-radius: 40px 40px 40px 40px;-moz-border-radius: 40px 40px 40px 40px;-webkit-border-radius: 40px 40px 40px 40px;

Untuk warna dan ukuran border bisa Anda rubah sesuai selera. intinya untuk memberi efek lengkung pada border kita tinggal menambah border-radius:0px 0px 0px 0px;, untuk 0px diisi dengan jumlah atau angka yang diinginkan, semakin besar angka yang dimasukkan semakin besar efek lengkung yang diberikan, penulisan px juga bisa diganti dengan tanda "%" tanpa tanda kutip, juga bisa disingkas apabila jumlah angka yang dimasukkan kesetiap sudutnya sama bisa disingkat dengan menulis jumlah px atau % dengan satu kali saja, contoh : border-radius:50px;. untuk memberi efek lengkung penuh hingga membentuk lingkaran bisa menulis border radiusnya seperti berikut: border-radius:50%;, seperti pada gambar read more yang ada pada halaman homepage Babble of Ibnoec saya menulis angka border radiusnya dengan angka 50%. Demikian saja yang dapat saya sampaikan, semoga bermanfaat, terimakasih atas kunjungannya.

Multi Color Border menggunakan CSS3.

3/30/2014 10:42:00 PM

•

Multi Color Border menggunakan CSS3 sebagai lanjutan dari artikel sebelumnya yang telah saya share pada artikel Modifikasi border untuk desain blog, dan artikel berikut ini masih seputar border dengan menggunakan css dan tentunya akan menambah keindahan pada tampilan blog Anda, pada artikel ini ada sedikit penambahan style pada border yaitu dengan menggunakan beberapa warna pada satu border, baiklah berikut bentuk hasil akhir dari modifikasi border multi color dengan menggunakan css, dan baca juga Definisi CSS.

Demo

HTML :

<div id="container">
<div>
Hasil akhir dari border multi color.</div>
</div>

CSS :

#container {
margin: auto;
width: 99%;
height: auto;
padding:5px;
position: relative;
background-image: linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -o-linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -moz-linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -webkit-linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -ms-linear-gradient(bottom, #F24D55 56%, #FF924F 57%, #FFC164 74%, #62C374 74%, #F24D55 34%, #00AEDA 33%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.56, #F24D55),
color-stop(0.57, #FF924F),
color-stop(0.74, #FFC164),
color-stop(0.74, #62C374),
color-stop(0.34, #F24D55),
color-stop(0.33, #00AEDA)
);
}
#container div {
background-color: #5c318d;
color:#fff;
font-size: 35px;
text-align: center;
margin: 0 auto;
min-height: 100%;
line-heigh:1.5em;
padding:10px;
}

Silahkan ganti width yang saya tandai dengan warna merah sesuai selera, dan padding yang saya buat 5px untuk menentukan ukuran border, sebenarnya ini bukan border tapi lapisan background yang menyerupai border. Demikian saja mengenai Multi Color Border menggunakan CSS3, semoga bermanfaat dan terimakasih banyak atas kunjungannya.

Sumber referensi : http://www.jquery2dotnet.com/2013/10/multi-color-border-using-css3.html

Modifikasi border untuk desain blog.

3/30/2014 01:29:00 PM

•