11.11.11

Koleksi 'Free Fonts'

Free Fonts

Berikut ini beberapa alamat yang menyediakan 'font' dalam berbagai karakter atau kategori yang dapat anda download secara gratis/free.

Jika anda membutuhkan "free fonts" tersebut, berikut ini beberapa alamat tersebut:


1. Font Squirrel

free fonts

"Handpicked free fonts for graphic designers with commercial-use licenses"

2. Font Cubes

free fonts

"Here you'll find the best free PC fonts and free Mac Fonts from the best font artists in the world. The fonts listed in our free font collection are their author's property. Please contact their authors for further consultation regarding the use of the listed fonts."

3. 1001 Free Fonts

free fonts

"Welcome to 1001 Free Fonts - Download Free Fonts for Windows and Macintosh"

4. SearchFreeFonts.com

free fonts

"AdineKirnberg Regular
Description: Download free AdineKirnberg font from SearchFreeFonts.com. Available in True Type format for Windows and Mac. Preview AdineKirnberg font by typing your own text, zoom in on characters, write comments, or add to favorites for later download."

5. dafont.com

free fonts

"Archive of freely downloadable fonts. Browse by alphabetical listing, by style, by author or by popularity"

6. abstractfonts.com

free fonts

"You can view the fonts in many ways: latest, by category, by designer, by recent popularity, popularity climbers and sliders, similarity, best and worst rated, and more."

Cufon Pilihan lain Selain sIFR

Cufon


Alat bantu untuk mengganti jenis font sangat beragam, salah satunya adalah Cuf�n. Cufon berbeda dengan sIFR yang menggunakan flash, tetapi Cuf�n hanya berupa javascript. Dengan fasilitas Cuf�n ini kita dapat menggunakan jenis font yang kita inginkan untuk diterapkan di web / blog.

Lebih lanjut mengenai Cuf�n:


1. About Cuf�n
2. Generator Cuf�n

Artikel Mengenai Cuf�n dan Penerapannya:


1. Introducing Cuf�n � sIFR alternative
2. Exploring Cuf�n, a sIFR alternative for font embedding

Script yang digunakan:


1. Script Cuf�n (dapat di download di sini):

<script type="text/javascript" src="js/cufon-yui.js"></script>

2. Script font hasil generator:

<script type="text/javascript" src="js/NamaFont.font.js"></script>

3. Untuk mengaktifkan Cufon ( textShadow untuk membuat shadow)

<script type="text/javascript">
Cufon.replace('h1', {
textShadow: '#fff -1px -1px, #333 1px 1px'
});
Cufon.replace('h2', {
textShadow: '#fff 1px 1px, #333 -1px -1px'
});
Cufon.replace('h3');
Cufon.replace('h4');

</script>

Menggunakan sIFR 2.0 di 'Blogger Template'

sifr 2.0, blogger template

Demo

sIFR adalah salah satu fasilitas alternatif pengganti jenis font untuk memperindah 'typography', khususnya pada heading (H1, H2, dll), sama seperti halnya dengan cufon. Kali ini saya akan mencoba menggunakan sIFR 2.0 di 'blogger template' (sIFR sekarang telah keluar versi 3.0).

Tahapan Menggunakan sIFR2 di 'Blogger Template'



1. download sIFR 2.0.
2. Upload file javascript di google code hasil dari download sIFR 2.0 tadi, yaitu sifr-addons.js dan sifr.js.

Kalo ngak mau repot upload, pake script berikut ini simpan dibawah </head>:

<script src='http://choenblogspot.googlecode.com/files/sifr.js' type='text/javascript'></script>
<script src='http://choenblogspot.googlecode.com/files/sifr-addons.js' type='text/javascript'></script>

3. Masukan code CSS hasil anda download sIFR 0.2 (yaitu: sIFR-screen.css dan sIFR-print) di edit HTML, template anda.

Kalo ngak mau repot copy paste code berikut dibawah </head>:

<style media='print' type='text/css'>
/* This is the print stylesheet to hide the Flash headlines from the browser... regular browser text headlines will now print as normal */

.sIFR-flash, .sIFR-flash object, .sIFR-flash embed {
display: none !important;
height: 0;
width: 0;
position: absolute;
overflow: hidden;
}

span.sIFR-alternate {
visibility: visible !important;
display: block !important;
position: static !important;
left: auto !important;
top: auto !important;
}

