Wednesday, 30 May 2012

mematikan lampu saat ingin tidur


Tidur dalam keadaan tanpa lampu dan gelap di waktu malam akan membuat tidur menjadi lebih nyenyak karena hanya dalam keadaan benar-benar gelaplah tubuh baru bisa terangsang untuk menghasilkan hormon melatonin. Hormon inilah menyebabkan seseorang menjadi mengantuk di malam hari dan membuat tidur menjadi lelap.


Seorang ahli biologi, Joan Roberts, merupakan orang pertama yang menemukan hubungan antara lampu dan kesehatan. Ia menemukan korelasi tersebut dalam penelitiannya pada hewan percobaan yang diberikan perlakuan dengan cara menyalakan lampu buatan sepanjang malam. Setelah diamati beberapa lama, maka Roberts melakukan pengukuran kadar hormon melatonin di dalam tubuh hewan tersebut dan menemukan fakta bahwa jumlahnya makin berkurang disertai penurunan daya tahan tubuhnya terhadap penyakit. Maka Roberts pun berkesimpulan bahwacahaya lampu (termasuk pancaran dari layar televisi) dapat menyebabkan penurunan kadar hormon melatonin di dalam tubuh yang akan mempengaruhi penurunan daya tahan tubuh terhadap penyakit dan mengakibatkan tubuh menjadi lemah. 


Beberapa abad kemudian, para ilmuwan di berbagai belahan dunia pun menyelidiki tentang pentingnya tidur di malam hari dalam keadaan lampu dimatikan. Hasil penelitian mereka ternyata memperkuat hasil penelitian sebelumnya yang dilakukan oleh Joan Roberts. Salah satunya adalah hasil penelitian yang dipublikasikan dalam jurnal Cancer Genetics and Cytogenetics menyatakan bahwa menyalakan cahaya buatan pada malam hari ketika tidur akan memiliki dampak pada jam biologis tubuh dan dapat menjadi pemicu ekspresi berlebihan dari sel-sel yang dikaitkan dengan pembentukan sel kanker. 


Apakah yang dimaksud dengan hormon melatonin tersebut ?


Hormon melatonin (N-acetyl-5-metoksitriptamin) merupakan hormon pengatur utama dari seluruh hormon yang berfungsi mengatur dan memelihara irama sirkadian (sistem jam biologis tubuh yang memegang peranan penting dalam mengatur saat untuk tidur dan bangun). Hormon melatonin sebagian besar dibuat oleh kelenjar pineal dan sebagian kecilnya dibuat di usus dan retina mata. Produksi hormon melatonin dipengaruhi oleh tingkat intensitas cahaya lingkungan dan akan selalu bertambah banyak jika manusia berada dalam lingkungan yang gelap dan suasana hening namun produksinya akan dihambat oleh adanya rangsangan luar seperti sinar yang terang dan medan elektromagnetik.


Apakah fungsi hormon melatonin di dalam tubuh ?

Sebagai hormon yang memiliki fungsi utama menciptakan kualitas tidur yang baik, maka hormon melatonin memiliki kegunaan sebagai berikut.

  • Menjaga keharmonisan metabolisme sel, mempertahankan efisiensi/efektivitas kerja sel, membuat sel tidak mudah rusak sehingga meningkatkan daya tahan sel terhadap berbagai gangguan dari luar.
  • Mempengaruhi sistem kekebalan tubuh
  • Mempengaruhi kerja organ tubuh terutama di saat tidur
  • Mempengaruhi kesehatan psikologis seseorang terutama terhadap mood. Seseorang kurang tidur akan memiliki kadar melatonin yang rendah sehingga mengalami gangguan perasaan (mood) seperti mudah gelisah, mudah lelah, mudah marah.
  • Berperan sebagai sistem alami yang mengatur masa penuaan tubuh.
  • Membuat tidur menjadi lebih nyenyak sehingga meningkatkan kualitas tidur.
  • Membantu tubuh memerangi sel-sel kanker seperti pada kanker payudara, kanker prostate, penyakit Parkinson, dan jantung aritmia. Melatonin berperan mendorong aktifitas antioksidan secara optimal di dalam tubuh sehingga mencegah kerusakan DNA akibat ulah zat-zat karsinogenik penyebab kanker dan memberhentikan mekanisme pertumbuhannya.


Bagaimana cara kerja hormon melatonin di dalam tubuh ?


