Front-End Goods

4 Ağustos 2016 Perşembe

JavaScript ile metin boyutu nasıl değiştirilir

Javascript kullanarak bir yazının font-size'ı nasıl değiştirilir?

Javascript başlangıç seviyesi çalışmalarımıza devam ediyoruz. Bu sefer web sayfasındaki bir metnin boyutunu JavaScript ile değiştireceğiz. Normalde bir web sayfası kodlarken metin boyutlarını CSS kodları ile düzenleriz. "font-size:" kodunu kullanarak istediğimiz yazıya, istediğimiz boyutu, piksel,yüzde(%), em vs cinsinden verebiliriz.

Javascript basit kodlarla bir metne font-size vermeye ya da font-size'ı değiştirmeye izin verir. Peki CSS kullanarak bu işi yapmak varken neden Javascript kodu yazalım ki?

Aslına bakarsanız CSS ile yapabileceğiniz işleri CSS ile yapmak daha mantıklı. Zaten genelde de yapılan budur. Ancak sayfada bazı olaylar olduğunda(tıklama, yüklenme, fare ile bir nesnenin üzerine gelme gibi). görüntüde değişiklikler yapmak isteyebilirsiniz.

JavaScript işte bu durumlarda bir FrontEnd Developer'ın imdadına yetişiyor. Birkaç satır kod yazarak sayfada istediğiniz manipülasyonu yapabilirsiniz. Nasıl olduğun görmek için aşağıdaki butonu bir deneyin derim.

JavaScript ile bu yazının boyutunu değiştirmek için yukarıdaki butona bas!

Javascript kounu mu merak ettiniz? İşte size kodlar!

<!DOCTYPE html>
<html>
<head>
<title>Javasctipy İle Bir Yazının Boyutunu Değiştirmek</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
</title>
<body>

<h3>Javascript kullanarak bir yazının font-size'ı nasıl değiştirilir?</h3>

<button type="button" onclick="document.getElementById('yazi').style.fontSize='35px'">Font size değiştir!</button>
<button onclick="document.getElementById('yazi').style.fontSize='14px'" type="button">Font size'ı eski haline getir!</button>

<p id="yazi" style="font-size:14px;">JavaScript ile bu yazının boyutunu değiştirmek için yukarıdaki butona bas!</p>

</body>
</html>

Burada butona tıklandığında (onclick) tarayıcı id'si yazi olan nesnenin font-size'ını değiştirir. Bu işlemi yapan minik Javascript kodu şöyle:

document.getElementById('yazi').style.fontSize='35px'

Bu kodun çalışma adımları:

document.getElementById('yazi') : id değeri yazi olan elemanı bul
style : bu elemanın style nesnesine ulaş
fontSize: style nesnesinin bir özelliği olan fontSize'ı uygula ve buna karşısındaki değeri ekle

Hepsi bu kadar.

JavaScript öğrenmek kolay ve zevkli bir iştir.

2 Ağustos 2016 Salı

Basit HTML Web Sayfası Teması

Web tasarıma yeni başlayan arkadaşlar için yararlı olacağını düşündüğüm basit bir HTML şablon çalışması yaptım. Burada yaptığım aslında sadece freewebsitetemplates.com/ adresinden aldığım bir tasarımı yeniden kodlamaktan ibaret. HTML öğrenmenin en kolay ve çabuk yolu; var olan basit şablonları tekrar yazmaktır.

İlk zamanlar şablonun kod yapısını inceleyip taklit ederek hangi tag'ın ne işe yaradığını ve CSS ile biçimlendirmenin nasıl etkin bir şekilde kullanılabileceğini rahatlıkla öğrenebilirsiniz. Bir sonraki aşamada da aynı şablonu kendi kodlarınızla yazmaya çalışarak ilerleyebilirsiniz.

Zaten yazılmış olan bir şablonu tekrardan yazmaya çalışmak matematikteki bir problemi başka bir yöntemle çözmeye benzer. Aynı matematikte olduğu gibi HTML/CSS kodlarken de PSD halindeki bir tasarımı nasıl bir web sayfasına dünüştürebilirim? sorusuna yanıtlar bulmaya çalışırız. Benzerlik buradan kaynaklanır.

