Connect with us

CSS Dersleri

CSS Kodları Ve Anlamları Nelerdir?

Yayınlanan

İcerisinde

CSS

Bu yazımda CSS kodları öğrenmek isteyenler için başlangıç temel seviye CSS kodları ve anlamlarını gruplanmış şekilde aşağıda bulunmaktadır.

Daha detaylı css kodları için farklı kaynakları kullanabilirsiniz.

İçindekiler

FONT İÇİN KULLANILAN CSS KODLARI VE ANLAMLARI

CSS-KODUAÇIKLAMA
@font-faceFont face özelliği, bilgisayarımızda hazır olarak gelen yazı tiplerinin ( Arial, Verdana vb..) dışında istediğimiz yazı tiplerini kullanmamıza olanak sağlar.
fontDiğer font özelliklerini tek Css özelliği (font) ile tanımlamamızı sağlar.
font-familyYazıların tipini yani hangi font ailesinden olmasını istiyorsak onu belirtmek için kullanılır. Değer olarak sadece bir yazı tipi verebildiğimiz gibi birden fazla değerde verebiliriz. Çünkü verdiğimiz ilk değeri tarayıcı desteklemiyorsa bir sonraki verdiğimiz değeri uygulayacaktır.
font-sizeBu özellik ile yazı boyutlarını ayarlayabiliyoruz. Yazı boyutuna px veya em türünden değerler veriyoruz. Tarayıcılar varsayılan olarak yazı boyutunu 16px uygularlar.
font-styleYazıları italik yapmak için kullanılır. font-style özelliğine şu değerleri verebiliriz:   italic normal oblique : İtalic değerine çok benzer ama daha az tarayıcı tarafından desteklenir.
font-variantYazılarda küçük harfleri büyük harflere çevirmek için kullanılır. Burada şuna dikkat etmemiz gerekiyor. Eğer yazıda hepsi küçük harf ise dönüştürdüğümüzde hepsi aynı boyutta büyük harfe dönüşecektir. Eğer yazıda hem büyük hem küçük harfler varsa, dönüştürdüğümüzde yine hepsi büyük harf olacaktır ama önceden zaten büyük harf olanlar yeni dönüştürülenlerden biraz daha büyük olacaktır.   font-variant özelliğine şu değerleri verebiliriz: small-caps : Küçük harfleri büyük harflere dönüştürür. normal
font-weightBu özellik ile yazıların kalınlık incelik durumlarını ayarlayabiliriz. font-weight özelliğine şu değerleri verebiliyoruz:   bold bolder lighter normal 100’den 900’e kadar 100’ün katları olacak şekildede verilebilir. 900 en kalını iken, 100’e doğru incelir ve 100’de en ince halini alır.
FONT İÇİN KULLANILAN CSS KODLARI VE ANLAMLARI




YAZILARA STİL VERMEK İÇİN KULLANILAN CSS KODLARI VE ANLAMLARI