Tepat di bagian tengah otak terdapat suatu kelenjar yang bernama Pineal dan berfungsi menghasilkan hormon melatonin. Kinerja dari kelenjar ini dipengaruhi langsung oleh pusat pengendali irama sirkadian di otak, Suprachiasmatik Nuclei (SCN), dan bersifat fotosensitif (peka terhadap rangsang cahaya) sehingga hasil produksinya sangat dipengaruhi oleh tingkat intensitas cahaya yang diterima tubuh. Ketika tubuh sudah berada dalam lingkungan gelap maka SCN akan memerintahkan kelenjar Pineal untuk menghasilkan hormon melatonin lebih banyak sehingga mengaktifkan reseptor-reseptor tubuh yang akan menimbulkan efek-efek kimiawi dan biologis seperti timbulnya rasa kantuk, penurunan suhu tubuh, dan penurunan aktivitas kerja sebagian besar organ tubuh, kecuali otak dan sistem kekebalan tubuh. Maka tubuh pun mulai bersiap memasuki fase istirahat. Keadaan hening dan gelap akan membuat produksi hormon melatonin yang dihasilkan mencapai ambang optimal dan tidur pun menjadi nyenyak serta berkualitas. 

Kadar melatonin secara berangsur-angsur meningkat dan mencapai puncaknya tepat pada waktu tengah malam dan kemudian berangsur-angsur menurun hingga 2/3 malam. Saat tertidur nyenyak, maka tubuh akan fokus bekerja untuk proses perbaikan kerusakan jaringan sel dan beregenerasi serta mengaktifkan kerja otak menjadi lebih optimal.

Apa saja yang mempengaruhi kinerja hormon melatonin di dalam tubuh ?


Karena kadar melatonin sangat ditentukan oleh tingkat intensitas cahaya yang diterima oleh tubuh maka kadar melatonin pada siang hari tidak akan terdeteksi. Selain dari sumber cahaya alami, kadar hormon melatonin pun dipengaruhi pula oleh sumber cahaya buatan, suhu lingkungan, dan gelombang elektromagnetik. Jika tubuh terlalu banyak menerima cahaya pada senja hari atau terlalu sedikit cahaya pada siang hari maka akan terjadi kekacauan pada siklus irama sirkadian tubuh yang dipengaruhi oleh kadar hormon melatonin. Selain itu, jika pada waktu tidur keadaan ruangan di sekitar kita masih dilingkupi oleh cahaya lampu ataupun gelombang elektromagnetik yang berasal dari cahaya televisi, maka hal-hal tersebut akan menembus kulit mata meskipun sedang dalam keadaan terpejam, dan membuat otak menafsirkan sinyal tersebut untuk tetap mengaktifkan kinerja organ-organ tubuh lain yang seharusnya diistirahatkan. Inilah satu jawaban sederhana ketika seseorang yang selalu merasa kurang segar saat bangun meskipun sudah tertidur dalam waktu lama.

Sebuah penelitian yang dipublikasikan dalam jurnal The Journal Sleep Research pada tahun 1995 menyatakan bahwa kafein yang terdapat dalam kopi, teh hitam, minuman bersoda, dan coklat dapat menurunkan kadar hormone melatonin di dalam tubuh hingga 50% dari kadar normalnya dan keadaan ini dapat bertahan selama 6 jam. Oleh karena itu, janganlah mengkonsumsi minuman dan makanan tersebut menjelang waktu tidur.


Gejala apa sajakah yang dapat timbul bila kadar hormon melatonin tidak normal ?

Beberapa gejala yang dapat timbul berkaitan dengan hormon melatonin yaitu sukar tidur (insomnia), gangguan irama sirkadian, sakit kepala, penurunan daya konsentrasi, dan keletihan.Gejala-gejala tersebut terutama timbul bila produksi hormon melatonin berkurang. 




Sumber :

Tuesday, 29 May 2012

Manfaat buah bagi kesehatan

Manfaat buah - Banyak diantara kita yang mungkin tidak tahu manfaat buah. Ternyata sangat banyak sekali manfaat buah bagi kesehatan. Apabila kita rajin mengkonsumsi buah-buahan alami setiap hari, maka kita akan mendapatkan manfaat buah tersebut bagi kesehatan kita. Manfaat buah alami lebih baik untuk memenuhi kebutuhan vitamin dan mineral kita daripada kita mengkonsumsi obat-obatan.
buah-buahan
Berikut ini manfaat buah yang sering kita makan sehari-hari :
1. BUAH TOMAT (TOMATO)
Manfaat buah tomat yaitu :
- tomat mengandung vitamin A, B1 dan C.
- tomat dapat membantu membersihkan hati hati dan darah kita.
- tomat dapat mencegah beragam penyakit dan gangguan kesehatan lain seperti :
a. gusi berdarah.
b. rabun senja / kotok ayam.
c. penggumpalan darah.
d. usus buntu.
e. kanker prostat dan kanker payudara.

