Arayüze Giriş ve Menü Seçenekleri

Comunity içinde hazır şablonlar vs var.

FigJam: figmanın akış şeması tarafı

Ekranın sağ üstünde "+ Design File" ı tıklayarak yeni design sayfası oluşturduk. Sayfanın ortasındaki "Untitled" yazısına tıklayarak istediğimiz ismi verdik.

design sayfasının sol üstündeki pages içinden "+" yı tıklayarak yeni sayfalar oluşturduk. Draft alanında sayfa sınırımız yok. Teams alanında ise 3 sayfa oluşturabiliriz.

design sayfasında sağ üstten "</>" butonu ile developer modu açılıp kapatılabilir.

"ctrl + D" : dublicate: seçili nesneden bir tane daha oluşturur.
"ctrl + alt + C" özellikleri kopyala.
"ctrl + alt + V" özellikleri yapıştır.
"shift + R": cetvelleri açar veya kapatır. "ctrl + G": grup seçimi "ctrl + E": seçimi düzleştir: birden fazla objeyi tek objeye çevirir.

menü > view > rulers : cetvelleri açar veya kapatır.
menü > object > flatten selection: birden fazla objeyi tek vektör objeye çevirir.

Ekranın sağ altında "?" butonu yardım menüsünü açar. içindeki "Change keyboard layout..." ile klavye kısayollarına ulaşılabilir.

Move Tool ve Scale Tool Kullanımı

Klavyede "V" tuşu move toolu "K" tuşu da scale toolu aktive eder.

Move tool taşımak için, scale tool ise orjinal oranlara sadık kalınarak ölçeklendirme için kullanılır.

"ALT" basılı iken move tool kullanılırsa obje kopyalanarak taşınır. "Ctrl D" ile de aynı kopyalama yapılabilir.

scale tool yerine move tool sırasında shifte basılı tutarak da aynı işlem yapılabilir.

Frame Tool Kullanımı

Klavyede "F" tuşu ile açılır. Proje için istenilen ölçülerde bir çerçeve oluşturur. Ekran boyutlarına göre hazır ölçüleri bulunur.

Oluşturulan frame seçiliyken sağda özellikleri görünür. W (genişlik) ve H (yükseklik) kısmının sağında zincir işareti aktifse değişim oranlı olur.

"clip content" taşan içeriğin kesilmesi anlamına gelir. Seçilirse taşan kısmı göstermez.

"fill" kısmı arka planı düzenlememizi sağlar. Solid bir rengin yanı sıra başka seçenekler de kullanılabilir.

Slice (Dilimleme) Aracının Kullanımı

Dışarıdan import ettiğimiz resimlerin veya çizmiş olduğumuz tasarımların parçalanmasında kullanılır.

Klavyede "S" tuşuna basılarak kullanılır.

slice aracı ile seçtiklerimizi sağdaki menüden export edebiliriz.

Fontlarla Çalışma

Klavyede "T" tuşuna basarak kullanıyoruz. İstediğimiz yeri tıklayıp metnimizi yazıyoruz. Daha sonra sağdaki menüden ayarlarını yapıyoruz.

Texti vektöre çevirmek için sağ click > Flatten (Ctrl + E)

Font ailesini kendi kütüphanemizden seçmek için sağ menüde text menüsünün sağındaki dört noktayı tıklıyoruz.

Shape Araçlarıyla Çalışma

Klavyede "R" tuşu diktörtgen yaratmaya yarar. "Shift" basılıyken çizilirse kare çizer.

"Shift + X" fill ve stroke renklerinin yer değiştirmesini sağlar.

Klavyede "L" tuşu çizgi yaratmaya yarar. "Shift" basılıyken çizilirse yere paralel, 45° veya 90° çizer.

Klavyede "Shift + L" tuşu ok yaratmaya yarar. "Shift" basılıyken çizilirse yere paralel, 45° veya 90° çizer.

Klavyede "O" tuşu elips yaratmaya yarar. "Shift" basılıyken çizilirse daire çizer. Bu daire dilime dönüştürülebilir veya çemberleştirilebilir. Bunu şeklin üzerindeki noktalarla yaparız. Daireyi çift tıkladığımızda daha fazla seçenek açılır.

Poligon ve Star aracında klavye kısayolu yoktur.

"Ctrl + Shift + K" ile çalışma alanına resim eklenebilir.

Pen Tool ve Pencil Aracının Kullanımı

Pen tool özellikle vektörel çizimlerde işimize yarar. Klavyeden "P" tuşuna basılarak kullanılır. "Shift" basılıyken kullanıldığında çizimler doğrusal olarak kullanılabilir.

Nokta seçiliyken "Shift + Backspace" ile silinebilir. "Shift + Delete" de aynı işi yapar.

Pencil "Shift + P" ile aktif hale getirilir. Çalışma alanında serbest çizim yapılmasını sağlar. Sık kullanılmaz.

Yorum Aracı ve El Aracının Kullanımı

El aracı klavyede "H" tuşuna basarak veya "Space" tuşuna basılı tutularak kullanılır. Projede gezinmemizi sağlar.

Yorum aracı klavyede "C" tuşuna basarak kullanılır. Projeye yorum yapmamızı sağlar.

Çalışma Alanına Resim Yerleştirme

"Ctrl + Shift + K" ile, menü yardımıyla veya sürükleyip bırakarak çalışma alanına image eklenebilir.

Resmi kopyalayıp nesnede yapıştırarak da ekleyebiliriz.

Resim Özellikleri ve Resimlerde Uygulanabilecek Efektler

Resim tıklıyken sağdaki menüde "Image" tıklanır. Gelen menüde hem resmin nesneyi nasıl kaplayacağı hem de görsel ayarları yapılabilir.

Fill nesneyi kaplar. Nesneden taşan kısımları yok sayar.
Fit kendini nesneye sığdırır. Nesnenin bota kalan kısımlarını yok sayar.
Crop resmi kesmek için kullanılır. Crop sonrası resmin en boy oranı korunmaz.
Tile resmi birden fazla kez çoklayarak nesneyi kapsar. nesneden taşan kısımları yok sayar.

Sağ menüde fill kısmından yeni bir tabaka ekleyerek farklı efektler oluşturabiliriz.

Adobe XD ve Adobe Illıstrator'dan Vektör Nesne Import Etme

Kopyala - Yapıştır ile veya svg şeklinde export edip sonra "Ctrl + Shift + K" ile import edilebilir.

Layer (Katman) Konusuna Giriş

Katmanlar yukarıdan aşağıya şeklinde görünürler. En üsttekinin izin verdiği ölçüde bir alttaki görünür.

Layerlar birden fazla seçildikten sonra "Ctrl + G" ile gruplandırılabilirler.

Grup içindeki layerlar hepsiseçildikten sonra sağ click menüden rename (veya "Ctrl + R") ile bir kurala göre adlandırılabilirler.

Maskeleme Mantığı

Maskeleyecek olan obje seçiliyken "Ctrl + Alt + M" kullanılır veya ekranın üst orta kısmından "use as mask" seçilir.

Soldaki menüde mask group diye bir kısım oluştu. Maskelenecek olan image de mask group içine taşındı. Çalışma alanında maske ve maskelenen üst üste getirildi. Maskelenen image'ın sadece maskenin izin verdiği kısmı görünür kaldı.

Aynı işlemi maskelenen ve maskeleyecek olanı üst üste koyup, birlikte seçip "Ctrl + Alt + M" ile de yapabiliriz.

Maske, her zaman maskelenenin altında olacak şekilde sıralanmalı.

Plugin (Eklenti) Kullanımı

Eklenti kurmak için Home > Community açılır.

İstenilen plugin bulunur ve sayfasında "try it out" tıklanır. Açılan sayfada plugin denenebilir. İsteniliyorsa "save" veya "install" tıklanarak kurulur.

Responsive Layout Grid ve Bootstrap'ın Figmada Kullanımı

Bir frame oluşturduğumuzda sağ menüde "Layout grid" menüsünden bize klavuz olması için bir grid yapısı oluşturulabilir. Bu kısımda grid yerine "columns" veya "row" da ayarlanabilir.

Biz bu kısımda bootstrap ile uyumlu büyük ekran için bir 12 li columb yapısı kurguladık

Constraints Nedir ve Nasıl Kullanılır?

Frame genişlediğinde veya daraldığında içindeki kompanentlerin de uyum sağlaması için kullanılır.

Bir frame oluşturup en üst kısmına bir header yerleştirdiğimizde bu headerın frame ile birlikte genişleyip daralması için sağ menüde "Constraints" alanında yatay ölçeklendirme "Left and Right" seçilir.

Frame yüksekliği değiştiğinde header yüksekliği de orantılı olarak değişsin istiyorsak sağ menüde "Constraints" alanında dikey ölçeklendirme "Scale" seçilir.

Footer yaparken ise ağ menüde "Constraints" alanında yatay ölçeklendirme "Left and Right", dikey ölçeklendirme "Bottom" seçilir.

Guide Kullanımı

Guide eklemek için cetveller aktif durumda olmalı ("Shift + R").

Cetvelleri tutup sürükleyerek guide oluştururuz.

Menu > Preferences altında "Snap to object" nesnelerin guide'lara ve birbirine yapışmasını sağlar.

Aligment (Hizalama)

Bir frame içinde birden fazla şekil çizdiğimizde ve bunları topluca seçtiğimizde sağ menüde en üstte aligment (hizalama) seçenekleri olur. Bunlara menü > Arrange altından da ulaşabiliriz.

ilk üçü yatay hizlama, sonraki üçü ise dikey hizalama için. Son seçenek ise birbirlerine göre mesafelerini ayarlıyor.

Detaylı Gradient Kullanımı

Bir cismin rengini ayarlarken solid renk yerine gradientlerden faydalanarak farklı görüntüler elde edebiliriz.

Boolean Operations

Birbiri ile kesişen iki şekil beraber seçildiğinde üst orta menüde boolean seçenekleri belirir.

Union Selection: iki seçimi üsttekinin renginde birleştirir.
Subtract Selection: üsttekini alttakinden çıkarır.
Intersect Selection: Kesişimi üsttekinin renginde bırakır.
Exclude Selection: Kesişimi siler.
Flatten selection: Seçimi tek bir obje haline getirir. Daha öncekilerde alt elemanlara ulaşılabiliyordu ancak bu seçenekte ulaşılamaz.

Effects - Layer Blur - Background Blur

Efekt verilecek nesne seçildikten sonra sağ menüden effect altından seçilir.

Her birinin ne olduğu adından anlaşılıyor.

Component (Bileşen) Oluşturma ve Master Component (Ana Bileşen)

Bileşenler birden fazla kez kullanmış olduğumuz ögeleri tek bir yerden yönetmemize izin veren elementlerdir.

Bir elemeti seçtiğimizde üst orta menüde "Create component" seçeneği belirir. Bunu tıkladığımızda element component halini alır. Bundan kopyaladığımız her element bu component ile bağlantılıdır. Ana component değiştiğinde bunlar da güncellenir.

Ana componentten kopya yoluyla elde edilen componentlerde bir değişiklik yapıldığında yapılan değişiklik yönünden ana component ile bağ kesilir. Bağın tamamen kesilmesi için ise o component sağ tıklanır ve "Detach Instance" tıklanır

Çalışırken ana component yerine yanlışlıkla diğer componentlerden birinde çalıştıysak ve bundaki değişikliğin ana componente ve ona bağlı tüm componentlere de ulaşmasını istiyorsak değişiklik yaptığımız componenti sağ tıklarız ve "Main Component > Push changes to main component" i tıklarız.

Ana componentten bağımsız yaptığımız değişiklikleri kaldırmak için sağ menüde aşağıda resmi olan kısımdan iptal edebiliriz.

Birden fazla elementi ayrı ayrı component yapmak için bu elemntleri seçip üst menüde "Create component" seçeneğinin altındaki "Create multiple components" tıklanır

Bir componenti başka bir component ile değiştirmek için component tıklandıktan sonra sağ menüden aşağıda resmi olan kısımdan değişiklik yapılabilir.

Birbiri ile alakalı bir grubu component yaparken adının başına grup adını yazıp "/" ile asıl adı yazılır. Örn "btn/btn-primary" ve üst orta menüden "Create component set" tıklanır.

component grubumuz seçiliyken sağ menüden properties için ism atanabilir. Bu isim altında da kopya componentler grup componentleri arasında değiştirilebilir.

