3월, 2018의 게시물 표시

CSS 그림자

이미지
홈피 작업하다보면 언제나 디자인이 필수로 필요하다. 우리나라 속담에 "바늘 가는 데 실 간다"라는 말이 있듯이 프로그램 가는데 디자인은 항상 따라다닌다. 머 디자인 가는데 프로그램이 따라가는게 맞는것일 수도.... 요즘은 CSS로 디자인을 많이 한다. 특히 그림자는 포토샵보다는 CSS로 하는게 쉽다. 지금 소개할 오픈소스는 여러가지 그림자 효과를 표현한 소스이다. 오픈하신 개발자님들에게 항상 고마움을 느낀다. CSS body {   background: #ccc;   text-align: center;   font:75% "Lato", "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif; } .box {   margin:0 auto 40px;   width:300px;   height: 150px;   position: relative;   box-shadow:0 2px 10px -5px black;   background:white;      &:before,&:after  {     content:'';     position: absolute;     width:45%;     background:black;     box-shadow:0 0 16px 8px;     height:10px;     bottom:8px;     z-index:-1;     opacity:.333;   }   &.both {     &...

[OpenSource] CSS Masonry 박스

이미지
참으로 CSS의 발전은 날로 빨라지고 있다. Simple Masonry Layout With Flexbox는 JQuery Masonry 와 같은 기능 구현한 CSS 오픈소스다. 한마로 표현하자면, GOOD이다. 소스 또한 심플하다. CSS 소스 body {    margin: 0; background: #131212;   }  div#masonry {    display: flex;    flex-direction: column;    flex-wrap: wrap;   height: 100vw;   max-height: 800px;   font-size: 0;   } div#masonry img {     width: 33.3%;   transition: .8s opacity; }  div#masonry:hover img { opacity: 0.3; } div#masonry:hover img:hover { opacity: 1; }  /* fallback for earlier versions of Firefox */ @supports not (flex-wrap: wrap) {   div#masonry { display: block; }   div#masonry img {     display: inline-block;   vertical-align: top;   } } HTML 소스 <div id="masonry">     <img src=" https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg "...

JQuery 로그인 One Line Signup

이미지
놀라울 정도로 잘 만들어진 소스이다. 능력자들의 한계는 어디까지일까? 참으로 대단한 오픈소스이다. 요소 안에서 버튼 클릭시 진행된다. Sign UP을 클릭하면, 이름, 휴대폰, 패스워드 순으로 스텝으로 진행된다. 멋진 소스를 감상해보시길 바란다. Link

PHP 하위 디렉토리 생성

$file_path = "dat a/file/";   @mkdir($file_path, 0777,true) // true를 넣으면 하위디렉토리까지 생성된다. G9링크 :  http://g9link.com/post/3

CSS 마우스 호버 이미지 줌 소스

이미지
codepen에 있는 오픈소스로 마우스 오버시 줌 처리되는 소스입니다. 출처 :  https://codepen.io/Gregoofolio/pen/jWYZLj?q=zoom%20hover&order=popularity&depth=everything&show_forks=false html <div class="card">   <div class="img-holder">     <div class="overlay"><i class="fa fa-search"></i></div>     <img src=" http://grzegorzkyc.pl/www/jagiellonian/assets/img/card-5-img.jpg " alt="" />   </div>   <div class="content-holder">     <p class="category">Lifestyle</p>     <div class="separator">       <span class="separator-sub"></span>     </div>     <h1>Are we still questioning Jadwiga Andagawenska's beauty?</h1>     <h2>Queen decided to have plastic surgery.</h2>     <p class="author"><span>by</span> Wladyslaw II Jagiello...

자바스크립트 Full Calendar (풀 달력 오픈소스)

이미지
오픈 된 달력(스케즐 관리) 소스 중에 최고가 아닌가 싶다. FullCalendar LLC https://fullcalendar.io/ 데모보기 :  http://g9link.com/opensource/fullcalendar/demos/default.html 데모보기 :  http://g9link.com/opensource/fullcalendar/demos/agenda-views.html   데모보기 :  http://g9link.com/opensource/fullcalendar/demos/background-events.html   데모보기 :  http://g9link.com/opensource/fullcalendar/demos/basic-views.html   데모보기 :  http://g9link.com/opensource/fullcalendar/demos/external-dragging.html  

안드로이드 알림음 선택하지 않았을 때 에러처리

안스의 라이브러리 객체에 대해서 사실 지금 다 알지는 못한다. 난 이러한 미숙한 기술로 인해서, 에러를 장시간 찾아봤지만, 딱, 알맞는 답을 찾지 못했다. 참고로 지금 작업은 하이브리드 앱을 개발하고 있다. 알림음을 선택하지 않고, 확인버튼을 클릭했을 때 에러가 발생한다. 난, 수많은 검색을 하였고, 알맞는 답을 얻지 못했다. 그래서, Uri의 값으로 비교해서 처리했다. 값은  content://settings/system/ringtone  으로 출력된다. 참으로 많은 시도 끝에 아주 부족하지만, 답답함을 해결했다. 물론 디폴트 값으로 설정하면 간단하겠지만, 난 그렇게 하고 싶지 않았다. 기본값을 제외하고, 선택할 수 있게 하고 싶었던 고집때문에 장시간을 투자한 결과이다. 뭐, 고급진 기술자들이 보면 ㅋㅋ 웃겠지만, 그래도 나름 뿌듯하다. 출처 :  http://g9link.com/post/4