</style>
<style media='screen' type='text/css'>
/* These are standard sIFR styles... do not modify */

.sIFR-flash {
visibility: visible !important;
margin: 0;
}

.sIFR-replaced {
visibility: visible !important;
}

span.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
visibility: hidden;
font-size: 16px;
letter-spacing: 40px;
}

.sIFR-hasFlash h2 {
visibility: hidden;
letter-spacing: -9px;
font-size: 14px;
}

.sIFR-hasFlash h3 {
visibility: hidden;
letter-spacing: -6px;
font-size: 20px;
}

.sIFR-hasFlash h4 {
visibility: hidden;
letter-spacing: -5px;
font-size: 21px;
}

.sIFR-hasFlash h5 {
letter-spacing: -4px;
visibility: hidden;
font-size: 14px;
}

.sIFR-hasFlash h6 {
letter-spacing: -4px;
visibility: hidden;
font-size: 12px;
}

</style>

4. Ini tahapan terpenting dari sIFR untuk menggunakan jenis font yang anda inginkan.

Sebenarnya ketika kita download sIFR 2.0 sudah disertakan file flash untuk membuat font, tapi ada cara lebih mudah, yaitu:

a. Pilih jenis font yang anda inginkan, atau cari di tempat yang menyediakan free font, kemudian simpan di desktop (sebab kalau masih di windows/font tidak bisa di upload).

b. Generate font yang anda telah pilih agar menjadi file swf, di sIFR Generator. Caranya tinggal anda upload font anda, kemudian next dan next sampai akhir hingga download. pada Step 2: Choose sIFR version, pilih sIFR 2, karena kita menggunakan sIFR 2.0.

c. Hasil donwload dari sIFR Generator, file font tersebut telah berupa '.swf', kemudian file swf tersebut perlu anda upload ke image shack, karena image shack bisa menyimpan file berbentuk .swf. Setelah anda upload ada ambil linknya, misalnya: http://img195.imageshack.us/img195/2534/copystruct.swf

d. Kemudian terakhir anda masukan javascript berikut untuk mengaktifkan font yang anda telah pilih tersebut, dengan cara semua alamat font dibawah perlu anda rubah sesuai font anda yang telah anda upload di image shack, disini saya menggunakan 3 jenis font untuk H1, H2 dan H3.

script tersebut, simpan dibawah </head>:

<script type='text/javascript'>
//<![CDATA[
/* Replacement calls. Please see documentation for more information. */

if(typeof sIFR == "function"){

// This is the preferred "named argument" syntax


sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"http://img291.imageshack.us/img291/2028/hotelcoralessexregular.swf", sColor:"#AD3C00", sWmode:'transparent'}));

sIFR.replaceElement(named({sSelector:"h2, h4, h6", sFlashSrc:"http://img199.imageshack.us/img199/2368/motorway.swf", sColor:"#2F1F00", sWmode:'transparent'}));


sIFR.replaceElement(named({sSelector:"h5", sFlashSrc:"http://img508.imageshack.us/img508/6843/jamesfajardo.swf", sWmode:'transparent'}));

};


//]]>
</script>

>> code berwarna merah tersebut yang perlu anda ganti dengan alamat font swf anda.

5. Sip Selesai, silahkan anda kutak katik kembali semua script/code diatas untuk menyesuaikan dengan karakter template anda, baik itu ukuran font dan warna.

>> catatan kelemahan sIFR 2.0 ini, untuk text link yang menggunakan sIFR tidak aktif. jadi jangan menggunakan heading (h1,h2 dst) untuk text link.

:: lihat juga penggunaan cufon pada 'blogger template'.

Trik Menghilangkan Font Asli Untuk Pengguna Cufon

cufon trick

Bagi para pengguna Cufon harus menggunakan trik ini. Trik ini dikembangkan oleh Chris Wallace, dia mencoba melakukan trik (hack) untuk menghilangkan karakter font asli, agar font dari Cufon-nya tidak didahului oleh jenis font aslinya. Saya mencobanya di 'blogger template', tetapi trik itu tidak berjalan sempurna, perlu ada pembenahan sedikit.

Pembenahan trik ini tidak jauh berbeda dengan Chris Wallace, seperti ini:

1. Taruh kode css ini di atas <body>, kode ini yang merupakan trik untuk menghilangkan font asli:

