실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.
총 27건의 글
position:sticky를 이용해 헤더나 타일 요소를 스크롤 중 화면에 고정시키는 방법을 보여주는 CodePen 예제다. 스크롤 위치가 top 기준점을 지나기 전에는 일반 문서 흐름을 유지하다가, 지나간 뒤에는 화면에 붙어 따라오는 sticky 동작을 JavaScript 없이 CSS만으로 구현한다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
JavaScript 없이 순수 CSS만으로 3단 폭포수(벽돌형) 레이아웃을 구현하는 방법이다. column-count: 3으로 콘텐츠를 3개 열로 나누고 break-inside: avoid를 적용해 항목이 잘리지 않게 하거나, grid 템플릿과 함께 사용해 높이가 서로 다른 이미지·카드가 자연스럽게 채워지도록 배치하는 HTML·CSS 예제를 제공한다.
.container {
display: flex;
flex-flow: column wrap;
align-content: space-between;
/* 容器必须有固定高度
* 且高度大于最高的列高 */
height: 660px;
/* 非必须 */
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
width: 60%;
margin: 40px auto;
counter-reset: items;
}
.item {
width: 32%;
/* 非必须 */
position: relative;
margin-bottom: 2%;
border-radius: 3px;
background-color: #a1cbfa;
border: 1px solid #4290e2;
box-shadow: 0 2px 2px rgba(0,90,250,0.05),
0 4px 4px rgba(0,90,250,0.05),
0 8px 8px rgba(0,90,250,0.05),
0 16px 16px rgba(0,90,250,0.05);
color: #fff;
padding: 15px;
box-sizing: border-box;
}
/* 仅用于打印数字 */
.item::before {
counter-increment: items;
content: counter(items);
}
/* 将内容块重排为3列 */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n) { order: 3; }
/* 强制换列 */
.container::before,
.container::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}<div class="container">
<div class="item" style="height: 140px">1</div>
<div class="item" style="height: 190px">2</div>
<div class="item" style="height: 170px">3</div>
<div class="item" style="height: 120px">4</div>
<div class="item" style="height: 160px">5</div>
<div class="item" style="height: 180px">6</div>
<div class="item" style="height: 140px">7</div>
<div class="item" style="height: 150px">8</div>
<div class="item" style="height: 170px">9</div>
<div class="item" style="height: 170px">10</div>
</div>CSS @keyframes를 이용해 텍스트 색상이 번지듯 변하는 애니메이션 예제다. h2 요소에 animation: spread 1s ease-in-out infinite alternate를 적용하고, @keyframes spread의 to 단계에서 색상을 파란색에서 빨간색으로 전환한다. 제목 텍스트에 간단히 적용할 수 있는 전체 코드를 제공한다.
<style type="text/css">
H2{text-align:center; font-size:5em; color:blue; animation:spread 1s ease-in-out infinite alternate }
@keyframes spread{
to{
color:red;
}
}
</style>
<h2>미래를 향한 기업</h2>CSS 가상 요소 ::after와 ::before의 content 속성 값에 줄바꿈을 넣는 방법이다. content 속성에 줄바꿈 문자 \A 또는 \a를 사용하고, 반드시 white-space: pre 속성을 함께 지정해야 줄바꿈이 정상적으로 표시된다. 적용 예제 코드를 함께 포함한다.
换行符为“\A”或者“\a”都可以。
不要缺少white-space: pre
:before {
content: "本站不支持IE内核浏览器。\A请使用其他浏览器访问本站。";
white-space: pre;
}CSS 的 mix-blend-mode 与 background-blend-mode 实现图片与背景合成的方法。整理了 multiply(正片叠底)、screen(滤色)、overlay(叠加)、darken、lighten、difference、hue、saturation 等全部混合模式，并说明 mix-blend-mode 作用于 img 元素、background-blend-mode 作用于 div 背景，两者使用场景不同。
mix-blend-mode: normal; //正常
mix-blend-mode: multiply; //正片叠底
mix-blend-mode: screen; //滤色
mix-blend-mode: overlay; //叠加
mix-blend-mode: darken; //变暗
mix-blend-mode: lighten; //变亮
mix-blend-mode: color-dodge; //颜色减淡
mix-blend-mode: color-burn; //颜色加深
mix-blend-mode: hard-light; //强光
mix-blend-mode: soft-light; //柔光
mix-blend-mode: difference; //差值
mix-blend-mode: exclusion; //排除
mix-blend-mode: hue; //色相
mix-blend-mode: saturation; //饱和度
mix-blend-mode: color; //颜色
mix-blend-mode: luminosity; //亮度
mix-blend-mode: initial; //初始
mix-blend-mode: inherit; //继承
mix-blend-mode: unset; //复原
这里就是div自己的背景图片和自己的背景颜色混合了，实现了正片叠低。注意只有一个元素div，这个div有背景图片和背景颜色。
background-blend-mode: multiply;是div属性，mix-blend-mode: multiply; 是img的属性，两个东西有差别
프로젝트 문의 및 견적 요청은 언제든 환영합니다.