×

İletişim Formu


Input etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Input etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
CSS + Giriş Font Boyutu Seçimi

CSS + Giriş Font Boyutu Seçimi

7/12/2017 0 Yorum
<!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body { font-family: 'Fira Sans Condensed', sans-serif; } .container { font-size: 15px; border: 1px dotted tomato; padding: 15px; } .container, .wrapper { max-width: 700px; margin: auto; transition: font-size 1s; } h1 { font-size: 2em; } h1::after { content: ""; display: block; max-width: 700px; padding-bottom: 10px; border-bottom: 1px dotted tomato; } h2 { font-size: 1.5em; } p { font-size: 1.2em; } input[type="radio"] { -webkit-appearance: none; height: 30px; width: 30px; background-color: tomato; display: inline-block; outline: none; transition: background-color .7s; } input[type="radio"]:hover { background-color: #ffa494; transition: background-color .7s; } input[type="radio"]:checked { background-color: #ffa494; transition: background-color .7s; } input[type="radio"]:checked::after { color: white; } input[type="radio"]#small::after { font-size: 10px; content: "A"; display: block; position: absolute; width: 30px; height: 30px; line-height: 30px; text-align: center; } input[type="radio"]#medium::after { font-size: 15px; content: "A"; display: block; position: absolute; width: 30px; height: 30px; line-height: 30px; text-align: center; } input[type="radio"]#large::after { font-size: 20px; content: "A"; display: block; position: absolute; width: 30px; height: 30px; line-height: 30px; text-align: center; } input[type="radio"]#small:checked ~ .container { font-size: 10px; } input[type="radio"]#medium:checked ~ .container { font-size: 15px; } input[type="radio"]#large:checked ~ .container { font-size: 20px; } .informative { color: tomato; } </style> </head> <body> <div class="wrapper"> <input type="radio" name="group" id="small"> <input type="radio" name="group" id="medium" checked> <input type="radio" name="group" id="large"> <div class="container"> <h1>CSS + Giriş Font Boyutu Seçimi</h1> <h2>Blogunuza Adsense Reklam Kodları Nasıl Eklenir?</h2> <p class="informative">Blogger HTML Dönüştürücü</p> <p>Adsense hesabınızda oluşturmuş olduğunuz Adsense HTML kodlarını doğrudan blogunuzun HTML yani şablon içerisine kopyalayarak eklemeniz mümkün olmayacaktır. Google Adsense veya harhangi bir javascript kodlarını blogunuzun HTML kısmına eklemek için HTML kodunu aşağıdaki kutuya kopyala - yapıştır yaparak ekleyin ve ardından Dönüştür düğmesine tıklayın. Dönüştürülmüş kodu blogunuza ekleyebilirsiniz.</p> </div> </div> </body> </html>
jQuery + Giriş Font Boyutu Seçimi

jQuery + Giriş Font Boyutu Seçimi

7/12/2017 0 Yorum
<!DOCTYPE html> <html> <head> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body {font-family: 'Fira Sans Condensed', sans-serif;background: #f4f4f2; margin: 0 auto;font-size:14px;color: #444;} .navbar { width: 100%; height: 60px; background: #ccc; } .accordion { width: 700px; margin: 50px auto; } .accordion label { font-family: Arial, sans-serif; padding: 18px 30px 3px 21px; position: relative; display: block; height: 50px; cursor: pointer; color: #adb3b9; line-height: 33px; font-size: 19px; background: #fff; box-shadow: 0px 1px 1px 0px #ccc; } .accordion label:hover { color: #fff; background: #ccc; } .accordion label:before { content: "+"; font-size: 1.5em; line-height: 0.5em; float: left; margin-top: 10px; margin-right: 5px; -moz-transition: -moz-transform 0.3s ease-in-out; -o-transition: -o-transform 0.3s ease-in-out; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .accordion input + label { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .accordion input:checked + label, .accordion input:checked + label:hover { margin-bottom: -6px; background: #F1F1F1; color: #777; } .accordion input:checked + label, .accordion input:checked + label:hover { content: "+"; } .accordion input { display: none; } .accordion .article { background: #f4f4f4; overflow: hidden; height: 0px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .accordion .article p { font-style: italic; color: #777; line-height: 23px; font-size: 14px; padding: 20px; } .accordion input:checked ~ .article { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; padding: 25px; } .accordion input:checked ~ .article.ac-small { height: 478px; } .accordion input:checked ~ .article.ac-medium { height: 478px; } .accordion input:checked ~ .article.ac-large { height: 478px; } .characters { -webkit-animation: box 800ms linear 0s 1 forwards; } input[type="button"] { -webkit-appearance: none; height: 60px; width: 100px; border: none; background-color: tomato; display: inline-block; outline: none; color: #fff; transition: background-color .7s; cursor: pointer; } input[type="button"]:checked { background-color: #ffa494; transition: background-color .7s; border: none; } @media (max-width: 1280px) { .accordion { width: 100%; } } </style> </head> <body> <div class="navbar"> <input class="#" type="button" value="+" onClick="zoomIn()"/> <input class="#" type="button" value="-" onClick="zoomOut()"/> </div> <div class="accordion"> <h1 style="font-size:20px;font-weight:500;padding-bottom:53px;text-align:center;margin:0 auto;color:#8A8A8A;">Rafadan Tayfa 1. Bölüm Hikayesi (Ekmek Teknesi)</h1> <div> <input id="ac-1" name="accordion-1" type="checkbox"> <label for="ac-1">Sütun-1</label> <div id="article" class="article ac-small"> İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar... <br><br> Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer. <br><br> Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır. </div> </div> <div> <input id="ac-2" name="accordion-1" type="checkbox"> <label for="ac-2">Sütun-2</label> <div id="article" class="article ac-medium"> İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar... <br><br> Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer. <br><br> Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır. </div> </div> <div> <input id="ac-3" name="accordion-1" type="checkbox"> <label for="ac-3">Sütun-3</label> <div id="article" class="article ac-large"> İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar... <br><br> Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer. <br><br> Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır. </div> </div> <div> <input id="ac-4" name="accordion-1" type="checkbox"> <label for="ac-4">Sütun-4</label> <div id="article" class="article ac-large"> İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar... <br><br> Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer. <br><br> Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır. </div> </div> <div> <input id="ac-5" name="accordion-1" type="checkbox"> <label for="ac-5">Sütun-5</label> <div id="article" class="article ac-large"> İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar... <br><br> Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer. <br><br> Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır. </div> </div> </div> <script language="javascript"> var fontSize = 1; function zoomIn() { fontSize += 0.1; document.getElementById("article").style.fontSize = fontSize + "em"; } function zoomOut() { fontSize -= 0.1; document.getElementById("article").style.fontSize = fontSize + "em"; } </script> </body> </html>