<style type='text/css'>
<!--
h2.post-title, #header h2, #footer{visibility:hidden}
-->
</style>


2. Kemudian masukan pula script cufon, termasuk juga kode css untuk mengaktifkan kembali, diatas </body>:

<!-- Cufon -->
<script src='http://cufon.shoqolate.com/js/cufon-yui.js' type='text/javascript'>
</script>
<script src='http://choenblogspot.googlecode.com/files/Mistral_400.font.js' type='text/javascript'>
</script>

<script type='text/javascript'>

Cufon.replace(&quot;h2.post-title, #header h2, #footer&quot;,{
textShadow: &#39;#050505 1px 1px&#39;
});
</script>

<script type='text/javascript'>Cufon.now();</script>


<style type='text/css'>
<!--
h2.post-title, #header h2, #footer{visibility:visible}
-->
</style>


Catatan: kode h2.post-title, #header h2, #footer diatas itu contoh, perlu anda sesuaikan dengan keperluan anda.

3. Sip Selesai.

Catatan: Trik ini menghasilkan 2 error pada validasi HTML :(, karena penempatan kode style CSS di dalam bagian HTML, sangat disayangkan.

:: lihat juga:
- Cufon pilihan lain selain sIFR
- Free Blogger Template dengan Cufon (bagi pengguna template ini harap menambah trik diatas.

:: Mau menggunakan sIFR:
- Menggunakan sIFR 2.0 di 'Blogger Template'
- Free Blogger Template dengan sIFR 2.0

Membongkar CSS Membangun Selera

Style CSS

Cascading Style Sheet (CSS), adalah salah satu bahasa untuk membenahi halaman web atau template, baik itu font, warna, border, background, ukuran dan sebagainya. Bahasa CSS ini hampir sebagian besar digunakan pada desain template, termasuk juga pada blog yang berbasis Blogger ini.

Pada Blogger CSS ditempat secara langsung (internal) setelah <b:skin>, sedangkan pada flatform lainnya seperti wordpress, joomla dan lainnya ditempatkan terpisah (eksternal) sehingga perlu menambahkan:

<link rel="stylesheet" href=".css" type="text/css" media="" />

Pada link ini "Mastering CSS Coding: Getting Started" memberikan pengetahuan penting yang umum dari penggunaan kode CSS.

Beberapa alamat weblog yang dapat membimbing kita untuk dapat mempelajari CSS:


1. CSS Tricks

Tips, Tricks, and Techniques on using Cascading Style Sheets (CSS)

http://css-tricks.com

Pada alamat ini memberikan tutorial secara lengkap, berikut berbagai aplikasi dengan berbagai bahasa program lain, dan di alamat tersebut diberikan video tutorial HTML & CSS - The VERY Basics.

2. css.maxdesign

css

Alamat ini memberikan secara rinci penggunaan CSS dan HTML dalam mengembangkan berbagai kasus tertentu.

3. Intensivstation

CSS HOW-TO

css

Pada alamat ini memberikan panduan dasar dalam pengembangan CSS pada template.

Semoga beberapa alamat diatas dapat membantu anda dalam membangun desain template sesuai dengan selera anda.

Semuanya tentang CSS dan Javascript

CSS - Javascript

Berikut ini blog yang secara khusus membahas teknik CSS dan Javascript, baik itu untuk menu nav, layout, dan fungsi lainnya.

1. CSS play

CSS play

2. CSS Menu

CSS Menu

3. stunicholls.com

stunicholls

4. Dynamic Drive

Dynamic Drive

5. JavaScripts Kit

JavaScripts Kit

Trik Merubah Warna Seleksi Pada Text

warna seleksi

Berikut ini trik dasar CSS untuk merubah warna seleksi pada teks, agar tidak standar lagi atau berwarna biru.

Caranya sangat mudah, masukan kode CSS berikut:

::selection { background: #B13E2C; color: white; /* Safari */ }
::-moz-selection { background: #B13E2C; color: white; /* Firefox */ }


Kode #B13E2C dan white, dapat anda rubah sesuai selera anda. Namun Kode tersebut tidak berlaku untuk IE.

Trik Image Opacity dengan CSS

image hover

Trik dasar css kali ini bagaimana Image ketika disentuh mouse (hover), warnanya image-nya akan memudar (opacity). Caranya sangat mudah yaitu anda tinggal mengganti kode css 'img' anda dengan kode berikut:


img {
filter:alpha(opacity=80);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

img:hover {
filter:alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;


kode diatas dapat anda rubah angka opacity nya, tergantung selera, dan kode ini sudah memenuhi untuk pemakaian browser IE.

Video Tutorial Membangun sebuah Blog / Web

Video Tutorial Membangun sebuah Blog / Web

Jika anda mulai tertarik belajar membangun sebuah template blog atau web sendiri, berikut ini video 'tutorial dasar' yang menarik dari CSS-Trick. Video tutorial ini sangat baik dalam menerangkan tahapan pembuatan sebuah template, baik itu hubungan antara CSS, HTML dan Image yang diperoleh dari Photoshop. Lewat video ini saya belajar banyak.

Video Teknik dasar HMTL dan CSS dalam membangun Situs

video tutorial web


HTML & CSS - The VERY Basics

Running time: 32:15
As the title suggests, this video is the VERY basics of what HTML and CSS is, for the absolute beginner.

Video tutorial konvesi desain photoshop ke dalam situs

video tutorial web

1: Converting a Photoshop Mockup (part 1 of 3)
Running time: 10:10
In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I�m sure these will get more focused with time.

2: Converting a Photoshop Mockup (part 2 of 3)
Running time: 17:10
In part two of this series on converting a Photoshop mockup to an HTML/CSS Website I continue on with the header/menu section of the site. I change the way in which the site is centered when I decide to wrap the entire site in a page-wrap div instead of centering each major page element. Then I plug in some �filler� content for the main area before I end with building the footer.

3: Converting a Photoshop Mockup (part 3 of 3)
Running time: 31:53
I finish up the design in part three of this series on coverting an Adobe Photoshop website mockup into an actual HTML/CSS website. This one focuses on the main content area. I create the the columns including the �quick links� section. I also talk a little bit about typography.

video tutorial web

1: Converting a Photoshop Mockup: Part Two, Episode One
Running time: 22:03
There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let�s do it again! Every website is different will require different conversion techniques so there will be plenty to learn this time around that will be different from last time. The mockup we will be using here is a mini-version of the current version of CSS-Tricks itself!

2: Converting a Photoshop Mockup: Part Two, Episode Two
Running time: 25:45
In Episode Two of this series, we continue on with the structure of the site. In Photoshop, we create the three different states of the menu, then slice them up and use the CSS sprites technique to create the rollover and �on� states for the tabs. We then create the main content area and footer.

3: Converting a Photoshop Mockup: Part Two, Episode Three
Running time: 23:58
We wrap up the mockup conversion here in Episode Three. We create the �article area� and the �sidebar� (semantic class naming!), and then we clear the float. We use Firebug to steal the typography from the live CSS-Tricks. Then we fix up the header a little bit in Photoshop and use CSS Image Replacement for the logo.

Trik membuat Absolute Columns

Absolute Columns



Jika anda tertarik untuk membuat struktur dasar web dengan pembagian kolom secara absolute, baik itu header, footer dan sidebar, berikut ini alamat yang memberikan tutorial membuat Absolute Columns.

Membuat kode postingan anda bergaya tanpa javascript

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a&#39;).hover(function() { //mouse in
$(this).animate({ opacity: &#39;0.3&#39; } , 1000);
}, function() { //mouse out
$(this).animate({ opacity: &#39;1&#39; }, 1000);
});
});
</script>

<!-- end effectlink -->

Ini adalah trik sederhana membuat kode pada postingan anda sedikit berbeda,
tanpa menggunakan javascript, layaknya sintax highlighter, yaitu hanya dengan menggunakan kode CSS.

Jika anda tertarik membuat tampilan berbeda seperti contoh diatas, demikian caranya:

1. Masuk ke edit HTML
2. masukkan kode berikut di script CSS anda diatas kode berikut ]]></b:skin> :

/*code*/
.code {
display:block;
font-family:Courier New;
font-size:9pt;
width:360px;
overflow:auto;
repeat-y;
max-height:200px;
margin:5px 10px;
padding: 2px 15px 2px 25px;
background:url(http://i583.photobucket.com/albums/ss279/negativa/code.png) no-repeat left top; }

background image diatas dapat anda rubah sesuai selera anda.

3. Klik save template
4. Masuk ke postingan anda dan masukan kode berikut ditiap anda memposting kode:

<span class="code">
....ini tempat kode yang anda ingin posting
</span>


5. Selesai.

nge-Reset CSS Style Dulu

Reset CSS

Setiap kita memulai membuat sebuah template, kita perlu ngereset css dulu. Nah ada beragam teknik reset css yang dikembangkan. Anda dapat menentukan sendiri yang mana lebih cocok untuk anda gunakan. Fungsi dari reset css ini adalah membenahi file yang tidak konsisten agar netral atau default di elemen HTML.

Ragam Reset CSS Style


1. Reset Reloaded - Meyer Web

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}


2. Create Your Own Simple Reset.css File - Net Tuts+

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}

body
{
line-height: 1;
font-size: 88% /* Decide for yourself if you want to include this. */;
}

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}

ul, ol
{
list-style: none;
}

a
{
color: black;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}

.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}


3. YUI Reset CSS

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}


4. Condensed Universal Reset

* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}