CSS KODUAÇIKLAMA
colorBu özellik ile yazılara istediğimiz renkleri verebiliriz. Dilerseniz direk renk adını verebileceğiniz gibi renklerin rgb ve hex kodlarınıda kullanabilirsiniz.
letter-spacingYazıların karakterleri arasındaki boşluğu arttırmak veya azaltmak için kullanılır. Negatif değerler verdiğimizde aradaki boşluklar azalır.
line-heightSatır yüksekliğini belirlemek için kullanılır.
word-breakSatır sonlarındaki kelimeleri, satırı tam kaplayacak şekilde bölmek için kullanılır. word-break özelliğine şu değerleri verebiliriz:   keep-all : Varsayılan olarak gelen değer.Satır sonundaki kelimeler bölünmez. break-word : Satır sonundaki sığmayan kelimeler bölünür.
white-spaceYazılardaki boşlukların nasıl değerlendirileceğini belirlemek için kullanılır. white-space özelliğine şu değerleri verebiliriz:   normal nowrap pre pre-line pre-wrap
writing-modeYatay şekilde olan yazıları dikey hale getirmek için kullanılır. writing-mode özelliğine şu değerleri verebiliriz:   horizontal-tb : Yazı yatay halde olur. vertical-lr : Yazı dikey halde olur. vertical-rl : Yazı dikey halde olur.
text-transformYazılarda küçük harfleri büyük harfe, büyük harfleri küçük harfe dönüştürmek için kullanılır. Aynı zamanda sadece ilk harfleri büyük diğerleri küçük olacak şekilde kelime ve cümlelerde oluşturabiliriz. text-transform özelliğine şu değerleri verebiliriz:   uppercase : Küçük harfleri büyük harfe dönüştürür. lowercase : Büyük harfleri küçük harfe dönüştürür. capitalize : İlk harf büyük diğer harfler küçük olacak şekilde dönüştürür.
text-alignYazıları yatayda hizalamak için kullanılır. Yani yazının sağda, solda, ortada veya sağa ve sola dayalı şekilde olmasını sağlayabiliriz. text-align özelliğine şu değerleri verebiliriz:   right left center justify end start
text-indentParagrafın ilk cümlesinin vereceğimiz değer ölçüsünde içeriden yani girintili olarak başlaması için kullanılır. Değeri px olarak verebiliriz.
text-shadowYazılara gölge efekti vermek için kullanılır. Vereceğimiz değerler ile gölgenin x ve y eksenindeki konumunu, bulanıklığını ve rengini belirleriz.   İlk verilen değer x ekseni, ikinci verilen değer y ekseni, üçüncü verilen değer bulanıklık, dördüncü verilen değer de rengi için uygulanır.
text-overflowBu özellik ile yazılarımızın sığmadığı durumlarda yazının devamının olduğunu belirtmek için “…” (üç nokta) koyabiliriz. text-overflow özelliğine şu değerleri verebiliriz:   clip : Varsayılan olarak gelen değer. ellipsis : Yazının taştığını belirten “…” (üç nokta) koyar.
YAZILARA STİL VERMEK İÇİN KULLANILAN CSS KODLARI VE ANLAMLARI




İÇ VE DIŞ BOŞLUK VERMEK İÇİN KULLANILAN CSS KODLARI VE ANLAMLARI

CSS KODUAÇIKLAMA
paddingHtml öğelerine iç boşluk vermek için kullanılır. Padding değeri verirken bunu 3 farklı yol ile yapabiliriz. Bunlar:   length ( padding: 10px; ) : px, pt, cm vb. bir değer verebiliriz. % ( padding: 20%; ) : İçerisinde bulunduğu etiketin genişliğinin yüzdesi olarak değer verebiliriz. inherit ( padding: inherit; ) : inherit değeri verirsek, ebeveyn etiketinin padding değeri ne ise onu miras alır ve aynı değer uygulanır.
marginHtml öğelerine dış boşluk vermek için kullanılır. Margin değeri verirken bunu 4 farklı yol ile yapabiliriz. Bunlar:   length ( margin: 10px; ) : px, pt, cm vb. bir değer verebiliriz. % ( margin: 20%; ) : İçerisinde bulunduğu etiketin genişliğinin yüzdesi olarak değer verebiliriz. inherit ( margin: inherit; ) : inherit değeri verirsek, ebeveyn etiketinin margin değeri ne ise onu miras alır ve aynı değer uygulanır. auto ( margin: auto; ) : auto değeri verirsek, etiketin kenar boşluklarını tarayıcı otomatik olarak belirler. Bu özelliğin düzgün çalışması için etiketin width özelliğine bir genişlik değeri vermelisiniz.
padding-bottomHtml öğelerine aşağı iç boşluk vermek için kullanılır.
padding-leftHtml öğelerine sol iç boşluk vermek için kullanılır.
padding-rightHtml öğelerine sağ iç boşluk vermek için kullanılır.
padding-topHtml öğelerine yukarı iç boşluk vermek için kullanılır.
margin-bottomHtml öğelerine aşağı dış boşluk vermek için kullanılır.
margin-leftHtml öğelerine sol dış boşluk vermek için kullanılır.
margin-rightHtml öğelerine sağ dış boşluk vermek için kullanılır.
margin-topHtml öğelerine yukarı dış boşluk vermek için kullanılır.
İÇ VE DIŞ BOŞLUK VERMEK İÇİN KULLANILAN CSS KODLARI VE ANLAMLARI




