Full Height Header

Merhabalar, dün gece bir müşterim için arayüz geliştirirken tasarımda full height header bir durum vardı. (bunun tasarımda veya front end deki adını bilmediğim için böyle bir isimlendirme yapıyorum) Header daki butona tıklayıncada aşağı tarafa scroll ettirmesi gerekiyordu. Bende tasarımı kodladıktan sonra başka işlerde de kullanırım diye Codepen’e attım. Onuda sizlerle paylaşıyorum.

See the Pen Header Full by Baran Somaklı (@baransomakli) on CodePen.

CSS Reset Nedir? Nasıl Kullanılır?

Tarayıcıların kendilerine ait varsayılan CSS ölçütleri vardır. Bir arayüz kodladığınız zaman tarayıcıların farklılıkları yüzünden her tarayıcıda farklı farklı boşluklar gözükebilir. Tam bu durumda da yardımımıza Reset CSS koşuyor. Reset CSS sayesinde tüm tarayıcıların varsayılan değerlerini kendi isteğimize göre şekillendirebiliyoruz. Örnek vermek gerekirse tarayıcının varsayılan değeri margin:10px; ise yaptığınız arayüz,  varsayılan margin:10px kodu yüzünden ekrana tam oturmaz. Bu sorunu da ortadan kaldırmak için reset.css kullanacağız. Aşağıda vereceğim kodları isterseniz css dosyanızın üst tarafına yapıştırabilirsiniz. İsterseniz ayrı bir css dosyası oluşturup link tagıyla html dosyanıza çekebilirsiniz.

Reset.css kodlarımız aşağıdadır.


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
address,big,cite,code,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,
center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;list-style:none;list-style-type:none;text-decoration:none;font-family:'Open Sans', sans-serif;}