Aynı tasarım birden fazla coder tarafından farklı kodlanarak web sayfası haline getirilenilir. Hepsi de aynı sonucu verir ve çalışır. İşte siz de başta taklit ederek, kopyalayarak yaptığınız pratikleri sonradan kendi yorumlamanızı deneyerek pekiştirebilir geliştirebilirisniz. bu çalışma yöntemi ile çok geçmeden HTML ve CSS dillerini öğrenebilir, kendi tasarımlarınızı rahatlıkla kodlayabilir hale gelebilirsiniz.

Şablonu buradan indirebilirsiniz.

1 Ağustos 2016 Pazartesi

Basit Bir JQuery Responsive Tab Menu Örneği

JQuery ile yapılmış basit bir tab menü. Menü 290 piksel genişliğe kadar responsive çalışıyor. uygulaması son derecede kolay. Renklendirdiğim Kodları kopyala yapıştır yapıp rahatlıkla kullanabilirsiniz.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul.tabmenu{height:30px}
ul.tabmenu,ul.tabmenu li{
list-style-type:none;
margin:0px;
padding:0px;

}
ul.tabmenu li{
display:inline-block;
width:80px;
height:30px;
line-height:30px;
background-color:#4a9fef;
text-align:center;
position:relative;
border-top:solid 1px #4a9fef;
border-left:solid 1px #4a9fef;
border-right:solid 1px #4a9fef;
border-bottom:solid 1px #fff !important;
color:#fff;
}
ul.tabmenu li a:visited{color:inherit;}
.tabmenu li a{text-decoration:none;display:block;position:absolute;width:100%;height:30px;top:0px;z-index:15;}
.kutu{
display:block;
max-width:500px;
border:solid 1px #4a9fef;
height:350px;
}
.tab
{
display:none;
max-width:500px;
height:100%;
position:relative;
padding:10px;
}
.tab:first-child{display:block;}
.active{background-color:#ffffff !important;color:#125899 !important;height:30px;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('ul.tabmenu li').click(function () {
var indeks = $(this).index();
$('ul.tabmenu li').removeClass("active");
$(this).addClass("active");
$(".tab").not(indeks).hide();
$(".tab:eq(" + indeks + ")").show();

});
});
</script>
</head>
<body>

<ul class="tabmenu">
<li class="active"><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="kutu" >
<div class="tab">Kutu 1</div>
<div class="tab">Kutu 2</div>
<div class="tab">Kutu 3</div>
</div>
</body>
</html>

13 Aralık 2015 Pazar

Responsive JQuery Slider

Touch Screen Destekli Responsive JQuery Slider

Responsive Slider'ın Özellikleri

Modüler yapılı kolay kullanılır tasarım.
Touch Screen destekli(sliderı mouse ile tutup çekerek değiştirebiliyorsunuz ). Responsive uyumlu. İçeriğiniz mobil cihazlarda düzgün görünür.
HTML5 fullscreen destekli
SEO için optimize edilebilir.
Slider içine HTML elemanları koyabilirsiniz. Dinamik slider yapabilirsiniz.
Ajax ile kolay yükleme
Internet Explorer 7,IE9, Chrome, Firefox, Safari ve Opera tarayıcıları ile uyumlu

Bunun gibi pekçok özelliğibarındıran JQuery Slider'ı buradan indirebilirsiniz.

4 Aralık 2015 Cuma

En İyi Wordpress Teması

Avada Responsive Çok Amaçlı Wordpress Teması

Kullanımı kolay ve pratik. Kod bilmeye, kod yazmaya gerek duymadan. Wordpress sitenizin temasını kolayca Avada ile değiştirin. Modern responsive ve şık tasarımlı bir web siteniz olsun.

Avada cep telefonu, ve tablet gibi mobil cihazlarla uyumludur. Sorunsuz çalışır.

Avada Wordpress Temasını Şimdi Görün

Görsel Ara