The document discusses various CSS topics including CSS variables, the @supports rule, web fonts, object-fit and object-position properties, layout with float and flexbox, and CSS grid. It provides examples and code snippets for each topic and includes links to additional resources for further reading.

1. CSS’in Gücü Adına
Adem ilter @ademilter
Arayüz Geliştirici @ikas.com

2. variable ⚡
@supports 🔮
Web Font 🀄
object-fit 🐼
Layout 🔥
Akış

3. variable ⚡

4. $font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
.scss dosyası

5. :root {
--font-size: 18px;
}
p {
font-size: var(--font-size)
}
Global değişken

6. Lokal değişken
p {
--primary-color: red;
color: var(--primary-color)
}

7. @media içinde kullanımı
:root {
--gutter: 10px
}
@media screen and (min-width: 768px) {
:root {
--gutter: 30px
}
}

8. youtube.com

9. …gibi gibi
.button-gradient {
--gradientAngle: 60deg;
--gradientStart: lightpink;
--gradientStop: lightyellow;
background: linear-gradient(
var(—gradientAngle),
var(—gradientStart),
var(—gradientStop));
}
.button-gradient:hover {
--gradientAngle: 0deg;
}

10. css variable

11. bit.ly/2I6amNT
bit.ly/2rxRIEi
bit.ly/2I7belh
bit.ly/2IvWDz6
bit.ly/2IbhOTA
bit.ly/2wBALgS
Kaynaklar

12. @supports 🔮

13. modernizr.js

14. .no-cssgradients .header {
background: url("images/glossybutton.png");
}
.cssgradients .header {
background-image: linear-gradient(cornflowerblue, rebeccapurple);
}
modernizr.js ile kontrol

15. @supports (--degisken: destekliyormu) {
…
}
css variable kontrolü için

16. @supports (display: flex) {
…
}
diğer özelliklerin kontrolü için
@supports not (display: flex) {
…
}

17. @supports ((display: flex) and (display: grid)) {
…
}
birden fazla özellik kontrolü için

18. @supports ((display: flex) and (display: grid) or (——css: variable)) {
…
}
gibi gibi

19. @supports

20. Web Font 🀄

21. @font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome.woff2') format('woff2'),
url('/fonts/awesome.woff') format(‘woff');
}
basit font-face kullanımı

22. unicode-range

23. @font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
src: local('Awesome Font'),
url('/fonts/awesome.woff2') format('woff2'),
url('/fonts/awesome.woff') format(‘woff’);
unicode-range: U+000-5FF; /* Latin glyphs */
}

24. unicode-range: U+26; /* single codepoint */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF; /* codepoint range */
unicode-range: U+4??; /* wildcard range */
unicode-range: U+0025-00FF, U+4??; /* multiple values */

25. bit.ly/2wxOk0S

29. unicode-range

30. bit.ly/2IEIPCm
bit.ly/2wxOk0S
bit.ly/2Ie1th3
Kaynaklar

31. OpenType features

32. font-feature-settings: 'tnum' on;

33. .class {
font-feature-settings: "salt";
}
.class {
font-feature-settings: “ordn";
}

34. liga: standard ligatures
dlig: discretionary ligatures
onum: old style figures
lnum: lining figures
tnum: tabular figures
zero: slashed zero
frac: fractions
sups: superscript
subs: subscript
smcp: small caps
c2sc: small capitals from capitals
case: case-sensitive forms
hlig: historical ligatures
calt: contextual alternates
swsh: swashes
hist: historical forms
ss**: stylistic sets
kern: kerning
locl: localized forms
rlig: required ligatures
medi: medial forms
init: initial forms
isol: isolated forms
fina: final forms
mark: mark
mkmk: mark-to-mark positioning

35. adobe.ly/2IyxrIk
adobe.ly/2jU39BH
bit.ly/2wyWAxN
bit.ly/2KTMlr2
bit.ly/2ICqMNu
bit.ly/2rAUh8n
Kaynaklar

36. object-fit 🐼

41. object-position

42. object-fit

43. bit.ly/2IaOXmG
mzl.la/2IaoLbV
bit.ly/2jP0EAC
bit.ly/2KjeNl8
bit.ly/2IDMelf
bit.ly/2rE8eS7
Kaynaklar

44. Layout 🔥

45. Float 👉 Flexbox

51. bit.ly/2rDPxy3

55. Her Derde Deva: CSS Flexbox
bit.ly/2wB9XO0

56. bit.ly/2rCou6t

57. flexbox

58. bit.ly/2wB9XO0
bit.ly/2wvLf1C
bit.ly/2rD2V6g
bit.ly/2wwOVQH
bit.ly/2rA7Yna
bit.ly/2rBXrZP
bit.ly/2wxI4Gq
bit.ly/2KW3noo
bit.ly/2I8noKw
Kaynaklar

59. Grid

69. gridbyexample.com

70. cssgrid.io

71. bit.ly/2rCRU5a

72. grid

73. bit.ly/2KiRyaF
bit.ly/2wCjGDC
bit.ly/2rCRU5a
bit.ly/2IDJunJ
bit.ly/2jQh5wI
Kaynaklar

74. @Feyz_li
Sakın takip etme
Teşekkürler
👏()*+,