본문 바로가기

webdesign/CSS

naming the class name - CSS pineco.de/css-quick-tip-the-valid-characters-in-a-custom-css-selector/ CSS Quick Tip: The Valid Characters in a Custom CSS Selector - Pine Using valid CSS selectors is easy, we initially know how to write one. We can't make mistakes selecting elements but what about the custom class or ID ones? pineco.de CSS Quick Tip: The Valid Characters in a Custom CSS Selector - / _ : There is one catch: the.. 2021. 1. 15. 00:56 더보기
? word-break / word-wrap / white-space white-space:normal | nowrap | pre | pre-wrap| pre-line | break-spaces; MDN, W3org overflow: visible | hidden | scroll | auto; MDN text-overflow: clip | ellipsis | "-" | "" ; MDN, hyphens : none | manual | auto ; MDN, W3org word-break : normal | break-all | keep-all; MDN, W3org overflow-wrap (word-wrap) : normal | break-word | anywhere; MDN, W3org the difference between “word-break: break-all” vs.. 2021. 1. 13. 16:07 더보기
CSS 3d transform - to fix the flickering error mouse hover flickering https://maximelafarie.com/avoid-css-flickering Avoid CSS flickering The purpose of this article is to focus on the most efficient way to avoid CSS flickering on HTML elements, especially with elements near a transitioned tr... maximelafarie.com If you have several HTML elements that are nested into a common element (the parent) and you attached a transform effect with a tr.. 2020. 11. 28. 07:26 더보기
generate icon-font step1 > Convert strokes to vector objects Figma Mac: Shift Command O help.figma.com/hc/en-us/articles/360049283914-Apply-and-adjust-stroke-properties#Outline_stroke step2 > icomoon.io/app/ IcoMoon App - Icon Font, SVG, PDF & PNG Generator icomoon.io fontello.com/ Fontello - icon fonts generator This site will not work if cookies are completely disabled. {"assets_hash":"e6db8b6b0a3b12752de78e5d31.. 2020. 11. 19. 07:40 더보기
before: / after: vs. before:: / after:: https://youtu.be/zGiirUiWslI : (single colon) pseudo class a:hover :: (double colon) pseudo element ::before, ::after ::before (right way to represent a pseudo element based on CSS3), :before it used to be the same but CSS3 changed it to distinguish pseudo elements from pseudo classes. but browser still support both of them. (because they don't want to break all of the old stuff and how it used .. 2019. 5. 5. 17:09 더보기
vh, vw, calc() https://coherent-labs.com/posts/4k-ui-and-the-future-of-gaming/ 4K modern UI design In this post we'll have a look at 4K resolution gaming, the challenges it presents to modern UI design systems and how you can use Coherent UI to meet them. coherent-labs.com https://youtu.be/PKVKwluRTfo 2019. 5. 4. 23:48 더보기
Disable Auto Zoom *{-webkit-text-size-adjust:none;word-break:break-word;} 뷰포트 전환시 폰트 자동 확대 방지 -------------------- http://hints.macworld.com/article.php?story=20130108131950239 How do I stop Safari from zooming in? Stop Safari from zooming unexpectedly It's a double tap with two fingers on my Magic Trackpad, and I use it often. It's quite handy (no pun intended). 인풋박스 줌 인 방지 https://stackoverflow.com/questions/29.. 2019. 4. 26. 19:28 더보기
viewport size https://mediag.com/blog/popular-screen-resolutions-designing-for-all/ When you buy a device, you will often see both screen size and resolution listed in the specs. The screensize is the physical measurement diagonally of the screen in inches. This is not to be confused with the resolution, which is the number of pixels on the screen often displayed as a width by height (i.e. 1024×768). Because .. 2019. 4. 26. 18:45 더보기