12 Eylül 2016 Pazartesi

css html konumlardırma

Web tasarımı ile ilgili görünüm düzenleme çalışmalarında elementlerin konumlandırılması önemli bir konudur. Web sayfalarında HTML elementlerini CSS özelliklerinden faydalanarak kullanarak kolayca konumlandırabiliriz. Konumlandırılacak HTML elementleri div, p, h1, img, li, a, span v.s gibi elementlerdir.

Bir elementin konumunu belirleyen CSS özellikleri: position, top, left, right, bottom şeklinde özellikler(property) ile belirlenir. Her HTML elementi varsayılan olarak atanmış pozisyon değerleri vardır. Bunlar şu şekilde sıralanabilir:

position: static
top: auto
left: auto
right: auto
bottom: auto

Bir elementin konumlandırmasına müdahale etmek istersek bu değerlerde değişiklik yapmalıyız.

CSS konumlandırma özelliklerinin(property) alabilecekleri değerler şu şekildedir.

position özelliği; static, relative, absolute, fixed , inherit, initial değerlerini alabilir.
top, left, right ve bottom özelliği; auto veya px, cm gibi sayısal büyüklüklerde değerler alabilir.

HTML elementleri doldurdukları alan seviyesine göre guruplandırılmışlardır. Bu bağlamda iki tür element gurubu vardır. Bunlar:

Block Level element
Inline Level Element

Block Level Element

Bu guruptaki elementlerin sayfada kapladıkları alanlar birer kutu gibi düşünülebilir. Aksi belirtilmediği taktirde sayfada alt alta dizilerek sıralanırlar. Örneğin p, h1, …, li, form, div gibi elementler block-level element kategorisindedir.

Şekilde görüldüğü üzere block-level elementler, boyutlarına veya içeriklerine bakılmaksızın kutu gibi düşünülerek alt alta dizilmektedir.

Inline Level Element

Bu guruptaki elementler yeni bir satır açmadan tek bir satırda dizilerek konumlanırlar. Örneğinspan, a, img gibi elementler inline-level elementlerdir.

Şekilde görüldüğü üzere a ve span elementleri aynı satırda olacak şekilde konumlandırılmışlardır.

Elementlerle ilgili konum seviyeleri, CSS özelliklerinde aksi belirtilmediği sürece bu şeklide çalışmaktadır. Ancak HTML elementlerinin display CSS özelliğini değiştirerek block-level elementleri inline-level gibi veya inline-level elementleri block-level element gibi göstermek mümkündür.

Örnek şekilde div elementinin display özelliği inline-block olarak ayarlandığında elementlerin tek satıra dizilmiş ve inline-level element özelliği göstermeye başlamıştır. display özelliğini kaldırıldığında ise elementler tekrar alt alta dizilmiştir.

HTML Elementlerin CSS ile Konumlandırması

HTML elementlerin sayfada konumlandırması(positioning) üç farklı şekilde gerçekleştirilmektedir.

position özelliği static ve relative şeklinde belirlenen elementler normal akışta(normal-flow) konumlandırılır.
position özelliği absolute şeklinde belirlenen elementler mutlak konumlandırma ile konumlandırılır.
float konumlandırma.

position: static

Sayfanın elemente verdiği normal akış(normal-flow) uygulanır. Akış kavramını dizilimi olarak düşünebiliriz. Bu özellik uygulanan elementler top, left, right, bottom gibi özellikleri dikkate almazlar.

position: relative

Bu özellikte sayfanın elemente verdiği normal akış(normal-flow) veya sıralama uygulanır. Daha sonra belirlenen top, left, right, bottom özelliklerine göre bulunduğu yerden yani normal konumundan ötelenerek uzaklaştırılır. Yani göreceli olarak konumlandırma yapılmaktadır. Kutu hangi taşıyıcı blok içerisindeyse o bloka göre ötelenir.

position: absolute

Mutlak konumlandırma olarak bilinir ve normal akışın dışına çıkarlar. Kutu konumuna ait top, left, right, bottom özellikleri, absolute özellikli kutunun taşıyıcı bloku olan üst element referans alınarak belirlenir. Eğer absolute bir taşıyıcı blok yoksa, belgenin ya da sayfanın <body> elementi referans alınarak konumlandırılır. Diğer hiç bir element normal akıştaki yerini kaybetmez. Mutlan konumlu elementler kaydırma çubuğu varsa onunla birlikte birlikte hareket ederler.

