{"id":20633009,"url":"https://github.com/yenilikci/csstekrar","last_synced_at":"2026-05-17T19:04:09.919Z","repository":{"id":117874003,"uuid":"300228394","full_name":"yenilikci/csstekrar","owner":"yenilikci","description":"hatırlatma amaçlı","archived":false,"fork":false,"pushed_at":"2020-11-03T17:57:15.000Z","size":1618,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T23:59:16.631Z","etag":null,"topics":["animation","background","box-model","css","css3","flexbox","fonts","icons","position","recap","responsive","transition"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yenilikci.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-01T09:50:33.000Z","updated_at":"2020-11-03T17:57:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"1dfcc665-e5d1-43db-91f8-86f81558db98","html_url":"https://github.com/yenilikci/csstekrar","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yenilikci/csstekrar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yenilikci%2Fcsstekrar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yenilikci%2Fcsstekrar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yenilikci%2Fcsstekrar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yenilikci%2Fcsstekrar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yenilikci","download_url":"https://codeload.github.com/yenilikci/csstekrar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yenilikci%2Fcsstekrar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33151625,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T09:28:26.183Z","status":"ssl_error","status_checked_at":"2026-05-17T09:27:52.702Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","background","box-model","css","css3","flexbox","fonts","icons","position","recap","responsive","transition"],"created_at":"2024-11-16T14:18:13.472Z","updated_at":"2026-05-17T19:04:09.889Z","avatar_url":"https://github.com/yenilikci.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# csstekrar\nhatırlatma amaçlı\n\n# HTML Block-level Elements\n`\u003caddress\u003e \u003carticle\u003e \u003caside\u003e \u003cblockquote\u003e \u003ccanvas\u003e \u003cdd\u003e \u003cdiv\u003e \u003cdl\u003e \u003cdt\u003e \u003cfieldset\u003e \u003cfigcaption\u003e \u003cfigure\u003e \u003cfooter\u003e \u003cform\u003e \u003ch1\u003e-\u003ch6\u003e \u003cheader\u003e \u003chr\u003e \u003cli\u003e \u003cmain\u003e \u003cnav\u003e \u003cnoscript\u003e \u003col\u003e \u003cp\u003e \u003cpre\u003e \u003csection\u003e \u003ctable\u003e \u003ctfoot\u003e \u003cul\u003e \u003cvideo\u003e`\n\n# HTML Inline Elements\n`\u003ca\u003e \u003cabbr\u003e \u003cacronym\u003e \u003cb\u003e \u003cbdo\u003e \u003cbig\u003e \u003cbr\u003e \u003cbutton\u003e \u003ccite\u003e \u003ccode\u003e \u003cdfn\u003e \u003cem\u003e \u003ci\u003e \u003cimg\u003e \u003cinput\u003e \u003ckbd\u003e \u003clabel\u003e \u003cmap\u003e \u003cobject\u003e \u003coutput\u003e \u003cq\u003e \u003csamp\u003e \u003cscript\u003e \u003cselect\u003e \u003csmall\u003e \u003cspan\u003e\u003cstrong\u003e \u003csub\u003e \u003csup\u003e \u003ctextarea\u003e \u003ctime\u003e \u003ctt\u003e \u003cvar\u003e`\n\n# Konumlandırma\n## Float\n- inherit\n- left\n- none\n- right\n\n## Display\n- **none**\n- **block**\n- **inline-block**\n- **inline**\n- flex\n- grid\n- table\n\n## Positioning\n- static\n- absolute\n- relative\n- fixed\n- sticky\n- inherit\n\n# Box Model\n## Margin\n- margin\n- margin-top\n- margin-right\n- margin-bottom\n- margin-left\n\n## Padding\n- padding\n- padding-top\n- padding-right\n- padding-bottom\n- padding-left\n\n## Border\n- border: kalınlıkpx tipi rengi\n- border-width: inherit,medium,thick,thin,px;\n- border-style: dashed|dotted|double|groove|hidden|inherit|inset|none|outset|ridge|solid;\n- border-color: color name,hex code,decimal code;\n- border-radius: 50%;\n- border-top|right|bottom|left-width|style|color|radius:\n\n## Box Sizing\n- box-sizing : border-box (width height'a padding ve border dahil margin dahil değil)\n- box-sizing: content-box (width height'a padding ve border dahil değil margin zaten değil)\n\n# Fonts \u0026 Icons\n## Fonts\n- font-size: px, %(mevcut sayfa px'inin yüzde katı %200 -\u003e 2 katı), em(mevcut sayfa px'inin katları 0.5em -\u003e yarısı), rem(1 rem = 16px)\n- font-family: tarayıcı destekliyorsa ilk font kulanılır, tarayıcı desteklemiyorsa deneyeceği ikinci font, ikinci fontta olmazsa varsayılan seçilecek üçüncü font;\n- font-weight: normal|bold|bolder|lighter|number|initial|inherit;\n- font-style: normal|italic|oblique|initial|inherit;\n- font-variant: normal|small-caps|initial|inherit;\n\n## Icons\nEn popüler ikon kütüphaneleri;\n- Font Awesome\n- icons8\n- Flaticon\n- Ionicons\n\n## Text\n- text-decoration: inherit|line-through|none|overline|underline;\n- text-indent: (paragraf başı boşluğu) büyüklük değeri alır;\n- text-transform: none,capitalize(baş harfler büyük),uppercase(tüm harfler büyük),lowercase(tüm harfler küçük),initial,inherit;\n- text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;\n- text-align: center|left|right|justify; (inline etiketlere etki etmez)\n- word-spacing: (kelimeler arası boşluk)\n- letter-spacing: (harfler arası boşluk)\n- column-count: sayı; (metni kolonlara böler)\n- column-rule: 1px solid black; (kolon arasına çizgi eklenebilir)\n- line-height: (satırlar arası yükseklik)\n\n## List\n- list-style-image: none|url|inherit|initial;\n- list-style-position: inside|outside|inherit|initial;\n- list-style-type: dics|circle|decimal|lower-alpha|upper-alpha|square|none;\n\n## How to Center a Div \nElementleri ortalamanın bir yolu (**Transform ve Translate ile**);\n\nİlk önce **ebeveyn** element'in **positionunu relative** yap. Sonra **çocuk** elementin **position** özelliğini **absolute** yap **yukarıdan** ve **soldan** **50%** ver. **transform** özelliğini **translate(-50%, -50%)** yap.\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"child\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```css\n.container {\n  ...\n  position: relative;\n}\n\n.child {\n  ... \n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n```\n\nElementleri ortalamanan diğer bir yolu (**Flex ile**);\n\nEbeveyn elementin **display** özelliğini flex yapıyoruz. **justify-content** ve **align-items** özelliklerini ise **center** yapıyoruz.\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"child\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```css\n.container {\n  ...\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n```\n## Uygulamalar\n- ## Box Shadow\n- [Box Shadow](https://github.com/yenilikci/csstekrar/blob/master/Uygulamalar/boxshadow.html \"Box Shadow\")\n\u003e box-shadow: yatay,dikey,blur,yayılım;\u003cbr\u003e\n\u003e box-shadow: 10px 20px;  yatay 10px dikey 20px\u003cbr\u003e\n\u003e box-shadow: 10px 20px 10px;** yatay 10px dikey 10px blur 10px\u003cbr\u003e\n\u003e box-shadow: 10px 10px 10px 2px; yatay 10px dikey 10px blur 10px yayılım 2px\n\n- ## Transition\n  [Transition](https://github.com/yenilikci/csstekrar/blob/master/Uygulamalar/transitions.html \"Transition\")\n- transition: property duration timing-function delay;\n- transition: width 2s (etkin olmasını istediğim özellik kaç saniyede) , height 5s, ... ;\n- transition-property: color (sadece geçiş efektinin uygulanmasını istediğim özellikler - **opsiyonel kullanım all**);\n- transition-duration: 3s (geçiş efektinin ne kadar süreceği);\n- transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int|start|end),cubic-bezier(n,n,n,n)|initial|inherit (estetik geçişler sağlanır);\n- transition-delay: 1s (geçiş efektinin ne kadar zaman sonra başlayacağı);\n\n\n- ## [Navbar](https://github.com/yenilikci/csstekrar/blob/master/Uygulamalar/navbar.html \"Navbar\")\n![navbar](https://user-images.githubusercontent.com/57464067/97799395-11146a00-1c3f-11eb-8c00-4736575e00a0.png)\n- ## [Cards](https://github.com/yenilikci/csstekrar/blob/master/Uygulamalar/cards.html \"Cards\")\n![card](https://user-images.githubusercontent.com/57464067/97799396-12de2d80-1c3f-11eb-89a5-455288fd2c35.png)\n- ## [Background Image](https://github.com/yenilikci/csstekrar/blob/master/Uygulamalar/bgimage.html \"Background Image\")\n![background-image](https://user-images.githubusercontent.com/57464067/97799394-0e197980-1c3f-11eb-8a9b-c93f1bb61d95.png)\n- ## [Tooltip](https://github.com/yenilikci/csstekrar/blob/master/Uygulamalar/tooltip.html \"Tooltip\")\n![tooltip](https://user-images.githubusercontent.com/57464067/97815722-3639c480-1ca1-11eb-8793-263ca91c1246.png)\n- ## [Menu](https://github.com/yenilikci/csstekrar/blob/master/Uygulamalar/acilirmenu.html \"Menu\")\n![açılırmenü](https://user-images.githubusercontent.com/57464067/97815723-38038800-1ca1-11eb-9a91-9387357f6305.png)\n- ## [Sosyal Medya Butonları](https://github.com/yenilikci/csstekrar/tree/master/Uygulamalar/Sosyal%20Medya%20Butonlar%C4%B1 \"Sosyal Medya Butonları\")\n**😇 transform: rotate(-30deg) skew(25deg) translate(20px,-15px);** \u003cbr\u003e\n**😇 :nth-child(n){} prop, n = odd -\u003e tek, n = even -\u003e çift** \u003cbr\u003e\n**😇 :hover{} prop**\n\n![sosyal medya buton](https://user-images.githubusercontent.com/57464067/97886657-ebb85680-1d39-11eb-8d7c-9b8d7a256b3e.png)\n- ## [Parallax Dizayn](https://github.com/yenilikci/csstekrar/tree/master/Uygulamalar/Parallax%20Dizayn \"Parallax Dizayn\")\n**😇 background-attachment: fixed;**\n\n![parallax](https://user-images.githubusercontent.com/57464067/97886661-ec50ed00-1d39-11eb-8a62-607c0ff467ae.png)\n\n## Responsive Web Design\n### Medya Sorguları\nGenelde kullanılan medya özellikleri:\nwidth, height, max-width, min-width, max-height ve min-height\n\nMantıksal operatörler kullanılabilir:\nnot,and,only\n\n```html\n@media screen and (ozellik:deger) {\n\n}\n```\n**Örneğin:** Sadece 750px bir genişlikte görüntülenecek tanım\n```html\n@media screen and (width: 750px) {\n\n}\n```\n\n**Örneğin:** 750px ve altındaki bir genişlikte görüntülenecek tanım\n```html\n@media screen and (max-width: 750px) {\n  h1\n  {\n    font-size: 14px;\n  }\n}\n```\nbunun hemen ardına aynı yapıda ama max-width:400px olacak bir tanım daha yaparsak yukarıdaki tanım 750px ve 400px arasında en son yaptığımız tanım ise 400px ve aşağıdaki genişlikte görüntülenir.\n```html\n@media screen and (max-width: 400px) {\n  h1\n  {\n    font-size: 12px;\n  }\n}\n```\nyani 750px ve 400px arasındaki genişlike h1 etiketinin font büyüklüğü 14px iken 400px ve altındaki genişliklerde 12px'dir.\n\n**Örneğin:** 600px ve üstündeki genişlikte görüntülenecek olan tanım\n```html\n@media screen and (min-width: 600px) {\n  h1\n  {\n    font-size: 14px;\n  }\n}\n```\n\nMedya sorgu ifadelerini birleştirerekte tanımlama yapabiliriz\n\n```html\n@media screen and (max-width: 1200px) and (min-width: 800px)  {\n  h1\n  {\n    font-size: 20px;\n  }\n}\n```\nörneğin yukarıdaki tanım 800px ve 1200px arasındaki ekranlar için yapılmıştır.\n\n## Flexbox\n**display: flex;**\n\n![x](https://user-images.githubusercontent.com/57464067/98022338-89815380-1e16-11eb-86bd-c6d7a63419e5.png)\n\n**Container Seviyesi**\nvarsayılan direction row (react native'de col)\n\n1) flex-direction\n2) flex-wrap\n3) justify-content\n4) align-items\n5) align-content\n\n**İtem Seviyesi**\n\n1) align-self\n2) order\n3) flex-grow: 0\n4) flex-shrink: 1\n5) flex-basis: auto\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyenilikci%2Fcsstekrar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyenilikci%2Fcsstekrar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyenilikci%2Fcsstekrar/lists"}