published on 16.12.2018
Solo Türk
Solo Türk

Solo Türk’ün altındaki ay yıldızdan esinlenerek benzerini CSS ile yapabilir miyim, diye düşündüm. Evet, boş işlerle uğraşmak da üzerime yok. CSS bilene kolay gelecek olsa da bilmeyen olarak benim biraz zamanımı aldı. Her şeyden önce Türk Bayrağı’nın ölçülerini bilmek gerekiyor. Sonrası biraz araştırma, biraz dört işlem, biraz da deneme yanılma.

Ölçüler

Türk Bayrağı, Türkiye Cumhuriyeti Anayasası’nın 3. maddesine göre, “şekli kanunda belirtilen, beyaz ay yıldızlı al bayraktır.” Türk Bayrağı Kanununa göre, ölçüler aşağıdaki gibidir.

Türk Bayrağı Ölçüleri
Türk Bayrağı Ölçüleri
SembolUzunlukAçıklama
GYükseklik
A1/2 GDış çember merkezi ile kenarlık arasındaki uzaklık
B1/2 GDış çember çapı
C1/16 Gİç ve dış çemberlerin merkezleri arası uzaklık
D2/5 Gİç çemberin çapı
E1/3 Gİç çember ile yıldızı çevreleyen çember arasındaki uzaklık
F1/4 GYıldızı çevreleyen çemberin çapı
L3/2 GUzunluk
M1/30 GUçkurluk uzunluğu

Renk

  • RGB: 227, 10, 23
  • HEX: #E30A17

Az Laf - Çok Kod

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.solo_circleout {
    position: absolute;
    left: 250px;
    top: 250px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background-image: repeating-linear-gradient(-65deg,#AA9C7E,#AA9C7E 9px,#191C21 9px,#191C21 18px);
}

    .solo_circlein {
        position: absolute;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: #191C21;
        top: 50%;
        left: 50%;
        margin: -200px 0px 0px -138px;
    }

.solo_star {
    position: absolute;
    left: 695px; /*250+250-138+333*/
    top: 37.5%;
    width: 250px;
    height: 250px;
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    transform: rotate(54deg);
    background-image: repeating-linear-gradient(65deg,#AA9C7E,#AA9C7E 9px,#191C21 9px,#191C21 18px);
}

.solo_frame {
    position: relative;
    width: 1500px;
    height: 1000px;
    background: #191C21
}

Çoğu gitti, azı kaldı. Gelelim kolay kısmına.

1
2
3
4
5
6
<div class="solo_frame">
        <div class="solo_circleout">
            <div class="solo_circlein"></div>
        </div>
        <div class="solo_star"></div>
</div>

Sonuç

Tüm değerleri aynı oranda değiştirerek farklı boyutlarda elde edebilirsiniz. Çizgileri kaldırıp renkleri kırmızı-beyaz yaparak da kullanabilirsiniz.

Sonradan düzenlenebilir, içeriğe ve layout’a göre ayarlanabilir olmasının yanısıra, CSS’in bir avantajı da bir resim dosyasına göre daha hızlı yüklenecek, daha az internet tüketecek olmasıdır.

Yakından bakıldığında çizgiler biraz pixelated dursa da istediğime yakın bir sonuç elde ettim. Repeating-linear-gradient yerine farklı bir alternatif sunacak varsa duymak isterim.

Published on 16.12.2018 by Mert Bakır with commit afd9659.
karalama
#css #web-dev
published on 24.01.2021
edited on 11.06.2021

Some time ago, I wanted to display image galleries on my Hugo website and searched for Hugo themes for photography and gallery. I can’t say I find much. Then, I met with a javascript library called nanogallery2 which is using another javascript library as an image viewer lightbox2. In this …

published on 23.01.2021
edited on 11.06.2021

Image processing may seem complicated at first but it’s actually easy and definitely worth implementing since it’ll help you decrease page load times. As you probably know, we don’t want to load raw images with huge sizes for small thumbnails or blog-posts. We want to load a small …

published on 05.12.2020

Resume A4 is a side project of mine. It’s one page Hugo Theme that allows you to write your resume in YAML format and keep track of it using git. Also, you can publish it online as a static site using GitLab, GitHub Pages, Netlify, or some other service you are familiar with. A few months …

published on 29.11.2020
edited on 05.12.2020

Plotly is a visualization library that allows us to write code in Python, R, or Julia and generates interactive graphs using Javascript. So, we don’t have to deal with Javascript. You can checkout Plotly gallery, there are interesting works. Anyway, last week, I’ve started learning …

published on 31.12.2020
edited on 26.06.2021

I’ve, recently, published a blog post called Perfect Workflow for Publishing Python Notebooks. I talked about some of the benefits of using Rmarkdown and reticulate. In this post, I’ll try HTML widgets and explain how we can embed those in our blog post using nothing but R. […] 1 …

published on 30.11.2020

I’ve been searching for a good workflow for publishing Jupyter or RMarkdown Notebooks as static blog posts. I think I’ve found the optimal solution for my use case. In this post, I’ll explain my workflow and why chose this way with examples. […] In reality my main purpose to …