KENARLIK VERMEK VEYA KÖŞELERİ YUVARLAMAK İÇİN KULLANILAN CSS KODLARI VE ANLAMLARI

CSS KODUAÇIKLAMA
borderBir Html öğesinin 4 tarafına birden kenarlık vermek için kullanılır.
border-colorBir Html öğesinin 4 tarafına birden kenarlık rengi vermek için kullanılır.border-radi
border-radiusBir Html öğesinin 4 köşesini birden yuvarlamak için kullanılır. Değer verirken px veya % (yüzde) olarak verebiliyoruz.
outlineBir Html öğesinin 4 tarafına birden (üst, sağ, alt, sol) dış kenarlık vermek için kullanılır.
outline-colorBir Html öğesinin 4 tarafına birden (üst, sağ, alt, sol) dış kenarlık rengi vermek için kullanılır.
outline-widthBir Html öğesinin 4 tarafına birden (üst, sağ, alt, sol) dış kenarlık genişliği vermek için kullanılır. Kenarlık genişliğini px, pt, cm, em, vb. ile belirleyebiliriz.
outline-styleBir Html öğesinin 4 tarafına birden (üst, sağ, alt, sol) dış kenarlık stili (tek çizgi, çift çizgi, noktalı vb..) vermek için kullanılır.   outline-style özelliğine şu değerleri verebiliyoruz: dotted dashed solid double groove ridge inset outset
KENARLIK VERMEK VEYA KÖŞELERİ YUVARLAMAK İÇİN KULLANILAN CSS KODLARI VE ANLAMLARI




ANİMASYONLAR İÇİN KULLANILAN CSS KODLARI VE ANLAMLARI

CSS KODUAÇIKLAMA
@keyframesAnimasyonlar ile ilgili Css kodlarımızı yazmak için kullanılır. @keyframes özelliği içerisindeki from ve to blokları içerisine kodlarımızı yazabiliriz.   Animasyon, belirtilen sürede from içerisindeki Css kodlarından başlar ve kademeli olarak to içerisindeki Css kodlarına dönüşünceye kadar devam eder.
animationTüm animasyon özelliklerini toplu olarak tek özellikle belirtmek için kullanılır. Bir animasyon örneğini hem uzun hem de kısa şekliyle yazacak olursak:   ** Ayrı ayrı yazarak animasyon örneği ** animation-name: example; animation-duration: 3s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; ** Tek satırda yazarak animasyon örneği ** animation: example3s linear 2s infinite alternate;
animation-delayAnimasyonu belirli bir süre sonra başlatmak için kullanılır.
animation-directionAnimasyonun yönünü belirtmek için kullanılır. 4 değer alabilir. Bunlar:   normal : Varsayılan değerdir. reverse : Animasyonun ters yönde çalışmasını sağlar. alternate : Animasyonun önce normal sonra tam tersi yönde çalışmasını sağlar ve bu şekilde devam eder. alternate-reverse : Animasyonun önce ters yönde sonra normal yönde çalışmasını sağlar ve bu şekilde devam eder.
animation-durationAnimasyonun ne kadar sürede tamamlanacağını belirtmek için kullanılır. Varsayılan değeri 0’dır.
animation-fill-modeAnimasyonun bittikten sonraki durumunu belirtmek için kullanılır. animation-fill-mode özelliğine şu değerleri verebiliyoruz:   none : Animasyon bittikten sonra başlangıç değerlerine döner. (Varsayılan değerdir.) forwards : Animasyon bittikten sonraki son durumunda kalır ve o son durumdaki değerler uygulanır. backwards : Animasyon bittikten sonra veya durdurulduğunda, başlangıç özellikleri uygulanır. both : forwards ve backwards değerleri birlikte uygulanır.
animation-play-statepaused değeri vererek animasyonları durdurmak için kullanılır. animation-play-state özelliğine şu değerleri verebiliyoruz:   running : Varsayılan değerdir ve animasyon normal bir şekilde çalışır. paused : Animasyonu durdurmamızı sağlar.
animation-timing-functionAnimasyonun gerçekleşme biçimini belirtmek için kullanılır. Örneğin gerçekleşecek animasyon, hızlı bir şekilde başlayıp sonlara doğru yavaşlayabilir. Yavaş bir şekilde başlayıp sonlara doğru hızlanabilir veya sabit bir hızda gerçekleşebilir.   animation-timing-function özelliğine şu değerleri verebiliyoruz: ease : Animasyon, yavaş başlar sonra hızlanır en son tekrar yavaşlar. (Varsayılan değerdir.) linear : Animasyon, baştan sona aynı hızda devam eder. ease-in : Animasyonun yavaş başlamasını sağlar. ease-out : Animasyonun yavaş bitmesini sağlar. ease-in-out : Animasyon, yavaş başlar ve yavaş biter.
ANİMASYONLAR İÇİN KULLANILAN CSS KODLARI VE ANLAMLARI