Pendapat lain Mengenai Reset CSS


Reset CSS dirancang agar setiap elemen dapat tampil konsisten di semua browser. Tapi keempat Reset CSS tersebut diatas pun sebenarnya tidak perlu anda gunakan, jika anda memiliki pendapat bahwa tidak masalah tampilan weblog anda berbeda di setiap browser. Atau anda menggangap dengan menggunakan reset CSS hanya akan menambah ukuran size CSS anda. Silahkan saja, itu pilihan anda. Lihat artikel berikut ini yang menarik terkait pendapat diatas mengenai Reset CSS: No CSS Reset.

84 TIP CSS yang Bermanfaat

TIP CSS

84 Amazingly Useful CSS Tips & Resources


* 53 CSS-Techniques You Couldn�t Live Without
* 20 Useful CSS Tips For Beginners
* 5 Ways to Instantly Write Better CSS
* Using CSS to Do Anything: 50+ Creative Examples & Tutorials
* 101 CSS Tips, Tutorials and Examples
* CSS Code Snippets : 15 Wicked Tricks
* 15 CSS Tricks That Must be Learned
* 8 CSS tips for better linking
* 8 Premium One Line CSS Tips
* 70 Expert Ideas For Better CSS Coding
* 30+ CSS Cheat Sheets & Quick Reference Guides
* 10 Principles of the CSS Masters
* 10 Excellent CSS Tips and Tutorials
* 50+ Nice Clean CSS Tab-Based Navigation Scripts
* CSS Layouts: 40+ Tutorials, Tips, Demos & Best Practices
* 120 Excellent Examples of CSS Horizontal Menus
* 60+ Wacky CSS Tutorials, Layouts, Optimizers & More
* 12 Principles For Keeping Your Code Clean
* Quick & Easy CSS Development with Firebug
* 25+ CSS Tools to reduce your work load
* 20 Useful Resources for Learning about CSS3
* 16 Usable CSS Graph and Bar Chart Tutorials & Techniques
* Top 10 Swish And Stylish CSS Tricks
* 12 Most used CSS tricks
* Five web 2.0 CSS menu tutorials
* 12 CSS Tools and Tutorials for Beautiful Web Typography
* 5 Popular CSS Frameworks + Tools for Getting Started
* 30 Excellent CSS Based Navigation and Buttons Tutorial
* Creating CSS Layouts: Best Tutorials on Converting PSD to XHTML
* 20 Ultimate CSS Tutorials That Will Help You Master CSS
* 19 CSS Menu Tutorials to Spice Up Your Web Designs
* Top 10 CSS Buttons Tutorial List
* 40 CSS Web Form Style Tutorials For Web Developers
* 35+ very Useful And Powerful CSS techniques
* 43 PSD to XHTML, CSS Tutorials Creating Web Layouts & Menus
* Creating Sexy Stylesheets
* CSS Tip #1: Resetting Your Styles with CSS Reset
* Ten CSS tricks you may not know
* 5 Tips For Organizing Your CSS
* Web Design+ Tips & Advice on Web Standards Development
* 10 CSS shorthand techniques you�ll use everyday
* The Ultimate CSS Cheat Sheet
* 13 Training Principles of CSS Everyone Should Know
* 101 CSS Techniques Of All Time- Part 1
* 16+ Easy CSS Techniques that Simplify the Webdesigner�s Life
* 15 CSS Properties You Probably Never Use (but perhaps should)
* The CSS, HTML, and JavaScript Lab
* 5 Steps to CSS Heaven
* Cool CSS Image Maps
* 20 Sites That Brought CSS into the Mainstream
* CSS Font sizing with different techniques
* Make your Site Mobile Friendly with CSS
* Examples & Tips for Great HTML/CSS Formatting
* Top 10 CSS Table Designs
* Fluid Grids with CSS
* The Art of CSS Positioning
* CSS: Magic of �border� property
* How to Debug CSS
* 26+ CSS Galleries to Follow on Twitter
* Image-free CSS Tooltip Pointers
* Simple scalable CSS based breadcrumbs
* 9 CSS Essential Skills For Every Web Designer
* My Top Ten CSS Tricks
* 22 Resources to Easily Create CSS Layouts
* 10 Invaluable CSS Resources
* 40 Beautiful Dark CSS Website Designs
* 40+ CSS Generators, Creators, and Makers
* How to: CSS Large Background
* The complete CSS guide
* Learn CSS Positioning in Ten Steps
* 50+ Nice Clean CSS Tab-Based Navigation Scripts
* 37 CSS Navigation Techniques
* 10 Challenging But Awesome CSS Techniques
* CSS Typography: Contrast Techniques, Tutorials & More
* 4 Uber Cool Css Techniques For Links
* 38 Free Elegant XHTML/CSS Website Templates
* CSS Float Theory: Things You Should Know
* CSS Tip #2: Structural Naming Convention in CSS
* 5 Techniques to Acquaint You With CSS 3
* The Highly Extensible CSS Interface
* Improving Code Readability With CSS Styleguides
* Best of CSS Design 2008
* SitePoint CSS Reference
* CSS Editors Reviewed

