실시간TV∴영화∴드라마∴예능 디자인소스57 스마트 웹 사이트 디자인 동영상 슬라이드 메뉴 전체소스 더보기 스마트웹 라이브러리 브랜드 라이브러리 브랜드 에세이 다이어리 노트 비즈니스 성과추적 단어 글쓰기 기사 게임·엔터테인먼트 게임소식 마인크래프트 스타크래프트 모바일게임 인물·연예인 브랜드 라이브러리 기술블로그 홈즈에셋 우주연구소 지수사괘 판타지라이프 디아블로 II 블랙캣도그 데이트레이더 스튜디오 콤플렉스 페르소나 가치판단 공인중개사 자격증 장바구니 사주풀이 공간인테리어 그랜드 인터컨티넨탈 덕수궁 디팰리스 신라스테이 건축·인테리어 디자인 크리에이티브 툴 일러스트레이터 포토샵 웹개발 HTML CSS JavaScript Code 프로젝트 포트폴리오 생산성 도구 마이크로소프트 워드 마이크로소프트 엑셀 놀라운 영감 그라폴리오 아트 뮤지움 포토그래프 참고자료 디자인 매거진 웹디자인 프로그래밍 티스토리 .. 2023. 12. 13. 심플한 동영상 플레이어 MPlayer HTML5 Media Player MPlayer HTML5 Media Player 더보기 2023. 12. 12. 심플한 비디오 플레이어 (Simple Video player) 심플한 비디오 플레이어 입니다. 더보기 2023. 12. 11. Navigation Page Design (네비게이션 페이지 디자인) 더보기 CSS * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "ROBOTO", sans-serif; } .nav, .slider { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; position: relative; background-color: #1e1f26; text-align: center; padding: 0 2em; } .nav h1, .slider h1 { font-family: "Josefin Sans", sans-serif; font-size: 5vw; margin: 0; pa.. 2023. 12. 7. Responsive Photo Gallery CSS (반응형 포토 갤러리) 더보기 CSS body { display: flex; justify-content: center; align-items: center; flex-direction: column; font-family: sans-serif; } h1 { color: coral; } .grid-container { columns: 5 200px; column-gap: 1.5rem; width: 90%; margin: 0 auto; } .grid-container div { width: 150px; margin: 0 1.5rem 1.5rem 0; display: inline-block; width: 100%; border: solid 2px black; padding: 5px; box-shadow: 5px 5px 5px rg.. 2023. 12. 7. 멋진 버튼 색상 애니메이션 CSS (Button Color Animation CSS) 전체소스 더보기 css body { background: #e0e5ec; } h1 { position: relative; text-align: center; color: #353535; font-size: 50px; font-family: "Cormorant Garamond", serif; } .frame { width: 90%; margin: 40px auto; text-align: center; } button { margin: 20px; } .custom-btn { width: 130px; height: 40px; color: #fff; border-radius: 5px; padding: 10px 25px; font-family: 'Lato', sans-serif; font-weight: 500; .. 2023. 12. 6. 반응형 이미지 비디오 갤러리 Responsive Image Video Gallery 반응형 이미지 비디오 갤러리 .. 소스를 적절히 수정해서 사용 하세요. CSS body{ padding:0px; margin:20px 10px; } #gallery{ -webkit-column-count:4; -moz-column-count:4; column-count:4; -webkit-column-gap:20px; -moz-column-gap:20px; column-gap:20px; } @media (max-width:1200px){ #gallery{ -webkit-column-count:3; -moz-column-count:3; column-count:3; -webkit-column-gap:20px; -moz-column-gap:20px; column-gap:20px; } } @media (max-.. 2023. 12. 2. 음악방송 웹플레이어 디자인 구글 크롬(Chrome) 오디오 자동재생 아래주소를 크롬 주소창에 붙여넣고 이동 chrome://settings/content/sound 맞춤설정된 동작 소리 재생이 허용됨 에 아래코드 추가 [*.]xtx.kr 마이크로소프트 엣지(Edge) 미디어 자동실행 아래주소를 엣지 주소창에 붙여넣고 이동 edge://settings/content/mediaAutoplay 미디어 자동 실행 허용 에 아래코드 추가 [*.]xtx.kr http://go.xtx.kr/?95 추억찾기 음악방송 서비스 musictrot.com 뮤직트로트에서 제공하는 음악방송 서비스 입니다. 2023. 12. 2. CSS 기반 스크롤 애니메이션 반응형 웹페이지 디자인 순수 CSS 기반 스크롤 애니메이션 반응형 웹페이지 디자인 입니다. 소스를 적절히 수정하시면 멋진 웹페이지를 구성할수 있습니다. :root { --text-color: hsl(230 16% 28%); /* header */ --header-bg: hsl(0 0% 100% / 75%); /* section */ --section: hsl(0 0% 93%); --section-even: hsl(210deg 15% 92%); /* tiles */ --red: hsl(10 83% 52%); --green: hsl(157 91% 43%); --blue: hsl(210 100% 45%); --purple: hsl(266 100% 67%); --yellow: hsl(49 100% 73%); --black: hsl(0.. 2023. 11. 30. HTML Audio PlayList Player 간단한 HTML 오디오 재생 목록 플레이어 입니다. 소스를 적적히 수정하시면 훌륭한 플레이어 디자인이 될 것입니다. body{ background: #00d2ff; background: -webkit-linear-gradient(to right, #3a7bd5, #00d2ff); background: linear-gradient(to right, #3a7bd5, #00d2ff); color: #ffc266; } #myProgress { width: 420px; background-color: #d9d9f2; cursor: pointer; border-radius: 10px; } #myBar { width: 0%; height: 5px; background-color: #ffc266; border-radi.. 2023. 11. 29. 초간단 레인보우 원형 테두리 회전 효과 CSS 레인보우 테두리 회전 효과 CSS 입니다. 소스를 적절히 수정해서 사용하시면 훌륭한 효과를 구현 할수 있습니다. @property --a { syntax: ''; initial-value: 0deg; inherits: false } html, body { display: grid } html { height: 100% } body { background: dimgrey } .spinner { box-sizing: border-box; place-self: center; width: min(100%, 18em); aspect-ratio: 1; padding: 1.25em; border-radius: 50%; box-shadow: 2px 2px 17px #000; background: url("https:/.. 2023. 11. 29. Clappr 플레이어 통계(카운터 타이머 추가 정보) Clappr 플레이어 통계 카운터 타이머 추가 정보를 추출하는 플러그인 입니다. 2023. 11. 15. YouTube 전체화면 비디오 배경 YouTube 비디오를 배경 전체화면 으로 재생합니다. 적절히 수정해서 사용 하세요. 2023. 11. 14. CSS3 스핀 프리로더 및 프리로드 페이지 CSS3 스핀 프리로더 및 프리로드 페이지 입니다. 적절히 수정해서 사용 하세요. 2023. 11. 14. Windows10 Loading 재미로 만들어본 윈도우10 로딩 화면 입니다. 2023. 11. 14. 이전 1 2 3 4 다음 반응형
