image-rendering:-webkit-optimize-contrast;


이미지가 뿌옇게 보이는 현상을 좀 더 샤프하게 보이게 함

글쓰고 저장

css3 ie support 정리

2017. 4. 11. 11:06에 씀

border-radius ie9


text-shadow ie10

box-shadow ie9


background-size ie9

background-color rgba ie9


2d transform(translate, rotate, scale, skew) ie10, ie9(with prefix -ms-)

3d transform(rotateX, rotateY, rotateZ) ie10

transition ie10

@keyframes ie10

animation ie10






글쓰고 저장

cursor 속성값에 URL 사용

2016. 12. 5. 16:00에 씀
Gecko가 지원하는 모든 이미지 포맷을 사용할 수 있다. 

 cursor: [,]* keyword; 



형식으로 원하는 이미지를 순차적으로 넣은 후 맨 마지막에는 꼭 auto나 pointer처럼 기본적으로 지원하는 커서값을 넣어야한다.

예를 들면 다음처럼 쓰면 된다. 


cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;



css3에서는 다음처럼 추가적으로 속성값에 좌표값을 지원한다. 


cursor: url(foo.png) 4 12, auto;



IE에서는 cur, ani 포맷만 지원한다. 


curosr: url(foo.cur), pointer, url(bar.cur), auto; 



그러나 다른 브라우저에서는 지원안하기때문에, 다음처럼 다른 포맷이미지와 함께 사용하면 될듯하다. 


div{ cursor: url(smiley.gif),url(myBall.cur),auto;}



참고 : https://developer.mozilla.org/ko/docs/Web/CSS/cursor/Using_URL_values_for_the_cursor_property

  http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=url(smiley.gif),url(myBall.cur),auto

글쓰고 저장

// 적용 전

<ol>
    <li>One</li> 
    <li>Two</li>
</ol> 

<!-- 
    result : 
        1. One
        2. Two
-->

// remove dot CSS

ol { 
    counter-reset: item;
    list-style-type: none;
}
li { display: block; }
li:before { 
    content: counter(item) "  "; 
    counter-increment: item 
}

// 적용 후

<ol>
    <li>One</li> 
    <li>Two</li>
</ol> 

<!-- 
    result : 
        1 One
        2 Two
-->


글쓰고 저장

Grid CSS : display:flex, display:box

2016. 6. 24. 09:21에 씀

특정 영역안의 여러 박스들을 세로 또는 가로 정렬을 해주는 속성으로, 일종의 float, 또는 table, table-cell과 비슷하다고 생각하면 될 것같다.


display: box - is a version of 2009

display: flexbox - is a version of 2011

display: flex - is the actual version


현재 최신버전은 display:flex이지만, 버전이 낮을 경우 안먹히기때문에 다음처럼 써주는 것이 좋다.

(안드로이드 4.4.2버전에서 먹히지 않았다.)


div{
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
}


참고 : 

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox




글쓰고 저장
« PREV : 1 : 2 : 3 : NEXT »