Beberapa jenis "DOCTYPE"

Berikut ini beberapa jenis "DOCTYPE" yang biasa digunakan:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


penggunaan "DOCTYPE"

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>

<body>

<p> Your HTML content here </p>

</body>
</html>


lebih lengkap: Recommended list of DTDs

Membuat Kolom : CSS dan jQuery

Membuat Kolom : CSS dan jQuery


Anda ingin membuat kolom dengan mudah dengan menggunakan jQuery dan CSS, seperti halnya pada gambar diatas, anda dapat pelajari pada:

Smart Columns with CSS & jQuery

One solution that would be able to benefit the situations is to take the good of both scenarios and mash it into one.

  1. Allow as many fixed columns to line up across the viewport (as many as it will fit based on the base column size)
  2. Take excess white space and evenly distribute them to each of the columns to complete the full row. This way the columns will always fit perfectly.
  3. Keep a default fixed width as the base, so that the columns are reasonably within the intended columns sizes while maintaining enough flexibility to accommodate for the expandable viewport.

Semuanya tentang CSS "Sprites"

CSS

Berikut ini cara atau tutorial untuk membuat "sprites" image, baik itu untuk menu dan lainnya. Penggunaan CSS Sprites ini pertimbangannya untuk mempercepat akses dibanding dengan penggunaan image terpisah.

