Tasarımlarda Standart Sistem Fontunu Kullanmak

Kodladığımız tasarımlarda farklı işletim sistemlerinde farklı font görüntüleri alıyoruz. Çünkü ne olursa olsun hepsinin kendine göre kriterleri var ve aynı sonucu göstermiyor. Ancak sistemlerin kendi standart fontları yeterince tutarlı öyle değil mi? O halde bootstrap 4’ün yaptığı gibi bizde hangi işletim sisteminden girildiyse o işletim sistemine ait standart fontu gösterebiliriz.

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Bunu kullandıktan sonra farklı işletim sistemlerinden deneyerek sonuca ulaşabilirsiniz.

Responsive Tablo Yapımı

Başlık biraz aldatıcı olabilir ama teknik olarak responsive tablo yapımı evet 🙂
Uzun bir tablonuzu tablet ya da telefon boyutlarında nasıl düzgün şekilde gösterebileceğinizden kısaca bahsettim.

Video

Demo

http://www.erbilen.net/demo/responsive-tablo/

Not: Telefon ve tabletlerde gerçek boyutta gözükmesi için aşağıdaki meta etiketini eklemeyi unutmayın!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Css’de geniş yazıyı üç nokta ile sınırlandırmak

Bazı durumlarda gelen verinin uzunluğu bilinmediği için css ile belli bir genişlik verip taşan kısımları üç nokta koyarak kısaltmamız gerekiyor. Bu gibi durumlar için css’de text-oveflow özelliğini kullanıyoruz. ellipsis değeri bize bu görevi sağlıyor. Ancak taşanların gizlenmesi için ve yazının hiçbir zaman 2. satıra inmemesi için oveflow ve white-spcae özellikleri de bize lazım. Örnek vermek gerekirse;

<div>test et bakalım ne kadar uzun bir yazı..</div>

Bunu kısaltmak istediğimde yapmam gereken;

div {
    width: 60px;
    overflow: hidden; /* taşanları gizle */
    white-space: nowrap; /* alt satıra hiç inme */
    text-overflow: ellipsis; /* eğer uzunsa üç nokta koy */
}

Ben SCSS ve LESS içinde sizlere mixinlerimi paylaşayım, kullanmak isteyenler için daha kolaylık olur.

SCSS dotdotdot Mixin

@mixin dotdotdot($width, $display: block){
  width: $width;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: $display;
}

Kullanımı;

div {
    @include dotdotdot(60px);
}

LESS dotdotdot Mixin

.dotdotdot(@width, @display: block){
  width: @width;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: @display;
}

Kullanımı;

div {
    .dotdotdot(60px);
}

İşte bu kadar, kolay gelsin 🙂

Mail Tasarımı Kodlarken Dikkat Edilmesi Gerekenler

Front-end‘ci arkadaşlarım eminim ki mail tasarımı kodlama işi alıyorlardır.
Ancak mail tasarımlarını dökerken dikkat etmemiz gereken bazı durumlar var, bunlardan biraz bahsetmek istiyorum.

Bütün mail tasarımlarının dökümünde tablo yapısı kullanılır, çünkü mail servisleri çok kısıtlı imkanlar veriyor bizlere.

Elbette başka elemanlarda kullanılabilir ancak taslağın tablo yapısı üzerine inşa edildiğini incelerseniz hepsinde görebilirsiniz.

Dolayısı ile normal bir web sitesi gibi döküm rahatlığı yoktur.

<style></style> ve <link /> etiketleri çalışmaz

Outlook ve gmail‘e baktığımda ne style etiketi içinde css yazımını ne de dış bir css dosyası çalıştırmayı kabul ediyor.

Dolayısı ile tablo yapısı ve inline css yazımı ile hazırlamamız gerekiyor mail tasarımlarını.

<div style="color: darkred; font: 15px Arial, sans-serif; border: 1px solid red;">
test et
</div>

(Tam emin değilim aslında bu konuda, yine de ben tüm denemelerime rağmen çalıştıramadım.)

Script kodlarını boşuna yazmayın

Yüksek ihtimalle güvenlikten dolayı yazdığınız kodlar çalışmayacaktır, basit düşünün. Mail tasarımı dediğiniz şey basittir, web sitesi yapmıyoruz burada 🙂

Hazır mail tasarımları kullanabilirsiniz

Eğer uğraşacak vaktiniz yok ise themeforest’te satılan hazır mail tasarımlarını alıp kendi yapınıza göre düzenleyebilirsiniz.

Mail servislerinin desteklediği CSS özellikleri

Sizlere güzel bir kaynak vereceğim, hangi mail servisinin hangi kodları çalıştırdığını buradan inceleyebilirsiniz.