ARKAPLAN İÇİN KULLANILAN CSS KODLARI VE ANLAMLARI

CSS KODUAÇIKLAMA
backgroundDiğer arkaplan Css özelliklerini tek seferde background özelliği ile kullanabiliriz. Kullanımı şu şekildedir:   background: background–color background–image background–position/background–size background–repeat background–origin background–clip background–attachment ;
background-attachmentArkaplana yerleştirdiğimiz resmin sabit kalmasını sağlamak için kullanılır.
background-clipArkaplana vermiş olduğumuz rengin başlangıç alanını belirtmek için kullanılır. Bu özelliğe 3 değer verebiliyoruz. Bunlar:   padding-box : Varsayılan değerdir. Rengin padding alanından başlamasını sağlar. border-box : Rengin border alanından başlamasını sağlar. content-box : Rengin içerik alanından başlamasını sağlar.
background-colorBu özellik ile bir Html öğesine veya sayfanın tamamına arkaplan rengi verebiliriz.
background-imageBu özellik ile bir Html öğesine veya sayfanın tamamına arkaplan resmi yerleştirebiliriz.
background-positionArkaplana yerleştirdiğimiz resmin konumunu belirtmek için kullanılır. Bu özelliğe 4 değer verebiliyoruz. Bunlar:   top : Üstte bottom : Altta right : Sağda left : Solda center : Ortada
background-sizeArkaplana yerleştirdiğimiz resmin boyutlarını belirtmek için kullanılır. Bu özelliğe 5 değer verebiliyoruz. Bunlar:   auto : Varsayılan değerdir. Resim orjinal boyutlarında yerleştirilir. uzunluk değerleri : İki değer verilirse, birinci değer genişlik için ikinci değer ise yükseklik için uygulanır. Tek değer verilirse, hem genişlik hemde yükseklik için bu değer uygulanır. yüzde olarak değer : İki değer verilirse, birinci değer genişlik için ikinci değer ise yükseklik için uygulanır. Tek değer verilirse, hem genişlik hemde yükseklik için bu değer uygulanır. contain : Resmin genişlik ve yükseklik değerlerinden büyük olanı, uygulandığı etiketi kapsayacak şekilde yerleştirilir. Diğer küçük olanıda buna göre en boy oranı bozulmayacak şekilde değişir. cover : Resmin genişlik ve yükseklik değerlerinden küçük olanı, uygulandığı etiketi kapsayacak şekilde yerleştirilir. Diğer küçük olanıda buna göre en boy oranı bozulmayacak şekilde değişir.
ARKAPLAN İÇİN KULLANILAN CSS KODLARI VE ANLAMLARI




