CSS 태그 글

사파리 그래디언트 오류 수정하기

애플의 사파리(Safari) 브라우저에서 그래디언트를 넣을 때, 다른 색은 괜찮지만, 투명(transparent)색을 그래디언트에 추가하면 그래디언트가 망가지는 오류가 있습니다. 사파리를 제외한 브라우저 대부분에선 위아래 전부 아래와 같은 색의 그래디언트가 들어가는데, 사파리는 transparent를 넣으면 검은색을 잔뜩 끼얹어버립니다.

T 전화 테마 미리보기 꾸미기

T 전화 테마를 올릴 때 항상 이미지만 죽 나열하곤 했는데, 좀 더 테마 미리 보기 같은 느낌을 낼 순 없을까 싶어 만들어본 데모입니다. CSS로 휴대폰 목업을 만들고, 제 휴대폰과 동일한 화면 비를 갖도록 한 후에, 안에 이미지를 넣어주면 끝납니다. 화면을 클릭하시면 이미지 목록 레이어가 보이고, 이미지를 클릭하면 레이어가 사라지며 휴대폰 화면이 변경됩니다. 만들긴 했는데, 아무래도

[CSS, 자바스크립트]Material Ripple 효과 구현하기

요소를 클릭했을 때, 물결(Ripple)이 퍼져 나가는 것 같은 효과를 줄 수 있습니다.

[CSS] 열리는 문 만들기

CSS로 여닫을 수 있는 문 만들기

[CSS] 텍스트 꾸미기

텍스트에 배경 이미지를 삽입하여 꾸며보기

반응형 유튜브 비디오 만들기

CSS로 요소를 특정 비를 유지하며 크기가 줄어들도록 하실 수 있습니다.

[CSS] 드로어(Drawer) 만들기

퓨어 CSS로 만든 드로어입니다.input과 label, 그리고 CSS 선택자인 ~만 적절히 조합하면 요소를 클릭하면 다른 요소에 class 더하고 빼는 수준의 작업은 CSS만으로도 할 수 있습니다. 먼저 CSS 선택자인 ~ 는 elem1 ~ elem2 와 같은 방식으로 사용하며, elem1 뒤에 있는 elem2 모두를 선택합니다.여기서 중요한 건, elem 1과 elem 2의 부모는 같은 요소여야 합니다. 당연히 label::before를 클릭해도

블로그에 투 두 리스트 추가하기

블로그 등의 html, css가 수정 가능한 웹 사이트에 할 일 목록을 추가하는 방법입니다. 블로그에선 포스트 수정이라는 좋은 수단이 이미 존재하니, html과 css만 작업했습니다.

CSS filter blur 렉 해결하기

filter blur만 사용하면 버벅이는 브라우저 렉 해결하기