카테고리: CSS, Div, Javascript

INTRODUCTION TO CSS GRID LAYOUT – display: grid;

https://mozilladevelopers.github.io/playground/07-basic-layout .container { display: grid; width: 750px; height: 600px; grid-template-columns: 200px 1fr 1fr; grid-template-rows: 80px 1fr 1fr 100px; grid-gap: 1rem; } .header { grid-row: 1 / 2; grid-column: 1 / 4; } .sidebar { grid-row: 2 / 4; grid-column: 1 / 2; } .content-1 { grid-row: 2 / 3; grid-column: 2 / 4; } .content-2 […]

더보기

Fixed Menu JQuery

1) How to create Fixed Menu When Scrolling Page with CSS and jQuery  

더보기

Swiper Most Modern Mobile Touch Slider

http://idangero.us/swiper/demos/#.Wdboqlu0NhE   슬라이드 메뉴 종류별 예제 보기  

더보기

Creating a Swipeable Side Menu for the Web

https://onextrapixel.com/creating-a-swipeable-side-menu-for-the-web/  [tut demo=”http://www.onextrapixel.com/examples/touch-swipe/demo3.php” download=”http://www.onextrapixel.com/examples/touch-swipe/touch-swipe.zip”] Creating a Swipeable Side Menu for the Web 1. Structure HTML: 1 2 3 4 5 6 7 8 9 10 11 12 <div class=”container”>     <div id=”sidebar”>         <ul>             <li><a href=”#”>Home</a></li>             <li><a href=”#”>Explore</a></li>             <li><a href=”#”>Users</a></li>             <li><a href=”#”>Sign Out</a></li>         </ul>     </div>     <div class=”main-content”>     </div> </div> CSS: 1 2 3 4 5 6 7 […]

더보기

모바일과 PC버전 구분해서 페이지 이동하기 JS

<script type=”text/javascript”> <!– if (screen.width <= 699) { document.location = “mobile.html”; } //–> </script>   스크린 사이즈가 가로가 699px 이면 mobile.html 으로 이동된다   참고 : Redirect Mobile Devices

더보기

10+ Solutions for Responsive Data Tables

참고사이트 : http://exisweb.net/responsive-table-plugins-and-patterns   Having trouble fitting your tables into a responsive site? They look great on a desktop layout, but look miserable on mobile. The Basics First remove any fixed widths from your markup. Before: <table width=”540″> <tr> <td width=”300″>Header 1</td> <td width=”60″>Header 2</td> <td>Header 3</td> <td>Header 4</td> </tr> </table> After: <table> <tr> <td>Header 1</td> […]

더보기

Diamond Antimacassar

Diamond Antimacassar This pattern has not been tested after being written out. Source The Lace Tatting Book by Mlle Riego, 1867. This pattern has been adapted some from the original. More antique patterns may be found at The Antique Pattern Library. You need two shuttles, and to know how to do split rings (SplR) Make […]

더보기

futureinsightslive.com

http://futureinsightslive.com/las-vegas-2014/   jquery.min.js 를 이용한 이미지 애니메이션 구경하려 가기  

더보기

DOT NAVIGATION STYLES

Dot Navigation Styles VIEW DEMO     DOWNLOAD SOURCE

더보기

Using Gradients

https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html background: -webkit-linear-gradient(aqua, white) background: -webkit-linear-gradient(red, yellow, orange, green, blue, purple); background: -webkit-linear-gradient(left, black, white); background: -webkit-linear-gradient(bottom right, black, white); -webkit-linear-gradient(45deg, black, white) background: -webkit-linear-gradient(left,black,blue 10%,blue 90%,black); background: -webkit-linear-gradient(left,white,blue 50%,purple 50%,white);   div style=”width: 200px; height: 200px; border-radius: 50%; background: -webkit-radial-gradient(30% 30%, white, black);”        

더보기