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 0ec70f1.
karalama
#css #static-site
published on 17.04.2022
edited on 02.05.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 …

published on 19.02.2022

Önceki yazıda LaTeX kullanmanın avantajlarından ve zorluklarından bahsetmiştim, MS Word gibi WYSIWYG programlar ile karşılaştırıp tavsiyelerimi yazmıştım. Bu yazıda Pandoc yazılımı üzerine konuşacağız. Pandoc’un da yardımıyla LaTeX’in avantajlarını alıp zorluklarını biraz geri de …

published on 12.02.2022

LaTeX bir çeşit döküman hazırlama sistemidir, ancak çoğumuzun alıştığı arayüzlerin aksine bu döküman içerisinde kod yazar gibi bazı komutlar kullanırız. Daha sonra derleyici (compiler) bu dökümanı bizim tanımladığınız kurallara göre PDF’e dönüştürür. […] 1978 yılında, Donald Knuth TeX …

published on 02.01.2022

This post is for fellow students who is studying Operations Research with CPLEX. If you don’t know already, IBM offers free academic license for IBM ILOG CPLEX Optimization Studio. […] First, you have to register IBM Academic Initiative with your academic instituion issued email. (e.g. …