CSS의 가장 멋진 / 최고의 / 악용은 무엇입니까?

예를 들어, 이러한 모양 또는 여러 상자 그림자를 사용하여 픽셀 아트를 만듭니다.

인기 콘테스트 는 16/04/14에 종료됩니다.

어떤 친구는 이미지를 순수한 CSS로 변환하는 도구를 만들었습니다. 이것은 CSS의 원래 의도를 훨씬 뛰어 넘습니다.

다음은 예입니다 (유명한 모나리자) : http://codepen.io/jaysalvat/pen/HaqBf

그리고 여기 도구가 있습니다 : https://github.com/jaysalvat/image2css

즉시 이미지 변경

나는 반드시 학대 호출하지 않습니다,하지만 당신은 대체하기 위해 CSS를 사용하여 IMG주어진와 SRC완전히 다른 이미지를 표시 할 수 있습니다.

@media print
{
    IMG
    {
        padding: 150px 200px 0px 0px; 
        background: url('lady.jpg'); 
        background-size:auto; 
        width:0px; height: 0px;
    }
}

참조 : /programming/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css

@media웹 페이지를 인쇄 할 때 완전히 다른 이미지를 표시하기 위해 선택기 와 결합하여 많은 재미를 느낄 수 있습니다 . ( PDFbtw 에서 동일한 트릭을 수행 할 수 있습니다 . 문서를 인쇄하는 사람의 얼굴을보고 반갑습니다. 모든 심각한 차트는 아름다운 숙녀로 대체됩니다 :))

크기 조정 가능한 요소 :

사용자가 resize:both요소의 크기를 조정할 수 있도록 추가 할 수 있습니다 .
일부 브라우저에서는의에서만 지원됩니다 <textarea>.

실시간 CSS 미리보기 :

이것은 실제 CSS 일이 아니지만 contenteditable속성을 추가하고 속성을 추가하며 style="display:block;z-index:99;width:500px;height:500px;resizable:both;"CSS를 편집 할 수 있습니다.

스타일 CSS 체크 박스 / 라디오 버튼 :

다음 마크 업을 예로 사용 :

<input type="checkbox" id="check_all" name="check_all" value="1">
<label for="check_all">Check all</label>

당신이 사용할 수있는 display:none온 <input>CSS3 선택기를 사용하고, 당신은 체크 박스 / 라디오 버튼의 여러 가지 상태를 보여주기 위해 '스프라이트'배경을 설정할 수 있습니다.

요소의 순서가 중요 하며 입력에서 for=""속성을 일치시키는 id=""것이 훨씬 중요합니다!

여기에 몇 가지 예가 있습니다. http://www.csscheckbox.com/

브라우저 별 선택기 :

우리 모두는 CSS 클래스 및 미디어 쿼리와 함께 일종의 자바 스크립트 믹스를 사용하려고 시도했습니다 ...

다음은 몇 가지 브라우저 별 선택기입니다.

doesnotexist:-o-prefocus, #selector {}/*opera only*/
:root {}/*target all css3 browsers*/
:-moz-any(*){}/*mozilla and mozilla based only*/
:-webkit-any(*){}/*webkit only*/

IE의 경우 많은 선택기가 있습니다. 더 필요가 없습니다.

나는 그것이 악용의 의미에 달려 있다고 생각하지만 사용자를 욕하게 할 것입니다.

신경 과민

*:hover{
  zoom:99%;
}

(페이지 주위를 마우스로 움직이면 모든 것이 흔들립니다)

전문가 교환 / 지불시 효과

*{
  color:transparent;
  text-shadow:0 0 5px rgba(0,0,0,0.5);
}

(모든 텍스트를 흐리게 만듭니다)

CSS 스프라이트 시트를 사용한 "애니메이션 GIF"

http://jsfiddle.net/simurai/CGmCe/light/

(자바를 흔드는 자바의 "The Dude")