hatırlatma amaçlı

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span><strong> <sub> <sup> <textarea> <time> <tt> <var>

• inherit
• left
• none
• right

• none
• block
• inline-block
• inline
• flex
• grid
• table

• static
• absolute
• relative
• fixed
• sticky
• inherit

• margin
• margin-top
• margin-right
• margin-bottom
• margin-left

• padding
• padding-top
• padding-right
• padding-bottom
• padding-left

• border: kalınlıkpx tipi rengi
• border-width: inherit,medium,thick,thin,px;
• border-style: dashed|dotted|double|groove|hidden|inherit|inset|none|outset|ridge|solid;
• border-color: color name,hex code,decimal code;
• border-radius: 50%;
• border-top|right|bottom|left-width|style|color|radius:

• box-sizing : border-box (width height'a padding ve border dahil margin dahil değil)
• box-sizing: content-box (width height'a padding ve border dahil değil margin zaten değil)

• font-size: px, %(mevcut sayfa px'inin yüzde katı %200 -> 2 katı), em(mevcut sayfa px'inin katları 0.5em -> yarısı), rem(1 rem = 16px)
• font-family: tarayıcı destekliyorsa ilk font kulanılır, tarayıcı desteklemiyorsa deneyeceği ikinci font, ikinci fontta olmazsa varsayılan seçilecek üçüncü font;
• font-weight: normal|bold|bolder|lighter|number|initial|inherit;
• font-style: normal|italic|oblique|initial|inherit;
• font-variant: normal|small-caps|initial|inherit;

En popüler ikon kütüphaneleri;

• Font Awesome
• icons8
• Flaticon
• Ionicons

• text-decoration: inherit|line-through|none|overline|underline;
• text-indent: (paragraf başı boşluğu) büyüklük değeri alır;
• text-transform: none,capitalize(baş harfler büyük),uppercase(tüm harfler büyük),lowercase(tüm harfler küçük),initial,inherit;
• text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
• text-align: center|left|right|justify; (inline etiketlere etki etmez)
• word-spacing: (kelimeler arası boşluk)
• letter-spacing: (harfler arası boşluk)
• column-count: sayı; (metni kolonlara böler)
• column-rule: 1px solid black; (kolon arasına çizgi eklenebilir)
• line-height: (satırlar arası yükseklik)

• list-style-image: none|url|inherit|initial;
• list-style-position: inside|outside|inherit|initial;
• list-style-type: dics|circle|decimal|lower-alpha|upper-alpha|square|none;

Elementleri ortalamanın bir yolu (Transform ve Translate ile);

İlk önce ebeveyn element'in positionunu relative yap. Sonra çocuk elementin position özelliğini absolute yap yukarıdan ve soldan 50% ver. transform özelliğini translate(-50%, -50%) yap.

<div class="container">
  <div class="child"></div>
</div>

.container {
  ...
  position: relative;
}

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

Elementleri ortalamanan diğer bir yolu (Flex ile);

Ebeveyn elementin display özelliğini flex yapıyoruz. justify-content ve align-items özelliklerini ise center yapıyoruz.

<div class="container">
  <div class="child"></div>
</div>

.container {
  ...
  display: flex;
  justify-content: center;
  align-items: center;
}

• Box Shadow

• Box Shadow

box-shadow: yatay,dikey,blur,yayılım;
box-shadow: 10px 20px; yatay 10px dikey 20px
box-shadow: 10px 20px 10px;** yatay 10px dikey 10px blur 10px
box-shadow: 10px 10px 10px 2px; yatay 10px dikey 10px blur 10px yayılım 2px

• Transition

  Transition

• transition: property duration timing-function delay;

• transition: width 2s (etkin olmasını istediğim özellik kaç saniyede) , height 5s, ... ;

• transition-property: color (sadece geçiş efektinin uygulanmasını istediğim özellikler - opsiyonel kullanım all);

• transition-duration: 3s (geçiş efektinin ne kadar süreceği);

• transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int|start|end),cubic-bezier(n,n,n,n)|initial|inherit (estetik geçişler sağlanır);

• transition-delay: 1s (geçiş efektinin ne kadar zaman sonra başlayacağı);

• Navbar

• Cards

• Background Image

• Tooltip

• Menu

• Sosyal Medya Butonları

😇 transform: rotate(-30deg) skew(25deg) translate(20px,-15px);
😇 :nth-child(n){} prop, n = odd -> tek, n = even -> çift
😇 :hover{} prop

• Parallax Dizayn

😇 background-attachment: fixed;

Genelde kullanılan medya özellikleri: width, height, max-width, min-width, max-height ve min-height

Mantıksal operatörler kullanılabilir: not,and,only

@media screen and (ozellik:deger) {

}

Örneğin: Sadece 750px bir genişlikte görüntülenecek tanım

@media screen and (width: 750px) {

}

Örneğin: 750px ve altındaki bir genişlikte görüntülenecek tanım

@media screen and (max-width: 750px) {
  h1
  {
    font-size: 14px;
  }
}

bunun hemen ardına aynı yapıda ama max-width:400px olacak bir tanım daha yaparsak yukarıdaki tanım 750px ve 400px arasında en son yaptığımız tanım ise 400px ve aşağıdaki genişlikte görüntülenir.

@media screen and (max-width: 400px) {
  h1
  {
    font-size: 12px;
  }
}

yani 750px ve 400px arasındaki genişlike h1 etiketinin font büyüklüğü 14px iken 400px ve altındaki genişliklerde 12px'dir.

Örneğin: 600px ve üstündeki genişlikte görüntülenecek olan tanım

@media screen and (min-width: 600px) {
  h1
  {
    font-size: 14px;
  }
}

Medya sorgu ifadelerini birleştirerekte tanımlama yapabiliriz

@media screen and (max-width: 1200px) and (min-width: 800px)  {
  h1
  {
    font-size: 20px;
  }
}

örneğin yukarıdaki tanım 800px ve 1200px arasındaki ekranlar için yapılmıştır.

display: flex;

Container Seviyesi varsayılan direction row (react native'de col)

1. flex-direction
2. flex-wrap
3. justify-content
4. align-items
5. align-content

İtem Seviyesi

1. align-self
2. order
3. flex-grow: 0
4. flex-shrink: 1
5. flex-basis: auto