{"id":260,"date":"2015-02-05T01:21:21","date_gmt":"2015-02-04T23:21:21","guid":{"rendered":"http:\/\/blog.okanacar.com.tr\/?p=260"},"modified":"2018-04-10T23:33:27","modified_gmt":"2018-04-10T20:33:27","slug":"linear-gradient","status":"publish","type":"post","link":"https:\/\/okanacar.com.tr\/blog\/?p=260","title":{"rendered":"Linear-Gradient"},"content":{"rendered":"

Linear-Gradient<\/h4>\n

\u00c7izgisel degrade uygulanmak istendi\u011finde bu \u00f6zellik kullan\u0131l\u0131r. Bu \u00f6zellik sayesinde %(y\u00fczde) degrade verme imkan\u0131 var. Bu \u00f6zelli\u011fin de bir\u00e7ok CSS3 \u00f6zelli\u011finde oldu\u011fu gibi browser’larda da farkl\u0131 kullan\u0131m \u015fekli vard\u0131r.<\/p>\n

-Webkit-Gradient<\/h4>\n

Degrade verirken Chrome ve Safari taray\u0131c\u0131lar\u0131 i\u00e7in kullan\u0131m \u015fekli a\u015fa\u011f\u0131da verdi\u011fim \u00f6rnek gibidir.<\/p>\n

Kullan\u0131m\u0131<\/strong><\/p>\n

<style type=\"type\/css\">\r\n\r\nbody{\r\n\r\nbackground: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#000))\r\n\r\n}\r\n\r\n<\/style><\/pre>\n
<\/p>\n
Yukar\u0131da vermi\u015f oldu\u011fum kod blogunda \u00f6ncelikle verilmek istenen degrade \u015fekli belirleniyor. linear<\/code> (\u00e7izgisel) oldu\u011funun tan\u0131mlanmas\u0131ndan sonra y\u00f6n belirtiliyor sol \u00fcst k\u00f6\u015feden, sol alt k\u00f6\u015feye do\u011fru bu dikey degrade uygulanaca\u011f\u0131 anlam\u0131na geliyor. Sonrada hangi renkler aras\u0131 ge\u00e7i\u015f olacaksa \u015fu renkten \u015fu renge do\u011fru \u015feklinde tan\u0131mlamas\u0131 yap\u0131l\u0131yor.<\/p>\n
\u0130PUCU!<\/strong><\/p>\n
Ayn\u0131 \u015fekilde sizde yatay degrade vermek isterseniz \u00a0left top<\/code> ve right top<\/code> \u015feklinde tan\u0131mlama yapabilirsiniz. Ya da left bottom<\/code> ve right bottom<\/code> da yazabilirsiniz. K\u0131saca istedi\u011finiz degrade y\u00f6n\u00fcn\u00fc belirtebilirsiniz. Tabiki abartmamak gerek \ud83d\ude42<\/p><\/blockquote>\n
Kullan\u0131m\u0131<\/strong><\/p>\n
<style type=\"text\/css\">\r\n\r\nhtml{width:100%; height:100%; margin:0; padding:0;}\r\n\r\nbody{\r\n\r\nbackground: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#000));\r\n\r\nmargin:0;\u00a0padding:0;\r\n\r\nheight:auto; width:auto;\r\n\r\n}\r\n\r\n<\/style><\/pre>\n
 <\/p>\n
Yukar\u0131daki kod blogunda seayfan\u0131n arkaplan\u0131na degrade verdik. G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi istedi\u011finiz \u015fekilde y\u00fczde de\u011ferleri vermek degradenin y\u00f6n\u00fcn\u00fc belirlemek m\u00fcmk\u00fcn.<\/p>\n
\u0130PUCU!<\/strong><\/p>\n
Burada dikkat edilmesi gereken nokta html<\/code> ve body<\/code> etiketi i\u00e7in width<\/code>, height<\/code>, padding<\/code> ve margin<\/code> de\u011ferlerinin atanmas\u0131. Bunu yapmam\u0131z\u0131n sebebi browser’larda html<\/code> ve body<\/code> etiketleri bazen tam sayfa olarak t\u00fcm browser’larda yorumlanabilimesi i\u00e7in CSS kodunu yaz\u0131yoruz.<\/p>\n
 <\/p><\/blockquote>\n
-Moz-Linear-Gradient<\/h4>\n
\u00c7izgisel degrade (linear gradient) vermek i\u00e7in firefox’ta kullan\u0131la prafix ekidir.<\/p>\n
Kullan\u0131m\u0131<\/strong><\/p>\n
<style type=\"text\/css\">\r\n\r\nhtml{width:100%; height:100%; margin:0; padding:0;}\r\n\r\nbody{\r\n\r\nbackground: -moz-linear-gradient(top, #fff 75%, #000);\r\n\r\nmargin:0;\u00a0padding:0;\r\n\r\nheight:auto; width:auto;\r\n\r\n}\r\n\r\n<\/style><\/pre>\n
 <\/p>\n
Firefox’ta degradenin hangi y\u00f6nde olaca\u011f\u0131n\u0131 belirliyoruz. Kullan\u0131m\u0131 webkit-fremawork’\u00fcnden daha kolayd\u0131r. Ayn\u0131 \u015fekilde bunuda %(y\u00fczde) vererek istediniz y\u00f6nde istedi\u011finiz oranda degrade vermek m\u00fcmk\u00fcn.<\/p>\n
Kullan\u0131m\u0131<\/strong><\/p>\n
<style type=\"text\/css\">\r\n\r\nhtml{width:100%; height:100%; margin:0; padding:0;}\r\n\r\nbody{\r\n\r\nbackground: -moz-linear-gradient(top, #fff 75%, #000 100%);\r\n\r\nmargin:0;\u00a0padding:0;\r\n\r\nheight:auto; width:auto;\r\n\r\n}\r\n\r\n<\/style><\/pre>\n
 <\/p>\n
Yukar\u0131daki kod blogunda dadegradenin y\u00f6n\u00fcn\u00fc belirliyoruz ve hangi rengin hangi oranda, hangi renge, yine hangi oranda degrade uygulanaca\u011f\u0131n\u0131 belirliyoruz.<\/p>\n
IE8 \u00f6ncesi s\u00fcr\u00fcmlerde gradient uygulanam\u0131yordu. Asl\u0131nda bak\u0131l\u0131rsa IE8+ versiyonlarda da kullan\u0131lm\u0131yor. Ancak IE taraf\u0131nda bunun kar\u015f\u0131layan filter \u00f6zelli\u011fidir.<\/p>\n
<style type=\"text\/css\">\r\n\r\nhtml{width:100%; height:100%; margin:0; padding:0;}\r\n\r\nbody{\r\n\r\nfilter: progidDXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#000');\r\n\r\nmargin:0;\u00a0padding:0;\r\n\r\nheight:auto; width:auto;\r\n\r\n}\r\n\r\n<\/style><\/pre>\n
 <\/p>\n
NOT!<\/strong><\/p>\n
IE taraf\u0131ndan filter \u00f6zelli\u011fi transparan yapmakta, g\u00f6lge vermekte de kullan\u0131lmaktad\u0131r. Ancak ben bunlar\u0131n \u00fczerinde durmuyorum. Sadece filter \u00f6zelli\u011fini g\u00f6stermek\u00a0i\u00e7in kulland\u0131m.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Linear-Gradient \u00c7izgisel degrade uygulanmak istendi\u011finde bu \u00f6zellik kullan\u0131l\u0131r. Bu \u00f6zellik sayesinde %(y\u00fczde) degrade verme imkan\u0131 var. Bu \u00f6zelli\u011fin de bir\u00e7ok CSS3 \u00f6zelli\u011finde oldu\u011fu gibi browser’larda da farkl\u0131 kullan\u0131m \u015fekli vard\u0131r. -Webkit-Gradient Degrade verirken Chrome ve Safari taray\u0131c\u0131lar\u0131 i\u00e7in kullan\u0131m \u015fekli a\u015fa\u011f\u0131da verdi\u011fim \u00f6rnek gibidir. Kullan\u0131m\u0131 <style type=”type\/css”> body{ background: -webkit-gradient(linear, left top, left bottom, from(#fff), …<\/p>\n","protected":false},"author":1,"featured_media":316,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[65,62,63,64],"_links":{"self":[{"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/posts\/260"}],"collection":[{"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=260"}],"version-history":[{"count":9,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/posts\/260\/revisions"}],"predecessor-version":[{"id":275,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/posts\/260\/revisions\/275"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=\/wp\/v2\/media\/316"}],"wp:attachment":[{"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/okanacar.com.tr\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}