CSS11 CSS 스프라이트와 steps를 사용하여 애니메이션 이미지를 만들자 CSS에서 움직이는 애니메이션은 나 자신 아직 잘 다룰 않은 특성을 많이 자고 있습니다. 그 중의 하나가 steps라는 특성이었습니다. 지금까지 잘 사용하고 매끄러운 동작이 아니라 단계별로 요소를 이동할 수 있습니다. 실제로 어떤 상황에서 사용할 수 있을까요? 이번에는 그런 steps특성에 초점을보십시오. steps 작성 방법 steps은 animation과 keyframes등록 정보와 함께 이용합니다. steps()괄호 안에는 몇 단계를 거쳐 동작시킬 것인지를 설명했다. 예를 들어 5 단계로 변화 시킨다면 steps(5)로 설명합니다. .element { animation: img-move 5s steps(5);}@keyframes img-move { to { transform: translateX(5.. 2017. 3. 7. CSS Shapes에서 텍스트가 이미지를 감싸도록 레이아웃을 표현 CSS Shapes는 CSS Shapes를 사용하면 원형이나 다각형 이미지에 맞게 주위 float에서 나란히하고있는 텍스트를 둘러싸 배치 할 수 있습니다. 잡지와 인쇄 광고 등에서 볼 레이아웃의 하나라고 보시면 됩니다. 이것이 Web에서도 표현할 수있게되면 디자인의 폭이 급격히 확산 것이 넓어지지 않을지 생각해봅니다. 크롬, 사파리, 오페라 이렇게 지원됩니다. 긍정적 원형 - circle 원형에 텍스트를 둘러싸는 원형 요소 shape-outside: circle();를 제공합니다. 여기에서는 이미지 주위에 텍스트를 둘러싸시켜 봅시다. 文章が入ります……！ img { float: right; border-radius: 100%; -webkit-shape-outside: circle(); shape-outsi.. 2017. 3. 7. css content 특성을 다뤄보자. CSS의 잔기술이나 조각 집 따위를보고 있으면 가끔 볼 content프로퍼티. "그러고 보니이 녀석 도대체 누구 ... !?」라고 생각한 분도 있을지도 모르기 때문에 새삼 다시 content프로퍼티의 소개를하려고합니다. content 프로퍼티 에 대해서 알아보자. content특성은 요소의 전후에, :before또는 :after라는 의사 요소를 사용하여 텍스트 나 이미지 등의 콘텐츠를 삽입 할 때 사용합니다. 가짜 요소는 HTML 등의 문서에 설명되지 않은 요소를 CSS에 의해 새롭게 생성 된 가상의 요소입니다. Web 크리에이터 상자에서도 지난 기사 " 예전에는 JavaScript를 사용하고 있었지만, 지금은 CSS만으로 구현할 수있는 10의 잔기술 "과 " 경력이나 회사의 연혁 페이지에! 간단한 CS.. 2017. 3. 7. 이전 1 2 3 다음