TAG
CSS
Result
Run
License
<div class="linear-basic" data-type="기본형"></div> <div class="linear-color-rate" data-type="색상 비율이 적용된 그라디언트"></div> <div class="linear-angle" data-type="방향으로 각도가 적용된 그라디언트"></div> <div class="linear-direction" data-type="방향이 적용된 그라디언트"></div> <div class="linear-diagonal" data-type="대각선 방향이 적용된 그라디언트"></div> <div class="linear-transparent" data-type="투명도로 적용된 그라디언트"></div>
div { width: 150px; height: 100px; float: left; margin: 50px 20px 20px; position: relative; } div::after { content: attr(data-type); position: absolute; display: inline-block; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; } div:nth-of-type(odd)::after { top: -20px; } div:nth-of-type(even)::after { bottom: -20px; } div::before { content: attr(class); position: absolute; left: 10px; right: 10px; top: 10px; text-shadow: 0 0 4px #FFF; } /* 벤더 프리픽스를 적용한 경우 */ .linear-basic { background: red; /* 그라디언트를 지원하지 않는 경우 */ background: -webkit-linear-gradient(#FF0000, #FFFF00); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#FF0000, #FFFF00); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#FF0000, #FFFF00); /* For Firefox 3.6 to 15 */ background: linear-gradient(#FF0000, #FFFF00); /* 표준(마지막에 작성) */ } .linear-color-rate { background: linear-gradient(#FF0000 0%, #FFFF00 30%); } .linear-angle { background: linear-gradient(-90deg, #FF0000, #FFFF00); } .linear-direction { background: linear-gradient(to right, #FF0000, #FFFF00); } .linear-diagonal { background: linear-gradient(to bottom right, #FF0000, #FFFF00); } .linear-transparent { background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)), url("http://resrc.devdic.com/img/bysize/below_200/01.png"); }
Console
expand_less
License
License
by DevDic
Close