[CSS] 유령처럼 서서히 나타나는 텍스트 2021. 7. 17. See the Pen Haunted Text by Fabrice Lejeune (@fabricelejeune) on CodePen. [CSS] 유령처럼 서서히 나타나는 텍스트 유령처럼 나타나는 CSS, 한번 적용을 해보려다가 생각보다 대작업이 될 것 같아서 이렇게 페이지에만 적용을 시켜서 사용하는 것이 낫겠다. 주로 메인화면에 적용하면 좋을 것 같고 쉬운 코드로 분위기를 나타낼 수 있을 것 같다. 생각보다 사용방법은 단순해 보이는데, 위의 assets에서 조금 복잡하게 적용이 되어 있어서 나의 사이트에서 적용을 하려면 코드를 약간 수정해서 사용해야겠다. 자바스크립트는 별도의 파일로 임폴트해서 적용을 시키는 것이 나을 것 같고, CSS의 경우 각 웹사이트별로 커스텀 마이징을 해야 할 것만 같다.

[CSS] 밑줄 표시 효과 Underline hover effect 2021. 7. 17. See the Pen PooerOj by CreativeStudio (@creativestudiocss) on CodePen. background-image: linear-gradient(transparent calc(100% - 3px), #000 3px) background-repeat: no-repeat background-size: 0% 100% transition: background-size 0.8s color: #000 &.yellow background-image: linear-gradient(transparent 60%, #F8CD07 40%) &:hover background-size: 100% 100% 위와 같은 방식 또는 코드펜 방식으로 매우 쉽게 적용할 수 있는 밑줄 CSS 호버 ..

[CSS] 배경이미지 위에 점 패턴 이미지 2021. 7. 17. 배경 이미지 위에 점 패턴 이미지 제작방법 정리 배경이미지를 훨씬 세련되게 만들어주는 배경 이미지 위에 점 패턴 이미지 커버를 씌우는 방법이다. 워드프레스를 할 때는 커버 이미지에 기본적인 기능이 있어서 매우 쉽게 구현을 했는데, 티스토리 내에서도 다른 배경 이미지를 멋있게 표현하고 싶었는데, 관련 기능이 없었다. 있는 게 오히려 이상하겠다 싶었다. 예전에 점 패턴과 더불어 다양한 패턴 이미지를 저장하고 있었으나, 최근 컴퓨터를 포맷하면서 패턴 이미지가 삭제되어 버렸다. 그래서 인터넷에서 관련 점 패턴을 찾아보았으나 찾지 못하고 직접 포토샵으로 픽셀작업을 했다. 점 패턴의 경우, 일부로 Opacity를 별도로 지정해주지 않으면 굉장히 이미지가 이상할 수 있으므로 픽셀 패턴 이미지를 만들면서 함께 Opac..

CSS 속성선택자 동일 클래스명 일괄선택 2020. 4. 29. 예를 들어, 내가 어떤 타입의 클래스를 일괄 선택하고자 할 때는 속성선택자를 사용하면 된다. [class^="클래스명"]와 같은 원리로 카테고리에서 외부링크 부분만 적용하고 싶을 때는 li[class^="t_menu_link_"] > a로 일괄 및 다중선택이 가능했다. 내가 이거 알아내려고 몇 시간동안이나 뼈빠지게 CSS선택자 공부했다. CSS 속성선택자 사용방법 사실 같은 자식 내에 있는 리스트 타입이였으면 그냥 nth-child(even) 또는 (odd)로 하거나 (3n+1) 이런식으로 구현이 가능했을 텐데, 문제는 자식 개체가 모두 독립적인 리스트 타입을 가지고 있어서 위의 방법이 적용이 안되는 것이였다. 방구석 웹디자이너가 이런 사실을 제대로 알고 있을리가 없다. 그래서 연구하고, 또 연구한 결과..