Ini salah satu contoh sederhana penerapan "sprites", untuk "image hover". Kunci dari penerapan sprite ini pada "background position", lihat pada penerapan berikut:

sprite image hover

code css:
#menu .beranda a {
width: 29px;
height: 29px;
text-indent: -9999px;
display: block;
overflow: hidden;
background: url(http://lh3.ggpht.com/_dfnTVAxeWMI/SjJbyLZoDXI/AAAAAAAAA64/JDeHssaGv4Y/home.gif) 0 0 no-repeat;
}

#menu .beranda a:hover {
background-position: 0 -29px;
}

Alamat tutorial dan penerapan "sprites" lainnya:



CSS Sprites: Image Slicing�s Kiss of Death

CSS Sprites: What They Are, Why They�re Cool, and How To Use Them

Accessible and Search Engine Friendly Image Rollover with CSS and Sprites

Creating & Using CSS Sprites

How to Create a CSS Menu Using Image Sprites

Image Sprite Navigation With CSS

Advanced CSS Menu

Animated GIF For CSS Sprites

Fast Rollovers Without Preload

How to use CSS Sprites (video)

How to Use CSS Sprites (video)

CSS Sprites Generator

CSS Sprite Generator

lihat juga: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

Semuanya Tentang "Typography"

Typography