ÇOKLU SÜTUN OLUŞTURMAK İÇİN KULLANILAN CSS KODLARI VE ANLAMLARI

CSS KODUAÇIKLAMA
column-countYazımızı vereceğimiz değer kadar sütunlara ayırmak için kullanılır.
column-gapSütunlar arasındaki mesafeyi belirtmek için kullanılır.
column-ruleBu özellik ile sütunlar arasında tıpkı border özelliği gibi ayıraçlar kullanabiliriz. Bunun için ayıracın kalınlığını, stilini ve rengini belirtmemiz gerekiyor. Bu değerleri ayrı ayrı verebildiğimiz gibi column-rule özelliği ile tek seferde de verebiliriz.
column-rule-colorSütunlar arasındaki çizginin rengini belirtmek için kullanılır.
column-rule-styleSütunlar arasındaki çizginin stilini belirtmek için kullanılır.
column-rule-widthSütunlar arasındaki çizginin genişliğini belirtmek için kullanılır.
column-spanYazıya vermiş olduğumuz başlığın nerede konumlanacağını belirtmek için kullanılır.   Varsayılan olarak none değeri alır ve başlık ilk sütunda bulunur. column-span özelliğine all değeri vererek başlığın tüm sütunlara uygulanmasını sağlayabiliriz.
column-widthSütunlara genişlik değeri vermek için kullanılır.
columnsBu özellik ile sütun sayısı (column-count) ve genişlik değerini (column-width) birlikte vererek çoklu sütunları oluşturabiliriz. Kullanımı şu şekildedir:
columns: column–width column–count;
ÇOKLU SÜTUN OLUŞTURMAK İÇİN KULLANILAN CSS KODLARI VE ANLAMLARI




DİĞER CSS KODLARI VE ANLAMLARI