Advenced Prototype Özelliği - Şartlı İfadeler (Conditional Logic)

Aşağıdaki gibi basit bir tasarım yaptık.

boş bir alanı tıkladığımızda sağ menüde "local variables" kısmı belirdi. Bunu tıklayıp "create variable" ile üç adet değişken ekledik.

Stok adeti olarak girdiğimiz üçü seçip sağ menüden "Apply variable" ile değişkene bağlandı.

Aynı işlem sepet adet sayısındaki "0" için tekrarlandı.

Sepette ürün yokken sayı alanının görünmemesi için resimdeki alana sağ tıklanıp boolean variables atandı.

Bu kısımdan sonrası pro kullanıcılar için.

Sağ menü en üstten "Prototype" kısmına geçilir. "+" tıklanır. "On Click > set variable" seçilir. Yapılması istenen değişiklik burada eklenir. Yapı kurgusu JS gibi.

Prototip Oluşturma ve Transition

Aşağıdaki resimdeki gibi, Prototype sekmesi açıkken elementin yanından tutup diğer sayfaya sürüklersek resimdeki menü açılır. "on click" ve "navigate to" kısımları seçilir. Artık bu butona bastığımızda işaret ettiği sayfaya yönlenir. "Animation" kısmı ile de geçişin nasıl olacağı seçilir.

Bir sayfada bir süre durup sonra diğerine geçme işlemi için, Prototype sekmesi açıkken sayfanın yanından tutup diğer sayfa işaretlenir. "After delay" seçilir ve ayarı yapılır.

Bir butona tıklayınca popup benzeri bir elementin açılması için butondan elemente Prototype sekmesi açıkken sürükleme işlemi yapılır ve "open overlay" seçilir.

Bir süre parmağımızla basılı kalınca tetiklenecek navigate için aşağıdaki örnek ayarlar kullanılabilir.

Hover sırasında değişimi göstermek için aşağıdaki ayar uygulanabilir.

Tüm Detaylarıyla Auto Layout

Çalışmamızda istediğimiz içerikleri istediğimiz yapıda, istediğimiz boşluk düzeni ile yerleştirmemizi sağlıyor. Figma CSS teki flex yapısını baz alıyor.

CSS flexbox için the-echoplex.net/flexyboxes/ sitesinden faydalanabiliriz.

Bir objeye auto layout eklemek için tıklayıp "Shift + A" yapılır veya sağ tıklanıp "add auto layout" seçilir.

Bu özelliğe sahip buton eklemek için önce text yazılır. Sonra seçilen texte auto layqout eklenir. Oluşan frame için bacground color vs seçilir.

Oluşan frame tıklandığında sağ menüde "auto layout" menüsü açılır. Buradan kenar boşlukları vs seçilebilir.

Aşağıdaki kısımda ise sağdaki menüde dıştaki frame boyutunun fix mi yoksa içerik ile senkron mu olacağı belirtiliyor.

İç içe frame yapısı kurgulayarak aşağıdaki kişi kartını yaptık. Bunlardan da 2 tanesini birlikte alıp auto layout ekledikten sonra kartın birini seçip "Ctrl + D" ile klonladığımızda otomatik olarak aşağıya doğru yeni klonu ekliyor.

Tüm bu yapıyı bir frame (iphone 13) içine yerleştirip Constraints özelliğini left and right yaptık ki framne ile responsive bir yapı sergilesin. Kartların da hepsini seçip frame yatay boyutunu "fill" seçtik ki dışındaki frame'e göre büyüsün veya küçülsün.

Üst üste binen fotoğraf efekti için 3 fotoya birlikte auto layout eklendi ve aralarındaki mesafe -15 olarak girildi. Daha sonra Advenced auto layout settings ile hangisinin üstte olacağı seçildi.

Auto layout kullanırken iki nesneden birinin diğerine göre sabit bir yerde durması isteniyorsa yeri sabitlenecek için absolute position butonu kullanılabilir.

Elementlerin bulundukları alana sığması ve responsive davranması için "fill" özelliğinden faydalanırken aynı zamanda özelliklerini de yitirmemeleri için min ve max width/height verilebilir.

Variants (Türler)

Bir elementin tüm istenilen variantlarını oluşturup isimlendirmelerini onlara uygun hale getiriyoruz.

işin sırrı isimlendirmede.
örn:
"Button/primary/Noicon/Default" Button elementi primary renk düzeni ikonsuz ve default durumda.
"Button/secondary/icon/Disabled" Button elementi secondery renk düzeni ikonlu ve disabled durumda.

isimlendirmede toplu seçimde değişiklik yapmak için (kısa yolu "Ctrl + R")

daha sonra:

ile istediğimiz değişikliği yapabiliriz.

Düzgün isimlendirilmiş tüm buttonları seçip orta üst menüden "Create Multipl Components" seçilir. Sonra sağ menüden "Combine as variants" tıklanır.

Oluşturduğumuz 12 seçeneğin hepsi tek bir component içinde toplandı.

Component tıklandığında sağ menüden "Properties" alanından Property'lerimize isim verebiliriz. Sadece iki değeri olan property için "true/false" veya "yes/no" değerleri atanıp switch ile yönetilir hale getirilebilir.

sol menüde "Assats" içinde buton alınıp kullanıldığında sağ menüde button ile ilgili tüm seçenekler ayarlanabilir.

Figma İnteractive Components

Variant yapısına sağ menüdeki "Prototype" özelliği ile prototip nitelikleri verdiğimiz hali. Bu sayede prototipleme sırasında her birine tek tek hover, onclick vs eklememize gerek kalmaz.

Örneğin aşağıdaki örnekte bir hover variant ürettik.

Sonra bunu prototype alanında "while hovering" ile bağladık.

buttonun default durumu bir frame içinde kullanıldığında ve üzerine gelindiğinde hover versiyonu görünür oldu.

Takım Oluşturma, Yorum Ekleme ve Dosya Paylaşımı

Takım içinde free versiyonda 3 Figma ve 3 Figjam dosyası kullanılabiliyor.

Home menüden teams kısmına girilebiliyor.

Dosya içinde Share butonu ile paylaşabiliyoruz.

İçeri Al/Dışarı Aktar (Import & Export)

Export edilecek frame seçilir ve sağ menüden Export menüsüne girilir.

ilk kısımda "1x" olarak görünen kısım export boyutunun frame boyutuna oranı.

Buradan PNG, JPEG, PDF ve SVG olarak kaydeder.

Ana sayfadaki import butonu (sağ üstte) ile de import işlemi yapılır.

Versiyonlama (Version History)

Free versiyon 30 günlük değişikliği kaydeder.

Mevcut halini versiyon olarak kaydetmek için "Ctrl + Alt + S"

Figma otomatik olarak da versiyonları kaydeder.

"menu" > "file" > "show version history" ile versiyonlar görüntülenebilir ve silinebilir.

Font Awesome Kurulumu ve Figma'da Kullanımı

fontawesome.com/download adresinden indiriyoruz.

indirilen klasörün içindeki otfs klasörünün içindeki tüm dosyalar seçilir. Sağ click menüsünden yükle denilir.

fontawesome.com/search sayfasındaki logolardan free olanlardan kullanmak istediğimizi seçtik. Açılan sayfanın en üst sağ kısmında yer alan "Glyph" tıklanır ve projemize text olarak yapıştırılır. Font olarak da "font awesome 6" seçilir.

Unsplash ve User Profile Eklentileriyle Hazır Resimler

Unsplash

Resimleri eklemek istediğimiz alanları seçiyoruz. (Ctrl alt ögeyi seçmemizi Shift de çoklu seçmemizi sağlar)

Unsplash pluginini çalıştır. ("Ctrl + P" ile gelen kısma "unsplash" yazılır. Kurulu değilse kurulur.) Çoklu seçim için ilk seçimi sağ click ile sonrakileri sol click ile seç ve "insert ... images" butonunu tıkla.

User Profile

Resimleri eklemek istediğimiz alanları seçiyoruz. (Ctrl alt ögeyi seçmemizi Shift de çoklu seçmemizi sağlar)

User Profile pluginini çalıştır. ("Ctrl + P" ile gelen kısma "User Profile" yazılır. Kurulu değilse kurulur.) İstenilen özellikler seçilir ve "Random Photo" tıklanır

Content (İçerik) Eklentileri

lorem ipsum

Çalışma alanında istediğimiz alanı text ile doldurur.

Content Reel

Hazır veriler, avatarlar, lastname-firstname dataları gibi içerikler bulunur.

Doldurulması istenen alanlar seçilip plugin üzerinden istenilen doldurma tipi seçilir.

En Çok Kullanılan İkon Eklentileri

• Bootstrap icons
• ant icons
• iconscout: ikonlar, 3d, illustrationlar, animasyonlar. Bazıları ücretli.
• feather icon: basit temel ikonlar
• iconly: basit temel ikonlar. İsimlendirmesi variant yapısına uygun.
• iconify: Geniş bir ikon kütüphanesi.
• Material Design Icons: Geniş bir ikon kütüphanesi.
• Icons8: ikonlar, illustrationlar, fotoğraflar. SVG ücretli.

Figma'da Harita Kullanımı

