Home-theater-designers
웹사이트가 멋지게 보이기를 원하지만 웹 개발 기술이 부족합니다.
절망하지 마십시오! 멋진 효과로 멋진 사이트를 구축하기 위해 CSS나 PHP를 알 필요는 없습니다. 몇 가지 간단한 HTML 태그와 복사하여 붙여넣기 방법을 알고 있으면 됩니다.
멋진 HTML 효과를 시작할 수 있도록 무료 HTML 효과 코드 템플릿을 컴파일했습니다. 그들은 비용을 들이지 않으면서 사이트의 기능과 사용자 경험을 향상시킬 것입니다. 대부분이 HTML이지만 이 멋진 코드에는 일부 CSS와 PHP도 포함될 수 있습니다.
1. HTML로 멋진 시차 효과
온라인 광고가 있는 웹사이트에서 사용되는 시차 효과를 본 적이 있을 것입니다. 글을 아래로 내리다보면 배경 이미지가 스크롤되는 것처럼 보입니다. 또는 광고가 나타납니다.
또는 사이트의 다른 부분을 방문할 때 배경 이미지가 변경될 수 있습니다. 내용에 시각적 깊이를 더해주는 멋진 효과로, 굳이 하지 않아도 이상적입니다. 기본 HTML 코드 이해 .
효과를 가지고 놀 수 있고 코드를 복사할 수 있습니다. W3Schools의 간단한 시차 스크롤 효과 .
가장 정교한 버전에서 이 효과는 HTML, CSS 및 JS의 조합입니다.
계속해서 위의 코드를 가져옵니다. CodePen의 머리글/바닥글 시차 효과 .
2. 스크롤 가능한 HTML 주석 상자 코드
이것은 간단하지만 유용한 HTML 요소로, 긴 텍스트 조각을 간결한 형식으로 압축할 수 있습니다. 이렇게 하면 페이지의 전체 공간을 차지하지 않습니다.
텍스트 상자의 색상과 크기를 사용하여 필요에 맞게 만들 수 있습니다.
입력:
Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :) 좀 더 멋진 것을 원한다면 다음 코드를 가져올 수도 있습니다. Quackit의 사용자 정의 가능한 댓글 상자 .
여러 템플릿을 제공하지만 편집기를 사용하여 사용자 정의 코드를 수동으로 변경하고 테스트(실행)할 수도 있습니다.
3. 멋진 HTML 트릭: 강조 표시된 텍스트
간단한HTML 태그를 사용하면 텍스트나 이미지에 멋진 효과를 많이 추가할 수 있습니다. 모든 브라우저에서 작동하는 것은 아닙니다. 여기에 언급된 것들은 Google Chrome, Microsoft Edge 및 Mozilla Firefox에서 작동합니다.
이 HTML 텍스트 효과는 다음 사이의 텍스트를 강조 표시합니다.태그.
입력:
Your highlighted text here.출력 데모:
4. 텍스트에 배경 이미지 추가
마찬가지로 텍스트의 색상을 변경하거나 배경 이미지를 추가할 수 있습니다. 이것은 텍스트의 글꼴 크기가 더 크면 멋지게 보입니다.
입력:
MakeUseOf presents...스타일 및 글꼴 요소를 텍스트에 추가하여 동일한 효과를 얻을 수 있습니다. 꼬리표.
Alexa의 목소리는 누구입니까
출력 데모:
5. 제목 툴팁을 추가하는 유용한 HTML 트릭
'조작된' 텍스트나 이미지를 마우스로 스크롤하면 제목 툴팁이 나타납니다. 이미지, 링크된 텍스트 또는 데스크탑 앱의 메뉴 항목에 있는 웹사이트에서 이러한 항목이 사용되는 것을 보았을 것입니다. 이 HTML 코드를 사용하여 웹 페이지의 일반 텍스트에 도구 설명을 추가하십시오.
입력:
Move your mouse over me!출력 데모:
6. 가장 멋진 HTML 트릭: 스크롤 또는 떨어지는 텍스트
Google에서 'marquee html'을 검색하면 작은 부활절 달걀을 발견할 수 있습니다. 상단에 스크롤되는 검색 결과 개수가 보입니까? 이것은 이제 사용되지 않는 선택 윤곽 태그에 의해 생성된 효과입니다. 한때 멋진 HTML 텍스트 효과는 더 이상 사용되지 않지만 대부분의 브라우저는 여전히 이를 지원합니다.
입력:
I wanna scroll with it, baby!출력 데모:
당신은 할 수 있습니다 추가 속성 추가 스크롤 동작, 배경색, 방향, 높이 등을 제어합니다. 그러나 조심하십시오. 이러한 효과는 과도하게 사용하면 매우 자극적일 수 있습니다.
시원한 떨어지는 텍스트 효과를 위해, 다시 Quackit으로 이동 고도로 맞춤화된 선택 윤곽 코드를 복사합니다.
7. HTML로 멋진 스위치 메뉴 만들기
가장 멋진 HTML 트릭은 동적 HTML 효과입니다. 그러나 그들은 종종 스크립트 기반입니다. 다음은 매우 매끄럽게 보이는 메뉴에 대한 한 가지 효과입니다.
스타일 시트 및 스크립트와 함께 작동하기 때문에 일반적인 HTML 태그보다 조금 더 복잡합니다. 장점은 작동하도록 CSS 또는 스크립트 파일을 업로드할 필요가 없다는 것입니다. 대신 다음 코드를 웹사이트 섹션에 붙여넣기만 하면 됩니다.
입력:
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}.submenu{
margin-bottom: 0.5em;
}
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/var persistmenu='yes' //'yes' or 'no'. Make sure each SPAN content contains an incrementing ID starting at 1 (id='sub1', id='sub2', etc)
var persisttype='sitewide' //enter 'sitewide' for menu to persist across site, 'local' for this page onlyif (document.getElementById){ //DynamicDrive.com change
document.write('n')
document.write('.submenu{display: none;}n')
document.write('n')
}function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById('masterdiv').getElementsByTagName('span'); //DynamicDrive.com change
if(el.style.display != 'block'){ //DynamicDrive.com change
for (var i=0; i if (ar[i].className=='submenu') //DynamicDrive.com change
ar[i].style.display = 'none';
}
el.style.display = 'block';
}else{
el.style.display = 'none';
}
}
}function get_cookie(Name) {
var search = Name + '='
var returnvalue = '';
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(';', offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}function onloadfunction(){
if (persistmenu=='yes'){
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!='')
document.getElementById(cookievalue).style.display='block'
}
}function savemenustate(){
var inc=1, blockid=''
while (document.getElementById('sub'+inc)){
if (document.getElementById('sub'+inc).style.display=='block'){
blockid='sub'+inc
break
}
inc++
}
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=(persisttype=='sitewide')? blockid+';path=/' : blockid
document.cookie=cookiename+'='+cookievalue
}if (window.addEventListener)
window.addEventListener('load', onloadfunction, false)
else if (window.attachEvent)
window.attachEvent('onload', onloadfunction)
else if (document.getElementById)
window.onload=onloadfunctionif (persistmenu=='yes' && document.getElementById)
window.onunload=savemenustate
And this code goes wherever you want the dynamic menu to appear.
Topics
- Browsers/Addons
- Web Apps
- How-To Tips
- Cool Software
...and more!
Staff Writers
- Karl Gechlik
- Tina
- Varun Kashyap
...and more!
Miscellaneous
- About
- Contact
- Archives
- Disclaimer
출력 데모:
불행히도 여기에서는 이 효과를 입증할 수 없습니다. 하지만 원본 소스는, 다이내믹 드라이브 , 이 동적 HTML 효과의 작업 복사본을 제공합니다.
8. Tableizer로 HTML 스프레드시트 가져오기
사이트에 스프레드시트를 표시하려면 Tableizer를 사용하세요! 데이터를 HTML 테이블로 변환합니다. Excel, Google 문서 또는 기타 스프레드시트의 원시 데이터를 변환기 도구에 붙여넣기만 하면 됩니다. tableizer.journalistopia.com . 조정 테이블 옵션 을 클릭한 다음 그것을 표로 HTML 출력을 수신합니다.
이것은 Tableize It!과 같이 웹사이트를 위한 가장 멋진 HTML 코드 중 하나일 것입니다! 모든 노력을 다합니다.
딸깍 하는 소리 HTML을 클립보드에 복사 HTML 코드를 복사하여 웹사이트에 추가합니다. 배경색을 편집하여 훨씬 더 멋지게 보이도록 하십시오.
전화번호로 내 친구 위치 찾기
이것은 실제로 HTML 효과는 아니지만 꽤 편리합니다.
사이트를 위한 더 멋진 HTML 코드 및 효과
HTML, CSS 및 JavaScript의 힘은 웹사이트에 놀라운 효과를 줄 수 있는 잠재적으로 무제한 옵션을 제공합니다. 더 원해?
웹사이트를 향상시키기 위해 복사할 수 있는 8가지 멋진 HTML 코드를 보여 드렸습니다. 다르지만 기본적인 HTML 코딩 기술을 알고 있는 한 모두 쉽게 구현할 수 있습니다.
공유하다 공유하다 트위터 이메일 10분 안에 배울 수 있는 17가지 간단한 HTML 코드 예제기본 웹 페이지를 만들고 싶으십니까? 이러한 HTML 예제를 배우고 텍스트 편집기에서 시도하여 브라우저에서 어떻게 보이는지 확인하십시오.
다음 읽기 관련 항목- 프로그램 작성
- HTML
- 웹 개발
- 웹마스터 도구
보안, Linux, DIY, 프로그래밍 및 기술 설명을 위한 편집자이자 데스크탑 및 소프트웨어 지원에 대한 광범위한 경험을 가진 정말 유용한 팟캐스트 프로듀서입니다. Linux Format 매거진의 기고가인 Christian은 Raspberry Pi 땜장이이자 레고 애호가이자 복고풍 게임 팬입니다.
크리스찬 카울리가 참여한 작품 더보기뉴스레터 구독
기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!
구독하려면 여기를 클릭하세요.