2. BUAH PEPAYA (PAPAYA)
Manfaat buah pepaya yaitu :
- pepaya mengandung vitamin C dan provitamin A.
- pepaya dapat membantu memecah serat makanan dalam sistem pencernaan.
- pepaya dapat membuat lancar saluran pencernaan makanan.
- pepaya dapat menanggulangi atau mengobati beragam penyakit dan gangguan kesehatan lain seperti :
a. menyembuhkan luka.
b. menghilangkan infeksi.
c. menghilangkan alergi

3. BUAH PISANG (BANANA)
Manfaat buah Pisang yaitu
- pisang mengandung vitamin A, B1, B2 dan C.
- pisang dapat membantu mengurangi asam lambung.
- pisang bisa membantu menjaga keseimbangan air dalam tubuh.
- pisang dapat menanggulangi atau mengobati beragam penyakit dan gangguan kesehatan lain seperti :
a. gangguan pada lambung.
b. penyakit jantung dan stroke
c. stress
d. menurunkan kadar kolesterol dalam darah.

4. BUAH MANGGA (MANGO)
Manfaat buah mangga yaitu
- mangga mengandung vitamin A, E dan C.
- mangga dapat bertindak sebagai desinfektan.
- mangga dapat membersihkan darah.
- mangga dapat menanggulangi atau mengobati beragam penyakit dan gangguan kesehatan lain seperti :
a. bau badan / bb / bau tubuh yang tidak enak.
b. menurunkan panas tubuh saat demam.

5. BUAH STRAWBERRY (STRAWBERRY)
Manfaat buah Strawberry yaitu :
- stoberi mengandung provitamin A, vitamin B1, B dan C.
- stobery mengandung antioksidan untuk melawan zat radikal bebas.
- strawbery memiliki kegunaan / fungsi kesehatan lain seperti :
a. mengobati gangguan kesehatan pada kandung kemih.
b. menjadi anti virus
c. menjadi anti kanker

6. BUAH APEL (APPLE)
Manfaat buah apel yaitu :
- apel mengandung vitamin A, B dan C.
- apel dapat membantu menurunkan kadar kolesterol dalam darah.
- apel mempunyai kegunaan / fungsi kesehatan lain seperti :
a. menjadi zat anti kanker.
b. mengurangi nafsu makan yang terlalu besar.

7. BUAH JERUK (ORANGE)
Manfaat buah jeruk yaitu ;
- jeruk mengandung vitamin A, B1, B2 dan C.
- jeruk mengandung antikanker bagi tubuh.
- jeruk dapat mencegah dan mengobati beragam penyakit dan gangguan kesehatan lain seperti :
a. mengobati sariawan.
b. menurunkan resiko terkena kardiovaskuler, kanker, dan katarak.

8. BUAH PEAR / PIR (PEAR)
Manfaat buah Pear yaitu :
- pear mengandung vitamin C dan provitamin A.
- pear mengandung anti oksidan yang baik untuk menjaga kesehatan.
- pear dapat mencegah beragam penyakit dan gangguan kesehatan lain seperti :
a. menurunkan demam / panas tubuh.
b. mengencerkan dan menghilangkan dahak pada batuk berdahak.

9. BUAH JAMBU BIJI MERAH / JAMBU MERAH (GUAVA)
Manfaat buah jambu biji yaitu :
- jambu merah mengandung vitamin C yang sangat banyak.
- jambu merah mengandung zat antioxidan dan antikanker.
- jambu merah mempunyai kegunaan / fungsi kesehatan lain seperti :
a. menurunkan kadar kolesterol darah
b. mengobati infeksi.
c. menjaga mengobati sariawan.
d. memperlancar peredaran darah.
e. melancarkan saluran pencernaan.
f. mencegah konstipasi.

10. BUAH SEMANGKA (WATERMELON)
Manfaat buah semangka yaitu
- semangka mengandung vitamin C dan provitamin A.
- semangka dapat menjadi antialergi.
- semangka mempunyai kegunaan / fungsi kesehatan lain seperti :
seperti :
a. menurunkan kadar kolesterol.
b. mencegah dan menahan serangan jantung.

11. BUAH MELON (HONEYDEW)
Manfaat buah melon yaitu :
- melon mengandung vitamin C dan provitamin A.
- melon mengandung zat anti kanker dan anti oksidan.
- melon mempunyai kegunaan / fungsi kesehatan lain seperti :
a. mencegah darah menggumpal.
b. membersihkan kulit.
c. memlancarkan saluran pencernaan.
d. menurunkan kadar kolestrerol.