• FigmapKendisi ayrı bir element olarak harita ve maker üretiyor.
• Map makerElementin arka planı olarak bir harita üretiyor. Bende çalışmadı (google maps'e bağlanamadı.)

Wireframe Eklentisi İle Pratik Olarak Wireframeler Oluşturma

wireframe: yapılacak olan çalışmanın karakalem çalışması veya bir sonraki aşaması olan ileri şablon aşamasıdır. Gri ve tonları kullanılır. Text veya metin kullanılmaz.

• wireframe
• ink wireframe

Her ikisi de kullanışlı. İkisinin de önizlemesi bende görünmedi.

Chart Eklentisinin Kullanımı

Charts

Figmotion Eklentisi İle Animasyon

iconify ile bir araba ikonu çağırdık. "Ctrl + E" ile ikonu tek parçada topladık.

İkonu seçip sağ click ile plugins > figmotion seçildiğinde bizi tarayıcıya yönlendirdi. Bize verdiği kodu tarayıcıdaki ilgili alana girip giriş sağladık.

Tarayıcıda sağ menüden animasyonun değişecek olan değerleri seçilir. Ortadaki zaman alanından ne kadar sürede değişeceği ayarlanır.

Animasyonu ayarlamak için önce başlangıç konumunda hangi değerin değiştirileceği seçilir. Figmada seçili olan elementin konumu uygulamada kaydedilir. Daha sonra zaman alanından 2. konum seçilir ve set edilir.

Taraıcıda açık olan uygulamadan export ile animasyon css, react, json ve lottie olarak alınabilir.

Taraıcıda açık olan uygulamadan render ile dosya gif, mp4, webm ve webp olarak tarayıcıda açılabilir. Bu hali serverda geçici olarak tutulur. Tarayıcının en üstünden "wiev last render" ile bu gif vs açılabilir.

ROTO Eklentisi ile 3 Boyutlu Objeler

Texti 3D yaparken önce "Ctrl + E" ile vektör haline getiriyoruz. Sonra seçip ROTO eklentisini çalıştırıyoruz.

3d olan şeklin alındığı kaynak görünmez durumdadır. Bunu sol menüden görünür yapabiliriz. Bu kısmın 3d ile tam oturması için üd menüsünden "shear" aktif edilir.

Storyset Kullanımı

Vektörel çizimler ve animasyonlar

storyset.com adresinde sağ üstteki "plugin for figma" ile kurulur.

Site içinde istenilen illustrationlar üzerinde değişiklik yapabiliyoruz. Renkleri değiştirebiliyoruz. SVG veya PNG olarak indirebiliyoruz. Animasyon ekleyebiliyoruz. Animasyonları SVG + CSS olarak export edebiliyoruz. GIF veya MP4 olarak da indirebiliyoruz.

Figma içinde eklenti ile vektör hali çekilebiliyor. Gif, SVG vs için siteden export edildikten sonra import edilebilir.

Breakpoints Eklentisi ile Belirli Çözünürlüklere Göre Ekran Gösterme

Uygulama ücretli

Birden fazla ekran boyutuna uygun frame oluşturulur ve içleri doldurulur.

Sonra breakpoint eklentisi çağırılır ve sitenilen ekran ayarları ve o ayarda görülecek frame seçilir. İşlem tamamlandığında figma ekranında sonucu göreceğimiz bir alan oluşur.

Figma'da Tablo Oluşturma

Table Creator

Table Creator plugini çalıştığında bize Table creator adında bir page ve içinde hazır componentler verir. Bir tane de bizim istediğimiz özelliklerde tablo verir.

Oluşturduğu tablo veri girişine hazırdır.

Tablo autolayout olduğundan satır ve sütunlar "Ctrl + D" ile çoğalır.

Table Generator

Table generator plugini çalıştığında gelen ekranda istediğimiz tablo ayarlarını giriyoruz. Datamızı da data alanına sıralayabiliriz.

Responsify

Bir cihaza göre bir frame oluşturduğunda diğer cihazlarda nasıl görüneceğini anlamak için önce frame seçilir sonra responsify çalıştırılır.

Foundation Color Generator

Foundation Color Generator

Remove BG

İmage dosyasından arka planı kaldırır.

Blobs

Vektör formatında amorf baloncuklar yaratır. arka plan görüntüsünde vs kullanılabilir.

LottieFiles

Hazır GIF getirme uygulaması

Artboard Studio Mockups

Framelerimizden mockup yapma plugini. Önce sitesinde üye olup aldığımız api key ile figmada aktive ediyoruz.

Free versiyonu sınırlı kullanım sunuyor.

Plugin içinden istenilen yüzey seçildiğinde onunla beraber gelen frame içine istenilen materyal eklenir ve "Render Selected Frame" tıklanır.

Vectary 3D Element

Mockup kullak için başka bir uygulama. Önce kendi listesinden istediğimiz mockup'ı seçiyoruz. Sonra bunun içine ekleyeceğimiz frame'i seçiyoruz ve "Apply Frame" butonuna tıklıyoruz. İstediğimiz gibi olmuşsa "Finish" butonu tıklanır.

Google Sheets Sync

Google Sheets Sync

JSON to figma

JSON to figma

Chart (from JSON)

Chart (from JSON)

2023 Figma Variables

Sayfa içinde boş bir alana tıkladığımızda sağ menüde local variables alanı çıkar. Buradan bir değişken atayıp bunu tasarım içinde kullanabiliriz.

Boolean

Örneğin boolean bir değişken oluşturup bunu bir elementin görünürlüğünü belirlemede kullanabiliriz. Bunun için boolean değişkeni oluşturduktan sonra elementi seçip sağ menüde beliren layer alanındaki gözü sağ tıklayıp değişkeni seçiyoruz. Değişken true ise element görünür. False ise görünmez. Bunu da prototype alanında bir butona atayabiliriz. bkz: Advenced Prototype Özelliği - Şartlı İfadeler (Conditional Logic) dersi. Bunu yapmak için free olmayan bir figma gerekiyor.

Color

Oluşturduğumuz renge isim vermek için sağ menüde fill seçeneğinin hemen sağındaki dört nokta tıklanır. Burada isim kısmına blue/light yazarsak blue altında light oluşur. Buna blue/default ve blue/dark eklenince blue altında light, default ve dark oluşur.

Bu rengi bir elemente atarken de yine fill kısmının sağındaki sembol ile library açılır ve oradan seçilir. Library üzerinden atanan renkler librarydeki özellikler ile bağlıdır. Örneğin atanan renk blue/light ise ve biz blue/light ın özelliğini değiştirirsek atanan elementlerdeki renkler de değişir.

Değişkenlere de aynı şekilde renkler eklenir. Değişkenlere eklenmesi kütüphaneye eklenmesinden daha çok esneklik sağlar.

İsimlendirmede daha önceki kalıba uyarak local variables alanında color adında bir collection oluşturup aşağıdaki renkleri ekledik

daha sonra token adında bir collection ekledik ve renkleri libary üzerinden değişkenlere atadık.

Token alanında modlar var. Bu kısmın kullanımı ücretli.

String

Sting olarak variable atayıp bunu da text olarak kullanabiliriz. Ücretli versiyonda mod ekleme ile butona basıldığında farklı bir modun içeriğinin görünmesi de sağlanabiliyor. Bunun için text alanı seçilir ve aşağıdaki gibi değişken atanır.

Number

Önce aşağıdaki variables girilir.

sonra buradan referans alan token değerleri oluşturulur. Değişkenin atanabileceği alan olarak da aşağıdaki gibi radius seçilir.

"Shift" yardımı ile hepsi seçilip sağ click ile "New group with selection" denlerek grup oluşturulur.

Aynı işlem spacing için de yapılır. Bu kısım da sadece "gap" kısmına atanacak şekilde seçilir.

Bu işlem bize tasarım boyunca tutarlılık sağlar.

Figma'da Video Dosyaları ile Çalışma

video sadece ücretli hesaplarda çalışıyor. 30MB dan büyük video figma üzerinde kullanılamıyor.

2022 Yeni Güncellemeler - Derleme

Dark Mode menü > Preferences > theme

Border sadece istenilen tarafa verilebiliyor.

Text için sağ menüdeki font ayarlarının sonundaki "..." menüsünde variables içinden font kalınlığı ve eğimi ayarlanabiliyor (font izin veriyorsa).

Text için sağ menüdeki font ayarlarının sonundaki "..." menüsünde basics içinde en altta truncate menüsü var. Yazı belirli bir alandan taşıyorsa üç nokta ile yazıyı kısaltabiliyoruz.

Prototype smart animate içinde yeni animasyonlar var.

Figma'da Bul/Değiştir Özelliği

Sol menüde yer alıyor. Kısayol için "Ctrl + F"

Word'dekinin aynısı

Scroll To Özelliği İle One Page Sayfa Mantığı

Hocanın verdiği template üzerinde çalışacağız. Tek bir home frame içinde birden fazla frame ile navbar, home vs aşağı doğru yerleştirdik (her biri kendi frame'i içinde).

Her bir buton prototype alanında gideceği yere scroll to ile bağlanır.

En üstteki navbarın scrolling sırasında ekranda sabit kalması için navbar seçiliyken protype ekranında aşağıdaki ayar yapılır.

Sabit navbarın altından çağırılan içeriği kurtarmal için prototype alanındaki yükseklik ayarına (y-offset) negatif olarak navbar genişliği verilir (-104). (Bizim örnek resmimizde bu ayar var.)

Sticky Scrolling in Prototypes

Aşağıdaki gibi bir header, beş adet bir title ve altında list-item olan list alanı yapıldı ve header harici kısım CONTENT adında bir frame ile birleştirildi.

Header prototype alanında Position: fixed ile en üste sabitlendi.

Content prototype alanında Position: Scroll with parent, Overflow: Vertical seçildi.

Content içindeki title kısımları prototype alanında Position: Sticky seçildi.

Sticky alanlar üstte yapıştığında en üstte görünmeleri için Context frame'i içinde de üstte olmalılar.

Content alan yüksekliği azaltılarak en sona gelindiğinde içeriğin ne kadarının göründüğü ayarlanabilir. Biz title yüksekliği kadar ayarladık. Bu şekilde en son sadece title alanı kaldı.

En sonda en dıştaki frame prototiplemek istenen alana getirildi.

Kısayol notu: "Ctrl + Shift + G" ile auto layout bir öceki haline getirildi.

Kısayol notu: "Ctrl + Shift + Ü" seçili elementleri sol menüde en üste taşır (en önde görünmelerini sağlar).

Kısayol notu: "Ctrl + Alt + G" seçili elementleri bir frame altında toplar.

FigJam Nedir, Ne İşe Yarar?

Userflow ve wireframe oluşturmak için kullanılır. Basit bir kullanımı var.

Sürükle-bırak ile image eklenebiliyor.

Component Properties

Variants (Türler) dersindeki işlemin daha az efor ile yapılanı.

Bu işlem için bir placeholder ve icon içeren bir input hazırlandı ve component haline getirildi.

Component içindeki text kısmı seçildi ve sağ menüden "layer" yazısının hemen sağındaki "Apply boolean property" tıklanır ve "create property" tıklanır. Gelen alana property için isim yazılır.

Aynı işlem text için sağ menüde "Content" için de "Appy text property" olarak uygulanır.

Aynı layer işlemi icon için de yapılır.

Bu haliyle componente bağlı kopya componentlerde "property" alanında oluşturduğumuz değerler seçenek olarak görülür.

Ana component seçiliyken sağ menüde "Properties"in yanındaki "+" butonu tıklanarak açılan menüden variant oluşturulur. Sonra da Ana component altındaki "+" butonu ile variant sayısı istenilen miktara getirilir.

Bu durumda tüm componentler seçiliyken sağ menüde properties altında yeni bir değer grubu oluşur. Adını "state" olarak değiştirdik. Her bir "variant" ı tek tek seçip state'e karşılık gelen değeri düzenledik.

Bu 4 variant için renk tanımları yapıldı.

Figma Widgets

Çalışmaya takvim, todo vs eklemek için kullanılır.

• Activity Tracker: Start ile yapılan işin süresini kaydetmeye başlar. Freelancer’lar için bir işe ne kadar zaman harcandığındı ölçmek için kullanılabilir.
• Voice memo: tasarımın çeşitli yerlerine sesli notlar koymaya yarar
• jira ve asana: Bu programlardaki taskları düzenlemeye yarar.
• Todo list: iş listesi için. Birden fazla var. istediğimizi kullanabiliriz.
• Aligment Scale: Oylama için kullanılır.

Design System'e Giriş

UI kit içererisinde buton kitleri, tipografi, boşluklar vs olan sınırlı bir yapı iken design system ise genelde büyük markaların kullanmış olduğu ve kullanılan kompanentlerin bir araya getirilmesi ile oluşan bütünleşik bir sistemdir. UI kit Design System'e göre daha kısıtlıdır. Design System birbirleri ile daha uyumludur.

Design System "atomik web dizayn" yapısıdır. Yani küçük parçaları daha büyük bir bütüne doğru ilerledikçe de tutarlılık sergiler. Yapı da küçükten büyüğe doğru kurgulanır.

En sık kullanılan Design Systemler

• Material Design: Google'ın
• Developer.apple.com
• Atlassian
• Carbon Design System
• Flowbite: ücretli

Renk Sistemi Oluşturma ve Kütüphanede Yayınlama

Rengi kütüphaneye eklemenin en kolay yolu rengi bir şekle atayıp daha sonra sağ menüden fill yazısının hemen sağındaki dört nokta ile açılan menüden eklemektir.

İsimlendirmeyi ana-isim/varyant düzeni ile yaparsak renkleri gruplandırabilriz. Örn: Pink/900, Pink/800 vs yazarsak Pink altında 900, 800 vs varyantlar oluşur.

Pro versiyonda sol menüde asset > library (açık kitap logosu) > publish ile bu renk stillerimizi paylaşabiliriz.

Foundation Color Generator Kullanımı

"Foundation: Color Generator" bir plugin. Bize renk paleti yapıp (palette butonu ile), bunu otomatik olarak "Color Styles" içine kaydetmemizi (Create Styles butonu ile) sağlar.

Grid (Izgara) Yapısını Belirleme - Desktop - Tablet - Mobil

Grid yapısını açmak için sağ menüden "layout grid" eklenir. Bootstrap gibi 12li sistemler için aşağıdaki ayar yapılabilir.

seochecker.it/en/web-tools içinde bir sürü güzel web aracı var. Bunlardan biri de layout grid calculator Bununla gridimizin ölçülerini hesaplayabiliriz.

Hazırladığımız layout grid yapısını kaydetmek için:

Yaptığımız örnek figma içinde design/system altında grid isimli page'de

Buton Özellikleri ve Buton Standartları

Üst ve alltan padding sağ ve soldan olandan daha az olmalıdır.

Web ve mobile için en sık minimum buton size: 64px (42-72px), font size: 16px, en sık padding yatayda: 32px dikeyde: 18px

Butonun önceliği arttıkça görünürlüğünü de arttırmak gerekiyor.

İcon genelde sol taraftadır.

Buton texti mümkün olduğunca tek satırda kullanmalıyız.

Yüksek öncelikli buton genelde sol taraftadır. Butonların hepsi sağa yaslıysa en sağa yüksek öncelikli olan konulur.

Radius:
0px: Ciddi, Temiz (Genelde kurumsal)
5px: Ciddi, Dostça
20px: Modern, Yenilikçi,
50px: Dostça, Sıcak

Inputlar

input yüksekliği 38-48px yüksekliğinde olmalı. mobilde 40px, webde 44px tercih edilebilir.

Label modern tasarımlarda inputun yanında değil üstünde tercih ediliyor.

Label text size: 14-16 px
Label - input arası: 5-10px
informaton text size: 12-14px input - information arası boşluk: 3-5px
input padding: dikey: 11px, yatay: 11-16px

floating label: inputa tıklanınca kendini üste alan label.

Tipografi

İyi bir tipgrafinin üç kuralı

• Tutarlılık
• Hiyerarşi
• Hizalama

Yazı tipleri dört başlıkta toplanır.

• Tırnaklı: SERIF Genelde gazete dergi vs basılı materyalde tercih edilir.
• Tırnaksız: SANS-SERIF Dijitalde tercih edilir.
• El Yazısı: SCRIPT
• Süslü: DECORATİVE

Ön plana çıkması istenen kısım kalın, koyu ve büyük yazılır. Vurgulu kısmın hemen altındaki kısmın font-size değeri vurgulu kısmın yarısından az olmamalı. Altın oran: 1.6

typescale.com sitesi base-size değerine göre diğer boyutları hesaplamamıza yardımcı olur.

Bir tasarımda max üç font tipi seçilir. Fazlası hem okunurluğu hem de tutarlılığı zorlar.

Figma üzerinde text-style eklemek için, istediğimiz özellikleri atadığımız texti seçip sağ menüde text yazısının yanındaki dört nokta tıklanır. İstediğimiz isim verilerek kaydedilir. Renklerde olduğu gibi "/" işareti ile adlandırılırsa renklerdeki gibi gruplar.

Spacing System (Boşluk Sistemi Oluşturma ve Kullanımı)

8'li sistem: 8px ve katlarını kullanır. 4'lü ve 8'li sistemler en sık kullanılan boşluk sistemleridir.

Material Design - Spacing

Tailwind - Spacing

rem birimi sadece html öğesinin font-size ölçüsünü baz almaktadır. html{font-size:16px;} ise 1rem = 16px olacaktır.

Icons

Bütünlük açısından aynı tip ikon kullanmak önemlidir.

Geometrik ve minimalist tasarımlar daha iyidir. Düşük çözünürlüklü ekranlarda da düzgün görünür.

Kullandığımız ikonlarda size değerleri tutarlı olmalıdır.

ikon yerleştirirken x ve y tam sayı olmalıdır. Küsüratlı değerlerde çözünürlük bozulabilir.

Stroke değeri 1,5-2 olması tercih edilir. İkonun her yerinde aynı stroke değeri kullanılmalıdır.

İkon home ikonu gibi evrensel bir ikonsa altına açıklama yazmaya gerek yok. Evrensel bir ikon değilse altına açıklama gerekir.

Kullanacağımız ikon setini component set haline getirmeden önce tutarlı bir ölçü sağlamak önemlidir. Bunun için ikonun alanını temsilen bir dikdörtgen/kare oluşturup onun içinde ayarlanması faydalı olacaktır.

Atomic Design Sistem Mantığı ile Buton Seti Oluşturma

Tasarımcılar İçin Renk ve Font Kullanımında İpuçları

Renk

• Color Hunt: Hazır renk paletleri mevcut
• Color Hex: Hazır renk paletleri mevcut. Popüler web sitelerinin renk paletleri de var
• Coolors: Hazır random renk paletleri veriyor. Beğendiğimiz renkleri seçip (kilitleyip) diğer renklerin değişmesi sağlanabiliyor. Kendi seçtiğimiz renge göre de uyumlu renkler sorgulanabiliyor.
• Paletton: Seçtiğimiz renge ve tarza göre uyumlu renkleri veren, bunların örnek kullanımlarını da gösteren çok güzel bir web sitesi.

Font

• 1001freefonts
• Dafont
• Google Font
• Fonttr

Yapay Zeka ile Çizimlerde ve Resimlerde Renklendirme İşlemi (Style2Paint.exe)

Bu program siyah beyaz çizimleri renklendiriyor.

Github linki üzerinden verilen bağlantıdan indirilebilir.

Benim bilgisayarda çok yavaş çalışıyor.

Tasarımcılar İçin En İyi İkon Siteleri

• Flaticon: bazı iconlar ücretli. Ücretsiz olarak sadece png'ye izin veriyor
• Icons8: svg ücretli.
• Simpleicons: büyük markaların ikonları. SVG olarak iniyor. Logonun renk kodunu da veriyor.
• : svg ücretli.
• Freepik: Ücretsiz de bolca SVG mevcut
İnternet araması ile daha iyi sitelere ulaşılabilir.

Iphone ve Android Cihazlar İçin Mockup Kullanımı

Figma içinde cihaz adıyla oluşturulan hazır frameler cihazın orjinal çözünürlüğünün 1/3 ü olarak veriliyor.

Figma Community içinde "mockups for modern devices" araması ile hazır mockuplara ulaşabiliriz. Bu hazır mockup dosyasında her bir mockup dizininin en başındaki frame içinde "PLACE IMAGE HERE" adındaki componentin görüntüsü değiştirildiğinde tüm serideki ekranlara o görüntü gelir.

Google Sheet'den Veri Çekerek Dinamik Fotoğraf Galerisi Oluşturma

Google sheet içinde türkçe karakter kullanmadan bir tablo oluşturduk. İmage kısımlarını url olarak girdik. Oluşturduğumuz tabloyu "linke sahip herkes görüntüleyebilir" olarak işaretledik.

Figma içinde sheet içindeki sütun başlıklarıyla uyacak şekilde verilerin geleceği alanların adlandırmasını yaptık. Her ismin başına "#" koyduk.

Figmada verinin geleceği tüm alanları seçtik.

"Google Sheets Sync" pluginini çalıştırıp gelen alana Google sheet içindeki tablomuzun adresini verdik ve "Fetch and Sync" kısmını tıkladık.

JSON Dosyalarından Verileri Çekerek Dinamik Chart Oluşturma

Örnek 1

Bu çalışmada hocanın verdiği hazır JSON dosyasını kullandık. Figma içinde oluşturduğumuz componentte ilgili alanların adını JSON dosyasındaki key değerleri olacak şekilde verdik. İlgili alanları seçip "JSON to Figma" pluginini çalıştırdık. Plugine JSON dosyamızı gösterdik ve gelen tabloda ilgili alanları seçip "Populate selected" butonunu tıkladık.

Örnek 2

Google sheet üzerindeki veriyi önce JSON haline getirip sonra Figmada kullanacağız.

Önce Google sheet içinde eklenti olarak "Export Sheet Data" kurulmalı.

Uzantılar > "export sheet data" > "open side bar" tıklanır. Sidebar kısmında ayarlarda "Export sheet arrays" ve "Export contents as array" seçili olmalı.

Export butonu ile dosya indirmeye hazır hale getirilir ve indirilir.

"Chart" plugini "create chart" şeklinde çalıştırılır. Buradan JSON kısmı seçilir. Sonra online veya lokal JSON seçilir (bizimki lokal). Style kısmından da stil tanımları yapılır. "Create Chart" ile grafik oluşturulur.

Bravo Studio ile Native App (Kod yazmadan + Rest API)

Paralı uygulama. İleride istenirse ayrı dersi udemyde mevcut.

Airtable Üzerinden Veri Çekme

Airtable.com uzak sunucuda veri saklamamıza ve veriye ulaşmamıza yarayan bir araç. Ücretli ve ücretsiz kullanımı mevcut.

Biz aşağıdaki gibi bir database oluşturduk (arayüzü oldukça sezgisel olduğundan database'i nasıl oluşturduğumuzu yazmadım).

Airtable içinde "Share and sync" kısmı seçildi. Oradaki link kopyalandı. Figmada verinin geleceği component seçildi. "Airtable to Figma" plugini açıldı. Link buraya yapıştırıldı. Gelen data sütunları ile seçilen componentteki alanlar eşleştirildi. Gelen verideki satır sayısı kadar yeni component kendiliğinden oluştu.

HTML Sayfamıza CSS Ekleme Yöntemleri

CSS 3 türlü eklenebilir.

inline

Etiketin içinde style parametresi ile.

<p style="color: red;">Kırmızı yazı</p>
                

Internal CSS

Sayfanın head etiketlerinin arasına:

<head>
  ...
  <style type="text/css">
    /* type kısmı olmasa da olur */
    p{
      color: red;
    }
  </style>
  ...
</head>
              

External CSS

.css uzantılı bir dosyanın html içinde çağırılması ile:

style.css

p{
  color: red
}
                

<head>
  ...
  <link rel="stylesheet" href="./style.css">
  ...
</head>
                

Tüm Özellikleriyle CSS Background Kullanımı

<div id="bacground-example-div1">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima quam nobis nemo iure, cupiditate, eum quos odit id at, eius natus neque quasi laborum culpa! Eum, tenetur non. Quasi earum ratione iusto corporis amet aliquid eligendi, animi totam, unde architecto ex nihil soluta vero error dignissimos reiciendis quae cupiditate nam sit nobis cumque non ea dolores vitae? Aliquam labore nemo expedita saepe tenetur architecto consectetur temporibus beatae nisi? Amet eligendi voluptate vero consectetur aliquam reprehenderit architecto cum veniam, perferendis vitae dolorem autem deserunt rerum. Mollitia, laborum. Consectetur, possimus earum hic esse ut at, ratione quisquam veniam qui architecto ipsam tenetur?
  </p>
</div>
                  

#bacground-example-div1{
  background-image: url(./images/paper.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
                  

<div class="div" id="bacground-example-div2">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam dignissimos officia aut modi illum. Esse ex quia ut necessitatibus tempora vero eveniet quidem voluptate neque odit nulla autem eos cumque nostrum consequuntur laborum doloribus velit, totam veniam nobis cupiditate soluta magnam! Quasi saepe molestiae ex consectetur! Expedita consectetur doloremque saepe facilis tenetur corporis hic laborum ad rem, dicta aspernatur illo praesentium esse necessitatibus quia repudiandae autem amet, sequi rerum. Error eveniet, ipsa dolor libero eligendi id officia repellat necessitatibus similique earum architecto adipisci doloremque, nihil praesentium sunt reiciendis possimus deleniti. Illum, doloremque corporis amet non culpa esse ipsam accusamus accusantium?
  </p>
</div>
                  

#bacground-example-div2{
  background-image: url(./images/small-paper.png);
  background-repeat: no-repeat;
  background-position: center top;
}
                  

<div class="div" id="bacground-example-div3">
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem accusantium veniam fugit obcaecati dolorum reiciendis dignissimos modi ipsum necessitatibus aut amet, quae eligendi sequi vero magni animi maxime dolore velit repudiandae error nemo, perferendis iusto! Unde deleniti laborum in inventore consequuntur soluta ea nesciunt quibusdam nihil deserunt. Illum quis in nihil quam aspernatur ducimus officia facere sequi. Voluptatibus obcaecati, alias qui libero neque quis voluptas reprehenderit at error eum consectetur ab mollitia non quae nam esse distinctio doloremque minus, fugit aperiam tenetur, commodi quisquam. Non ducimus, distinctio animi iusto ad repudiandae eum necessitatibus consectetur adipisci minima tenetur quod obcaecati deserunt.
  </p>
</div>
                  

#bacground-example-div3{
  background-image: url(./images/manzara.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
                

Yukarıdaki css kodu aşağıdaki gibi kısaltılabilir.

#bacground-example-div3{
  background: url(./images/manzara.jpg) no-repeat center center;
  background-size: contain;
}
                

background ile arka plana renk de atanabilir.

Selector (Seçiciler)

"*" ile sayfadaki tüm elementler seçilir (evrensel seçici)

Etiket içini yazarak tüm etiketler seçilir. "p" tüm paragrafları seçer.

id ile seçmek için id'nin başına "#" eklenir.

class seçmek için classname başına "." eklenir. Aynı class içeren elementler içinde bir element tiğini seçmek için elementName.className yazılır (örn "p.firstClass")

bir etiketin içindeki başka bir etiketi seçmek için aralarında boşluk ile yazılır (örn "ul li" ul etiketinin altındaki tüm li etiketlerini seçer. Burada li başka bir etiletin daha altındaysa da seçilir.)

bir etiketin sadece hemen altındaki başka bir etiketi seçmek için aralarında ">" işareti konur. (örn "ul>li" ul etiketinin hemen altındaki tüm li etiketlerini seçer. Burada li başka bir etiletin daha altındaysa seçilmez.)

bir etiketin hemen bitiminden başlayan, bir sonraki etiketi seçmek için aralarına "+" işareti konur. (örn "div+p" div etiketi kapandıktan sonra gelen ilk etiket p ise seçer.)

bir etiketin bitiminden sonraki ebeveyn nesneleri seçmek için "~" (Ctrl + Alt + Ü, Space) işareti kullanılır. (Örn: "div ~ p" divden sonra gelen ve herhangi bir etiketin altında olmayan tüm p etiketlerini seçer.)

sadece belirli bir özniteliğe sahip olanları seçmek için "[]" kullanılır. (örn "input[type="text"]" type özelliği text olan inputları seçer.)

bir grup child elementten belirli bir sıradakini seçmek için "nth:child()" kullanılır. (örn "ul li:nth-child(3)" ile ul altındaki 3. li seçilir.). "first-child" ilkini, "last-child" sonuncuyu seçer. "nth-child(odd)" tek sayıda olanların hepsini, "nth-child(even)" ise çift olanların hepsini seçer.

CSS Border Kullanım

<div id="example-border1">
  bu bir divdir
</div>
                  

#example-border1{
  width: 300px;
  height: 300px;
  border-width: 5px;
  border-color: red;
  border-style: solid;
  border-radius: 30px; 
}
                

#example-border1{
  width: 300px;
  height: 300px;
  border: 5px solid red;
  border-radius: 30px; 
}
                

<div id="example-border2">
  bu bir divdir
</div>
                  

#example-border2{
  width: 300px;
  height: 300px;
  border-left: 5px solid red; 
  border-top: 5px solid rgb(0, 0, 0); 
}
                  