CSS KODUAÇIKLAMA
box-shadowHtml öğelerine gölge efekti vermek için kullanılır. Vereceğimiz değerler ile gölgenin x ve y eksenindeki konumunu, bulanıklığını ve rengini belirleriz.   İlk verilen değer x ekseni, ikinci verilen değer y ekseni, üçüncü verilen değer bulanıklık, dördüncü verilen değer de rengi için uygulanır.
displayDisplay özelliği, Html etiketlerinin sayfa üzerinde yerleştirilmesini ve düzenlenmesini sağlar.   display özelliğine şu 4 değeri verebiliyoruz: block inline inline-block none
positionPosition özelliği ile Html sayfamızdaki nesnelerin konumları değiştirebilir ve dilediğimiz gibi yerleştirmeler yapabiliriz.   position özelliği 5 değer alır. Bunlar: static : Html etiketleri varsayılan olarak static değer alır ve sayfanın normal akışına göre konumlandırılırlar. relative : Bu durumda Html etiketleri yine sayfanın normal akışına göre konumlandırılırlar. Fakat top, right, bottom ve left özelliklerinden etkilenirler. fixed : Bir Html etiketine fixed değeri verdiğimiz zaman o etiketin sayfanın belli bir noktasında sabitlenmesini sağlayabiliriz. absolute : Bir Html etiketine absolute değeri verdiğimiz zaman, o etiket normal akış içerisinden çıkar. Relative’den farkı normal akış içerisinden çıkmasıdır. sticky : Bir Html etiketine sticky değeri verdiğimiz zaman, o etiketin istediğimiz değerlerde sabit kalmasını sağlayabiliriz.
bottomHtml öğesinin, altındaki öğeyle arasındaki mesafeyi belirtmek için kullanılır.
topHtml öğesinin, üstündeki öğeyle arasındaki mesafeyi belirtmek için kullanılır.
rightHtml öğesinin, sağındaki öğeyle arasındaki mesafeyi belirtmek için kullanılır.
leftHtml öğesinin, solundaki öğeyle arasındaki mesafeyi belirtmek için kullanılır.
list-styleDiğer liste özelliklerini ayrı ayrı tanımlamak yerine tek seferde list-style özelliği ile tanımlayabiliriz.
list-style-positionBu özellik ile listelerin başlarındaki işaretlerin pozisyonlarını belirleyebiliriz.   list-style-position özelliğine 2 değer verebiliyoruz. Bunlar: inside outside
list-style-typeBu özellik ile listelerin başındaki işaretler değiştirilebilir veya tamamen kaldırılabilir.   list-style-type özelliği şu değerleri alabilir: circle decimal disc lower-alpha lower-greek lower-latin lower-roman none square upper-alpha upper-latin upper-roman initial inherit unset
border-spacingHtml tablolarında hücreler arası boşlukları ayarlamak için kullanılır.
widthBir Html öğesine genişlik değeri vermek için kullanılır.
heightBir Html öğesine yükseklik değeri vermek için kullanılır.
overflowX ve Y eksenindeki taşma durumları için kullanılır. 4 değer alır. Bunlar:   visible hidden scroll auto
transitionDiğer transition özelliklerini toplu şekilde yazmak için kullanılır.
transition-delayTransition’ın gerçekleşmesini belirtilen süre kadar geciktirmek için kullanılır.
transition-durationTransition’ın kaç saniyede gerçekleşmesini istiyorsak onu belirtmek için kullanılır. Süre belirtilmezse, varsayılan değer 0 olduğundan transition özelliği uygulanmaz.
transition-propertyHtml öğesinin hangi Css özelliğine uygulamak istiyorsak onu belirtmek için kullanılır. Örneğin width, color vb. bir özelliğine uygulayabiliriz.
transition-timing-functionTransition’ın gerçekleşme biçimini belirtmek için kullanılır. Gerçekleşecek değişim, hızlı bir şekilde başlayıp sonlara doğru yavaşlayabilir. Yavaş bir şekilde başlayıp sonlara doğru hızlanabilir veya sabit bir hızda gerçekleşebilir.   transition-timing-function özelliği şu değerleri alabilir: ease : Geçiş, yavaş başlar sonra hızlanır en son tekrar yavaşlar. (Varsayılan değerdir.) linear : Geçiş, baştan sona aynı hızda devam eder. ease-in : Geçişin yavaş başlamasını sağlar. ease-out : Geçişin yavaş bitmesini sağlar. ease-in-out : Geçiş, yavaş başlar ve yavaş biter. cublic-bezier : Manuel olarak ayarladığımız geçiş tipidir. 0 ile 1 arasında değerler alabilir.
cursorFare imlecinin görünümünü değiştirmek için kullanılır. Yaklaşık 35 farklı değer vererek farklı görünümler elde edebiliyoruz.
filterFilter özelliği ile bir Html etiketi üzerinde photoshop benzeri efektleri (bulanıklaştırma, parlaklık, şeffaflık vb..) uygulayabiliriz.   filter özelliğine şu değerleri verebiliyoruz: none : Varsayılan değerdir. Herhangi bir efekt uygulanmaz. blur : Resmin bulanıklığını ayarlar. brightness : Resmin parlaklığını ayarlar. contrast : Resmin kontrastını ayarlar. drop-shadow : Resme gölge efekti verir. grayscale : Resmi siyah beyaz yapar. hue-rotate : Resme bir ton döndürme efekti verir. invert : Resmin terse çevrilmesini sağlar. opacity : Resme şeffaflık verir. sepia : Resme kahverengi tonlarında bir efekt uygular.
@mediaWeb tasarımlarımızın responsive özellikte olması için gerekli kodların içerisine yazılacağı özelliktir.
opacityOpacity özelliği ile Html öğelerine şeffaflık verebiliriz. Bu özellik 0 ile 1 arasında bir değer alır.
resizeResize özelliği ile bir Html etiketinin yeniden boyutlandırılabilmesini sağlayabiliriz. Yada boyutlandırılabilmesini engelleyebiliriz.   resize özelliği 4 değer alır. Bunlar: none : Yeniden boyutlandırılabilir özelliğini devre dışı bırakmak için kullanılır. both : Yatayda ve dikeyde yeniden boyutlandırılabilir yapmak için kullanılır. horizontal : Yatayda yeniden boyutlandırılabilir yapmak için kullanılır. vertical : Dikeyde yeniden boyutlandırılabilir yapmak için kullanılır.
transformTransform özelliği ile bir Html öğesi üzerinde döndürme, boyutlandırma, eğme gibi işlemlerimizi gerçekleştirebiliriz. Bu işlemleri 2D (2 boyutlu) ve 3D (3 boyutlu) olmak üzere 2 farklı şekilde yapabiliyoruz.   transform özelliği şu değerleri alabilir: translate : Bir Html öğesinin X ve Y eksenlerindeki konumunu değiştirmek için kullanılır. Birinci parametre X ekseni için, ikinci parametre Y ekseni için uygulanır. rotate : Pozitif değer verildiğinde, Html öğesini 2 boyutlu olarak saat yönünde döndürür. Negatif değer verildiğinde, Html öğesini 2 boyutlu olarak saat yönünün tersine döndürür. scale : Genişliği ve yüksekliği belirtilen oranda büyütmek veya küçültmek için kullanılır. Birinci parametre genişlik için, ikinci parametre yükseklik için uygulanır. skew : X ve Y eksenlerindeki eğilmeyi sağlar. Birinci parametre X ekseni için, ikinci parametre Y ekseni için uygulanır.
@importDışarıdan Css dosyalarını sayfalarımıza eklemek için kullanılır.
DİĞER CSS KODLARI VE ANLAMLARI