Permainan "Typography" menjadi bagian penting dalam sebuah desain. Begitu pula dengan desain blog atau website, pada perkembangannya sudah mulai memperhatikan aspek "Typography", sebab type atau huruf juga menjadi bagian penting didalamnya.

Berikut ini pengertian "Typography"

"Typography" (Tipografi) merupakan suatu ilmu dalam memilih dan menata huruf dengan pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk menciptakan kesan tertentu, sehingga dapat menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin.

Dikenal pula seni tipografi, yaitu karya atau desain yang menggunakan pengaturan huruf sebagai elemen utama. Dalam seni tipografi, pengertian huruf sebagai lambang bunyi bisa diabaikan. (wikipedia)


Artikel tentang "Typography":


1. 8 Simple Ways to Improve Typography In Your Designs

2. A Guide to Web Typography

3. 10 Principles For Readable Web Typography

4. 6 Ways To Improve Your Web Typography

5. The Elements of Typographic Style Applied to the Web

Lebih lanjut blog/atau web yang membahas tentang "Typography":


AisleOne

i love typography

Tool untuk membantu desain "Web Typography"


50 Useful Design Tools For Beautiful Web Typography

Tempat untuk memperoleh inspirasi konsep desain "Typography":


Typesites

Fantastic Typography Blogs For Your Inspiration

Video tentang "Typography"


1. Typography Styles

2. Sessions - Fundamentals of Typography: Anatomy of Type

3. Typographics - Vancouver Film School (VFS)



4. Graphic Design: The Forgotten Web Standard



Free Template dengan konsep "Typography":


1. Free WordPress Theme: WP Typo

demo:
wptypo template

2. Free Typographic XHTML/CSS-Layouts For Your Designs

-----------
:: lihat juga: 101 Typography Resources for Web Designers

Jenis Font yang Populer untuk Website

font-family


Ada beragam jenis font yang dapat digunakan untuk website, tidak sekedar arial dan sans-serif {font-family: Arial, Sans-Serif;}. Jika anda ingin mencari pilihan lain yang anda ingin gunakan, Most Popular Website Fonts , menjadi pilihan terbaik.

Contoh Pengembangan "Paragraph Typography"

Paragraph Typography

Tag <p> dapat dikembangkan dengan menggunakan beberapa trik CSS agar sesuai dengan "typography" yang kita inginkan.

Melalui, "12 Examples of Paragraph Typography" ini kita dapat memilih jenis 'paragraph' yang sesuai dengan konsep desain website atau blog yang kita ingin.

Seputar "Background Image"

background image

Ada beragam jenis dan trik untuk memaksimalkan "background image" di dalam template, agar terlihat lebih kreatif.

Seputar Jenis dan Trik "Background Image" tersebut:


1. Multiple background

2. How to: CSS Large Background

3. The youlove.us scrolling background effect explained

4. Blurry Background Effect

5. Scalable Content Box Using Only One Background Image

6. Achieving Double Background Effect with CSS

7. Using background-image to replace text

Alat Bantu Tipografi (CSS Type)

CSS Type

Terkadang kita sering kesulitan memilih jenis text/font (font-family, font-size, letter-spacing, word-spacing, line-height) yang tepat untuk tipografi blog atau web. Namun ada alat bantu (tool) online untuk mempermudah pemilihan text/font yang tepat untuk heading, p, quote, dll.

Alat Bantu Tipografi (CSS Type) tersebut:



CSS Type

"The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer�s life easier."

CSS Type

"Typechart lets you flip through, preview and compare web typography while retrieving the CSS."

CSS Type

"CSS Type Set is a hands-on typography tool allowing designers and developers to interactively test and learn how to style their web content."

if IE Kelaut Aja

if IE Kelaut Aja

Terkadang ketika kita membuat template hasilnya ternyata berantakan di IE terutama IE 6. Untuk itu kita perlu membenahi lagi cssnya agar tampilan di IE ini bisa sempurna. Tapi kalo anda cuek ama IE maka alamat yang saya rujuk berikut ini bisa diabaikan.

Beragam Trik Untuk Memperbaiki Tampilan di Semua Browser


1. Internet Explorer Conditional Comments

2. How to get Cross Browser Compatibility Every Time

3. Using CSS to Fix Anything: 20+ Common Bugs and Fixes

