본문 바로가기

디자인소스64

웹표준 마크업을 사용한 깔끔한 사이트 맵 웹표준 마크업을 사용한 깔끔한 사이트 맵 입니다.적용사이트 미리보기 (로고옆 전체메뉴클릭)http://musictrot.com 스마트웹홈페이지, 웹프로그램, 음악방송, 하이브리드앱 제작지원musictrot.comHTML + CSS example site map Home About History Foundation Future Plans Articles News Book Reviews Press I.. 2024. 11. 22.
깔끔한 이미지 슬라이드쇼 애니메이션 이미지 슬라이더쇼 에 낙엽 애니메이션을 추가해 보았습니다..index.html  script.js tsParticles.load("tsparticles", { particles: { number: { value: 30, density: { enable: true, value_area: 800 } }, shape: { type: "image", image: [ { src: "https://iili.io/2ofIXAN.png", width: 34, height: 50 }, { .. 2024. 11. 18.
오디오 비주얼라이저 플레이어 만들기 연속 재생 실 판매사이트 제작에 사용된 오디오 비주얼라이저 플레이어 입니다.실적용 예제https://d.cafe24.com/product/product_detail?productCode=PTWD836035 카페24 디자인센터디자이너스마트디자인문의하기 제품코드PTWD836035 카테고리엔터테인먼트 제작솔루션카페24 매니지드워드프레스제작솔루션d.cafe24.com audio.html  script.jslet canvas = document.getElementById("myCanvas");let audio = document.getElementById("myAudio");audio.crossOrigin = "anonymous";// 오디오 소스// 오디오 컨텍스트 생성// l.. 2024. 11. 15.
CSS3 로 구성된 간단한 시계 소스 CSS3 로 구성된 간단한 시계 소스입니다^^ style.cssbody { font-size:62.5%; margin:1em; background:#232425 }ul { list-style:none; margin:0; padding:0 }#watch { font-size:1em; position:relative }#watch .frame-face { position:relative; width:30em; height:30em; margin:2em auto; border-radius:15em; background:-webkit-linear-gradient(top, #f9f9f9,#666); background:-moz-linear-gradient(top, #f9f9f9,#666); back.. 2024. 11. 12.
이미지 필터 생성기 http://musictrot.com/home/Filter/ SVG Filter Generator musictrot.com 2024. 11. 1.
mp3 음악입자 그래픽 이퀄라이저 시각화 플레이어 가사자막 생성기 지극히 개인적으로 필요에의해서 만들어본것이라 설명하기가 애매 하네요^^이미지 클릭하셔서 "셈플 미리보기" 직접 확인해 보시는게 이해가 빠를듯 합니다.^^티스토리에 3곡을 작업해서 올려보았습니다.^^https://ubang.tistory.com/5913https://ubang.tistory.com/5912https://ubang.tistory.com/5911 2024. 9. 10.
반응형 G5 BEST https://d.cafe24.com/product/product_detail?productCode=PTWD825220 카페24 디자인센터디자이너스마트디자인문의하기 제품코드PTWD825220 카테고리엔터테인먼트 제작솔루션카페24 매니지드워드프레스제작솔루션d.cafe24.com미디어에 최적화된 반응형 홈페이지 입니다.  디자인보다는 기능에 중점을 두었으며 m3u8 실시간 영상과 유튜브 영상, HTML 5 Video 등  영상이나 음악파일 주소 입력 만으로 플레이가 가능한 전용 플레이어가 내장되어 있습니다. 동영상, 웹진, 갤러리, 일반 게시판을 무한 생성할수 있으며 관리자 페이지를 통해 회원관리, 권한관리 등 사이트운영에 필요한 모든것들을 지원 합니다. 미디어, 엔터, 언론, 홍보 ,연예, 커뮤니티 사이트.. 2024. 6. 2.
워드프레서 와 G5 기반 미디어 홈제작 m3u8 실시간영상 및 유튜브 광고 제거영상 HTML 5 비디오영상 MP3음악 등 미디어에 최적화된 플레이어가 포함되어 있습니다. 거품없는 합리적인 가격에 카페24의 안전한 시스템을 통해 구매 하실수 있습니다. 2024. 5. 23.
스마트 웹 사이트 디자인 동영상 슬라이드 메뉴 전체소스 더보기 스마트웹 라이브러리 브랜드 라이브러리 브랜드 에세이 다이어리 노트 비즈니스 성과추적 단어 글쓰기 기사 게임·엔터테인먼트 게임소식 마인크래프트 스타크래프트 모바일게임 인물·연예인 브랜드 라이브러리 기술블로그 홈즈에셋 우주연구소 지수사괘 판타지라이프 디아블로 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.
반응형
Copyright ⓒ SmartWeb All rights reserved.

티스토리툴바