Örnek Durum-1: En yakında absolute konumlu element yoksa

Örnek Durum-2: En yakında absolute konumlu element varsa (Kırmızı Kutu)

position: fixed

fixed ile konumlandırılmış elementler, sayfanın görüntü alanına yani tarayıcı penceresine göre konumlandırılır. Sayfada kaydırma çubuğu hareket ettirildiğinde kutu hareket etmez ve konumunu korur.

Görünebilirlik Problemi

HTML elementlerin konumlandırılması sırasında üst üste gelen kutular arasında görünebilirlik sorunu ortaya çıkmaktadır. Hangi elementin üstte görüneceğini belirlemek için CSS tarafında z-index özelliği kullanılmaktadır. z-index değerleri pozitif ve negatif tamsayı değerlerini alabilmektedir.

Örnekte normalde altta olan kutu z-index kullanılarak üstte gösterilmiştir.

Kaynaklar:

11 Eylül 2016 Pazar

wodpress dil translate etme

Özellikle wordpress sitelerde kullanılan .po uzantıları , kullandığınız temanın özelleştirilmiş bölümlerini kendi dilinize uyarlamaya yarar. İşte bu esnada her yeni tema yüklemede tek tek elle çeviri yapmak yerine örneğin language.po dosyasını otomatik olarak türkçeye çevirip tr.po diye kaydeden bir program var mı diye mutlaka aklınıza gelmiştir. Cevabı evet böyle bir program var. Hatta iki tane var. Hangisinin başarılı olduğunu bize soracak olursanız google translate ‘i öneririz. .mo , .po uzantılı dosyaları çevirmek bazen günler bile alabilir. 3000 satır çeviri ile uğraşmak zorunda kalmak hiç de isteyeceğiniz bir şey değildir. Şimdi programları inceleyelim

Po Auto Translator

Po auto translator programı kurulum bile gerektirmeyecek kadar güzel bir yazılım. Yapmanız gereken tek şey programı indirdikten sonra File sekmesi altındaki open sekmesine tıklayıp .po uzantılı dosyanızı seçmek olacaktır. Bu aşamadan sonra orjinal dilden hangi dile çeviri yapacağınızı ( örneğin English to turkish ) seçip daha sonrasında translate butonuna tıklamak. Ve programın .po uzantılı dosyanızı güzelce çevirmesini beklemek olacaktır. Eğer çevirisini beğenmediğiniz satırlar olursa bunları elle de düzenleyebilirsiniz. Ancak genel olarak güzel bir çeviri sunuyor. Programa on üzerinden 9 veriyoruz. po-auto-translator

Google translate ile .po dosyası çevirmek

http://translate.google.com/toolkit/docupload?hl=en adresine girerek add to content translator butonuna tıklayıp sonrasında upload file seçeneğini seçiyoruz. Type language yazan yere turkish yazıp tr yi seçiyoruz. Sonrasında next butonuna tıklıyoruz. Dil dosyamız upload edilene kadar bekleyip , %100 complete yazmasının arkasından dil dosyasını seçerek downloada basmak olacaktır.

Umarız bundan sonra her yeni Wpmu destekli dil dosyası içeren wordpress teması kurduğunuzda ve programı kullanarak .po dosyasını düzenleme rahatlığını yaşadığınızda bizi hatırlarsınız. Yazımızı beğendi iseniz yorum yaparak ve sosyal medyada paylaşarak destek olmanız blizi sevindirir.

10 Eylül 2016 Cumartesi

css buton oluşturma sitesi

http://www.bestcssbuttongenerator.com/#/23

botstrap buton şekil verme

5 Easy Ways to Modify Your Bootstrap Button Styles

November 12, 2014 Christopher Gimmer Tutorials, Web Design

In the following tutorial, we’re going to show you 5 easy ways to modify your Bootstrap button styles. This is a quick and easy way to differentiate your site from the default Bootstrap look.

If you like what you see, you can download our free Bootstrap button pack (Demo | Download).

Initial Setup

We modified the default Bootstrap .btn class with the following CSS styles. These styles are only required if you’re looking to achieve the same look and feel as our button pack. Otherwise, you can stick with the default Bootstrap styles for now.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

.btn {

    padding: 14px 24px;

    border: 0 none;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

}

.btn:focus, .btn:active:focus, .btn.active:focus {

    outline: 0 none;

}

.btn-primary {

    background: #0099cc;

    color: #ffffff;

}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {

    background: #33a6cc;

}

