2020年4月5日
30秒学会 CSS 片段 – Truncate text
If the text is longer than one line, it will be truncated and end with an ellipsis …. overflow: hidd...
CSS
2020年3月26日
30秒学会 CSS 片段 – Evenly distributed children
Evenly distributes child elements within a parent element. display: flex enables flexbox. justify-co...
2020年3月23日
30秒学会 CSS 片段 – Gradient text
Gives text a gradient color. background: -webkit-linear-gradient(…) gives the text element a gradi...
2020年3月7日
30秒学会 CSS 片段 – Hamburger Button
Displays a hamburger menu which transitions to a cross on hover. Use a .hamburger-menu container div...
2020年2月29日
30秒学会 CSS 片段 – Mouse cursor gradient tracking
A hover effect where the gradient follows the mouse cursor. –x and –y are used to track the positi...
2020年2月11日
30秒学会 CSS 片段 – Display table centering
Vertically and horizontally centers a child element within its parent element using display: table (...
2020年1月31日
30秒学会 CSS 片段 – Masonry Layout
Creates a vertical masonry layout using HTML and CSS. Create a masonry-style layout that consists of...
2020年1月13日
30秒学会 JavaScript 片段 – hasClass
Returns true if the element has the specified class, false otherwise. Use element.classList.contains...
2019年12月20日
30秒学会 CSS 片段 – Hover underline animation
Creates an animated underline effect when the text is hovered over. display: inline-block makes the ...
2019年12月8日
30秒学会 CSS 片段 – Offscreen
Completely hides an element visually and positionally in the DOM while still allowing it to be acces...