12. BUAH WORTEL (CARROT)
Manfaat buah Wortel yaitu :
- wortel kaya akan vitamin A.
- wortel baik untuk menjaga kesehatan mata.
- wortel mempunyai kegunaan / fungsi kesehatan lain seperti :
a. meningkatkan kekebalan dan ketahanan tubuh jasmani.
b. menjaga hati tetap sehat.

13. BUAH BELIMBING (STAR FRUIT)
Manfaat buah belimbing yaitu :
- belimbing mengandung vitamin C dan provitamin A.
- belimbing dapat membantu memperlancar pencernaan makanan.
- belimbing mempunyai kegunaan / fungsi kesehatan lain seperti :
a. menurunkan tekanan darah.
b. menurunkan kadar / tingkat kolesterol dalam tubuh.

14. BUAH NANAS (PINEAPPLE)
Manfaat buah nanas yaitu :
- nanas mengandung vitamin B dan C.
- nanas dapat mencegah terkena serangan jantung dan stroke / struk.
- nenas dapat mengobati beragam penyakit dan gangguan kesehatan lain seperti :
a. menyembuhkan luka.
b. menyembuhkan infeksi pada saluran pencernaan.
Itulah beberapa manfaat buah alami yang sering kita konsumsi. Mengkonsumsi buah setiap hari bagus untuk kebutuhan vitamin dan energi kita

http://biologi-news.blogspot.com/
Sumber :

Monday, 28 May 2012

10 tips mengatasi depresi


Sebab Terjadinya Depresi
Perlu untuk mengetahui sebab-sebab terjadinya depresi. Ada beberapa hal yang bisa menyebabkan depresi, yaitu:

1. kejadian menyedihkan. Seperti kematian seseorang yang dicintai yang bisa berlanjut depresi. Masa duka adalah sebagian penting dari proses penyesuaian diri terhadap suatu kehilangan. Depresi ini sering disebut dengan depresi reaktif.

2. stres biasa. Stres merupakan suatu reaksi fisik dan emosional terhadap suatu keadaan yang menekan, menuntut, atau membebani. Depresi akibat stres biasanya dipacu oleh ketegangan, baik dirumah, sekolah, kantor atau tempat sosial lainnya.

3. hal ini khusus wanita. Depresi juga bisa muncul di hari menjelang haid, karena itu disebut dengan depresi pra haid. Gangguan bervariasi dan merupakan kejadian umum. Hal ini bersamaan dengan munculnya sikap mudah jengkel, kasar, serta gejala fisik kenaikan berat badan, sakit kepala, dan perut mual.

4. penyakit akibat infeksi
. Penyakit yang diakibatkan oleh infeksi sering diikuti dengan masa-masa depresi.


Berikut ini 10 tips mengatasi depresi yang dikutip dari Webmd.com

1. Bermain dengan hewan peliharaan.

Terkadang hewan peliharaan benar-benar dapat menjadi teman terbaik bahkan bisa menjadi terapi yang baik. Karena disaat Anda bermain dengan hewan peliharaan, maka Anda dapat melupakan semua masalah Anda. 

2. Mengatur pola makan
Meskipun tidak ada diet khusus untuk mengatasi depresi, toh, diet sehat tetap bisa menjadi bagian dari rencana perawatan keseluruhan. Membangun pola makan dengan lebih banyak mengonsumsi buah-buahan, sayuran, dan biji-bijian dapat membantu meningkatkan kesehatan fisik dan emosional.

3. Pilih makanan untuk meningkatkan mood Anda
Beberapa penelitian menunjukkan asam lemak omega-3 dan vitamin B12 dapat mengurangi perubahan mood yang merupakan bagian dari depresi. Ikan berlemak seperti salmon, tuna, dan mackerel mengandung omega-3 asam lemak. Seafood dan produk susu rendah lemak adalah sumber vitamin B12. Sedangkan vegetarian yang tidak makan daging atau ikan bisa mendapatkan B12 pada sereal, produk susu, dan suplemen.

4. Cobalah karbohidrat rendah lemak
Serotonin adalah bahan kimia otak yang meningkatkan rasa kesejahteraan. Karbohidrat meningkatkan tingkat serotonin dalam otak Anda. Karbohidrat rendah lemak seperti popcorn, kentang panggang, biskuit, atau pasta pilihan, sayuran, buah, dan gandum pilihan juga menyediakan serat, adalah pilihan yang tepat. 

5. Kurangi minum kafein untuk meningkatkan mood
Kecemasan dapat menyertai depresi. Terlalu banyak kafein dapat membuat Anda gugup, gelisah, atau cemas. Jadi kurangi kebiasaan minum soda, kopi, teh, dan cokelat yang dapat membuat perbedaan dalam suasana hati Anda. Hal ini juga dapat membantu Anda tidur lebih baik di malam hari.