Kaynak: w3schools, Mehsatek

Merhaba! Ben, Osmaniye'nin Bahçe ilçesinde doğmuş, şu anda 18 yaşında bir Full Stack Web Geliştiriciyim. Eğitimlerim ve uzmanlık alanlarım arasında web uygulamalarının oluşturulması, SEO stratejileri, Photoshop, Python, HTML, CSS, JavaScript, PHP ve grafik tasarım gibi konular yer almaktadır. Diveebi.com adlı web sitem ve YouTube kanalımda, bu alanlarla ilgili içerikler üretmeye ve paylaşmaya büyük bir tutku ile devam ediyorum.

Yorum yapmak için tıklayın

Cevap bırakın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

CSS Dersleri

CSS Hareketli Onay Kutusu Yapımı – Animated Checkbox

Yayınlanan

İcerisinde

Tarafından

CSS Hareketli Onay Kutusu Yapımı – Animated Checkbox – diveebi.com

Bu yazımda daha önce Youtube kanalımda paylaşmış olduğum. CSS derslerinden biri olan Hareketli Onay Kutusu dersini tekrardan paylaşmak istedim.

Bu tarz videolar için youtube kanalıma göz atabilirsiniz.

Projemizi geçmeden önce bir HTML sayfası oluşturun veya Divebi Önizle (kod önizleme) web sayfasını kullanabilirsiniz. Aşağıda vermiş olduğum kodları kopyala yapıştır yaparak kodları test edebilirsiniz.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Mustafa Salman YT</title>
    </head>
    <body>
        <input type="checkbox" onclick="myswitch()" id="switch">
        <label for="switch"></label>
        <!-- CSS Kodları-->
        <style>
            body {
                background-color: #fafafa;
                display: flex;
                justify-content: center;
            }
            input[type=checkbox] {
                opacity: 0;
                display: none;
            }
            label {
                height: 70px;
                width: 140px;
                background-color: #cccccc;
                margin-top: 250px;
                border: 1px solid #414141;
                display: inline-block;
                position: relative;
                border-radius: 100px;
                cursor: pointer;
                box-shadow: 0px 0px 6px #414141;
                transition: 0.5s;
            }
            label::after {
                content: '';
                height: 60px;
                width: 60px;
                background-color: #414141;
                position: absolute;
                top: 5px;
                left: 5px;
                border-radius: 50%;
                transition: 0.5s;
            }
            input:checked + label::after {
                left: calc(100% - 5px);
                transform: translateX(-100%);
                background-color: #cccccc;
            }
            input:checked + label {
                background-color: #0066ff;
            }
            .mode {
                background-color: black;
                transition: 0.5s;
            }
        </style>
        <!-- JavaScript Kodları -->
        <script>
            function myswitch(){
                var mod = document.body;
                mod.classList.toggle("mode");
            }
        </script>
    </body>
