📚 Knowledge Library

Tips and Tricks.

All #accessibility #cloud9 #codepen #concept #css #css-basic #css-flex #css-grid #data-url #html #html-form #inspirations #ios #javascript #lang-zh #layout #link #mobile #mobile-web #mysql #php #php-basic #podcast #progress-enhancement #python #resilient #resources #swift #ui-design #user-media #video #wordpress

2023-06-03

Build your own CSS Flexbox and Grid framework

Read more →
2020-12-05

CSS Gradient Text

Key points to use CSS Gradient Text.

Read more →
2020-11-11

CSS Grid Masonry Example

grid-template-rows: masonry;

Read more →
2019-06-02

Demo of Scroll Snap

The scroll-snap CSS has updated to new syntax. Here is a demo of using the latest syntax of scroll-snap and also making it mobile friendly.

Read more →

2018-11-01

Link: Using Dark Mode in CSS

https://paulmillr.com/posts/using-dark-mode-in-css/

/* Text and background color for light mode */
body {
  color: #333;
}

/* Text and background color for dark mode */
@media (prefers-color-scheme: dark) {
  body {
    color: #ddd;
    background-color: #222;
  }
}

Example code from Paul Miller.

2018-10-27

Link: 147 named color

http://colours.neilorangepeel.com

Read more →
2018-10-23

Link: CSS Diner — Learn Selector with dinner game

https://flukeout.github.io/

This CSS Diner game is a good starting point to learn selector.

Read more →
2018-10-21

Quantity Selector in CSS

Demonstration of querying and setting responsive styles to navigation with exactly 4 items and 5 or more items. The font-size is smaller when there are more items in the navigation. The grey border simulates the website shown in narrow width screen. Original idea from A List Apart—Quantity Queries for CSS.

Read more →
2018-01-06

Differences between `auto-fill` and `auto-fit`

The difference happens when there are not enough content to fill up all columns.

When the screen is wide enough to fill in more "minmax(200px, 1fr)" columns, auto-fill will fill extra empty 200px width columns.

When it is auto-fit, extra column works only where there is content there. So there won’t be any extra empty columns in auto-fit.

Read more →
2018-01-04

Block-grid layout with CSS Grid

In this example, we create the block-grid effect by using CSS grid grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)).

Read more →
2017-05-10

Flexbox block-grid example

I created an example that demonstrates block-grid by using Flexbox.

https://codepen.io/makzan/pen/VbQdWJ/

Read more →
2017-04-30

Quick Video: Demo of customizing CSS in Wordpress

A quick demo:

Read more →
2017-04-29

CSS Priority

CSS priority is determined by how specific the selector is.

Read more →
2017-04-19

Box-Sizing
```
*{
  box-sizing: border-box;
}
```
Read more →

2016-09-25

Dealing with long words in CSS

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}