6. Rajin periksa ke dokter
Perasaan depresi dapat dikaitkan dengan rasa sakit. Pergilah ke dokter untuk mendapatkan konsultasi yang tepat mengatasi masalah rasa sakit anda. 

7. Berolahraga 
Bagi beberapa orang, olahraga sangat baik sebagai antidepresan. Dan Anda tidak perlu lari maraton, cukup  berjalan-jalan dengan seorang teman. Dengan berjalannya waktu, olahraga dapat meningkatkan aktivitas Anda pada hari-hari berikutnya. Anda akan merasa lebih baik secara fisik, tidur lebih nyenyak, dan memperbaiki suasana hati Anda.

8. Pilih latihan Anda
Jika Anda tidak ingin olahraga yang berat, Anda bisa memilih olahraga yang sedikit santai, misalnya bermain golf, naik sepeda, bekerja di kebun Anda, bermain tenis, atau berenang. Yang penting adalah untuk melakukan sesuatu yang Anda sukai. 

9. Latihan dengan dukungan lainnya
Tetap terhubung dengan orang lain membantu mengatasi kelesuan, kelelahan, dan kesepian. Bergabunglah dengan kelompok olahraga atau latihan dengan teman, dan Anda akan memiliki dukungan untuk membantu Anda tetap di jalur!

10. Lakukan kreativitas Anda
Melukis, fotografi, bermusik, merajut, atau menulis semua adalah cara orang menjelajahi perasaan mereka dan mengekspresikan apa yang ada di pikiran mereka. Menjadi kreatif dapat membantu Anda merasa lebih baik. Tujuannya bukan untuk menciptakan sebuah mahakarya. Lakukan sesuatu yang memberi Anda kesenangan. Ini dapat membantu Anda lebih memahami siapa Anda dan bagaimana Anda merasa.


health.ghiboo.com
Sumber :

Sunday, 27 May 2012

Penyebab Emosi Tak Stabil

 Kerjaan di kantor padahal tidaklah terlalu menumpuk. Bos pun sedang berada di luar kota dan tidak tampak di kantor hampir seminggu ini. Tapi mengapa rasanya emosi ingin marah-marah saja atau sering kali kita melihat apa yang ada didepan mata semua nampak selalu salah. Apakah anda pernah merasakan hal-hal diatas ?

Kalau mau ditelisik lebih jauh bisa jadi ini karena masalah kesehatan fisik anda yang sedang terganggu sehingga merembet pada kondisi mental yang lagi sensitif untuk sesaat. Sebenarnya anda tidak perlu panik bila sudah mengetahui apa penyebabnya dan kiat untuk mengatasinya.Berikut ini adalah beberapa hal yang menyebabkan emosi tidak stabil:

1. Produksi hormon anda
Yang ini mungkin khusus buat para wanita yang mengalami tamu bulanan. Tiap bulannya ovarium memproduksi hormon estrogen dan progesteron. Satu minggu sebelum menstruasi, tingkat progesteron berada di puncak lalu langsung menurun drastis.
Hal ini berpengaruh pada emosi dan membuat Anda mudah marah dan tersinggung karena disebabkan fluktuasi hormon. Untuk mengurangi efek negatifnya, anda bisa mengonsumsi makanan yang mengandung asam lemak omega 3 tinggi, seperti ikan laut.

2. Minuman berkafein
Bagi yang suka minum kopi maka silakan kembali cek asupan kafein setiap harinya. Sebagaimana kita ketahui bahwa kafein itu bisa merangsang otak, yang membuatnya ketagihan. Ketika seseorang menjadi kecanduan kafein, mereka mungkin mengalami gejala seperti sakit kepala, kelelahan dan perasaan murung.
Untuk menjaga kondisi tubuh dan pikiran yang tetap fit sebaiknya jangan mengonsumsi lebih dari 200 miligram atau 2 gelas minuman berkafein setiap harinya.

3. Cahaya redup
Ternyata cahaya lampu dan cahaya redup dari televisi, alarm digital, bahkan sinar dari laptop dapat meningkatkan risiko depresi. Cahaya-cahaya ini ini menurunkan produksi hormon melatonin. Tanpa tingkat melatonin stabil, pola tidur yang normal dapat terganggu. Jadi, coba benahi letak tempat tidur agar tak terganggu cahaya dan usahakan untu mematikan lampu saat ingin tidur.

