1996 y\u0131l\u0131nda d\u00fcnyaya tan\u0131t\u0131lmas\u0131ndan bu yana CSS, web tasar\u0131m\u0131n\u0131n g\u00f6rsel b\u00f6l\u00fcm\u00fcn\u00fcn temelini olmu\u015ftur. Bir web tasar\u0131m\u0131n\u0131n mizanpaj\u0131, tipografisi ve renkleri gibi unsurlar\u0131n\u0131n k\u0131sacas\u0131 aray\u00fcz\u00fcn\u00fcn in\u015faas\u0131nda CSS bilgisi gereklidir . Bir web tasar\u0131mc\u0131s\u0131 olarak temel CSS p\u00fcf noktalar\u0131n\u0131 bilmek, i\u015finizi geli\u015ftirmenize, daha iyi bir g\u00f6r\u00fcn\u00fcme ve hisse sahip web sayfalar\u0131 \u00fcretmenize ve onlar\u0131 daha duyarl\u0131 ve kullan\u0131c\u0131 dostu hale getirmenize yard\u0131mc\u0131 olmaktad\u0131r diyebilirim.<\/p>\n
Bu yaz\u0131da, web tasar\u0131mc\u0131s\u0131n\u0131n bilmesi gereken 5 CSS p\u00fcf noktay\u0131 belirtece\u011fim. Bu teknikler, kesinlikle kalabal\u0131\u011f\u0131n aras\u0131ndan s\u0131yr\u0131lacak g\u00fczel ve duyarl\u0131 web siteleri olu\u015fturman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n
Grid d\u00fczeni, tasar\u0131mc\u0131lar\u0131n kolayca karma\u015f\u0131k d\u00fczenler olu\u015fturmas\u0131n\u0131 sa\u011flayan g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Sat\u0131rlar\u0131 ve s\u00fctunlar\u0131 tan\u0131mlayabilir ve ard\u0131ndan i\u00e7lerine \u00f6\u011feler yerle\u015ftirebilirsiniz. Bir foto\u011fraf galerisi gibi uzamsal olarak mant\u0131ksal olarak d\u00fczenlenmesi gereken bir\u00e7ok benzer \u00f6\u011feyle u\u011fra\u015f\u0131rken \u00f6zellikle yararl\u0131d\u0131rlar.<\/p>\n
Grid d\u00fczenini kullanmak i\u00e7in, \u00f6nce display: grid \u00f6zelli\u011fiyle bir kapsay\u0131c\u0131 \u00f6\u011feyi grid olarak tan\u0131mlars\u0131n\u0131z. Ard\u0131ndan, s\u0131ras\u0131yla grid-template-rows ve grid-template-columns* \u00f6zelliklerini kullanarak her sat\u0131r\u0131n ve s\u00fctunun boyutunu ve yerle\u015fimini belirleyebilirsiniz. Son olarak, grid-column ve grid-row \u00f6zelliklerini kullanarak \u00f6\u011feleri gride yerle\u015ftirebilirsiniz.<\/p>\n
\u0130\u015fte grid d\u00fczeninin nas\u0131l kullan\u0131laca\u011f\u0131na dair basit bir \u00f6rnek:<\/p>\n
.container {
\ndisplay: grid;
\ngrid-template-columns: repeat(3, 1fr);
\ngrid-gap: 20px;
\n}<\/p>\n
.item {
\ngrid-column: 1 \/ 3;
\ngrid-row: 2;
\n}<\/p>\n
Bu \u00f6rnekte, \u00fc\u00e7 s\u00fctun ve aralar\u0131nda 20 piksel bo\u015fluk bulunan bir container olu\u015fturmak i\u00e7in bir grid kullan\u0131yoruz. Ayr\u0131ca ikinci sat\u0131ra bir \u00f6\u011fe yerle\u015ftiriyoruz ve onu iki s\u00fctuna yay\u0131yoruz.<\/p>\n
Flexbox, tasar\u0131mc\u0131lar\u0131n kolayl\u0131kla duyarl\u0131 d\u00fczenler olu\u015fturmas\u0131na olanak tan\u0131yan ba\u015fka bir g\u00fc\u00e7l\u00fc d\u00fczen arac\u0131d\u0131r. Flexbox ile esnek bir container tan\u0131mlayabilir ve ard\u0131ndan bu kapsay\u0131c\u0131 i\u00e7ine \u00f6\u011feler yerle\u015ftirebilirsiniz.<\/p>\n
Flexbox’\u0131 kullanmak i\u00e7in, \u00f6nce bir container \u00f6\u011fesini display: flex \u00f6zelli\u011fiyle bir esnek container olarak tan\u0131mlars\u0131n\u0131z . Ard\u0131ndan, justify-content ve align-items gibi \u00f6zellikleri kullanarak \u00f6\u011felerin ana ve \u00e7apraz eksenler boyunca nas\u0131l da\u011f\u0131t\u0131laca\u011f\u0131n\u0131 belirtebilirsiniz . Esnek temel \u00f6zelli\u011fini kullanarak her bir \u00f6\u011fenin boyutunu da ayarlayabilirsiniz.<\/p>\n
\u0130\u015fte Flexbox’\u0131n nas\u0131l kullan\u0131laca\u011f\u0131na dair bir \u00f6rnek:<\/p>\n
.container {
\ndisplay: flex;
\njustify-content: space-between;
\nalign-items: center;
\n}<\/p>\n
.item {
\nflex-basis: 30%;
\n}<\/p>\n
Bu \u00f6rnekte, e\u015fit aral\u0131klarla yerle\u015ftirilmi\u015f ve dikey olarak ortalanm\u0131\u015f \u00f6\u011feler i\u00e7eren bir container olu\u015fturmak i\u00e7in bir flexbox kullan\u0131yoruz.<\/p>\n
Hem ge\u00e7i\u015fler hem de animasyonlar, web sitenize etkile\u015fim ve g\u00f6rsel ilgi eklemek i\u00e7in harika ara\u00e7lard\u0131r. Ge\u00e7i\u015flerle, \u00f6zelliklerin zaman i\u00e7inde nas\u0131l de\u011fi\u015fece\u011fini belirtebilirsiniz, animasyonlar ise keyframeler yard\u0131m\u0131yla animasyonlu i\u00e7erik olu\u015fturman\u0131za olanak tan\u0131r.<\/p>\n
Ge\u00e7i\u015fleri kullanmak i\u00e7in \u00f6nce \u00f6zellikleri kullanarak bir \u00f6\u011fenin ba\u015flang\u0131\u00e7 \u200b\u200bve biti\u015f durumlar\u0131n\u0131 tan\u0131mlars\u0131n\u0131z. Ard\u0131ndan, hangi \u00f6zelliklerin ge\u00e7i\u015f yapmas\u0131 gerekti\u011fini ve ge\u00e7i\u015fin ne kadar s\u00fcrmesi gerekti\u011fini belirtmek i\u00e7in ge\u00e7i\u015f \u00f6zelli\u011fini kullanabilirsiniz. \u00d6\u011fenin durumu de\u011fi\u015fti\u011finde (\u00f6rne\u011fin, kullan\u0131c\u0131 \u00f6\u011fenin \u00fczerine geldi\u011finde), ge\u00e7i\u015f ger\u00e7ekle\u015fir.<\/p>\n
Bir buton \u00fczerinde fareyle \u00fczerine gelme efekti olu\u015fturmak i\u00e7in ge\u00e7i\u015flerin nas\u0131l kullan\u0131laca\u011f\u0131na ili\u015fkin bir \u00f6rne\u011fi burada bulabilirsiniz:<\/p>\n
.button {
\nbackground-color: #333;
\ncolor: #fff;
\npadding: 10px 20px;
\nborder-radius: 5px;
\ntransition: background-color 0.5s ease;
\n}<\/p>\n
.button:hover {
\nbackground-color: #fff;
\ncolor: #333;
\n}<\/p>\n
Bu \u00f6rnekte, buton arka plan rengi \u00f6zelli\u011fi, zamanlama kolayl\u0131\u011f\u0131 i\u015fleviyle 0,5 saniye boyunca ge\u00e7i\u015f yapacak \u015fekilde ayarlanm\u0131\u015ft\u0131r. Kullan\u0131c\u0131 mouse ile butonun \u00fczerine getirdi\u011finde, arka plan rengi beyaza d\u00f6nerek basit ama etkili bir mouse \u00fczerine gelme efekti olu\u015fturur.<\/p>\n
\u00d6zel yaz\u0131 tipleri, tasar\u0131mc\u0131lar\u0131n web siteleri i\u00e7in benzersiz ve ak\u0131lda kal\u0131c\u0131 tipografi olu\u015fturmalar\u0131na olanak tan\u0131r. Tasar\u0131mc\u0131lar, \u00f6zel yaz\u0131 tiplerini kullanarak web sitelerini rakiplerinden ay\u0131rabilir ve daha tutarl\u0131 ve s\u00fcr\u00fckleyici bir deneyim yaratabilir.<\/p>\n
\u00d6zel yaz\u0131 tiplerini kullanmak i\u00e7in \u00f6ncelikle be\u011fendi\u011finiz bir yaz\u0131 tipini bulup indirmeniz gerekir. Daha sonra yaz\u0131 tipi dosyalar\u0131n\u0131 web sitenize y\u00fckleyebilir ve yaz\u0131 tipini metninize uygulamak i\u00e7in CSS’i kullanabilirsiniz. Yaz\u0131 tipini tan\u0131mlamak i\u00e7in @font-face kural\u0131n\u0131 kullanabilir veya yaz\u0131 tipi dosyalar\u0131n\u0131 bar\u0131nd\u0131rmak i\u00e7in Google Yaz\u0131 Tipleri gibi bir hizmeti kullanabilir ve yaz\u0131 tipini web sitenize eklemenin basit bir yolunu sa\u011flayabilirsiniz.<\/p>\n
\u0130\u015fte \u00f6zel yaz\u0131 tiplerinin @font-face kural\u0131yla nas\u0131l kullan\u0131laca\u011f\u0131na dair bir \u00f6rnek:<\/p>\n
@font-face {
\nfont-family: ‘My Custom Font’;
\nsrc: url(‘my-custom-font.woff2’) format(‘woff2’),
\nurl(‘my-custom-font.woff’) format(‘woff’);
\n}<\/p>\n
h1 {
\nfont-family: ‘My Custom Font’, sans-serif;
\n}<\/p>\n
Bu \u00f6rnekte, @font-face kural\u0131n\u0131 kullanarak “My Custom Font” adl\u0131 \u00f6zel bir font tan\u0131ml\u0131yoruz . Daha sonra font-family \u00f6zelli\u011fini kullanarak bu fontu bir h1 \u00f6\u011fesine uyguluyoruz .<\/p>\n
\u00d6zel \u00f6zellikler olarak da bilinen de\u011fi\u015fkenler, tasar\u0131mc\u0131lar\u0131n CSS’lerinde kullan\u0131labilecek yeniden kullan\u0131labilir de\u011ferleri tan\u0131mlamas\u0131na olanak tan\u0131r. Bu, tutarl\u0131 ve mod\u00fcler stiller olu\u015fturmay\u0131 kolayla\u015ft\u0131rabilir ve gelecekte stilleri g\u00fcncellemeyi de kolayla\u015ft\u0131rabilir.<\/p>\n
CSS’de de\u011fi\u015fkenleri kullanmak i\u00e7in \u00f6nce — \u00f6nekini kullanarak tan\u0131mlay\u0131n. Daha sonra bu de\u011fi\u015fkeni var() i\u015fleviyle referans g\u00f6stererek CSS’niz boyunca kullanabilirsiniz. JavaScript kullanarak de\u011fi\u015fkenin de\u011ferini dinamik olarak da g\u00fcncelleyebilirsiniz.<\/p>\n
\u0130\u015fte CSS’de de\u011fi\u015fkenlerin nas\u0131l kullan\u0131laca\u011f\u0131na dair bir \u00f6rnek:<\/p>\n
:root {
\n–primary-color: #007bff;
\n}<\/p>\n
button {
\nbackground-color: var(–primary-color);
\ncolor: #fff;
\npadding: 10px 20px;
\nborder-radius: 5px;
\n}<\/p>\n
button:hover {
\nbackground-color: #fff;
\ncolor: var(–primary-color);
\n}<\/p>\n
Bu \u00f6rnekte, bir birincil renk de\u011fi\u015fkeni tan\u0131ml\u0131yor ve onu mavi bir tona ayarl\u0131yoruz. Daha sonra bir butonun arka plan rengini ayarlamak i\u00e7in bu de\u011fi\u015fkeni kullan\u0131yoruz. Kullan\u0131c\u0131 mouse ile butonun \u00fczerine getirdi\u011finde, arka plan rengi beyaza ve renk, de\u011fi\u015fkeni kullanarak ayarlad\u0131\u011f\u0131m\u0131z ana renge d\u00f6n\u00fc\u015f\u00fcr.<\/p>\n","protected":false},"excerpt":{"rendered":"
1996 y\u0131l\u0131nda d\u00fcnyaya tan\u0131t\u0131lmas\u0131ndan bu yana CSS, web tasar\u0131m\u0131n\u0131n g\u00f6rsel b\u00f6l\u00fcm\u00fcn\u00fcn temelini olmu\u015ftur. Bir web tasar\u0131m\u0131n\u0131n mizanpaj\u0131, tipografisi ve renkleri gibi unsurlar\u0131n\u0131n k\u0131sacas\u0131 aray\u00fcz\u00fcn\u00fcn in\u015faas\u0131nda CSS bilgisi gereklidir . Bir web tasar\u0131mc\u0131s\u0131 olarak temel CSS p\u00fcf noktalar\u0131n\u0131 bilmek, i\u015finizi geli\u015ftirmenize, daha iyi bir g\u00f6r\u00fcn\u00fcme ve hisse sahip web sayfalar\u0131 \u00fcretmenize ve onlar\u0131 daha duyarl\u0131 ve… <\/i><\/p>\n","protected":false},"author":1,"featured_media":897,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-891","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-tasarim"],"yoast_head":"\n