CSS Genişlik ve Yükseklik Özellikler

<div id="example-width1">
  <p>test</p>
</div>
                  

#example-width1{
  width: 50%;
  height: 200px;
  background: red;
}
                  

<div id="example-width2">
  <p>test</p>
</div>
                  

#example-width1{
  height: 50vh;
  background:blue;
}
                  

vh ölçü birimi ekran boyutuna göre orantılama sağlar. 100vh tüm sayfayı kaplar. Ekran boyutu değiştiğinde elementin boyutu da değişir.

Font Özellikleri

<p id="example-font1">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. <span id="example-font2">Officiis ad ipsam</span>, magni delectus odio molestias est <span id="example-font3">repudiandae corporis</span> quia alias eligendi dignissimos inventore <span id="example-font4">vitae expedita tenetur tempore</span id="example-font5"> placeat ea deleniti a, <span>ducimus temporibus?</span> Impedit harum aliquid aperiam <span id="example-font6">laborum soluta deleniti optio quia dolor illum minus nostrum, sapiente maxime</span> Aperiam nostrum eum molestias quae perspiciatis <span id="example-font7">doloribus enim id nesciunt excepturi</span> ipsa quisquam?  recusandae delectus earum asperiores voluptatibus nam explicabo commodi corrupti magni voluptate quis provident perferendis dignissimos, repudiandae quibusdam sequi nisi suscipit iure molestiae. Unde, reprehenderit aperiam consequuntur nulla eveniet distinctio, ex ut atque illo id, excepturi impedit minima aut rem!
</p>
                  