4. Anti terhadap makanan berkarbohidrat
Jangan sampai karena sedang diet maka anda meninggalkan asupan nutrisi yang mengandung karbohidrat dan gula begitu saja. Kadar gula darah yang rendah dalam darah membuat Anda lebih sensitif dan sulit berkonsentrasi. Banyak sumber karbohidrat sehat, seperti nasi merah. Untuk memenuhi kebutuhan glukosa, Anda bisa mengonsumsi madu atau buah-bahan manis.

Sumber :

Tuesday, 22 May 2012

CSS3 Slideshow Tanpa Loncatan Halaman


CSS3 Slideshow Tanpa Loncatan Halaman

26 Apr 2012
Pure CSS3 Slideshow Without Page Jump

Saya sudah sangat sering melihat beberapa eksperimen tentang slideshow dengan CSS3 yang memanfaatkan selektor :targetuntuk mengakses setiap slide. Sehingga jika salah satu tombol navigasi diklik, maka salah satu slide dengan ID yang sesuai dengan#hash pada URL akan ditampilkan:

#css3-slider img {
  display:none;
}

#css3-slider img:target {
  display:block;
}

Namun sayangnya CSS :target akan membuat halaman meloncat. Ini adalah sikap normal konsep fragment identifier halaman »Tentang CSS :target

Ada satu cara lain untuk mengakses setiap slide tanpa menyebabkan loncatan halaman, yaitu dengan menggunakan hack elemen input bertipe checkbox atau radio. Mereka bisa dimanfaatkan karena mereka memiliki selektor pseudo-class :checked. Dan tentunya, elemen input tidak akan menyebabkan loncatan halaman seperti halnya tautan. Sedangkan untuk mengakses setiap slide, kita akan menggunakan selektor + atau ~ untuk mengakses elemen yang terletak tepat di sebelah elemen yang ditandai/dicentang (:checked).

Beginilah konsep yang Saya gunakan: Kita menggunakan elemen <label> untuk mengeksekusi elemen <input type="radio">, sehingga kita bisa mengatur tampilannya dan bisa melupakan radio yang tidak pernah bisa diubah tampilannya menggunakan CSS (Setidaknya untuk saat ini. Masa depan, siapa yang tahu?)
Kita menggunakan radio hanya sebagai penyimpan aksi checked atau unchecked untuk mengakses setiap slide secara bergantian:

#css3-slider img {
  display:none;
}

#css3-slider input:checked + img {
  display:block;
}

<input type="radio" name="num" id="s1" />
<label for="s1">1</label>
<img src="slide1.png" />


Versi Lengkap

Berikut ini adalah versi lengkap dari konsep yang Saya nyatakan di atas untuk mengatasi masalah loncatan halaman karena CSS:target. Setelah ini Anda tidak lagi memerlukan CSS :target, yang Anda perlukan hanya radio. Agak sulit untuk dijelaskan secara tertulis, Anda hanya bisa mengetahui cara kerjanya dengan cara mempelajari kode di bawah ini setelah Anda mengerti tentangAdjacent Sibling Selectors:

HTML

<ul id='css3-slider'>
    <li>
        <input type='radio' id='s1' name='num' checked='true' />
        <label for='s1'>1</label>
        <a href='/'>
            <img src='slide-1.jpg' />
            <span>Why do you put the egg yolks on your eyes?</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s2' name='num' />
        <label for='s2'>2</label>
        <a href='/'>
            <img src='slide-2.jpg' />
            <span>How can you look ahead if your eyes are on the side?</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s3' name='num' />
        <label for='s3'>3</label>
        <a href='/'>
            <img src='slide-3.jpg' />
            <span>Keep praying to God</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s4' name='num' />
        <label for='s4'>4</label>
        <a href='/'>
            <img src='slide-4.jpg' />
            <span>Stay relaxed</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s5' name='num' />
        <label for='s5'>5</label>
        <a href='/'>
            <img src='slide-5.jpg' />
            <span>And you will forever be relaxed</span>
        </a>
    </li>
</ul>

CSS

/**
 * Pure CSS3 Slideshow Without Page Jump by Taufik Nurrohman
 * 26 April 2012
 * http://hompimpaalaihumgambreng.blogspot.com
 */

/* General */
#css3-slider {
  margin:30px auto;
  padding:0px 0px;
  width:448px;
  height:286px;
  position:relative;
}

#css3-slider li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

/* Navigation */
#css3-slider li input + label {
  position:absolute;
  bottom:5px;
  left:10px;
  z-index:999;
  font:bold 11px/16px Arial,Sans-Serif;
  background-color:black;
  color:white;
  padding:0px 0px;
  width:16px;
  text-align:center;
  cursor:pointer;
}

#css3-slider li:nth-child(2) label {left:28px;}
#css3-slider li:nth-child(3) label {left:46px;}
#css3-slider li:nth-child(4) label {left:64px;}
#css3-slider li:nth-child(5) label {left:82px;}

