Web sayfalarımızı tasarlarken önce Html ile genel yapıyı oluşturuyoruz. Daha sonra bu yapıyı Css özellikleri ile gerçek birer web sayfası haline getiririz. Tabi Css kodları yazarken belki de en çok kullandığımız özelliklerin başında margin ve padding geliyordur. Çok kullandığımız için de bazen aynı Css kodları tekrar edip duruyor. Aynı zamanda gereksiz zaman kaybı da yaşıyoruz.
İşte bu yazımda daha önceden hazırlamış olduğum margin ve padding hazır css kodları ile tasarımlarımızda nasıl zamandan kazanabiliriz onu anlatacağım. Kodları yazının sonunda link olarak ekledim. İsterseniz sıkıştırılmış halide mevcut onuda indirebilirsiniz.
Önemli : Öncelikle indireceğiniz kodları kendi Css dosyanıza eklemeyi unutmayın!
Hazır Css Kodları
Hazır css kodları ile neler yapabildiğimize bakmadan önce kodlardan örnek bir kısım paylaşmak istiyorum.
|
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 |
<style> .ma{margin-left:auto !important;margin-right:auto !important} .m0{margin:0px !important;} .m5{margin:5px !important;} .m10{margin:10px !important;} .m15{margin:15px !important;} .m20{margin:20px !important;} .m25{margin:25px !important;} .m30{margin:30px !important;} .m35{margin:35px !important;} .m40{margin:40px !important;} .m45{margin:45px !important;} .m50{margin:50px !important;} .m55{margin:55px !important;} .m60{margin:60px !important;} .m65{margin:65px !important;} .m70{margin:70px !important;} .m75{margin:75px !important;} .m80{margin:80px !important;} .m85{margin:85px !important;} .m90{margin:90px !important;} .m95{margin:95px !important;} .m100{margin:100px !important;} </style> |
Bu şekilde;
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
- padding
- padding-top
- padding-right
- padding-bottom
- padding-left
için 0’dan başlayarak 100’e kadar 5’er artacak şekilde yazdım.
Örneğin class’ı menu olan bir div’imiz olsun. div’e margin:auto; vermek için normalde aşağıdaki gibi yazmamız gerekiyor.
|
1 2 3 4 5 6 7 8 9 |
<div class="menu"></div> <style> .menu{ margin: auto; } </style> |
Hazır css kodları ile aynı işlevi div’in class’ına sadece ma yazarak yapabilirsiniz.
|
1 2 3 |
<div class="menu ma"></div> |
Başka bir örnek daha verelim. Bu defa div’e margin 30px , padding 40px vermek istediğimizi düşünelim. Bunun için div’in class’ına m30 ve p40 yazmamız yeterli.
|
1 2 3 |
<div class="menu m30 p40"></div> |
Son bir örnek daha verelim. Şu şekilde kodlarımız olsun.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="menu"></div> <style> .menu{ margin-top: 30px; margin-bottom: 20px; margin-left: 80px; padding-bottom: 10px; } </style> |
Şimdi de bunu hazır css kodları ile nasıl yazabildiğimize bakalım.
|
1 2 3 |
<div class="menu mt30 mb20 ml80 pb10"></div> |
⇒ Bu kodların bize artısı, özellikle front-end alanıyla ilgilenen arkadaşlara projelerini geliştirirken biraz daha zamandan kazanmalarını sağlamak. Aynı zamanda margin ve padding değerlerini pratik olarak vermek.
Umarım sizin için faydalı bir yazı olmuştur. Şu yazılarda ilginizi çekebilir.
Css ile Buton Yapımı (3d Buton, Yuvarlak Buton, Animasyonlu Buton vb..)
Html ve Css ile Sosyal Medya Butonları Yapımı
Css ile Html Ortalama (Yazı, Resim, Form, Tablo, Sayfa, Menü vb..)
Css ile Yatay Açılır Menü Yapımı
Kaynak dosyayı indir
Kaynak dosyayı sıkıştırılmış olarak indir
Yeni bir yazımda görüşmek üzere.
){kind=link}