#example-font1{

  font-family: Arial, Helvetica, sans-serif;
  line-height: 40px;
}
p#example-font1::first-letter{
  text-transform: capitalize;
  font-size: 40px;
  font-family:monospace
}
#example-font2{
  font-size: 25px;
  background-color: rgb(232, 232, 232);
}
#example-font3{
  letter-spacing: 3px;
  background-color: rgb(232, 232, 232);
}
#example-font4{
  text-transform: uppercase;
  background-color: rgb(232, 232, 232);
}
#example-font5{
  font-style: italic;
  background-color: rgb(232, 232, 232);
}
#example-font6{
  word-spacing: 20px;
  background-color: rgb(232, 232, 232);
}
#example-font7{
  font-weight: bold;
  background-color: rgb(232, 232, 232);
}
                  

line-height değeri genelde font-size değerinin 7-8 px fazlasıdır.

em değeri body için belirlenen font-size değerini referans alarak orantılar. Body font-size: 10px ise font-size: 1.6em = 1.6*10 = 16px olacaktır.

Google Web Font Kullanımı

Google Fonts adresinden istediğimiz fontu seçiyoruz. Fontu html üzerinden eklemek için google font üzerinde seçim yaptığımız yerde <link> kısmı seçilir ve <head> kısmına yapıştıılır. Css üzerinden eklemek için ise @import kısmı seçilir.

<p id="example-googlefont1">
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur vero repudiandae, cum nobis incidunt dolorem, ea provident at officia aliquid ex quod. Placeat mollitia illo nesciunt sunt est, sapiente enim, et harum distinctio dolore in. Natus perferendis nulla porro. A unde voluptatum dolorum nesciunt facere odit quo alias nulla, vel tempora nostrum! Ipsam esse cupiditate adipisci dicta dolores. Maxime soluta voluptates iure, modi iste optio provident dolor voluptatibus excepturi fugit amet consequuntur? Perferendis velit suscipit architecto nulla odit tempora beatae ex dolores enim vero deserunt voluptate temporibus nisi, similique mollitia esse officia expedita iusto consectetur sint qui quia incidunt dolor.
</p>
                  

#example-googlefont1{
  font-family: 'Dancing Script', cursive;
}
                  

<head>
  ...
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Dancing+Script" rel="stylesheet">
  ...
</head>
                  

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script');
                  

Padding ve Margin Kullanımı

<div id="example-mp1">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum nemo at similique enim quam deserunt repellendus nostrum architecto obcaecati perferendis.
  </p>
</div>
                  

#example-mp1{
  max-width: 500px;
  height: 400px;
  border: 2px solid #333;
  background: #f5f5f5;
  padding: 20px 80px;
  margin: 50px;
}
                  

Dikey ve Yatayda Ortalanmış Elemanlar

<h3 id="example-aligment1">Bu alan başlık alanıdır</h3>
                  

#example-aligment1{
  background: yellow;
  padding: 15px 0;
  text-align: center;
}
                  

<p id="example-aligment2">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolore qui impedit sapiente. Amet corporis a temporibus, inventore nesciunt similique consectetur in voluptas harum exercitationem ipsa, sed voluptatibus. Placeat asperiores, quam nisi eligendi ratione assumenda totam dolorum repellendus illo odio sint corporis, aliquid velit reiciendis dicta dolores iste aut saepe.
</p>
                  

#example-aligment2{
  text-align: justify;
}
                  

<div id="example-aligment3">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem aut dicta aliquam tenetur! Neque sapiente architecto maxime consequatur officiis dolores!</p>
</div>
                  

#example-aligment3{
  width: 100%;
  height: 350px;
  background-color: crimson;
  color: #fff;
  display: table;
}
div#example-aligment3 p{
  max-width: 250px;
  background-color: blue;
  margin: 0 auto;
  text-align: center;
  display: table-cell;
}
                  

CSS Konumlandırma - Position

css te position temelde 3 şekildedir: relative, static, absolute. Varsayılan değer static'tir

relative özelliği verilen bir elemanın içindeki objeyi istediğimiz şekilde konumlandırabiliriz. Konumlandırılacak olan objenin de absolute olması gerekir. Bu durmda default değer 0, 0 noktasıdır.

<div id="example-position1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem aut dicta aliquam tenetur! Neque sapiente architecto maxime consequatur officiis dolores!</p>
</div>
                  

#example-position1{
  width: 100%;
  height: 350px;
  background-color: crimson;
  color: #fff;
  position: relative;
}
div#example-position1 p{
  max-width: 250px;
  background-color: blue;
  margin: 0 auto;
  text-align: center;
  height: 140px;
  position: absolute;
  left: 50%; 
  /* alanın yarısı kadar soldan itildi */
  margin-left: -125px;
  /* kendisinin yarısı kadar sola geri çekildi */
  top: 50%;
  /* alanın yarısı kadar yukarıdan itildi */
  margin-top: -70px;
  /* kendisinin yarısı kadar yukarı çekildi*/
}
                  

"position: fixed" sayfanın bir yerine ilgili kısmı sabitler. Sayfanın sağ altında örneği yer alıyor.

index.html

<div>
  <a href="#end"><img id="example-position2" src="./images/down.svg" alt=""></a>
</div>
<div>
  <a href="#"><img id="example-position3" src="./images/up.svg" alt=""></a>
</div>
                

img#example-position2{
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 48px;
}
img#example-position3{
  position: fixed;
  bottom: 60px;
  right: 10px;
  width: 48px;
}
                

CSS Float Kullanımı

float grid ve flex yapısından önce kullanılan bir obje konumlandırma özelliği.

kapsayıcını içinde yan yana gelmesini istediğimiz blok elementlere "float" özelliği ekliyoruz. Düzgün çalışması için ise en sona eklediğimiz boş blok elemanına "clear" özelliği ekliyoruz.

<div id="example-float1">
  <div class="example-float2"></div>
  <div class="example-float2"></div>
  <div class="example-float2"></div>
  <div class="example-float3"></div>
  <div id="example-float-clear"></div>
</div>
                  

div#example-float1{
  width: 100%;
  background-color: blue;
  padding: 20px;
}
div.example-float2{
  width: 75px;
  height: 75px;
  background: yellow;
  border: 1px solid #333;
  float: left;
}
div#example-float-clear{
  clear: both;
}
div.example-float3{
  width: 75px;
  height: 75px;
  background: pink;
  border: 1px solid #333;
  float: right;
}
                  

<div>
  <img src="./images/My Raven.png" alt="" class="example-float4">
  <p>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod quae facere non inventore vel, repudiandae fuga aut repellendus est? A nostrum adipisci asperiores deleniti laborum earum laboriosam quod molestiae quas! Magni minima hic totam natus, maxime impedit. Sunt alias dolore eveniet consequuntur consectetur beatae, assumenda a iusto inventore dicta! Recusandae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit placeat aliquam dignissimos fugit, debitis ullam provident totam saepe asperiores fuga. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae odio hic itaque perspiciatis molestiae deserunt, earum ullam similique vero expedita, magnam odit nostrum non suscipit laudantium corporis. Nemo qui similique, necessitatibus dolores eaque quidem doloremque laboriosam ducimus ipsa cumque enim laborum repellat consequatur architecto animi suscipit cupiditate hic eum reiciendis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem atque, minima alias quas suscipit eaque. Rerum beatae alias non quae?
  </p>
</div>
                  

img.example-float4{
  width: 200px;
  float: left;
}
                  

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod quae facere non inventore vel, repudiandae fuga aut repellendus est? A nostrum adipisci asperiores deleniti laborum earum laboriosam quod molestiae quas! Magni minima hic totam natus, maxime impedit. Sunt alias dolore eveniet consequuntur consectetur beatae, assumenda a iusto inventore dicta! Recusandae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit placeat aliquam dignissimos fugit, debitis ullam provident totam saepe asperiores fuga. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae odio hic itaque perspiciatis molestiae deserunt, earum ullam similique vero expedita, magnam odit nostrum non suscipit laudantium corporis. Nemo qui similique, necessitatibus dolores eaque quidem doloremque laboriosam ducimus ipsa cumque enim laborum repellat consequatur architecto animi suscipit cupiditate hic eum reiciendis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem atque, minima alias quas suscipit eaque. Rerum beatae alias non quae?

Hover ve Focus Özelliği (Basit Bir Login Form Yapalım)

<div id="example-hover-focus-1">
  <form>
    <h4>Kullanıcı Kaydı</h4>
    <input type="text" name="isim" placeholder="İsminiz"><br>
    <input type="text" name="soyisim" placeholder="Soy isminiz"><br>
    <a href="#">Kayıt Ol</a>
  </form>
</div>
                  

#example-hover-focus-1{
  background: url(./images/paper.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 500px;
  text-align: center;
}
#example-hover-focus-1 form{
  padding-top: 120px;
}
#example-hover-focus-1 input{
  width: 70%;
  height: 50px;
  margin-bottom: 20px;
}
#example-hover-focus-1 input:focus{
  border: 3px solid yellow;
  outline: none;
}
#example-hover-focus-1 a{
  display: inline-block;
  width: 70%;
  height: 50px;
  line-height: 50px;
  background: chocolate;
  color: #fff;
  text-decoration: none;
}
#example-hover-focus-1 a:hover{
  background-color: red;
}
                  

