깜박이는 버튼. Safari에서 CSS 변환 중 깜박임을 제거합니다. D 시뮬레이션된 버튼 누르기
버튼을 살펴보기 전에 모든 버튼에 공통적인 설정을 살펴보겠습니다.
HTML버튼은 매우 간단한 HTML 코드를 사용합니다.
구독하다
CSS또한 모든 버튼에는 캡션 텍스트와 링크 선택 취소에 대한 공통 설정이 있습니다.
ButtonText( 글꼴: 18px/1.5 Helvetica, Arial, sans-serif; 색상: #fff; ) a( 색상: #fff; 텍스트 장식: 없음; )
일반적으로 사용자는 링크나 버튼 위에 마우스를 올리면 상당히 부드러운 효과를 기대합니다. 그리고 우리의 경우 버튼의 크기가 변경되어 추가 메시지가 표시됩니다.
기본 CSS 코드우선, 버튼에 모양과 색상만 지정하면 됩니다. 높이 28px, 너비 115px를 정의하고 여백과 패딩을 추가하고 버튼에 밝은 테두리를 지정합니다.
#button1 ( 배경: #6292c2; 테두리: 2px 단색 #eee; 높이: 28px; 너비: 115px; 여백: 50px 0 0 50px; 패딩: 0 0 0 7px; 오버플로: 숨김; 디스플레이: 블록; )
CSS3 효과어떤 사람들은 간단한 버튼에 꽤 많은 CSS 코드가 수반되는 것을 좋아합니다. 이 섹션에서는 버튼에 대한 추가 CSS3 스타일을 제공합니다. 그것들 없이도 할 수 있지만 버튼에 더 현대적인 느낌을 줍니다.
프레임 모서리를 둥글게 만들고 그라디언트를 추가합니다. 이는 배경색과 상호 작용하는 어두운 그라데이션에 약간의 트릭을 사용합니다.
/*둥근 모서리*/ -webkit-border-radius: 15px; -moz-국경-반경: 15px; 테두리 반경: 15px; /*그라디언트*/ 배경 이미지: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 배경 이미지: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 배경 이미지: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 배경 이미지: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 배경 이미지: 선형 그라데이션(상단, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
CSS 애니메이션이제 CSS 전환을 설정해 보겠습니다. 애니메이션은 모든 속성 변경에 사용되며 0.5초 동안 지속됩니다.
마우스 오버이제 남은 것은 마우스를 버튼 위로 가져갈 때 버튼을 확장하는 스타일을 추가하는 것입니다. 전체 메시지를 표시하려면 버튼 너비가 230픽셀이어야 합니다.
#button1:hover (너비: 230px; )
간단한 색상 톤 변경
버튼에 대한 매우 간단하고 인기 있는 CSS 효과입니다. 마우스 커서를 올리면 배경색의 톤이 부드럽게 변합니다.
기본 CSS 코드CSS 코드는 이전 예제와 매우 유사합니다. 다른 배경색을 사용하고 모양도 살짝 변경되었습니다. 또한 텍스트를 중앙에 배치하고 수직 중앙 정렬이 발생하도록 버튼의 줄 높이를 설정합니다.
#button2 ( 배경: #d11717; 테두리: 2px 단색 #eee; 높이: 38px; 너비: 125px; 여백: 50px 0 0 50px; 오버플로: 숨김; 표시: 블록; 텍스트 정렬: 중앙; 줄 높이: 38px; )
CSS3 효과모서리 반올림, 배경 그라데이션 및 추가 그림자를 설정합니다. rgba를 사용하여 그림자를 검고 투명하게 만듭니다.
/*둥근 모서리*/ -webkit-border-radius: 10px; -moz-국경-반경: 10px; 테두리 반경: 10px; /*그라디언트*/ 배경 이미지: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 배경 이미지: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 배경 이미지: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 배경 이미지: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 배경 이미지: 선형 그라데이션(상단, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*그림자*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); 상자 그림자: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS 애니메이션애니메이션은 이전 예제와 실질적으로 다르지 않습니다.
/*전환*/ -webkit-transition: 모두 0.5초 용이성; -moz-transition: 모두 0.5초 완화; -o-전환: 모두 0.5초 용이성; -ms-전환: 모두 0.5초 용이성; 전환: 모두 0.5초 완화;
마우스 오버마우스 커서를 올리면 다른 배경색이 설정됩니다. 뛰어난 효과를 얻으려면 Photoshop에서 더 밝은 색상 옵션을 선택해 보세요.
#button2:hover ( 배경색: #ff3434; )
이 효과는 배경 이미지의 선택에 따라 상당히 인상적일 수 있습니다. 데모는 설명이 없는 배경을 사용하고 있으며 효과도 설명이 없는 것처럼 보입니다. 다른 사진을 사용해 보면 효과가 놀라울 수 있습니다.
기본 CSS 코드코드의 주요 부분은 이전 예제와 동일합니다. 배경 이미지를 사용하고 있다는 점에 유의하세요. 초기 배경 위치는 "0 0"으로 설정되어 있습니다. 커서를 가리키면 위치가 수직으로 이동합니다.
#button3 ( 배경: #d11717 url("bkg-1.jpg"); 배경 위치: 0 0; 텍스트 그림자: 0px 2px 0px rgba(0, 0, 0, 0.3); 글꼴 크기: 22px; 높이 : 58px; 너비: 155px; 여백: 0 0 50px; 텍스트 정렬: 58px;
CSS3 효과이 예에는 둥근 모서리와 그림자 등 특별한 것이 없습니다.
/*둥근 모서리*/ -webkit-border-radius: 5px; -moz-국경-반경: 5px; 테두리 반경: 5px; /*그림자*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); 상자 그림자: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS 애니메이션이 경우 애니메이션은 부드럽고 흥미로운 효과를 만들기 위해 더 오래 지속됩니다.
/*전환*/ -webkit-transition: 모두 0.8초 용이성; -moz-transition: 모두 0.8초 용이성; -o-전환: 모두 0.8초 용이성; -ms-전환: 모두 0.8초 용이성; 전환: 모두 0.8초 완화;
마우스 오버이제 배경 이미지를 이동할 차례입니다. 시작 위치는 "0 0"이었습니다. 두 번째 매개변수를 150px로 설정합니다. 수평으로 이동하려면 첫 번째 매개변수를 변경해야 합니다.
#button3:hover ( 배경 위치: 0px 150px; )
3D 버튼 누름 시뮬레이션
우리 강의의 마지막 예는 마우스 커서를 버튼 위로 가져갈 때 버튼 누르기를 시뮬레이션하는 널리 사용되는 3D 방법에 관한 것입니다. 이 경우의 애니메이션은 너무 간단해서 CSS 전환도 필요하지 않습니다. 그러나 최종 결과는 매우 인상적입니다.
기본 CSS 코드버튼의 CSS 코드입니다.
#button4 ( 배경: #5c5c5c; 텍스트 그림자: 0px 2px 0px rgba(0, 0, 0, 0.3); 글꼴 크기: 22px; 높이: 58px; 너비: 155px; 여백: 50px 0 0 50px; 오버플로: 숨김 ; 표시: 블록; 텍스트 정렬: 줄 높이: 58px;
CSS3 효과이 경우 CSS3는 더 이상 좋은 옵션이 아닙니다. 효과를 얻으려면 그림자와 그라데이션이 필요합니다. 날카로운 그림자는 3D 버튼 모양을 만듭니다.
/*둥근 모서리*/ -webkit-border-radius: 5px; -moz-국경-반경: 5px; 테두리 반경: 5px; /*그림자*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); 상자 그림자: 0px 6px 0px rgba(0, 0, 0, 0.8); /*그라디언트*/ 배경 이미지: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 배경 이미지: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 배경 이미지: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 배경 이미지: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); 배경 이미지: 선형 그라데이션(상단, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
마우스 오버이 경우 가장 큰 호버 섹션이 있습니다. 그림자의 길이를 줄이고 여백을 사용하여 어두운 영역을 혼합합니다. 모두 함께 버튼을 누르는 듯한 착각을 불러일으킵니다. 그라데이션을 뒤집으면 효과가 향상됩니다.
#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); 상자 그림자: 0px 4px 0px rgba(0, 0, 0, 0.8) /*그라디언트*/ 배경 이미지: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); 배경 이미지: -moz-linear-gradient(하단, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4 )); 배경 이미지: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); 하단, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)) 배경 이미지: 선형 그라데이션(하단, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
모두에게 좋은 하루 되세요. 오랜만에 블로그에 글을 올렸습니다. 오늘은 디자인을 시작하고 싶은 기분이 들었습니다. 저자 자체에 대한 기본 가젯은 완전히 지루하고 매력적이지 않습니다.
결과적으로 위젯이 아니라 프로필 카드처럼 자신만의 디자인에 매우 매력적이고 유익한 개별 스타일을 만드는 것이 가능해졌습니다. 그것이 우리가 부를 것입니다. 뭐, 이런 거요
맨 아래 사이드바에 있는 테스트 블로그의 작업 버전
무슨 내용이야?
1. 프로필 사진.
2. 카드 자체의 아름다운 디자인으로 사용자 정의가 쉽습니다.
3. 귀하의 별명, 이름 또는 성
4 직업, 취미를 표시할 수 있습니다.
5.필요한 페이지에 버튼 2개를 추가합니다. 이는 작성자에 대한 전체 페이지, 기본 페이지, 지도, 마스터 클래스, 소셜 네트워크의 공개 페이지에 대한 링크일 수 있습니다. 아무것.
6. 카드가 블로그 사이드바에 딱 맞습니다.
아래 코드를 복사하면 프로필 카드를 추가로 조각해 드립니다.
![](https://coco-moka.ru/wp-content/uploads/2022/" alt=)
" alt="프로필" class="profile" />!}
Vika Barad 블로거
내 블로그 VK 그룹
.snip1(
글꼴 계열: "Roboto", Arial, sans-serif;
색상: #fff;
위치: 상대;
오버플로: 숨김;
여백: 10px;
최소 너비: 230px;
최대 너비: 315px;
너비: 100%;
색상: #ffffff;
텍스트 정렬: 왼쪽;
줄 높이: 1.4em;
배경색: #141414;
}
.snip1 * (
-webkit-box-sizing: 테두리 상자;
상자 크기 조정: 테두리 상자;
-webkit-transition: 모두 0.25초 용이성;
전환: 모두 0.25초 완화;
}
.snip1 img (
최대 너비: 100%;
수직 정렬: 상단;
불투명도: 0.85;
}
.snip1 무화과캡션(
너비: 100%;
배경색: #141414;
패딩: 25px;
위치: 상대;
}
.snip1 figcaption:이전(
위치: 절대;
콘텐츠: "";
하단: 100%;
왼쪽: 0;
너비: 0;
높이: 0;
테두리 스타일: 단색;
테두리 너비: 55px 0 0 400px;
테두리 색상: 투명 투명 투명 #141414;
}
.snip1 무화과캡션 a (
패딩: 5px;
테두리: 1px 단색 #ffffff;
색상: #ffffff;
글꼴 크기: 0.7em;
텍스트 변환: 대문자;
여백: 10px 0;
디스플레이: 인라인 블록;
불투명도: 0.65;
너비: 47%;
텍스트 정렬: 중앙;
글꼴 두께: 600;
문자 간격: 1px;
텍스트 장식: 없음;
}
.snip1 figcaption a:hover (
불투명도: 1;
}
.snip1 .프로필(
테두리 반경: 50%;
위치: 절대;
하단: 100%;
왼쪽: 25px;
Z-색인: 1;
최대 너비: 90px;
불투명도: 1;
상자 그림자: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1 .팔로우(
오른쪽 여백: 6%;
테두리 색상: #2980b9;
색상: #2980b9;
}
.snip1 h2 (
여백: 0 0 5px;
글꼴 두께: 300;
}
.snip1 h2 범위(
디스플레이: 블록;
글꼴 크기: 0.5em;
색상: #2980b9;
}
.snip1p(
여백: 0 0 10px;
글꼴 크기: 0.8em;
문자 간격: 1px;
불투명도: 0.8;
}
.snip1:hover:이전,
.snip1.hover:이전(
하단: 0;
상자 그림자: 0 0 0px 흰색;
-웹킷-전환-지연: 0초;
전환 지연: 0초;
}
$(".hover").mouseleave(
기능()(
$(this).removeClass("hover");
}
);
https://w-dog.ru/wallpapers/10/19/380923269777589.jpg - 사진 주소입니다 - 상단 배경
https://lh3.googleusercontent.com/a-/AAuE7mA2BanaiBKNuN8BR_ECcqksSRfEzyzRUwTkbQwKqw=s96-cc - 미리보기 이미지의 주소입니다. Google 프로필에 복사하거나 다른 아바타를 설정할 수 있습니다.
분홍색으로 표시된 부분에는 별명, 이름, 직업, 설명문을 기재하세요.
따라서 녹색으로 강조 표시된 부분은 버튼을 클릭할 때 전환이 발생하는 페이지의 주소입니다.
또한 프로필 카드의 기본 배경을 여러 곳에 색상으로 표시했습니다. #141414;
설정은 매우 기본적이어서 질문이 없을 것 같습니다. 그렇다면 댓글에 적어주세요. 그것을 알아 봅시다.
섹션에 완성된 위젯 코드를 설치합니다. 디자인 - HTML/자바스크립트 가젯블로그 사이드바에 있습니다. 그건 그렇고, 사용자가 저자를 즉시 알 수 있는 기회가 있을 때 상단에서는 나쁘지 않을 것이라고 생각합니다. 기분이나 시기에 따라 배경과 이미지를 쉽게 변경할 수 있습니다. 항상 새로운 것입니다. 글쎄, 그것은 당신에게 달려 있습니다.
모든 행운과 행운을 빕니다.
CSS는 의심할 여지없이 우리가 사용하는 가장 중요한 마크업 언어 중 하나입니다. HTML은 문서의 구조를 설명하지만 브라우저 버전에 따라 해당 동작을 예측할 수 없습니다. CSS는 페이지 표시의 모든 불일치를 수정하고 모양을 디자인할 수 있는 도구입니다.
단락을 사용하여 텍스트 숨기기이 기술은 회사 로고에 매우 유용합니다. 로고로 사진을 사용하는 경우가 대부분이지만, SEO의 경우 h1 태그에 회사명을 표시하는 것이 좋을 것 같습니다. 이 예제는 이를 구현하는 가장 좋은 방법입니다. 실제로 우리는 단순히 화면 밖에서 텍스트를 숨기고 대신 배경 이미지를 할당하는 것뿐입니다.
H1( text-indent:-9999px; margin:0 auto; width:400px; height:100px; background:transparent url("images/logo.jpg") 반복 없음 스크롤; )
파일 형식에 따른 링크 스타일 지정이 예는 사용자 경험을 향상시키는 것을 목표로 합니다. 인터넷에서 우리는 링크가 어디로 연결되는지 알지 못한 채 링크를 따라가는 경우가 많습니다. 다음 코드 조각은 링크 옆에 작은 아이콘을 표시하는 데 사용됩니다. 이러한 사진은 사용자에게 외부 링크, 이메일 주소, PDF 파일, 사진 등임을 알려줍니다.
/* 외부 링크 */ a( padding-right: 20px; background: url(external.gif) no-repeat center right; ) /* 이메일 */ a( padding-right: 20px; background: url(email.png ) 반복 없음 가운데 오른쪽; ) /* pdfs */ a( padding-right: 20px; background: url(pdf.png) 반복 없음 가운데 오른쪽; )
IE의 여러 줄 필드에서 스크롤 막대 제거Internet Explorer에는 내용이 지정된 크기 내에 있는 경우에도 여러 줄 필드에 스크롤 막대를 추가하는 성가신 습관이 있습니다. 이 결함은 다음 코드 줄을 사용하여 쉽게 수정할 수 있습니다.
텍스트 영역(overflow:auto;)
첫 글자오늘날 이는 블로그와 뉴스 사이트에서 매우 흔한 현상입니다. 구현하기가 얼마나 쉬운지, 그리고 오래된 브라우저에서는 성능이 얼마나 저하되는지 놀라게 될 것입니다.
P:첫 번째 글자( 표시:블록; 여백:5px 0 0 5px; 부동 소수점:왼쪽; 색상:#FF3366; 글꼴 크기:60px; 글꼴 계열:조지아; )
CSS 투명성투명성은 브라우저마다 다르게 할당되는 속성입니다. 다음 코드 조각을 사용하면 모든 브라우저에 투명도를 한 번에 할당할 수 있습니다.
투명( 필터:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; 불투명도: 0.5; )
Eric Meyer의 CSS 재설정실제로 Eric Meyer가 제안한 CSS-reset은 이미 널리 사용되는 표준이 되었습니다. 많은 유명 개발자들이 적용했기 때문에 품질을 확신할 수 있습니다.
Html, 본문, div, 범위, 애플릿, 개체, iframe, h1, h2, h3, h4, h5, h6, p, 인용문, 사전, a, abbr, 약어, 주소, big, cite, 코드, del, dfn, 여자 이름, 세례반, img, 인, kbd, q, s, samp, 작은, 스트라이크, 강한, 보결, 저녁을 먹다, tt, var, b, u, i, 센터, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td ( 여백: 0; 패딩: 0; 테두리: 0; 윤곽선: 0; 글꼴 크기: 100%; 수직 정렬 : 기준선; 배경: 투명; ) 본문( 줄 높이: 1; ) ol, ul( 목록 스타일: 없음; ) blockquote, q( 따옴표: 없음; ) blockquote:before, blockquote:after, q:before, q :after ( content: ""; content: none; ) /* 포커스 스타일을 정의하는 것을 기억하세요! */ :focus ( 개요: 0; ) /* 어떻게든 삽입물을 강조 표시하는 것을 잊지 마세요! */ ins ( text-꾸밈: none; ) del ( text-꾸밈: line-through; ) /* 테이블에는 여전히 마크업에 "cellspacing="0""이 필요합니다. */ table ( border-collapse:collapse; border-spacing : 0;
이미지 프리로더때로는 원하는 요소에 액세스할 때 지연과 깜박임을 없애기 위해 이미지를 미리 로드하는 것이 유용할 때도 있습니다.
Div.loader( background:url(images/hover.gif) no-repeat; background:url(images/hover2.gif) no-repeat; background:url(images/hover3.gif) no-repeat; margin-left: -10000px)
버튼을 위한 간단한 CSS 스프라이트배경 이미지가 포함된 버튼이나 링크를 갖는 것이 일반적이며, 사용자 경험을 향상시키기 위해 이러한 요소에 추가 효과가 적용되는 경우가 많습니다. 이러한 효과 중 하나는 마우스 오버 버튼 표시입니다. 스프라이트를 사용하면 마우스를 버튼 위로 가져갈 때 배경 이미지가 표시되도록 background-positon 속성을 지정된 값으로 변경하여 이 효과를 구현할 수 있습니다. 간단하지만 효과적인 솔루션입니다.
A ( 디스플레이: 블록; 배경: url(sprite.png) 반복 없음; 높이: 30px; 너비: 250px; ) a:hover ( 배경 위치: 0 -30px; )
구글 폰트 API얼마 전 Google은 웹 개발자가 페이지에서 새로운 비표준 글꼴을 다운로드하고 사용할 수 있는 훌륭한 리소스를 구현했습니다. 다운로드할 수 있는 글꼴 옵션도 볼드체, 이탤릭체 등이 있습니다. Google의 컬렉션은 여전히 제한되어 있지만 사용할 수 있는 글꼴의 종류는 상당히 많습니다. 먼저, 필요한 글꼴 이름과 변형이 포함된 동적으로 생성된 CSS 파일을 포함시킨 다음 평소대로 CSS에서 글꼴 이름을 사용하세요. Google Font API에 대한 자세한 내용을 읽을 수 있습니다.
Inconsolata:italic|Droid+Sans"> 본문( 글꼴 계열: "Tangerine", "Inconsolata", "Droid Sans", serif; 글꼴 크기: 48px; )
다양한 브라우저에 대한 해킹때로는 특정 브라우저의 버그를 수정하는 것이 유용할 수 있으며, 조건부 주석이 항상 이에 대한 최선의 해결책은 아닙니다. Chris Coyier의 이 브라우저 해킹 목록은 간단한 CSS를 사용하여 특정 브라우저에 속성을 할당하는 데 도움이 됩니다.
/* IE 6 */ * html .yourclass ( ) /* IE 7 */ *+html .yourclass( ) /* IE 7 및 최신 브라우저 */ html>body .yourclass ( ) /* 최신 브라우저(IE 7 아님) */ html>/**/body .yourclass ( ) /* Opera 9.27 이하 */ html:first-child .yourclass ( ) /* Safari */ html body:last-child .yourclass ( ) /* Safari 3+ , Chrome 1+, Opera 9+, Fx 3.5+ */ body:nth-of-type(1).yourclass ( ) /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:first -of-type .yourclass ( ) /* Safari 3+, Chrome 1+ */ @media 화면 및 (-webkit-min-device-pixel-ratio:0) ( .yourclass ( ) )
고정 지하항상 화면 하단에 붙어 있는 바닥글을 만드는 것이 어려운 작업이라고 생각할 수도 있습니다. 그러나 간단한 지하실을 원한다면 전혀 어렵지 않습니다. 여기서는 약간의 IE6 해킹을 사용해야 하지만 그 외에는 매우 쉽습니다.
#footer ( 위치: 고정; 왼쪽:0px; 하단:0px; 높이:30px; 너비:100%; 배경:#999; ) /* IE 6 */ * html #footer ( 위치:절대; 상단:표현(( 0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight: document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop: document.body.scrollTop)) +"px");
이미지 회전이미지 회전은 특히 회전된 새 이미지를 로드하는 대신 사용할 수 있는 경우 매우 유용할 수 있습니다. 화살표에 하나의 이미지만 사용하려고 하는데 페이지에 여러 개의 이미지가 있고 모두 서로 다른 방향을 향하고 있다고 가정해 보겠습니다. 문제에 대한 해결책은 다음과 같습니다.
Img.flip ( -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); 변환: scaleX(-1); 필터: FlipH; - ms-필터: "FlipH" ;
클리어픽스얼마 전 누군가가 문서에 추가 마크업을 추가하지 않고 부동 소수점 스트림을 제거해야 한다고 결정했습니다. 이 결정의 결과로 부동 요소를 포함하는 컨테이너에 적용하여 요소를 지울 수 있는 클래스가 만들어졌습니다. 이것은 오늘날 매우 편리하고 널리 사용되는 방법입니다.
Clearfix:after ( visible: 숨김; 디스플레이: 블록; 글꼴 크기: 0; 내용: " "; 지우기: 둘 다; 높이: 0; ) .clearfix ( 디스플레이: inline-block; ) /* 주석 처리된 백슬래시 해킹 시작 */ * html .clearfix ( height: 1%; ) .clearfix ( display: block; ) /* 주석 처리된 백슬래시 해킹 닫기 */
둥근 모서리최신 브라우저에 CSS3가 점진적으로 채택되면서 둥근 모서리를 만드는 것이 매우 쉬워졌습니다. 불행하게도 버전 8을 포함하여 IE에서는 아직 CSS3에 대한 지원이 없지만 IE9에는 추가될 예정입니다.
Round( -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* 미래 보장 */ -khtml-border-radius: 10px; /* 이전 Konqueror 브라우저의 경우 */ )
스타일 재정의CSS의 !important에 대해 모르는 사람들은 CSS가 강력하고 사용하기 쉬운 도구이기 때문에 계속해서 저를 놀라게 합니다. 매우 간단하게, 끝에 !important가 있는 규칙은 CSS 파일이나 선 스타일의 해당 요소에 적용된 동일한 규칙을 재정의합니다.
P(글꼴 크기:20px !중요; )
글꼴Font-face는 IE6가 최신 브라우저로 간주되던 시절부터 있었지만 작년까지는 널리 사용되지 않았습니다. 이 속성은 이제 최신 브라우저에서 잘 지원되며 프로젝트에서 안전하지 않은 글꼴을 사용할 수 있는 좋은 방법을 제공합니다. 시간을 절약하려면 특별한 Font Squirrel 글꼴 페이스 생성기를 사용할 수 있습니다.
@font-face ( 글꼴 계열: "Graublau Web"; src: url("GraublauWeb.eot"); src: local("☺"), url("GraublauWeb.woff") 형식("woff"), url ("GraublauWeb.ttf") 형식("truetype")
사이트 중심 맞추기일반적인 디자인 기법은 사이트를 수평으로 중앙에 배치하는 것입니다. 이는 구현하기가 매우 쉽습니다.
IE의 최소 높이이 예는 최소 높이를 설정할 때 IE에서 간단하지만 성가신 버그를 수정합니다. 일반적으로 IE는 높이를 최소 높이로 해석하므로 IE의 높이가 자동으로 설정되지 않은 경우 다음 트릭을 사용하면 이 버그를 수정할 수 있습니다.
상자(최소 높이:500px; 높이:자동 !중요; 높이:500px; )
사진 업로드이 이미지 로딩 효과는 모든 콘텐츠가 로드될 때까지 프리로더를 표시하여 Ajax 로딩을 시뮬레이션합니다. 이 솔루션은 크고 느리게 로드되는 이미지에 적합합니다.
Img( 배경: url(loader.gif) no−repeat 50% 50%; )
수직 센터링이 작은 코드 조각을 사용하면 추가 마크업을 사용하지 않고도 컨테이너의 내용을 세로 중앙에 배치할 수 있습니다. 여러분이 해야 할 일은 컨테이너를 테이블 셀로 렌더링한 다음 수직 정렬 속성을 값으로 설정하는 것뿐입니다.
컨테이너( 최소 높이: 10em; 디스플레이: 테이블 셀; 수직 정렬: 중간; )
컷 만들기먼저 컷인이 무엇인지 알아 보겠습니다. 사이드바는 일반적으로 뉴스 자료 및 잡지 사이트에서 기사 내부에 있는 작은 텍스트 블록 형태로 발견되며, 때로는 사람들의 의견이나 인용문을 포함하기도 합니다. 삽입은 만들기가 매우 쉽고 올바르게 사용하면 기사의 사용자 경험을 크게 향상시킬 수 있다는 사실을 알게 되어 기쁠 것입니다.
인용문(너비: 300px; 부동 소수점: 오른쪽; 여백: 5px; 글꼴 계열: Georgia, "Times New Roman", Times, serif; 글꼴: 기울임꼴 굵게 #ff0000 ; )
텍스트 선택브라우저에서 선택한 텍스트의 색상을 변경할 수 있다는 사실을 모든 사람이 아는 것은 아닙니다. 여기에는 두 개의 선택기만 필요합니다.
::선택(색상: #000000; 배경색: #FF0000; ) ::-moz-선택(색상: #000000; 배경: #FF0000; )
페이지 나누기 추가이 예에서는 인쇄 시 사용자 인터페이스를 개선하는 것을 목표로 합니다. 예를 들어, 기사를 인쇄할 때 기사의 텍스트와 설명을 분리하여 별도의 페이지로 이동하는 것이 유용할 수 있습니다. 주석 블록에 class.page-break를 추가하면 인쇄 시 모든 주석이 별도의 페이지에 표시됩니다. 일반적으로 이 클래스는 사이트의 어느 곳에서나 사용할 수 있습니다.
페이지 나누기( 페이지 나누기 전:항상; )
CSS 변환을 사용할 때 Safari 페이지의 일부 요소가 신비롭게 속성을 변경한다는 사실을 발견한 것은 이번이 처음이 아닙니다. 다른 브라우저에서는 이런 일이 훨씬 덜 자주 발생합니다.
이러한 아티팩트는 변환이 :hover 의사 클래스에 있을 때 특히 눈에 띕니다. 즉, 마우스를 요소 위로 가져갈 때 트리거됩니다. 내 경우에는 .btn 버튼 위로 마우스를 가져갈 때 버튼을 확대하면 인접한 블록의 텍스트 다듬기 유형이 영구적으로 변경되었습니다.
Btn ( 전환: 모든 .2s easy-in-out; ) .btn:hover ( 변환: scale(1.1); )
이 문제는 렌더링 리소스 부족과 관련이 있으며 해결하기가 매우 쉽습니다.
3D 번역문제를 해결하는 가장 쉬운 방법은 CSS의 2D 애니메이션에 대해 기본적으로 비활성화되어 있는 하드웨어 가속을 활성화하는 것입니다. 이를 위해 빈 3D 애니메이션을 생성하면 됩니다.
웹킷 변환: 번역3d(0,0,0);
그게 다지만 그것은 목발입니다.
바뀔 것이다CSS에는 상대적으로 새롭고 아직 잘 알려지지 않은 속성인 will-change가 있는데, 이는 요소에 대한 향후 변경 사항에 대한 정보를 브라우저에 미리 제공합니다. 예를 들어, 요소가 변환될 경우 브라우저에 이에 대해 경고하여 에너지를 절약할 수 있습니다. 위 버튼의 경우 다음과 같습니다.
Btn( 전환: 모든 .2s easy-in-out; 변경 예정: 변환; )
여러 매개변수를 변경하려는 경우 쉼표로 구분하여 순차적으로 지정할 수 있습니다. 예를 들어 투명도가 변경되는 변환의 경우:
변경 예정: 변환, 불투명도;
이런 방식으로 브라우저는 과도한 처리에 미리 대비하고 리소스 사용을 최적화할 수 있습니다. 이렇게 하면 페이지에 다양한 부작용이 나타나는 것을 피할 수 있습니다.
내 전보를 구독하고 사이트에 없는 자료를 포함하여 새로운 자료를 가장 먼저 받아보세요.
