IOS'da (iphone) Html Video Çalışmama Hatası

IOS'da (iphone) Html Video Çalışmama Hatası

iphone'da safari veya chrome tarayıcılarında sitenizdeki html video elementi ile eklediğiniz videonun çalışmadığını farkederseniz aşağıdaki örnekte olduğu gibi playsinline özelliğini eklemeyi deneyin.

<video src="https://ornek.com/video.mp4" autoplay muted loop playsinline></video>

Devamını oku...

CSS Opacity Kullanımı - Tüm Tarayıcılar

CSS Opacity - All Browsers

Eğer çok eski tarayıcıları desteklesin gibi bir derdiniz yoksa kısaca şu 3 satır işinizi görecektir. Tavsiye edilen kullanımdır. zoom ve filter komutları IE içindir (başımızın belası:))

zoom: 1;
filter: alpha(opacity=85);
opacity: 0.85;

Eğer önemli bir projeniz var ve tüm tarayıcılarda sorunsuz görünmesi gerekiyorsa (en eski tarayıcılarda dahi) o zaman bu uzun versiyonu kullanmanız tavsiye edilir.

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; /* IE 8 */
filter: alpha(opacity=85);  /* IE 5-7 */
-moz-opacity: 0.85; /* Netscape */
-khtml-opacity: 0.85; /* Safari 1.x */
opacity: 0.85; /* Good browsers */

Devamını oku...

Change A Href All Colors with CSS

Change A Href All Colors with CSS

a, a:link, a:visited, a:hover, a:active {
  color: #fff;
}

Devamını oku...

Vertical Align Center

Yatay/Dikey Ortala

<div style="position: relative;">
  <button class="center">PHP</button>
</div>

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

Sadece Dikey Ortala

<div style="position: relative;">
  <button class="center">PHP</button>
</div>