Dikey ve Yatay Menü Oluşturma

<ul id="example-menu1">
  <li><a href="#">Anasayfa</a></li>
  <li><a href="#">Hakkımızda</a></li>
  <li><a href="#">Referanslarımız</a></li>
  <li><a href="#">Galeri</a></li>
  <li><a href="#">İletişim</a></li>
</ul>
                  

ul#example-menu1{
  list-style-type: none;
  padding-left: 0;
}
ul#example-menu1 li{
  margin-bottom: 5px;
}
ul#example-menu1 li a{
  display: block;
  width: 150px;
  height: 35px;
  line-height: 35px;
  background: #ddd;
  color: #333;
  text-decoration: none;
  font-size: 13px;
  padding-left: 15px;
}
ul#example-menu1 li a:hover{
  background-color: #666;
  color: #f5f5f5;
}
                  

Listeyi dikeyden yataya çevirmek için li etiketine "float: left;" atanır.

<ul id="example-menu2">
  <li><a href="#">Anasayfa</a></li>
  <li><a href="#">Hakkımızda</a></li>
  <li><a href="#">Referanslarımız</a></li>
  <li><a href="#">Galeri</a></li>
  <li><a href="#">İletişim</a></li>
</ul>
                  

ul#example-menu2{
  list-style-type: none;
  padding-left: 0;
}
ul#example-menu2 li{
  margin-bottom: 5px;
  margin-left: 5px;
  float: left;
}
ul#example-menu2 li a{
  text-align: center;
  display: block;
  width: 120px;
  height: 35px;
  line-height: 35px;
  background: #ddd;
  color: #333;
  text-decoration: none;
  font-size: 13px;
}
ul#example-menu2 li a:hover{
  background-color: #666;
  color: #f5f5f5;
}
                  

CSS ile Açılır Menü Oluşturma

<ul id="example-navmenu-1">
  <li><a href="#">Anasayfa</a></li>
  <li><a href="#">Hakkımızda</a>
  <ul>
    <li><a href="#">Misyonumuz</a></li>
    <li><a href="#">Vizyonumuz</a></li>
    <li><a href="#">Değerlerimiz</a></li>
  </ul></li>
  <li><a href="#">Haberler</a>
  <ul>
    <li><a href="#">Spor</a></li>
    <li><a href="#">Magazin</a></li>
    <li><a href="#">Siyaset</a></li>
  </ul></li>
  <li><a href="#">Galeri</a></li>
  <li><a href="#">İletişim</a></li>
</ul>
                  

ul#example-navmenu-1{
  padding: 0;
  margin: 0;
  list-style-type: none;
}
ul#example-navmenu-1 li{
  float: left;
  position: relative;
  width: 90px;
}
ul#example-navmenu-1 ul{
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: none;
  position: absolute;
  left: 0;
  top: 40px;
}
ul#example-navmenu-1 a{
  display: block;
  width: 90px;
  height: 40px;
  line-height: 40px;
  background: rgb(14, 100, 212);
  color: #fff;
  text-align: center;
  text-decoration: none;
}
ul#example-navmenu-1 a:hover{
  background-color: rgb(9,67,145);
}
ul#example-navmenu-1 li:hover ul{
  display: block;
  z-index: 1;
}
                  

Box Shadow, Text Shadow ve Border Radius Kullanımı

<div class="col-sm-6">
  <div id="example-borderRadius1">
    Bu bir test dividir
  </div>
</div>
                  

div#example-borderRadius1{
  width: 400px;
  height: 300px;
  background: red;
  color: white;
  padding: 30px;
  border-radius: 25px 0 10px 50px;
}
                  

<p id="example-text-shadow1">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, facere?
</p>
                  

p#example-text-shadow1{
  font-size: 2.5em;
  text-shadow: 4px 2px 3px rgb(255, 70, 224);
}
                  

<div id="example-box-shadow1">
  Bu bir test dividir
</div>
                  

div#example-box-shadow1{
  width: 400px;
  height: 300px;
  background: red;
  color: white;
  padding: 30px;
  box-shadow: 5px 5px 7px black;
}
                  

"box-shadow" özelliğinde parametre olarak inset yazılırsa gölge içeriden verilir.

Overflow Kullanımı

İçerik öğenin içine sığmadığında içeriğin nasıl davranacağını belirtmek için kullanılır. Sadece blok level elemanlarda çalışır.

hidden: taşan alanları gizler

auto: sığmazsa scroll çıkar. sığarsa scroll görünmez.

varsayılan değer visible'dır. taşan alanın da görünmesini sağlar.

<div id="example-overflow1">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem perspiciatis eius laudantium eos fuga perferendis, maiores fugiat cum soluta ducimus adipisci assumenda laboriosam minus libero eum quasi sed. Iure ea corporis sed quia ex! Distinctio odit quas, in repudiandae obcaecati consectetur perferendis eius itaque! Dignissimos necessitatibus culpa consequatur dolorem quisquam eum nam maiores reiciendis ullam delectus repellendus vel vero dicta, dolorum veniam optio ipsam voluptatum provident ad repellat voluptate earum quaerat sint molestias. Possimus odio sit minus maxime numquam dignissimos eum adipisci alias ratione excepturi libero, tempore nesciunt incidunt totam molestias dolorem dicta ea reiciendis! Distinctio amet, soluta corrupti sit autem hic voluptate iure quis sapiente ducimus neque commodi perferendis eum libero, cum atque asperiores cupiditate, quasi fugit possimus fuga dolores illo recusandae ipsum? Asperiores optio laudantium distinctio officiis est. Omnis fuga voluptates consequatur veniam possimus, sed repudiandae eaque mollitia magnam voluptatibus molestias obcaecati. 
</div>
                  

div#example-overflow1{
  width: 100%;
  height: 300px;
  background: yellow;
  border: 1px dotted #333;
  overflow: auto;
}
                  

CSS Target Özelliği ile Hedef Elemanlara Stil Uygulama

Link ile ulaşılan (hedeflenen) elemanın özelliğini değiştirmek için kullanılır.

<div>
  <a href="#istanbul">İstanbul</a> |
  <a href="#ankara">Ankara</a> |
  <a href="#izmir">İzmir</a> |
  <a href="#kocaeli">Kocaeli</a>
</div>

<div id="istanbul" class="example-target1">
  <h3>İstanbul</h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum reiciendis unde deleniti totam temporibus velit est! Nulla quos sequi quisquam quod ab dolores optio sint!
  </p>
</div>
<div id="ankara" class="example-target1">
  <h3>Ankara</h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque quidem ea sequi minima, maiores pariatur quibusdam nam veniam nobis ut ad sed odio ab doloribus?
  </p>
</div>
<div id="izmir" class="example-target1">
  <h3>İzmir</h3>
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque dignissimos obcaecati delectus provident! Aperiam atque recusandae qui quaerat veniam quibusdam facilis excepturi magnam dicta mollitia.
  </p>
</div>
<div id="kocaeli" class="example-target1">
  <h3>Kocaeli</h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut quaerat id dolore eaque voluptatum, at corporis ducimus velit doloribus soluta. Debitis esse dolorum accusamus aliquam!
  </p>
</div>
                  

div.example-target1:target{
  background: yellow;
}
                  

CSS'de After ve Before Kullanımı

"before" seçili elementten hemen önce "after" ise hemen sonra bir şey eklemek için kullanılır.

<h3 id="example-afterbefore1">Bu alan h3 seviyesinde bir başlıktır</h3>
                  

h3#example-afterbefore1:before{
  content:'';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: chocolate;
  margin-right: 20px;
}
h3#example-afterbefore1:after{
  content:'';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color:aquamarine;
  margin-left: 20px;
}
                  

<ul id="example-afterbefore2">
  <li>Lorem ipsum dolor sit.</li>
  <li>Laudantium voluptatem tempora labore.</li>
  <li>Nobis molestiae consequuntur illum.</li>
  <li>Suscipit veritatis dicta quam!</li>
  <li>Vel eveniet natus nisi.</li>
</ul>
                  

ul#example-afterbefore2 li{
  list-style-type: none;
  margin-bottom: 5px;
}
ul#example-afterbefore2 li::before{
  content: "";
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url("./images/my-raven.png");
  background-size: cover;
  margin-right: 20px;
}
                  

CSS Column Yapısı

index.html

<div id="example-column1">
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima optio voluptas similique illo sed porro nulla, maiores veritatis ullam molestiae! Facilis quaerat ut quod aspernatur dolorem saepe aliquid deserunt reiciendis atque modi adipisci, laboriosam est dolorum cupiditate labore. Ad obcaecati molestias sapiente sequi, doloremque consequatur magni vitae quos quibusdam maxime excepturi modi at ab consectetur corrupti a error? <h2 id="example-column2">Lorem ipsum dolor sit amet consectetur.</h2> Repellendus iusto quo at labore facilis itaque quia eius, sunt distinctio eveniet, dignissimos eligendi adipisci, sequi soluta ducimus sed molestias quibusdam! Explicabo nisi asperiores ducimus veritatis molestias culpa dignissimos dolorem omnis ab voluptatum assumenda fugiat eaque, cupiditate blanditiis beatae dolor illum dolorum dolores odio possimus?</p>
</div>
                

div#example-column1{
  column-count: 4;
  /* içeriğin kaç sütun olacağını belirler */

  /* column-width: 150px; */
  /* sütun genişliğine göre içeriği böler. Ekran genişliğine göre sütun sayısını kendisi hesaplar. */

  column-gap: 10px;
  /* sütunlar arası boşluğu belirler. */
  column-rule: 1px solid green;
}

h2#example-column2{
  column-span: all;
  /* tüm kolonları kapsar */
  background-color: yellow;
}
                

Border Kullanarak Konuşma Balonu ve Üçgen Ok Yapımı

<div id="example-ucgen1"></div>
                  

div#example-ucgen1{
  width: 0;
  height: 0;
  padding: 0;
  border-style: solid;
  border-width: 60px;
  border-color: chocolate crimson darkmagenta gold ;
}
                  

Önce yukarıdaki gibi border özelliği ile 4 üçgen oluşturduk. Sonra bunlardan biri hariç hepsinin renk özelliğini "transparent" seçerek görüntüden kaldırdık.

<div id="example-ucgen2"></div>
                  

div#example-ucgen2{
  width: 0;
  height: 0;
  padding: 0;
  border-style: solid;
  border-width: 60px;
  border-color: chocolate transparent transparent transparent ;
}
                  

<div id="example-baloon1">
  <div id="example-baloon2"></div>
</div>
                  

div#example-baloon1{
  width: 350px;
  height: 200px;
  border-radius: 35px;
  background-color: violet;
  position: relative;
}
div#example-baloon2{
  position: absolute;
  bottom: -30px;
  right: 40px;
  width: 0;
  height: 0;
  border-style: solid;
  border-top-width: 30px;
  border-left-width: 15px;
  border-right-width: 15px;
  border-color: violet transparent transparent transparent;
}
                  

Transform Özelliklerinin Kullanımı

<div id="example-transform1"></div>
                  

div#example-transform1{
  width: 250px;
  height: 250px;
  background-color: coral;
  transition: transform .3s ease-in;
  /* transform işleminin saniyenin %30 unda "easy-in" efekti ile değişmesini sağlar. */
}
div#example-transform1:hover{
  transform: scale(1.4, .7);
  /* x ekseninde %140 y ekseninde %70 oranlarında ölçülenir. */
                  

<div id="example-transform2"></div>
                  

div#example-transform2{
  width: 250px;
  height: 250px;
  background-color: coral;
  transition: transform .3s ease-in;
  /* transform işleminin saniyenin %30 unda "easy-in" efekti ile değişmesini sağlar. */
}
div#example-transform2:hover{
  transform: rotate(45deg);
}
                  

<div id="example-transform3"></div>
                  

div#example-transform3{
  width: 250px;
  height: 250px;
  background: url("./images/manzara.jpg");
  background-size: cover;
  transition: transform .3s ease-in;
  /* transform işleminin saniyenin %30 unda "easy-in" efekti ile değişmesini sağlar. */
}
div#example-transform3:hover{
  transform: rotateX(180deg)
}
                  

<div id="example-transform4"></div>
                  

div#example-transform4{
  width: 250px;
  height: 250px;
  background: url("./images/manzara.jpg");
  background-size: cover;
  transition: transform .3s ease-in;
  /* transform işleminin saniyenin %30 unda "easy-in" efekti ile değişmesini sağlar. */
}
div#example-transform4:hover{
  transform: rotateY(180deg)
}
                  