</html>
Okumaya devam et
FTP - diveebi.com FTP - diveebi.com
Blog6 gün ago

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

İnternet çağında yaşadığımız bu günlerde, “domain” terimi sıkça duyulan ve kullanılan bir kavram haline geldi. Ancak, pek çok kişi için...

Python Python
Python Dersleri3 ay ago

Python ile Vize Final Ortalaması Hesaplama

Bu projemizde, python ile kullanıcıdan vize ve final notlarını alarak sene sonu ortalamasını hesaplar. Ortalama, vize notunun %40‘ı ile final...

Python Python
Python Dersleri3 ay ago

Python’da Dosya İşlemleri

Python programlama dilinde dosya işlemleri, veri okuma, yazma ve manipülasyonu gibi önemli görevleri gerçekleştirmenin temel bir parçasını oluşturur. Bu makalede,...

FTP - diveebi.com FTP - diveebi.com
FTP5 ay ago

FTP Nedir? Ücretsiz FTP Programları nelerdir?

FTP Nedir? FTP Nedir?, FTP (File Transfer Protocol), bilgisayarlar arasında dosya transferini sağlamak için kullanılan bir iletişim protokolüdür. İnternetin ilk...

Kali Linux Kali Linux
Kali Linux7 ay ago

Kali Linux Dirbuster Aracı Nasıl Kullanılır?

Kali Linux ve Dirbuster Nasıl Kullanılır? Günümüzün dijital dünyasında, siber güvenlik önemli bir konu haline gelmiştir. Güvenlik uzmanları, siber saldırıları...

Apache Diveebi Apache Diveebi
apache server8 ay ago

.htaccess Dosyası Nedir ve Nasıl Kullanılır?

Bu rehberde, .htaccess Dosyası Nedir ve Nasıl Kullanılır? sorularına cevap bulacaksınız. .htaccess dosyası, Apache web sunucusu üzerinde kullanılan ve web...

win 10 diveebi.com win 10 diveebi.com
Blog8 ay ago

Windows 10’da WiFi Gözükmüyor Sorunu ve Çözümleri

Windows 10 işletim sistemi, dünya genelinde en yaygın olarak kullanılan işletim sistemlerinden biridir. Ancak, her ne kadar güçlü ve kullanıcı...

PHP PHP
Blog8 ay ago

PHP Nedir, Ne İşe Yarar? Kullanım alanları Nelerdir?

PHP Nedir, Ne İşe Yarar? Bu rehberde PHP Nedir, Ne İşe Yarar? Kullanım alanları Nelerdir konuları hakkında bilgi sahibi olacaksınız....

Arduino Arduino
Arduino9 ay ago

Arduino Nedir? Nasıl Çalışır? Ne İşe Yarar?

Bu rehberimizde, Arduino Nedir? Nasıl Çalışır? Ne İşe Yarar? sorularına cevap arayacağız. Günümüzde elektronik ve programlama dünyasında oldukça popüler olan...

Python Python
Python Dersleri9 ay ago

PYTHON Port Scanner Aracınızı Oluşturun!

Bu rehberimizde, PYTHON ile port scanner aracı oluşturacağız. Hedef cihazın hangi portlarının açık veya kapalı olduğunu tespit etmek için port...

ChatGPT12 ay ago

ChatGPT API Kendi Yapay Zeka Sohbet Robotunuzu Yapın

Bu projemizde, ChatGPT API‘sini kullanarak kendi yapay zeka sohbet robotumuzu oluşturduk. ChatGPT, OpenAI tarafından geliştirilen bir dil modeli ve doğal...

Trending