https://www.campaignmonitor.com/css/

SASS Dersleri

SASS için hazırladığım 3 bölümden oluşan bir ders serisi var. Aslında prototürk’te paylaştım ancak, kişisel bloğumu takip edenler olabileceğinden birde burada paylaşmak istiyorum 🙂

SASS ile ilgili daha fazla detay için kendi sitesini ziyaret edebilirsiniz;
http://sass-lang.com/

SASS Kurulumu

SASS Ayarları

SASS Sözdizimi

Bir süre belki yavaş yazabilirsiniz, ancak kesinlikle projelerinizde artık sass kullanmanızı tavsiye ediyorum.

Reset CSS Kullanımı

Eric Meyer’in reset.css’ini kullanıyorum. Ancak bazı kısımları hatalı, mesela gitmiş strong’u em’yi sıfırlamış ne eğik yazılıyor ne kalın.. Ee ne anladım o işten 😀 Eric reyiz bize yanlış yaptı, bende onun reset.css’ini biraz düzenledim. Böylesi daha tatlı oldu.

Not: Mevcut tüm reset.css’lere aşağıdaki bağlantıdan ulaşabilirsiniz.
http://www.cssreset.com/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, input, select, textarea, button,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
    text-decoration: none;
}
img {
    border: 0;
}
:focus {
    outline: 0;
}
.clear {
    clear: both;
}

CSS Grayscale Özelliği (Tüm Tarayıcılarla Uyumlu)

CSS ile bir nesnenin görünümünü gri tonda yapabilmemiz mümkün. Aslında gri ton bu özelliğin sadece bir değeri 🙂 Her neyse, lazım olur diye bende bloğumda paylaşıyorum.. Örneğin resme grayscale özelliğini vermek için graysale adında bir class ekleyelim. Daha sonra css’de bu class’ı tanımlayalım.

.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Android için Firefox */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

kullanırken ise şöyle kullanıyoruz.

<img src="images/logo.png" class="grayscale" alt="" />

Grayscale olan bir nesneyi tekrar eski haline getirmek istersekte kodlarımız şöyle olacak;

.grayscale.disabled {
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
   -webkit-filter: grayscale(0%);
}

yani nesneye disabled classınıda ekledik mi kaldırmış oluyoruz 🙂

teşekkürler: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

CSS ile Çevirme (Flip) Animasyonu Yapalım

Fare ile üzerine geldiğimizde yatay ya da dikey olarak çevrilen ve ön arka yüzleri olan animasyonları nasıl yapacağımızı bu derste öğreneceğiz. Yararlı olması dileğiyle..

İlk olarak html yapımızı oluşturalım;

<div class="flipper">
    <div class="flip-content">
    
        <!-- ön yüzü -->
        <div class="front">
          ön yüzü :)
        </div>
    
        <!-- arka yüzü -->
        <div class="back">
          arka yüzü :(
        </div>
    
    </div>
</div>

İlk olarak nesnelerimize genişlik ve yükseklik verelim;

.flip-content, .front, .back {
     width: 300px;
     height: 300px
}

Şimdi ise dönüş hızını ayarlayalım;

.flip-content {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative
}

ön ve arka yüze position değerleri verelim, daha sonra dönüş esnasında arka yüzü gizleyelim;

.front, .back {
     position: absolute;
     top: 0;
     left: 0;
     backface-visibility: hidden;
     background-color: #eee
}

Ön yüzün önde durması için z-index değerini artıralım;

.front {
     z-index: 1
}

arka yüzü y ekseninde 180 derece döndürelim;

.back {
     transform: rotateY(180deg)
}

Ve şimdi nesnenin üzerine geldiğimizde ön yüzü gizleyip arka yüzü ön plana çıkartalım;

.flipper:hover .flip-content {
     transform: rotateY(180deg)
}

Son olarak daha iyi bir dönüş için perspektifini ayarlayalım;

.flipper {
    perspective: 1000px
}

İşte bu kadar 🙂 Demoya göz atabilir, kaynak dosyaları indirip inceleyebilirsiniz.Not: Tarayıcı uyumluluğu için prefixleri eklemeyi unutmayın. Tek tek uğraşmak yerine prefixfree eklentisini kullanabilirsiniz;
https://leaverou.github.io/prefixfree/

Dikey Çevirme

Eğer yatay değilde dikey olarak çevirmek isterseniz aşağıda şekilde değiştirmeniz yeterli;

.back {
    transform: rotateX(180deg)
}
.flipper:hover .flip-content {
    transform: rotateX(-180deg)
}

Eksi değerini kaldırırsanız tam tersi dikey çevirme olacaktır.