/* Images */
#css3-slider li img {
  border:none;
  outline:none;
  position:absolute;
  top:50%;
  left:50%;
  width:0px;
  height:0px;
  visibility:hidden;
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  -webkit-transform:rotate(0deg) scale(0);
  -moz-transform:rotate(0deg) scale(0);
  -ms-transform:rotate(0deg) scale(0);
  -o-transform:rotate(0deg) scale(0);
  transform:rotate(0deg) scale(0);
}

/* Captions */
#css3-slider a {
  text-decoration:none !important;
}

#css3-slider li a span {
  display:block;
  position:absolute;
  right:0px;
  bottom:0px;
  left:0px;
  background-color:rgba(0,0,0,0.8);
  font:normal 11px/26px Arial,Sans-Serif;
  color:white;
  padding:0px 10px;
  text-align:right;
  opacity:0;
  viibility:hidden;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
}

/* Active navigation */
#css3-slider li input:checked + label {
  background-color:#39f;
  color:white;
}

/* Show the image with transition */
#css3-slider li input:checked ~ img,
#css3-slider li input:checked ~ a img {
  top:0%;
  left:0%;
  width:448px;
  height:286px;
  visibility:visible;
  -webkit-transform:rotate(720deg) scale(1);
  -moz-transform:rotate(720deg) scale(1);
  -ms-transform:rotate(720deg) scale(1);
  -o-transform:rotate(720deg) scale(1);
  transform:rotate(720deg) scale(1);
  opacity:1;
  z-index:99;
}

/* Show the caption with fade effect */
#css3-slider li input:checked ~ a span {
  opacity:1;
  z-index:100;
}

/* Hide the radio */
#css3-slider input {
  display:none;
}

Sumber :

DAFTAR ISI

CSS3 Lego Block Button


CSS

/* RED (DEFAULT COLOR) */
.lego {
  margin:0px auto 10px;
  cursor:pointer;
  background-color:#B2050A;
  width:110px;
  display:block;
  font:10px/57px Arial,Sans-Serif;
  color:rgba(0,0,0,0.4);
  text-shadow:0px 1px 0px rgba(255,255,255,0.1);
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  position:relative;
  -webkit-box-shadow:
    0px 1px 0px 0px #880408,
    0px 3px 0px -1px #880408,
    0px 5px 0px -2px #880408,
    0px 6px 7px rgba(0,0,0,0.9);
  -moz-box-shadow:
    0px 1px 0px 0px #880408,
    0px 3px 0px -1px #880408,
    0px 5px 0px -2px #880408,
    0px 6px 7px rgba(0,0,0,0.9);
  box-shadow:
    0px 1px 0px 0px #880408,
    0px 3px 0px -1px #880408,
    0px 5px 0px -2px #880408,
    0px 6px 7px rgba(0,0,0,0.9);
}

.lego:before {
  content:"";
  width:15px;
  height:15px;
  background-color:#CB0D12;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  position:absolute;
  top:7px;
  left:8px;
  -webkit-box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #CB0D12, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #CB0D12, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #CB0D12, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #CB0D12, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #CB0D12, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #CB0D12, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #CB0D12, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #CB0D12, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #CB0D12, 80px 29px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #CB0D12, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #CB0D12, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #CB0D12, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #CB0D12, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #CB0D12, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #CB0D12, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #CB0D12, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #CB0D12, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #CB0D12, 80px 29px 2px rgba(0,0,0,0.4);
  box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #CB0D12, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #CB0D12, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #CB0D12, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #CB0D12, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #CB0D12, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #CB0D12, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #CB0D12, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #CB0D12, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #CB0D12, 80px 29px 2px rgba(0,0,0,0.4);
}

/* GREEN */
.lego.green {
 background-color:#36AA34;
  -webkit-box-shadow:
    0px 1px 0px 0px #217E21,
    0px 3px 0px -1px #217E21,
    0px 5px 0px -2px #217E21,
    0px 6px 7px rgba(0,0,0,0.9);
  -moz-box-shadow:
    0px 1px 0px 0px #217E21,
    0px 3px 0px -1px #217E21,
    0px 5px 0px -2px #217E21,
    0px 6px 7px rgba(0,0,0,0.9);
  box-shadow:
    0px 1px 0px 0px #217E21,
    0px 3px 0px -1px #217E21,
    0px 5px 0px -2px #217E21,
    0px 6px 7px rgba(0,0,0,0.9);
}