<div id="example-transform5"></div>
                  

div#example-transform5{
  width: 250px;
  height: 250px;
  background-color: coral;
  transition: transform .3s ease-in;
  /* transform işleminin saniyenin %30 unda "easy-in" efekti ile değişmesini sağlar. */
}
div#example-transform5:hover{
  transform: skewX(45deg)
}
                  

<div id="example-transform6"></div>
                  

div#example-transform6{
  width: 250px;
  height: 250px;
  background: url("./images/manzara.jpg");
  background-size: cover;
  transition: all .3s ease-in;
  /* tüm geçişlerin saniyenin %30 unda "easy-in" efekti ile değişmesini sağlar. */
}
div#example-transform6:hover{
  transform: rotate(360deg) scale(.7)
}
                  

<div id="example-transform7"></div>
                  

div#example-transform7{
  width: 250px;
  height: 250px;
  background-color: coral;
  transition: transform .3s ease-in;
  /* transform işleminin saniyenin %30 unda "easy-in" efekti ile değişmesini sağlar. */
}
div#example-transform7:hover{
  transform: translate(50px, 25px)
  /* 50px sola 25px aşağı hareket eder. */
}
                  

<div id="example-transform8">
  <div id="example-transform9"></div>
</div>
                  

div#example-transform8{
  width: 100%;
  height: 400px;
  padding: 0;
  background-color: darkgray;
  position: relative;
}
div#example-transform9{
  width: 100px;
  height: 100px;
  background-color: coral;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* kendi eninin yarısı kadar sola, yüksekliğini yarısı kadar yukarıya alındı. Bu şekilde kapsayıcısını ortaladı. */
}
                  

Z-index Kullanımı

z index hangi layerin üstte olduğunu belirler. Genelde position özellikleri ile kullanılır. z index varsayılan değeri 0 dır.

Normalde içteki etiket üstte görünür. Altta görünmesi için "eksi" bir değer verilebilir.

<div id="example-zIndex1">
  <div id="example-zIndex2"></div>
  <div id="example-zIndex3"></div>
  <div id="example-zIndex4"></div>
</div>
                  

div#example-zIndex1{
  width: 300px;
  height: 200px;
  background-color: crimson;
  padding: 0;
  position: relative;
  margin-top: 40px;
}
div#example-zIndex2{
  width: 100px;
  height: 100px;
  background-color: darkblue;
  position: absolute;
  top: -50px;
  left: 50%;
  margin-left: -75px;
  border-radius: 50%;
  z-index: 1;
}
div#example-zIndex3{
  width: 100px;
  height: 100px;
  background-color: darkorange;
  position: absolute;
  top: -50px;
  left: 50%;
  margin-left: -25px;
  border-radius: 50%;
}
div#example-zIndex4{
  width: 100px;
  height: 100px;
  background-color: darkorange;
  position: absolute;
  top: 50%;
  left: -50px;
  margin-top: -50px;
  border-radius: 50%;
  z-index: -1;
}
                  

Gradient Kullanımı

<div id="example-gradient1"></div>
                  

div#example-gradient1{
  width: 250px;
  height: 250px;
  background: linear-gradient(yellow, black);
}
                  

<div id="example-gradient2"></div>
                  

div#example-gradient2{
  width: 250px;
  height: 250px;
  background: linear-gradient(to left, yellow, black);
}
                  

<div id="example-gradient3"></div>
                  

div#example-gradient3{
  width: 250px;
  height: 250px;
  background: linear-gradient(to top, yellow, black);
}
                  

<div id="example-gradient4"></div>
                  

div#example-gradient4{
  width: 250px;
  height: 250px;
  background: linear-gradient(to top left, yellow, black);
}
                  

<div id="example-gradient5"></div>
                  

div#example-gradient5{
  width: 250px;
  height: 250px;
  background: linear-gradient(yellow, black, red, blue);
}
                  

<div id="example-gradient6"></div>
                  

div#example-gradient6{
  width: 250px;
  height: 250px;
  background: linear-gradient(50deg, yellow, black);
}
                  

<div id="example-gradient7"></div>
                  

div#example-gradient7{
  width: 250px;
  height: 250px;
  background: linear-gradient(yellow 33%, black 33% 66%, blue 66%);
}
                  

<div id="example-gradient8"></div>
                  

div#example-gradient8{
  width: 250px;
  height: 250px;
  background: linear-gradient(yellow 25%, black 45% 60%, blue 80%);
}
                  

<div id="example-gradient9"></div>
                  

div#example-gradient9{
  width: 250px;
  height: 250px;
  background: radial-gradient(yellow, blue, red)
}
                  

<div id="example-gradient10"></div>
                  

div#example-gradient10{
  width: 250px;
  height: 250px;
  background: radial-gradient(at left, yellow, blue, red)
}
                  

<div id="example-gradient11"></div>
                  

div#example-gradient11{
  width: 250px;
  height: 250px;
  background: repeating-linear-gradient(red 0 50px, blue 50px 100px)
}
                  

Gradient oluşturmak için Colorzilla Gradient Generator veya uigradients.com veya cssgradient.io kullanılabilir

CSS Media Sorguları

Ekran çözünürlüğü değiştiğinde içeriğin değişmesi için kullanılırlar.

<div id="example-mediaQueries1"></div>
                  

div#example-mediaQueries1{
  width: 100%;
  height: 250px;
  background: red;
}

/* screen: pc */
/* aşağıdaki kod maksimum 400px e kadar olan genişlikte arka planı mavi yapar. */
@media screen and (max-width: 400px){
  div#example-mediaQueries1{
    background-color: blue;
  }
}
                  

<div id="example-mediaQueries2"></div>
                  

div#example-mediaQueries2{
  width: 100%;
  height: 250px;
  background: red;
}

/* aşağıdaki kod 200px den 400px e kadar olan genişlikte arka planı mavi yapar. */
@media (min-width: 200px) and (max-width: 400px){
  div#example-mediaQueries2{
    background-color: blue;
  }
}
                  

<div id="example-mediaQueries3"></div>
                  

div#example-mediaQueries3{
  width: 100%;
  height: 250px;
  background: red;
}

/* aşağıdaki kod kullanılan cihazın ekran genişliği 200px den 400px e kadar olan genişlikte ise arka planı mavi yapar. */
@media (min-device-width: 200px) and (max-device-width: 400px){
  div#example-mediaQueries3{
    background-color: blue;
  }
}
                  

Örneklerin anlaşılması için tarayıcıya sağ tıklayıp "incele" menüsünü açarak ekran genişliğini değiştirin

CSS Box Sizing Ne İşe Yarar

Blok elemanlarda genişlik ve yüksekliğe padding ve border dahil değer vermek için "box-sizing: border-box" kullanılır. Aksi durumda genişlik ve yükseklik padding ve border hariç değer alır ve sadece content alanı için kullanılmış olur.

<div id="example-boxsizing1">
  <p>
    total size: 300*300
  </p>
</div>
                  

div#example-boxsizing1{
  width: 250px;
  height: 250px;
  text-align: center;
  background: red;
  color: #fff;
  padding: 20px;
  border: 5px solid yellow;
  box-sizing: content-box;
}
                  

<div id="example-boxsizing2">
  <p>
    total size: 250*250
  </p>
</div>
                  

div#example-boxsizing2{
  width: 250px;
  height: 250px;
  text-align: center;
  background: red;
  color: #fff;
  padding: 20px;
  border: 5px solid yellow;
  box-sizing: border-box;
}
                  

Flex Yapısı ve Özellikler

Kapsayıcılar için genel özellikler

flex bir kapsayıcıya atandıysa içindekiler varsayılan olarak yanyana gelir (row). Bunu "flex-direction" ile değiştirebiliriz (columb vs). Ters sıralanması istersek "flex-direction: row-reverse;" seçilir.

<div id="example-flex1">
  <div class="example-flex-box">1</div>
  <div class="example-flex-box">2</div>
  <div class="example-flex-box">3</div>
</div>
                  

div#example-flex1{
  display: flex;
  width: 100%;
  height: 300px;
  background: darksalmon;
  padding: 20px;
}
.example-flex-box{
  width: 75px;
  height: 75px;
  background: #fff;
  border-radius: 10px;
  margin: 5px;
}
                  

<div id="example-flex2">
  <div class="example-flex-box">1</div>
  <div class="example-flex-box">2</div>
  <div class="example-flex-box">3</div>
  <div class="example-flex-box">4</div>
  <div class="example-flex-box">5</div>
</div>
                  

div#example-flex2{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 600px;
  background: darksalmon;
  padding: 20px;
}
                  

flex kapsayıcısında elemanlar satıra sığmayacak kadar çok olursa elemanları daraltır.

<div id="example-flex3">
  <div class="example-flex-box">1</div>
  <div class="example-flex-box">2</div>
  <div class="example-flex-box">3</div>
  <div class="example-flex-box">4</div>
  <div class="example-flex-box">5</div>
  <div class="example-flex-box">6</div>
  <div class="example-flex-box">7</div>
  <div class="example-flex-box">8</div>
  <div class="example-flex-box">9</div>
  <div class="example-flex-box">10</div>
</div>
                  

div#example-flex3{
  display: flex;
  width: 100%;
  height: 300px;
  background: darksalmon;
  padding: 20px;
}
                  

Bunu engellemek ve fazla gelenleri alt satıra almak için kapsayıcıya "flex-wrap: wrap;" eklenir. "flex-wrap: wrap-reverse;" ise fazlaları yukarıya alacak şekilde taşır.

<div id="example-flex4">
  <div class="example-flex-box">1</div>
  <div class="example-flex-box">2</div>
  <div class="example-flex-box">3</div>
  <div class="example-flex-box">4</div>
  <div class="example-flex-box">5</div>
  <div class="example-flex-box">6</div>
  <div class="example-flex-box">7</div>
  <div class="example-flex-box">8</div>
  <div class="example-flex-box">9</div>
  <div class="example-flex-box">10</div>
</div>
                  

div#example-flex4{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 600px;
  background: darksalmon;
  padding: 20px;
}
                  

"flex-direction" ve "flex-wrap" özellikleri "flex-flow" içinde birlikte yazılabilir.

<div id="example-flex5">
  <div class="example-flex-box">1</div>
  <div class="example-flex-box">2</div>
  <div class="example-flex-box">3</div>
  <div class="example-flex-box">4</div>
  <div class="example-flex-box">5</div>
  <div class="example-flex-box">6</div>
  <div class="example-flex-box">7</div>
  <div class="example-flex-box">8</div>
  <div class="example-flex-box">9</div>
  <div class="example-flex-box">10</div>
</div>
                  

div#example-flex5{
  display: flex;
  flex-flow: column wrap;
  width: 100%;
  height: 600px;
  background: darksalmon;
  padding: 20px;
}
                  

yatayda hizalama için "justify-content" özelliğini kullanırız.

<div id="example-flex6">
  <div class="example-flex-box">1</div>
  <div class="example-flex-box">2</div>
  <div class="example-flex-box">3</div>
</div>
                  

div#example-flex6{
  display: flex;
  width: 100%;
  height: 300px;
  background: darksalmon;
  padding: 20px;
  justify-content: center;
}
                  

<div id="example-flex7">
  <div class="example-flex-box">1</div>
  <div class="example-flex-box">2</div>
  <div class="example-flex-box">3</div>
</div>
                  

div#example-flex7{
  display: flex;
  width: 100%;
  height: 300px;
  background: darksalmon;
  padding: 20px;
  justify-content: flex-start;
}
                  

<div id="example-flex8">
  <div class="example-flex-box">1</div>
  <div class="example-flex-box">2</div>
  <div class="example-flex-box">3</div>
</div>
                  

div#example-flex8{
  display: flex;
  width: 100%;
  height: 300px;
  background: darksalmon;
  padding: 20px;
  justify-content: space-evenly;
}
                  

dikeyde hizalama için "align-items" özelliği kullanılır.

<div id="example-flex9">
  <div class="example-flex-box">1</div>
  <div class="example-flex-box">2</div>
  <div class="example-flex-box">3</div>
  <div class="example-flex-box">4</div>
  <div class="example-flex-box">5</div>
</div>
                  

div#example-flex9{
  display: flex;
  width: 100%;
  height: 600px;
  background: darksalmon;
  padding: 20px;
  align-items: center;
}
                  