.center {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Sadece Yatay Ortala

<div style="position: relative;">
  <button class="center">PHP</button>
</div>

.center {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

Div İçinde Span Ortala

<div class="container">
  <button class="center">PHP</button>
</div>

.container {
  height: 25px;
  line-height: 25px;
  text-align: center;
}
.center {
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

Devamını oku...

CSS Üç Nokta

CSS ile cümle sonuna üç nokta ... ile sınırlandırmak istiyorsanız aşağıdaki CSS kodunu ilgili elemana uygulayın.

.ucnokta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Devamını oku...

Adım adım Html5 Temel Web Site Kurulumu

Html5 Web Tutorial with Folder Structure

Burada gördüğünüz klasör yapısı standart bir Html5 web projesinin ilk halidir. Bazı farklılıklar olabilir. Örneğin css, js klasörleri dist veya assist gibi bir klasör içinde yer alabilir. Fakat temel olan ve benim de tavsiye ettiğim yapı budur. Gelelim bu yapıyı güncel haliyle nasıl kuracağımıza;

Not: Burada bir backhand developer olarak bir proje yaptığınızı varsayıyorum. Yani tamamen işiniz kodlar ile. Bu işi bir program (Adobe XD, Figma vs) yapıyor iseniz zaten bu tarz frontend yazılımlar size kodları hazır halde verecektir.

1. Bir web projesi için kolları sıvadığınızda ilk iş olarak temel yapıyı oluşturmak istersiniz ve bunu güncel araçlarla kurmayı dilersiniz. Ben burada microsoft, nike gibi firmalar tarafından da kullanılan HTML5 Boilerplate'i seçtim. Bu araç size standart yapıyı verecektir.

2. https://html5boilerplate.com/ adresinden son versiyonu indirin ve tüm klasörleri sitenizin root'una upload edin.

3. Bu yapıda hazırda yerleşik olmayan ama işimizi kolaylaştıracak Bootstrap framework'ü kendimiz entegre edicez. Böylece son versiyonu kullanmış oluruz. https://getbootstrap.com/ adresinden indirip upload ediniz. Zaten css ve js olarak iki klasörden oluşmakta. Bunları mevcut olanların içine eklemiş olacaksınız.

4. index.html sayfanızın head bölümünde tüm css'lerin en üstüne bunu ekleyin:

<link rel="stylesheet" href="css/bootstrap.min.css">

5. Bu iki js dosyasını (yok ise popper.min.js indirip upload edin) jquery dosyasının çağırıldığı koddan sonraya ekleyin:

<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

6. Şablonunuz hazır. Artık header, content ve footer bölümlemelerinizi yaparak sayfanızı tasarlayabilirsiniz.

Bu yazıda sizlere temel ve güncel bir HTML5 şablonunun nasıl oluşturulacağını anlatmaya çalıştım.

Devamını oku...

Bootstrap Sık Kullanılan Css Class ve Anlamları

Hizalama için:

class="text-left"    Sola hizala
class="text-center"  Ortala
class="text-right"   Sağa hizala
class="text-justify" İki yana hizala
class="text-nowrap"  Nowrap

...

Devamını oku...

CSS Güzel Düğmeler (CSS Buttons)

Güzel tasarlanmış element içerebilen düğmeler hazırlamak istiyorsanız şu sitelerdeki örneklere bakmanızı tavsiye ederim:

http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/

Devamını oku...

CSS Sık Kullanılan Komutlar

CSS kullanırken sık sık ihtiyaç duyduğumuz komutlar hakkında detaylı bilgileri aşağıdaki adreslerde bulabilirsiniz:
CSS position
http://www.fatihhayrioglu.com/css-ile-konumlandirmapositioning/

CSS margin
http://www.fatihhayrioglu.com/kutu-modeli-margin-ozellikleri/

CSS eksi margin
http://www.fatihhayrioglu.com/eksi-margin-kullanimi/

CSS float ve clear
http://www.fatihhayrioglu.com/float-ve-clear-ozellikler-ile-konumlandirma/

Devamını oku...

img etiketindeki alt parametresi Firefox'da çalışmıyor

img etiketi kullandığınızda alt parametresi ile resme bir açıklama yazdırmak istiyorsanız, bu parametrenin Internet Explorer (IE) ile çalıştığını fakat Firefox ile çalışmadığını göreceksiniz.
Bu nedenle alt etiketi yerine her iki tarayıcıda da çalışan title parametresini kullanınız.

img src="bayrak.jpg" alt="Türk Bayrağı"> yerine
img src="bayrak.jpg" title="Türk Bayrağı"> şeklinde kullanın.

Bu arada a href etiketi için de title parametresi kullanın. Sorun çıkmayacaktır.

Devamını oku...

Firefox ile Css Yazarken background-image Sorunu Nasıl Çözülür?

Aşağıdaki kod a href komutu ile link verme işine yarıyor. Burada link verilen şey bir resim ve linkin üzerine gelince başka bir resim çıksın isteniyor. Bu işlem için a href komutunun hover özelliğinden yararlanılıyor.
1. Html içine şu şekilde ekleniyor:

a href="#" id="linkfotograf">< / a >

2. Css komutları ise şu şekilde:

#linkfotograf
{
width:260px;
height:35px;
background-image:url(/resim/menu_fotograf.jpg);
background-repeat:no-repeat;
}
#linkfotograf:hover
{
background-image:url(/resim/menu_fotograf1.jpg);
background-repeat:no-repeat;
}

Kod yukarıdaki şekliyle Internet Explorer ile çalışıyor fakat Mozilla Firefox yada Google Chrome ile linkin olduğu yer boş görünüyor. Bunun nedeni a href komutunda resmin sığacağı gerekli boşluk sağlanmamış olmasıdır. Resim 260-35 boyutunda. Fakat biz a href> ile < /a > arasına birşey yazmadığımız için gerekli genişlik ve yükseklik oluşmamış oluyor. Bunun çözümü ise CSS kodlarında display: block; satırını eklemektir. İşte bu kadar basit. Böylece a href komutu arasında sanki bir blok varmış gibi görünecektir. Böylece resmin görünebileceği boyutlar oluşmuş olacaktır. CSS kodunun son hali şu şekilde olacaktır:

#linkfotograf
{
display: block;
width:260px;
height:35px;
background-image:url(/resim/menu_fotograf.jpg);
background-repeat:no-repeat;
}
#linkfotograf:hover
{
background-image:url(/resim/menu_fotograf1.jpg);
background-repeat:no-repeat;
}

Devamını oku...

Firefox'da CSS Border Sorunu Yaşıyorsanız...

CSS Border kodlarınız İnternet Explorer'da çalışıyor, fakat Firefox tarayıcısında neden çalışmıyor ve nasıl yapılır diyorsanız işte çözümü:
css border kodunuzu kontrol edin "border:1 solid #000000" gibi yazan bir kod varsa oradaki 1'in yanına px yani pixel ekini yazın "border:1px solid #000000". İşte bu kadar. Aslında bu tip hatalar hep kodları kurallara uygun yazmamaktan oluyor.

Devamını oku...