.lego.green:before {
  background-color:#3BB439;
  -webkit-box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #3BB439, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #3BB439, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #3BB439, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #3BB439, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #3BB439, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #3BB439, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #3BB439, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #3BB439, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #3BB439, 80px 29px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #3BB439, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #3BB439, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #3BB439, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #3BB439, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #3BB439, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #3BB439, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #3BB439, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #3BB439, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #3BB439, 80px 29px 2px rgba(0,0,0,0.4);
  box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #3BB439, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #3BB439, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #3BB439, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #3BB439, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #3BB439, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #3BB439, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #3BB439, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #3BB439, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #3BB439, 80px 29px 2px rgba(0,0,0,0.4);
}

/* BLUE */
.lego.blue {
 background-color:#3676B7;
  -webkit-box-shadow:
    0px 1px 0px 0px #2764A2,
    0px 3px 0px -1px #2764A2,
    0px 5px 0px -2px #2764A2,
    0px 6px 7px rgba(0,0,0,0.9);
  -moz-box-shadow:
    0px 1px 0px 0px #2764A2,
    0px 3px 0px -1px #2764A2,
    0px 5px 0px -2px #2764A2,
    0px 6px 7px rgba(0,0,0,0.9);
  box-shadow:
    0px 1px 0px 0px #2764A2,
    0px 3px 0px -1px #2764A2,
    0px 5px 0px -2px #2764A2,
    0px 6px 7px rgba(0,0,0,0.9);
}

.lego.blue:before {
  background-color:#3683CE;
  -webkit-box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #3683CE, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #3683CE, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #3683CE, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #3683CE, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #3683CE, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #3683CE, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #3683CE, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #3683CE, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #3683CE, 80px 29px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #3683CE, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #3683CE, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #3683CE, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #3683CE, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #3683CE, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #3683CE, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #3683CE, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #3683CE, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #3683CE, 80px 29px 2px rgba(0,0,0,0.4);
  box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #3683CE, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #3683CE, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #3683CE, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #3683CE, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #3683CE, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #3683CE, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #3683CE, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #3683CE, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #3683CE, 80px 29px 2px rgba(0,0,0,0.4);
}

/* YELLOW */
.lego.yellow {
 background-color:#EACB00;
  -webkit-box-shadow:
    0px 1px 0px 0px #D1A503,
    0px 3px 0px -1px #D1A503,
    0px 5px 0px -2px #D1A503,
    0px 6px 7px rgba(0,0,0,0.9);
  -moz-box-shadow:
    0px 1px 0px 0px #D1A503,
    0px 3px 0px -1px #D1A503,
    0px 5px 0px -2px #D1A503,
    0px 6px 7px rgba(0,0,0,0.9);
  box-shadow:
    0px 1px 0px 0px #D1A503,
    0px 3px 0px -1px #D1A503,
    0px 5px 0px -2px #D1A503,
    0px 6px 7px rgba(0,0,0,0.9);
}

.lego.yellow:before {
  background-color:#F2D305;
  -webkit-box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #F2D305, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #F2D305, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #F2D305, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #F2D305, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #F2D305, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #F2D305, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #F2D305, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #F2D305, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #F2D305, 80px 29px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #F2D305, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #F2D305, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #F2D305, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #F2D305, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #F2D305, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #F2D305, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #F2D305, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #F2D305, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #F2D305, 80px 29px 2px rgba(0,0,0,0.4);
  box-shadow:
    0px 1px 2px rgba(0,0,0,0.4),
    20px 0px 0px #F2D305, 20px 1px 2px rgba(0,0,0,0.4),
    40px 0px 0px #F2D305, 40px 1px 2px rgba(0,0,0,0.4),
    60px 0px 0px #F2D305, 60px 1px 2px rgba(0,0,0,0.4),
    80px 0px 0px #F2D305, 80px 1px 2px rgba(0,0,0,0.4),
    0px 28px 0px #F2D305, 0px 29px 2px rgba(0,0,0,0.4),
    20px 28px 0px #F2D305, 20px 29px 2px rgba(0,0,0,0.4),
    40px 28px 0px #F2D305, 40px 29px 2px rgba(0,0,0,0.4),
    60px 28px 0px #F2D305, 60px 29px 2px rgba(0,0,0,0.4),
    80px 28px 0px #F2D305, 80px 29px 2px rgba(0,0,0,0.4);
}

.lego:active {
  top:3px;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}

HTML

<a class='lego red' href='#'>Lego Button</a>
<a class='lego green' href='#'>Lego Button</a>
<a class='lego blue' href='#'>Lego Button</a>
<a class='lego yellow' href='#'>Lego Button</a>

Sumber :

DAFTAR ISI

Two Reasons why IPS is a "Must Have" for your Network

Introduction This is the third in my Security Series of Connect articles.  For more information on how to keep your enterprise environm...