"align-items: stretch;" özelliği yükseklik değeri olmayan içeriğin tüm alanı kaplamasını sağlar.

<div id="example-flex10">
  <div class="example-flex-box2">1</div>
  <div class="example-flex-box2">2</div>
  <div class="example-flex-box2">3</div>
  <div class="example-flex-box2">4</div>
  <div class="example-flex-box2">5</div>
</div>
                  

.example-flex-box2{
  /* height: 100px; */
  width: 100px;
  background: #fff;
  border-radius: 10px;
  margin: 5px;
}
div#example-flex10{
  display: flex;
  width: 100%;
  height: 600px;
  background: darksalmon;
  padding: 20px;
  justify-content: space-evenly;
  align-items: stretch;
}
                  

Birden fazla satır olduğunda ortada birleşmesi için "align-content: center;" kullanılır. Birden fazla satır varsa "align-items" yerine "align-content" kullanılır.

<div id="example-flex11">
  <div class="example-flex-box">1</div>
  <div class="example-flex-box">2</div>
  <div class="example-flex-box">3</div>
  <div class="example-flex-box">4</div>
  <div class="example-flex-box">5</div>
  <div class="example-flex-box">6</div>
  <div class="example-flex-box">7</div>
  <div class="example-flex-box">8</div>
  <div class="example-flex-box">9</div>
  <div class="example-flex-box">10</div>
</div>
                  

div#example-flex11{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 600px;
  background: darksalmon;
  padding: 20px;
  align-content:center;
}
                  

Kapsananlar için genel özellikler

"order" özelliği nesnenin sırasını belirler.

<div id="example-flex12">
  <div class="example-flex-box3 example-flex-item1">1</div>
  <div class="example-flex-box3 example-flex-item3">2</div>
  <div class="example-flex-box3 example-flex-item4">3</div>
  <div class="example-flex-box3 example-flex-item5">4</div>
</div>
                  

div#example-flex12{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 400px;
  background: darksalmon;
  padding: 20px;
}
.example-flex-box3{
  height: 75px;
  width: 75px;
  background: #fff;
  border-radius: 10px;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#example-flex12 .example-flex-item4{
  background: yellow;
  order: 5;
}
#example-flex12 .example-flex-item5{
  background: blue;
  order: 4;
  color: #fff;
}
                  

"flex-grow" özelliği bir elemanın diğerlerinden büyük olmasını sağlar. varsayılan değeri "0" dır

<div id="example-flex13">
  <div class="example-flex-box3 example-flex-item3">1</div>
  <div class="example-flex-box3 example-flex-item4">2</div>
  <div class="example-flex-box3 example-flex-item5">3</div>
</div>
                  

div#example-flex13{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 300px;
  background: darksalmon;
  padding: 20px;
}
#example-flex13 .example-flex-item4{
  background: yellow;
  order: 5;
  flex-grow: 2;
}
#example-flex13 .example-flex-item5{
  background: blue;
  order: 4;
  color: #fff;
  flex-grow: 3;
}
                  

"flex-shrink" ise tam aksine nesneyi küçültür. Varsayılan değeri "1" dir.

<div id="example-flex14">
  <div class="example-flex-box3 example-flex-item1">1</div>
  <div class="example-flex-box3 example-flex-item2">2</div>
  <div class="example-flex-box3 example-flex-item3">3</div>
  <div class="example-flex-box3 example-flex-item4">4</div>
  <div class="example-flex-box3 example-flex-item5">5</div>
</div>
                  

div#example-flex14{
  display: flex;
  /* flex-wrap: wrap; */
  width: 100%;
  height: 300px;
  background: darksalmon;
  padding: 20px;
}
#example-flex14 .example-flex-item4{
  background: yellow;
  order: 5;
  flex-grow: 2;
}
#example-flex14 .example-flex-item5{
  background: blue;
  order: 4;
  color: #fff;
  flex-shrink: 3;
}
                  

"flex-basis" yüzde cinsinden kaplanacak maksimum alanı verir.

<div id="example-flex15">
  <div class="example-flex-box3 example-flex-item1">1</div>
  <div class="example-flex-box3 example-flex-item4">2</div>
  <div class="example-flex-box3 example-flex-item5">3</div>
</div>
                  

div#example-flex15{
  display: flex;
  /* flex-wrap: wrap; */
  width: 100%;
  height: 300px;
  background: darksalmon;
  padding: 20px;
}
#example-flex15 .example-flex-item4{
  background: yellow;
  order: 5;
  flex-basis: 60%;
}
#example-flex15 .example-flex-item5{
  background: blue;
  order: 4;
  color: #fff;
}
                  

tek bir elemanın hizasını ayarlama için "align-self" özelliği kullanılır.

<div id="example-flex16">
  <div class="example-flex-box3 example-flex-item1">1</div>
  <div class="example-flex-box3 example-flex-item2">2</div>
  <div class="example-flex-box3 example-flex-item3">3</div>
  <div class="example-flex-box3 example-flex-item4">4</div>
  <div class="example-flex-box3 example-flex-item5">5</div>
</div>
                  

div#example-flex16{
  display: flex;
  /* flex-wrap: wrap; */
  width: 100%;
  height: 600px;
  background: darksalmon;
  padding: 20px;
}
#example-flex16 .example-flex-item4{
  background: yellow;
  order: 5;
  align-self: center;
}
#example-flex16 .example-flex-item1{
  align-self: flex-end;
}
                  

flex kullanımı için yardımcı siteler:

• flexyboxes
• flexbox.help
• flexbox.buildwithreact
• angrytools.com/css-flex

Animation Kullanımı

Animasyonu tanımlarken

@keyframes benim-animasyonım {
  0%{
    property: value
  }
  100%{
    property: value
  }
}
                

@keyframes benim-animasyonım {
  from{
    property: value
  }
  to{
    property: value
  }
}
                

animasyon eklenecek obje css'te seçildikten sonra

animation: name duration timing-function delay iteration-count direction fill-mode;
                

• name: animasyonun ismi
• duration: animasyonun süresi(sn cinsinden)
• timing-function: animasyonun nasıl gerçekleşeceği (easy-in, easy-out vs)
• delay: animasyonun başlamasından önce geçen süre (sn cinsinden)
• iteration-count: animasyonun tekrar sayısı (1, 5, infinite vs)
• direction: animasyonun yönü (normal, alternate(sondan başa), reverse(geriye doğru), alternate-reverse(ilkinde ters, sonra düz.))
• fill-mode: animasyon bittikten sonra ne olacağını belirtir (forwards (son halinde kal), backwards (ilk haline dön) vs )

<div id="example-animation1"></div>
                  

div#example-animation1{
  width: 150px;
  height: 150px;
  background-color: violet;
  animation: example-myanime1 3s ease 2s 2 normal forwards;
}

@keyframes example-myanime1{
  0%{
    width: 150px;
    opacity: .3;
    background-color: violet;
  }
  100%{
    width: 100%;
    opacity: 1;
    background-color: sienna;
  }
}
                  

<div id="example-animation2"></div>
                  

div#example-animation2{
  width: 150px;
  height: 150px;
  background-color: violet;
  animation: example-myanime2 3s ease 2s 2 normal backwards;
}

@keyframes example-myanime2{
  0%{
    width: 150px;
    opacity: .3;
    background-color: violet;
  }
  100%{
    width: 100%;
    opacity: 1;
    background-color: sienna;
  }
}
                  

Örnekleri canlandırmak için sayfayı yenileyin.

CSS ve HTML Kısmının Kodlanması

Figma içinde oluşturduğumuz tasarıma uygun olarak iç içe bölümler halinde html kısmını yazdık.

<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Figma to Html</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>

<body>
    <div class="wrapper">
        <div class="left">
            <div class="left-content">
                <h1 class="title title-white">KAYIT OL</h1>
                <p class="paragraph">
                    Lorem ipsum dolor sit amet consectetur. Neque pharetra id sed blandit semper sit. Enim sit sed
                    luctus sagittis at interdum. Diam lacus neque est volutpat augue.
                </p>
                <a href="#" class="btn-white">KAYIT OL</a>
            </div>
        </div>
        <div class="right">
            <div class="right-content">
                <h1 class="title title-dark">GİRİŞ YAP</h1>
                <div class="input-button">
                    <div class="input-link">
                        <form action="/action_page.php" method="post" name="loginform" id="loginform">
                            <input type="text" id="name" name="name" value="" placeholder="Kullanıcı adınız">
                            <input type="password" id="password" name="password" value="" placeholder="Şifreniz">
                            <div class="check">
                                <label for="check">
                                    <input type="checkbox" name="" id="check" checked/>Beni hatırla
                                </label>
                                <a href="#">Şifremi unuttum</a>
                            </div>
                            <a class="btn-dark">GİRİŞ YAP</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
                

style.css içinde önce temel tanımları ve font import işlemini yaptık.

:root {
  --main-color: #1853d0;
  --black: #000000;
  --white: #ffffff;
  --btn-hover: #0b3387;
  --stroke-color: #acacac;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto');
* {
  box-sizing: border-box;
}
                

body {
  background: url("../images/bg.jpg") no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: 'Roboto', sans-serif;
}
.wrapper {
  display: flex;
  width: 800px;
  height: 600px;
  justify-content: center;
  align-items: flex-start;
  background-color: var(--white);
}
.left {
  width: 400px;
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../images/left-bg.jpg") no-repeat;
  background-size: cover;
}
.left-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 296px;
}
.right {
  display: flex;
  width: 400px;
  height: 600px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.right-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 296px;
}
                

.title {
  font-style: normal;
  font-weight: 700;
  font-size: 36px;
  line-height: normal;
  text-align: center;
  margin: 0;
}

.title-dark {
  color: var(--black);
}
.title-white {
  color: var(--white);
}

.paragraph {
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  text-align: center;
  color: var(--white);
  margin: 0;
}

.btn-white {
  padding: 10px 16px;
  background: var(--white);
  color: var(--main-color);
  border-radius: 36px;
  text-decoration: none;
  display: inline-block;
}
.btn-white:hover {
  color: var(--white);
  background-color: var(--main-color);
}
.btn-dark {
  padding: 10px 16px;
  background-color: var(--main-color);
  color: var(--white);
  border-radius: 36px;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  margin-top: 36px;
  text-align: center;
}
.btn-dark:hover {
  color: var(--white);
  background-color: var(--btn-hover);
}

input[type="text"],
input[type="password"] {
  border-radius: 4px;
  border: 1px solid var(--stroke-color);
  padding: 10px;
  width: 100%;
  margin-bottom: 16px;
}

.check {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.check a {
  text-decoration: none;
  color: var(--main-color);
}
                

@media (max-width: 799px) {
  .wrapper {
    width: 90%;
    flex-direction: column;
    height: auto;
  }
  .left {
    width: 100%;
    height: auto;
    min-height: 305px;
    background-size: cover;
    padding: 24px 12px;
  }
  .left-content {
    width: 100%;
  }
  .right {
    width: 100%;
    height: auto;
    padding: 24px 12px;
  }
  .right-content {
    width: 100%;
    gap: 0
  }
  .title{
    font-size: 24px;
    line-height: 32px;
  }
  .title-dark{
    margin-bottom: 24px;
  }
}
                

Freelance Gelir Etme ve Portfolio

Freelance

• freelancer.com
• fiverr.com
• upwork.com
• projekurdu.com
• bionluk.com
• themeforest.net: Yaptığımız projeleri satabildiğimiz site
• freepik.com: Yaptığımız görselleri satabildiğimiz site
• gumroad.com: Yaptığımız projeleri satabildiğimiz site
• ui8.net: UI kompanentleri satabildiğimiz site

Portfolio

İş alabilmemiz için portfolio oluşturmamız gerekiyor. Bunun için de UI/UX makalelerini okumak ve var olan sitelerin tasarımlarını düzelterek portfolyoya eklemek önemli. behance ve linkedinde portfolyo sunmak önemli. Portfolyo ilhamı için de bu sitelere bakılabilir.

• behance.net: portfolyomuzu paylaştığımız sitelerden.
• dribbble.com: portfolyomuzu paylaştığımız sitelerden.
• linkedin.com: Belirli zaman aralıkları ile yaptığımız projeleri paylaşıyoruz.
• Kendi web sitemiz
• medium.com: Sektörden yazılar vs için. Her konuda güzel yazılar var.