See the Pen link hover effect by Hyejin Oh (@mmt-zinee) on CodePen. text-decoration: underline 으로는 원하는 디자인을 마음껏 적용하기 힘들다.그런데, 언젠가 어떤 사이트 글에서 링크에 이런 효과를 주었던 것을 보아서 기억에 남았었다.그래서 생각나는 대로 비슷하게 구현해봤다.
CSS
CSS Shapes – TriangleCSS Shapes – CircleCSS Shapes – TriangleCSS Shapes – Square Rectangle Parallelogram Trapezoid and PolygonsCSS Shapes – Diamond and StarCSS Shapes – Chart and RibbonDifferent CSS Shapes See the Pen <a href='http://codepen.io/mmt-zinee/pen/WxQjON/'>WxQjON</a> by Hyejin Oh (<a href='http://codepen.io/mmt-zinee'>@mmt-zinee</a>) on <a href='http://codep..
[이슈] 아이폰 웹 브라우저에서 방향전환(Orientation Change)이 일어날 때, 폰트 크기가 커짐(13px에서 확대) [해결] -webkit-text-size-adjust: 100%[참고] https://developer.mozilla.org/ko/docs/Web/CSS/text-size-adjust [출처] http://caniuse.com/#search=webkit-text-size-adjust
::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-thumb { background: #a9a9a9; } [참고] http://stackoverflow.com/questions/7492062/css-overflow-scroll-always-show-vertical-scroll-bar https://css-tricks.com/examples/WebKitScrollbars/ http://circlash.tistory.com/610
티스토리 스킨 수정하다가 우연히 발견한 프로퍼티. 하지만 웹킷을 사용한 브라우저가 아니면 동작하지 않는다. http://tobyyun.tumblr.com/post/55858430437/http://www.cssmojo.com/line-clamp_for_non_webkit-based_browsers/http://caniuse.com/#search=line-clamp
[ 조건 ]가 버튼이 보일 때는 margin-top: 10px,버튼이 없을 때는 margin-bottom: 10px; 이 되어야 한다. [ 궁금증 ]스크립트를 쓰지 않고, CSS로만 제어하고 싶다.display: block/none 상태를 선택자로 사용할 수 있을까? [ 해결 ]만약 요소가 style 속성을 사용하고 있다면 CSS3로 해결 할 수 있다. .user-pw dd > button + .error-txt margin: 0 0 10px button:not([style*="display: none"]) + .error-txt margin: 10px 0 0 [ 참고 ]http://stackoverflow.com/questions/5275098/a-css-selector-to-get-last-visib..
태그 안의 텍스트에 ellipsis 를 적용하려고 했는데 안되서 찾아봤더니, inline 속성에는 ellipsis 가 적용되지 않는다고 한다. (2020.05.22 추가: display: flex, display: inline-flex 에도 적용되지 않는다.) display:inline-block; 또는 display:block; 으로 속성을 변경 하면 해결된다.정확한 px 값 또는 max-width 값이 있어야 한다. 유동적인 % 값이면 적용이 안된다. [출처] http://stackoverflow.com/questions/17779293/css-text-overflow-ellipsis-not-working