.btn-primary:active, .btn-primary.active {

    background: #007299;

    box-shadow: none;

}

Now that we’ve modified our .btn class, let’s go over our custom button classes.

Sharp Buttons

To create sharp buttons, simply set your border radius to 0.

1

2

3

.btn.sharp {

  border-radius:0;

}

Outline Buttons

The first step in creating an outline button is to remove the background. Since we’ll be increasing the border width, you also need to reduce the button padding. Otherwise, your button will appear oversized.

1

2

3

4

.btn.outline {

 background: none;

 padding: 12px 22px;

}

Next, you need to increase the thickness of the border and change the color to match the border.

1

2

3

4

.btn-primary.outline {

 border: 2px solid #0099cc;

 color: #0099cc;

}

Finally, you can add some hover effects by modifying the color and border colors when hovering over the button.

1

2

3

4

5

6

7

8

9

.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {

 color: #33a6cc;

 border-color: #33a6cc;

}

.btn-primary.outline:active, .btn-primary.outline.active {

 border-color: #007299;

 color: #007299;

 box-shadow: none;

}

Gradient Buttons

With gradient buttons, you’ll need a starting and ending color. While a typical linear gradient starts with one color and fades to another, this example has a hard shift in color halfway through the button. You’ll notice all the different lines we’ve added and that’s simply for compatibility across older browsers.

1

2

3

4

5

6

7

8

9

.btn-primary.gradient {

 background: -moz-linear-gradient(top,  #33a6cc 50%, #0099cc 50%); /* FF3.6+ */

 background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#33a6cc), color-stop(50%,#0099cc)); /* Chrome,Safari4+ */

 background: -webkit-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* Chrome10+,Safari5.1+ */

 background: -o-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* Opera 11.10+ */

 background: -ms-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* IE10+ */

 background: linear-gradient(to bottom,  #33a6cc 50%,#0099cc 50%); /* W3C */

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33a6cc', endColorstr='#0099cc',GradientType=0 ); /* IE6-9 */

}

Next, we lighten the buttons when hovering over them.

1

2

3

4

5

6

7

8

9

.btn-primary.gradient:hover, .btn-primary.gradient:focus, .btn-primary.gradient:active, .btn-primary.gradient.active, .open > .dropdown-toggle.btn-primary {

 background: -moz-linear-gradient(top,  #66b2cc 50%, #33a6cc 50%); /* FF3.6+ */

 background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#66b2cc), color-stop(50%,#33a6cc)); /* Chrome,Safari4+ */

 background: -webkit-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* Chrome10+,Safari5.1+ */

 background: -o-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* Opera 11.10+ */

 background: -ms-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* IE10+ */

 background: linear-gradient(to bottom,  #66b2cc 50%,#33a6cc 50%); /* W3C */

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66b2cc', endColorstr='#33a6cc',GradientType=0 ); /* IE6-9 */

}

Finally, we darken the buttons when they’re active/clicked.

1

2

3

4

5

6

7

8

9

.btn-primary.gradient:active, .btn-primary.gradient.active {

 background: -moz-linear-gradient(top,  #267c99 50%, #007299 50%); /* FF3.6+ */

 background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#267c99), color-stop(50%,#007299)); /* Chrome,Safari4+ */

 background: -webkit-linear-gradient(top,  #267c99 50%,#007299 50%); /* Chrome10+,Safari5.1+ */

 background: -o-linear-gradient(top,  #267c99 50%,#007299 50%); /* Opera 11.10+ */

 background: -ms-linear-gradient(top,  #267c99 50%,#007299 50%); /* IE10+ */

 background: linear-gradient(to bottom,  #267c99 50%,#007299 50%); /* W3C */

 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#267c99', endColorstr='#007299',GradientType=0 ); /* IE6-9 */

}

Rounded Buttons

To get the rounded look, simply increase the pixel size on the border radius.

1

2

3

.btn-lg.round {

 border-radius: 24px;

}

Raised Buttons

First, you need to create a box shadow to give the effect that the button is raised.

1

2

3

.btn-primary.raised {

 box-shadow: 0 3px 0 0 #007299;

}

Then, you need to remove the box shadow and modify the margins when the button is activated.

1

2

3

4

5

6

.btn-primary.raised:active, .btn-primary.raised.active {

 background: #33a6cc;

 box-shadow: none;

 margin-bottom: -3px;

 margin-top: 3px;

}

Download The Button Pack

I hope you found this tutorial helpful. If you liked these button styles, make sure to download the button pack.