본문 바로가기

퍼블리싱

(179)
마음에 드는 버튼스타일 https://codepen.io/seanfree/pen/NpMevj 여기서 가져왔당 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 Clockwise Horizontal Vertical Both Counter-clockwise Horizontal Vertical Both Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 ..
placeholder의 색상 바꾸기 이렇게 기본적인것 바꿀수 있는거 너무쬬아 ! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 ::-webkit-input-placeholder { /* Chrome */ color: red; } :-ms-input-placeholder { /* IE 10+ */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; opacity: 1; } :-moz-placeholder { /* Firefox 4 - 18 */ color: red; opacity: 1; } Colored by Color Scripter cs
display: table display:table은 그말 그대로, table로 보이도록 하는것이다. 만약 distplay: table-cell; 을 가지고 있다면, 그 요소들은 블럭 요소라도 한 행에 위치하고, 폭과 높이가 동일하게 된다. td처럼 셀을 만드는것이다. 가로로 정렬하야하는 요소에 table-cel을 부면 float 하지 않아도 정렬할수 있다. 그리고, 세로로 가운데 정렬도 간단하다. HTML 1 2 3 4 5 6 7 세로 가운데 정렬 cs CSS 1 2 3 4 5 6 Colored by Color Scripter cs
(링크) 버튼 여러가지 모음 https://nanati.me/css-button-design/
HTML,CSS를 이용한 hover 이펙트 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 Bottom to Top Hi, this is a simple example =D Top to Bottom Hi, this is a simple example =D L..
텍스트 드래그 스타일링 HTML 1 산야에 살 찬미를 창공에 관현악이며, 쓸쓸하랴? 크고 새가 어디 못하다 아름다우냐? 피어나기 거선의 속에 보배를 석가는 눈이 보이는 아름다우냐? 용기가 현저하게 이 철환하였는가 풍부하게 것이다. 주며, 가치를 관현악이며, 심장의 청춘의 위하여 쓸쓸하랴? 꽃이 속잎나고, 착목한는 위하여, 예가 있을 위하여 관현악이며, 뿐이다. 품으며, 착목한는 그들은 칼이다. cs CSS 1 2 3 4 5 6 7 8 9 10 11 ::selection { color: white; background-color: #ff7473; } ::-moz-selection /* Firefox needs an extra attention for this */ { color: white; background-color: #f..
flexbox CSS로 레이아웃을 잡는 방법, IE 11부터 원활하게 적용되며, -ms-를 붙일경우 IE10에서도 적용가능. 아직 flexbox에 대해서는 제대로 공부하지 못했다 ㅠ.ㅠ flexbox를 이용한 중앙정렬이라는데, .vertical-container { height: 300px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } http://daumui.tistory.com/44 이 블로그를 보면서 많이 공부해야겠다.
배경'만' 투명도 조절 HTML 1 2 3 기아 타이거즈가 웬일로 잘한다 했더니 오늘 뚜드려 맞았구나...8ㅅ8.... Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 .rgba { width: 100%; max-width: 480px; margin: 1rem auto; text-align: center; padding: .6rem; background-color: transparent; background-color: rgba(200,200,200,0.2); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99dddddd,endColorstr=#99dddddd); -ms-filter: "progid:DXI..
텍스트의 각도 변경하기 (transform) HTML 1 2 3 4 5 12 September 2016 Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 .example-date { width: 115px; background-color: #D09E88; position: relative; padding: 45px 5px 0; margin: 0 auto; } .example-date .example-day { font-size: 45px; line-height: 45px; position: absolute; left: 5px; top: 0px; } .example-date .example-month { text-..
테두리 여러개 그리기 id가 borders라는 div에 적용하는 CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 #borders { position:relative; z-index:1; padding:30px; border:5px solid #f00; background:#ff9600; } #borders:before { content:""; position:absolute; z-index:-1; top:5px; left:5px; right:5px; bottom:5px; border:5px solid #ffea00; background:#4aa929; } #borders:after { content:""; pos..
reset CSS css의 기본적인 값을 reset. 가장 보편적으로 쓰이는걸 가져오긴 했는데, 이정도까지 다 쓸 필요는 없다. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:..
각종 미디어쿼리! /* 스마트폰 (가로・세로) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* 스마트폰 (가로용) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /*스마트폰 (세로용) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (가로・세로) ----------- */ @media only screen and (min-device-width : 768px) and (max-d..
float를 해제하자, clearfix Float, 레이아웃 잡을때 마법의 요소다. 그런데 float를 사용하면 '없는 영역' 으로 간주하여 부모 요소의 height가 없어져버리는 경우가 있다..^^ 물론 부모 요소에 고정된 height값을 주면 바로 될 일 이지만 지금같은 반응형 시대에서 height에 고정값을 주는일은 뭐다?= 있을수 없는일... 고로 부모요소에 height를 주는 대신 float로 인한 레이아웃 오류를 잡을수 있는 clearfix를 하면 된다. CSS 4 5 6 7 8 9 10 11 12 13 14 15 16 .clearfix{ *zoom:1; } .clearfix:after{ content: ''; display: block; clear: both; } cs 먼저 .clearfix라는 클래스를 정의해주자. 그리고 나서 ..
항상 화면 하단에 고정되는 footer HTML 1 2 3 4 브라우저 아래에 고정되는 footer부분 Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 #footer { position:fixed; left:0px; bottom:0px; height:60px; width:100%; background:#EE7785; color: white; } #footer p { text-align: center; } cs
min-height 크로스브라우징 1 2 3 4 5 6 .minheight { min-height: 240px; height:auto !important; height: 240px; background: #D499B9; } cs
투명도 설정 크로스브라우징 HTML 1 2 안녕하세요 :D Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 .transparent{ width: 100%; max-width: 368px; height: 261px; margin: 0 auto; } .transparent img{ background: #f2f2f2; filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */ } Colored by Color Scri..
텍스트의 첫 글자만 크게하기 HTML 1 2 3 4 5 6 7 Lorem ipsum dolor sit amet, mei assum gloriatur in, cu pro labore equidem expetendis. His tota facilis maluisset no, ius et dolorum conclusionemque, nec agam liber nusquam ei. Eum offendit placerat ut, sit eripuit corpora moderatius at. An qui possim dolorem persequeris, pri incorrupte eloquentiam ullamcorper ei. Ut amet posse cum, labitur definitiones ea vix. Colored by Color..
텍스트/이미지 상하좌우 중앙정렬 HTML과 CSS만을 이용하여 상하좌우 중앙정렬 하기. * 텍스트 HTML 1 2 3 4 5 6 7 8 9 10 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Colored by Color Scripter cs XC - CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 .box{ width: 100%; max-width: 640px; height: 240px; margin: 2rem auto; background: #eee; } .vc{ text-align: center; position: rela..
그라데이션, 마우스오버효과 button에 css만을 이용하여 그라데이션 효과와 마우스 오버 효과를 넣는 코드! HTML 1 2 3 cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 div { width: 320px; max-width: 100%; margin: 0 auto; padding: 2rem; } button { width: 320px; max-width: 100%; height: 240px; margin: 0 auto; background-image: linear-gradient(#df3b65, #2B2E4A); background-size: auto 200%; background-position: 0 100%; transition: background-posit..

728x90