::selection { background-color: #f16a16; color:#fff; } /* IE9+, Opera, Goolde, Chrome, Safari */ ::-moz-selection { background-color: #f16a16; color:#fff; } /* Firfox */ Browser Support The ::selection selector is supported in IE9+, Opera, Google Chrome and Safari. Firefox supports an alternative, the ::-moz-selection. Link1 : https://developer.mozilla.org/en-US/docs/Web/CSS/::selection Link2 : http://www.w3schools.com/cssref/sel_selection.asp
DIV <div class=”app_photo”> <img src=”imgs/photo_no.gif” /> <div class=”btn”><a href=”#”><span class=”s-green”>추가</span></a></div> </div> CSS .app_photo { width:166px; margin: 10px auto 20px auto; border: 5px solid #bec4d0; border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px; } .app_photo img { width:100%; height: 146px; border-radius:25px;-webkit-border-radius:25px;-moz-border-radius:25px; } .app_photo .btn { position: absolute; margin: 0 auto; margin-top:-35px; width:155px; } .app_photo .btn a { width: 40px; height:40px; display: block; margin-left: […]
http://stackoverflow.com/questions/82391/should-tables-be-avoided-in-html-at-any-cost#82402 ——- It is advisable to use tables in HTML pages (now that we have CSS)? What are the applications of tables? What features/abilities does tables have that are not in CSS? ——- I guess I’m not in the majority here, but I still see a lot of use for tables in HTML. Of course, […]
@media only screen and (min-width: 960px) and (max-width: 1140px) { @media only screen and (min-width: 767px) and (max-width: 960px) { @media only screen and (min-width: 480px) and (max-width: 767px) { @media only screen and (max-width: 480px) { @media only screen and (max-width: 320px) { @media only screen and (max-width: 320px) { /* disable webkit […]
국내에서 자주 쓰는 폰트 font-family: 나눔고딕, ‘NanumGothic’, ‘NanumGothicWebB’, ‘맑은 고딕’, “Malgun Gothic’, 돋움, 굴림, Dotum, Gulim, sans-serif; font-size:1em;/*16px*/ letter-spacing:-1px; line-height:1.6;
모바일 키보드 키패드 input type 및 앵커 기본 키보드 <input type=”text”/> URL 키보드 <input type=”url”/> 이메일 키보드 <input type=”email”/> 숫자 키보드 <input type=”text” pattern=”[09]*”/> * 안먹힘 <input type=’number’ /> 확인요망 [ 영문 첫글자 대문자 모드 없애기 ] <input type=”text” autocapitalize=”off” /> [ 자동완성 사용 안하기 ] <input type=”text” autocomplete=”off” /> [ 자동 오타교정 사용 […]
http://reeddesign.co.uk/test/points-pixels.html Approximate Conversion from Points to Pixels (and Ems and %) Points Pixels Ems Percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5% 8pt 11px 0.7em 70% 9pt 12px 0.75em 75% 10pt 13px 0.8em 80% 10.5pt 14px 0.875em 87.5% 11pt 15px 0.95em 95% 12pt 16px 1em 100% 13pt 17px 1.05em 105% […]
Box-shadow, one of CSS3′s best new features http://anandgraphic.blogspot.kr/2012/06/box-shadow-one-of-css3s-best-new.html Box-shadow Shadow-outer #example1 { -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888; } This property will form the box shadow outside. And it will works on Firefox, Safari/Chrome, Opera and IE9. Examples: Example A shows a shadow offset to […]
CSS generators for fast web page styling 1. http://www.colorzilla.com/gradient-editor/ 2. http://www.css3factory.com/linear-gradients/ 3. http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html 4. http://www.css3maker.com/ 5. http://www.css3.me/ Gradient Guide 1. http://louis-sawtell.com/content/tutorial-css-3-gradient-border-radius-box-shadow-reflect Firefox background:-moz-linear-gradient( center top, green 0%, green 50%, blue 50%, red 100% ); Webkit (chrome & safari) background:-webkit-gradient( linear, left top, left bottom, from(green), color-stop(0.5,green), color-stop(0.5,blue), to(red) ); Border-radius /* set the radius of each corner */ boder-radius:5px; […]