Ragam Kreasi CSS

 

Akhirnya,saya punya waktu untuk memposting trik CSS3...nah,sekarang saya akan menjelaskan bagaiman menerapkan trik ini pada blog kita yang biasanya berat karena banyaknya penggunaan image dan flash,trik ini enteng,dan tidak membuat blog kita berat,Ada banyak fitur-fitur keren di CSS3 dan dalam contoh ini saya akan menunjukkan kepada Kamu bagaimana kamu dapat membuat Kreasi kamu sendiri.tetapi kamu harus tahu satu hal.untuk mengguanakan trik ini,kamu harus menggunakan browser yang mendukung CSS3..

Seperti: mozilla 3.6,Google Chrome 4.1,dan browser lainya yang mendukung CSS3.Tetapi Mozilla belum mendukung CSS Animation,sedangkan google chrome bisa.pastikan sharingan di sebelah kanan ini berputar,dengan mengarahkan kursor kamu.

Pengertian 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 :)

Inspirasi blog Saya
http://css-tricks.com/
http://www.davidwalsh.name/
http://www.designbombs.com/
http://lookslikegooddesign.com/
http://www.sohtanaka.com/
http://www.webdesignerwall.com/
http://cruzenaldo.com/

• Rounded Corners
• Box Shadow
• Gradients
• Text Shadows
• CSS Animation
• Google Font api CSS

Untuk menggunakan trik css ini,kamu dapat meletakan kode css ini di Sidebar,posting, footer,h2,dll
Semua kode CSS ini,diletakan pada Kode css yang sama,bukan kode HTML

Semua Code diletakan di dalam code {css kamu... }
Contoh:


#sidebar-wrapper{background-color:#242424;width:300px;}

Menjadi seperti di bawah ini

#sidebar-wrapper{background-color:#242424;width:300px;-moz-border-radius: 8px;-webkit-border-radius: 8px;}


Rounded Corners

-moz-border-radius: 8px;-webkit-border-radius: 8px;

Silakan Copy paste Code diatas ini di dalam kode { }
contoh...

Dan Untuk Hasilnya....

Contoh

 

Menjadi Seperti ini

 

YA - HA ....menjadi bundar n_n

---

Box Shadow

saya telah mengatur radius 8px , hal ini memberikan kita beberapa sudut membulat yang bagus(Rounded Corner). Maka yang kita perlu lakukan untuk membuat drop shadowMenggunakan Kode CSS di bawah ini:

box-shadow: #333 10px 10px 10px;-moz-box-shadow: #333 10px 10px 10px;-webkit-box-shadow: #333 10px 10px 10px;


Hasilnya...

 

Muncul Bayangan pada Element yang kita buat diatas dengan menggabungkan Trik Rounded Corner dan Box shadow...

Mau tau caranya??
Copy saja code di bawah ini n_n


box-shadow: #333 10px 10px 10px;-moz-box-shadow: #333 10px 10px 10px;-webkit-box-shadow: #333 10px 10px 10px;-moz-border-radius: 8px;-webkit-border-radius: 8px;

---

Gradients
Untuk membuat gradien latar belakang kita perlu menambahkan ini:


background:-moz-linear-gradient(-90deg, #fde98d, #f9cd0a) repeat scroll 0 0 transparent;background:-webkit-gradient(linear, left top, left bottom, from(#fde98d), to(#f9cd0a));

Hasilnya....

 

Trik ini,mengurangi Penggunaan dengan gambar.

---

Text Shadow
Dari beberapa pengembangan CSS3, property text-shadow, merupakan yang paling banyak digunakan dan sudah dapat didukung beberapa browser populer, kecuali IE. Dengan text shadow seperti namanya, text tersebut menjadi memiliki bayangan.

background:#FF6C17; font-size:24px; text-shadow:2px 2px 2px #A6250C;color:#FFE9C7;

• 2px pada urutan pertama berarti memberi bayangan berukuran 2px ke kanan. Apabila-2px berarti memberi bayangan berukuran 2px ke kiri.
• 2px pada urutan kedua berarti memberi bayangan berukuran 2px ke atas. Apabila -2px berarti memberi bayangan berukuran 2px ke bawah.
• 2px pada urutan ketiga berarti membuat blur pada bayangan tersebut sebesar 2px.
• #A6250C adalah warna dari bayangan tersebut.
• #FF6C17 adalah warna background pada text,bila kamu tidak ingin menggunakan background,kamu cukup hilangkan saja kodenya

Contoh 1.

TEXT SHADOW CSS3 - TIMBUL

kode:

h1 {background:#FF6C17; font-size:24px; text-shadow:2px 2px 2px #A6250C; color:#FFE9C7;}

Contoh 2.

TEXT SHADOW CSS3 - TENGGELAM

kode:

h1 {background:#FF6C17; font-size:24px;text-shadow:1px 1px 1px #FF9924; color:#823210;}

Contoh 3.

TEXT SHADOW CSS3 - 3D

kode:


h1 {background:#FF6C17; font-size:24px; text-shadow:-1px -1px 1px #FF9924, 1px 1px 1px #A6250C; color:#FF6C17;}

---

CSS ANIMATION



Untuk menggunakan Trik ini,ada satu kode yang penting agar animasi,mendapatkan fade efect
(-webkit-transition: all 1s ease-in-out)  yang diletakan pada kode CSSdan ditambah dengan salah satu kode di bawah ini,Diletakan Pada Kode HOVER agar,bila kursor diarahkan ke table,akan muncul animasinya...

box 1	Berpidah ke kanan: -webkit-transform: translate(3em,0);
box 2	Berputar 30 drajat dengan searah jarum jam: -webkit-transform: rotate(30deg);
box 3	Bergerak ke kanan dan kebawah: -webkit-transform: translate(3em,1em);
box 4	Berubah  ukuran: -webkit-transform: scale(2);

Kode CSS BOX 1

h2.acc_trigger4 {
padding: 0; margin: 0 0 15px 0;
background: url(http://img200.imageshack.us/img200/8118/61589083.jpg) no-repeat;
height: 46px; line-height: 46px;
width: 700px;
font-size: 1.2em;
font-weight: normal;
float: left;-webkit-transition: all 1s ease-in-out;}     <<

h2.acc_trigger4:hover { -webkit-transform: translate(3em,0);}  <<

Contoh
Arahkan kursor kamu pada tabel dibawah ini


BOX1

 

BOX2

 

BOX3

 

BOX4

 

---

Rocket animation

Kode Css

#outerspace1 {position: relative; height: 400px;background: #0c0440 url(http://www.the-art-of-web.com/images/outerspace.jpg);}div.rocket {position: absolute;bottom: 10px;left: 20px;-webkit-transition: all 3s ease-in;}div.rocket img {-webkit-transition: all 2s ease-in-out;}#outerspace:hover div.rocket {-webkit-transform: translate(540px,-200px);}#outerspace:hover div.rocket img {-webkit-transform: rotate(70deg);}

Kode HTML

Google Chrome
Klik kanan pada halaman ini,lalu pilih"Lihat sumber halaman",lalu tekan control F(Ctrl+F) =Search/Cari Kode

div id="outerspace

Lalu copy...






Hasilnya.....

Jika kamu arahkan kursor kamu ke rocket di atas,maka rocket itu akan bergerak sesuai dengan kode css -webkit-transform: translate(540px,-200px) dan berputar 70 drajat( -webkit-transform: rotate(70deg)



Contoh:

 

 

Kamu Bisa kEmbangkan animasi kamu,pinter2 aja ngeditnya n_n

---

GOOGLE FONT API

sekarang kita bisa Merubah font blog kita tanpa takut mberat-beratin loading (nggak kayak Coufon, slfr dan flash). Ini cara mudah dan sederhana buat kawan yang pengen ngehias blog tanpa mberat-mberatin loading blog...


Font yang digunakan BLOG AKB http://code.google.com/webfonts/family?family=Reenie+Beanie#specimen

Langsung aja buka Google Font Directory,

Nah, disitu ada beberapa pilihan font yang bisa kita pakai. Cara memakainya cukup mudah.

1. Pertama, pilih font yang anda inginkan,
2. Nanti ada kotak preview, pilih saja langsung "Get The Code"
3. Nah, kode sourcenya tinggal dicopy diatas kode (berikan tanda "/" di akhir kode supaya tidak terjadi error saat di save Contoh    )
4.  Setelah itu, pada kode css anda, pilih font mana yang ingin diubah. Misal header (biasanya kode css-nya h1) Jadinya : h1 { font-family: 'Cantarell', arial, serif; }
5. Jangan lupa disave!

Bisa ndak? Kalo ada yang ingin bertanya, silakan... jangan malu2 ya :p


(Untuk catatan, Google Webfont ini masih dalam tahap ''beta'', jadi tidak menutup kemungkinan kalo nanti akan lebih banyak dan bervariasi lagi font-nya)


Semoga Bermanfaat !!


By my friend,ZepT  http://zep-t.blogspot.com/2010/05/ganti-font-dengan-google-font-directory.html

---

Ragam Kreasi CSS

SUMBER:http://deconstructioncode.blogspot.com/2009/09/ragam-kreasi-css.html
Ada banyak ragam pengembangan kreasi CSS, baik itu untuk typo atau juga image dengan menggunakan teknik sprites CSS. Berikut ini beberapa pengembangan kreasi yang menarik berupa terapan CSS yang bisa kita manfaatkan untuk pengembangan teknik CSS.

1. A Festive Type Folly


2. Date Display Technique with Sprites


3. Text Rotation with CSS


4. Making Accessible CSS Buttons Look Awesome


5. Easy CSS Tooltip


6. Create a Letterpress Effect with CSS Text-Shadow


7. How to Build a Simple Button with CSS Image Sprites


8. CSS Drop Shadows
CSS Drop Shadows
CSS Drop Shadows II: Fuzzy Shadows



9. Cool CSS Image Pop-up


10. Object-Oriented CSS: What, How, and Why

demo:


11. 11 Classic CSS Techniques Made Simple with CSS3

12. 3 Easy and Fast CSS Techniques for Faux Image Cropping

13. Placing a CSS background image horizontally right on an h2 using a span element

14. CSS Gradient Text Effect


15. Pure CSS LightBox

 Dan masih banyak lagi....
Css Dapat digabungkan lagi dengan Jquery,mootools,dan javascript.....
Sampai disini trik yang bisa saya berikan,sElamat Mencoba...




Sumber :: http://akb-kita.blogspot.com