4. Cross Browser CSS Fixes, Tools, and Hacks

5. 10 Fixes That Solve IE6 Problems

6. Using Javascript to Fix 12 Common Browser Headaches

7. 15+ techniques and tools for cross browser CSS coding

Trik dasar mengakali ie, contoh:

.test {
width:100px; /* All browsers */
*width:104px; /* IE */
_width:106px; /* IE6 */
.width:108px; /* IE7 */
}


Trik dasar tersebut yang paling mudah untuk mengakali IE terutama untuk template blogger. Jadi tidak perlu pusing dan mengatakan if IE kelaut aja..hehehhe...

Posisi Tetap pada Header dan Footer : "Fixed"

CSS, position fixed

Saya sering kesulitan membuat atau menentukan kode CSS yang tepat untuk 'position fixed' atau posisi tetap, baik itu pada header ataupun footer, agar dapat sempurna tampilannya dibeberapa browser terutama di IE 6.

Tutorial position fixed header dan footer


Tutorial dibawah ini menggunakan metode yang berbeda untuk position fixed agar dapat tampil sempurna.

1. Fixed Header & Footer Layout: A Beginner�s Guide

2. CSS Position Fixed for IE6

3. How to Add a Fixed Position Banner to a Website

HTML 5 Seperti apa yah?

HTML 5

Bahasa HTML (hypertext markup language) telah keluar versi baru yaitu HTML 5, sedangkan blog ini masih bertahan dengan XHTML 1.0, dengan pertimbangan validasi, walau hanya pada frontpage.

Yang membedakan tiap versi HTML adalah pada doctype, dan doctype HTML 5 lebih simpel dengan struktur yang sama, seperti ini:

<!DOCTYPE HTML>
<html>
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
<!-- this is a comment -->
</body>
</html>


Lebih Jauh Mengenai HTML 5


Jika anda ingin mempelajari HTML 5 lebih jauh lihat:

1. W3C Working Draft 23 April 2009
atau HTML 5, A vocabulary and associated APIs for HTML and XHTML
2. HTML 5. Draft Standard � 2 August 2009

Blog khusus yang membahas HTML 5:

HTML 5 Doctor

Reset CSS Stylesheet khusus HTML 5:

HTML 5 Reset Stylesheet

Alat untuk mencek validasi HTML 5:

Validator.nu (X)HTML5 Validator

Galery situs yang menggunakan HTML 5:

A showcase of sites using HTML 5 markup

Lebih lengkap mengenai HTML 5:

HTML5 and The Future of the Web

Lihat juga hasil penerapan HTML 5:

Coding A HTML 5 Layout From Scratch

:: Catatan: sangat disayangkan blogspot tidak bisa menggunakan HTML 5, jika memasukkan <!DOCTYPE HTML> akan berubah otomatis setelah disave menjadi <!DOCTYPE html PUBLIC "null" "null">, dan itu tidak dikenali sebagai HTML5.... :(

Seputar CSS 3, Memusingkan ?

CSS 3

CSS 3 (Cascading Style Sheets 3) dikembangkan tentunya untuk lebih baik dari CSS sebelumnya. Perkembangan dari CSS3 memang sangat variatif untuk meningkatkan tampilan template seperti image, text, border dan lainnya.

Banyaknya variasi baru CSS3 itu perlu diadaptasi kembali oleh para pengembang web/blog, yang terkadang juga sedikit memusingkan, dan sangat disayangkan pengembangan CSS3 ini belum didukung penuh oleh semua browser saat ini, terutama IE. Mungkin nanti.

Seputar CSS 3


Berikut ini beberapa alamat yang mungkin membantu mempelajari CSS3 lebih jauh:

- Pengenalan dasar CSS 3, Introduction to CSS3

- Situs khusus yang membahas tentang CSS 3 :
1. CSS3 info, lihat juga css3 preview untuk melihat hasil dari beberapa pengembangannya.
2. CSS3.com

- Artikel yang membahas CSS 3
1. Push Your Web Design Into The Future With CSS3
2. 30 Essential CSS3 Resources
3. Take Your Design To The Next Level With CSS3
4. 5 CSS3 Design Enhancements That You Can Use Today.

- Tabel untuk melihat hasil kompatibilatas CSS3 dengan beberapa browser, dan lainnya.

:: catatan: untuk platform blogger CSS3 hasil validasi lebih memuaskan :)