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

.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.

<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 da edilebilir. Yakından bakıldığında çizgiler biraz pixelated dursa da bu da böyle bi' çalışmaydı işte.

Published on 16.12.2018 by Mert Bakır with commit 03f9638.
karalama
#css #static-site
published on 10.07.2022

Previously, I’ve published a blog post about deploying static content on heroku with basic authentication. You can find the link here. In that post, we hosted the source code on GitLab and configured a CI/CD pipeline to render the static content a.k.a html files and push these files to Heroku. …

published on 28.05.2022

Each git commit has a field called Author which consists ‘user.name’ and ‘user.email’. We usually set these variables once, after installing git, with git config --global so that each repo gets the variables from the global definition. We can also set them locally for a …

published on 25.05.2022

In this post, I’ll first walk through hosting static content with basic authentication. Then, we’ll look into deploying to Heroku using GitLab Pipelines, more specifically deploying a certain sub-directory within the project instead of pushing the whole project. Also, I’ll share …

published on 17.04.2022
edited on 15.07.2022

Önceki bölümde, markdown formatını LaTeX formatına dönüştürmek için kullanılan Pandoc yazılımından bahsetmiştik. Şimdi konuyu bir adım daha ileri taşıyıp ve bookdown’a geçiyoruz. Bookdown; Rmarkdown kullanarak teknik dökümanlar, kitaplar yazabilmemizi sağlayan, Yihui Xie tarafından yazılmış …

published on 10.04.2022

I’ve been using WSL-2 on Windows for over a year. It’s very useful because some Python packages are just a headache to install on Windows. Also, docker. It’s just better on Linux. Yet, WSL-2 can also be problematic. I remember trying a dual-boot setup when things just went way too …

published on 03.03.2022

In this post, I’ll share how to install geopandas and some other gis related packages on Windows. If you are on Mac or Linux you can probably just pip install those without any issue. I usually had to do a google search every time I wanted to install these packages on Windows environment. Of …