รวมโค้ด CSS + webdesign
posted on 08 Apr 2006 12:16 by rije in Codeเมื่อวานนี้ได้ทิ้งโค้ด css เอาไว้ให้เราจะมาดูกันเลยนะครับ
เราสามารถใส่โค้ด css ลงไประหว่างภาษา html และอีกวิธีคือ
การเขียนมันขึ้นมาต่างหากแล้วทำการเรียกใช้
แบบที่ 1 จะนำไปใส่ระหว่าง <head> .... </head>
<STYLE TYPE="TEXT/CSS"><!--
a:link { color: #63B8FF; text-decoration: none}
a:visited { color: #63B8FF; text-decoration: none}
a:active { color: #63B8FF; text-decoration: none}
a:hover { color: #63B8FF; text-decoration: none;FILTER:fliph; HEIGHT:0}
//--></STYLE>
*************************************
แบบที่ 2 เขียนผ่าน notepad แล้วเซฟเป็น .css เรียกใช้โดย
<link rel="stylesheet" type="text/css" href="ใส่ชื่อไฟล์css.css">ใส่ระหว่าง <head> ... </head> ครับ
body {
scrollbar-arrow-color: #877D7D;
scrollbar-base-color: #000000;
scrollbar-face-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-highlight-color: #A30505;
scrollbar-shadow-color: #A30505;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
background-image: url(images/image01.gif);
font-family: Verdana;
font-size: 8pt;
color: #5D5D5D;
background-color: #ffffff;
margin: 0;
padding: 0;
}
---------------------------------------------------
script ที่นำไปใช้ได้เลย
1. การทำ title bar วิ่งได้
<SCRIPT laguage="javascript">
count=1;
txt="ใส่ข้อความตรงนี้ครับ";
function txtrun()
{
txtshow=txt.substring(count);
document.title=txtshow;
status=txtshow;
count=count+1;
if (count>txt.length)
{
count=0;
}
setTimeout("txtrun()",200);
}
txtrun();
</SCRIPT>
2. เวลาเอาเมาท์ชี้ที่ภาพ ภาพจะสั่น (เขย่าภาพ)
<style>
.shakeimage{position:relative}
</style>
<script language="JavaScript1.2">
//configure shake degree (where larger # equals greater shake)
var rector=3
///////DONE EDITTING///////////
var stopit=0
var a=1
function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}
function rattleimage(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a<4)
a++
else
a=1
setTimeout("rattleimage()",50)
}
function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}
</script>
ตัวอยากการใช้สคริปนี้
<img src= "urlภาพ" class="shakeimage"
onMouseover="init(this);rattleimage()"
onMouseout="stoprattle(this)">
3. เปลี่ยนสีและเปลี่ยนด้าน scrollbar ไปทางซ้าย
<STYLE>
BODY {
SCROLLBAR-FACE-COLOR: #000000;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
OVERFLOW: auto;
SCROLLBAR-SHADOW-COLOR: #ffffff;
DIRECTION: rtl;
SCROLLBAR-ARROW-COLOR: #ff0000;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #000000;
SCROLLBAR-BASE-COLOR: #000000;
scrollbar-3d-light-color: #000000
}</STYLE>
4. ตัวนี้ทำให้เมาท์เปลี่ยนเป็นเครื่องหมายคำถาม(?)
แล้วเมื่อชี้ไปที่ลิงค์จะมี underline (เส้นใต้)overline(เส้นขอบบน)
<script>
A:link{text-decoration:none;}
A:visited{text-decoration:none;}
A:active{text-decoration:none;}
A:hover{text-decoration:underline overline blink; background-color:#000000;}
a:link { cursor : help }
a:active { cursor : help }
a:visited { cursor : help }
a:hover { cursor : help }
</script>
5. การกำหนดตัวอักษรสีแบบไล่สีที่ลิงค์
<style>
<!--
a:hover {
text-decoration: none;
background-color: none;
height: 0;
filter: alpha(opacity=20, finishopacity=80, style=2);
color: #DD6C75;
}
a:link {
text-decoration: none;
background-color: white;
color: #DD6C75;
height: 0;
filter: alpha(opacity=20, finishopacity=80, style=1);
}
a:visited {
text-decoration: none;
background-color: white;
color: #DD6C75;
height: 0;
filter: alpha(opacity=20, finishopacity=80, style=1);
}
a:active {
background-color: white;
text-decoration: none;
color: #FF6699;
height: 0;
filter: alpha(opacity=20, finishopacity=80, style=1);
}
-->
</style>
6. ทำลิงค์สีรุ้ง
<SCRIPT language=JavaScript>
var rate = 20; // Increase amount(The degree of the transmutation)
var obj; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
if (navigator.appName.indexOf("Microsoft",0) != -1 && parseInt(navigator.appVersion) >= 4) {
Browser = true;
} else {
Browser = false;
}
if (Browser) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
function doRainbow()
{
if (Browser && act != 1) {
act = 1;
obj = event.srcElement;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (Browser && act != 0) {
obj.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (Browser && act != 1) {
obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (Browser && act != 0) {
if (obj.tagName == 'A') {
obj.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
obj.style.color = makeColor();
}
function makeColor()
{
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR);
elmG = Math.floor(elmG);
elmB = Math.floor(elmB);
clrRGB = '#' + elmR.toString(16) + elmG.toString(16) + elmB.toString(16);
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return clrRGB;
}
</SCRIPT>
7. ลิงค์สลับข้าง เมื่อเอาเมาท์ชี้ลิงค์ไม่ว่าจะรูปหรือข้อความมันจะกลับข้าง
<STYLE TYPE="TEXT/CSS"><!--
a:link { color: #63B8FF; text-decoration: none}
a:visited { color: #63B8FF; text-decoration: none}
a:active { color: #63B8FF; text-decoration: none}
a:hover { color: #63B8FF; text-decoration: none;FILTER:fliph; HEIGHT:0}
//--></STYLE>
8. ห้ามคลิกขวา
<script language="JavaScript">
<!--
// No rightclick script.
// Find more great scripts and applets at the JavaFile!
// http://www.javafile.com
// Do not delete this header!
var message="ใส่ข้อความห้ามตรงนี้"; // Put your message for the alert box between the quotes.
// Don't edit below!
function click(e) {
if (document.all) {
if (event.button == 2) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->
</script>
9. กำหนดตำแหน่งภาพพื้นหลัง
<style>
body{
font-size:13px;
background-image: url("ใส่ url ภาพ");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:30% 50%;
}
</style>
*** background-position:30% 50%; คือตำแหน่งที่คุณต้องใส่
-----------------------------------------------------
ต่อไปโค้ด css แบบเขียนแยกครับ
/* กำหนดขนาดตัวอักษรและสีที่ใช้ */
body {
font-family: Verdana; /* ชื่อลักษณะตัวอักษรครับ */
font-size: 8pt;
color: #5D5D5D;
background-color: #ffffff;
margin: 0;
padding: 0;
}
/* กำหนดสีลิงค์คลิกแล้ว,ยังไม่คลิก,กำลังคลิกอยู่
และกำหนดเวลาเอาเมาส์ไปใช้ที่ลิงค์จะไม่มีเส้นใต้(hover) */
a:link, a:visited {
color: #877D7D;
text-decoration: none;
border-bottom:1px dotted #7a7a7a;
}
a:hover {
color: #A30505;
text-decoration: underline;
border-bottom:1px dotted #7a7a7a;
}
a:active {
color: #877D7D;
text-decoration: underline;
border-bottom:1px dotted #7a7a7a;
}
/* สร้างกรอบให้ตัวอักษร วิธีเรียกใช้ --------> <h1>ข้อความใส่ตรงนี้</h1>
ใส่ระหว่าง <body>...</body> กรอบจะเท่ากับความกว้างของเว็บเพราะงั้นใส่ table
ให้ด้วยหากจะกำหนดความกว้างให้ */
h1 { /* h1 ชื่อคลาส */
font-size: 8pt;
color: #877D7D; /* เปลี่ยนสีตัวอักษรตรงนี้ */
background-color: #000000;
border-width: 1px 1px 1px 1px; /* กำหนดขนาดเส้นกรอบ */
border-style: solid; /* นอกจากแบบ solid แล้วยังมีแบบ dashed จะเป็นเส้นปะ */
border-color: #580404;
margin: 0;
padding: 4px 4px 0 4px;
}
/* ทำให้ตารางเป็นเส้นเล็กๆ หรือเป็นเส้นปะ วิธีใส่โค้ดด้านล่าง */
.tb /* ชื่อคลาส */
{
color: #C26425;
font-weight: normal;
border: #C26425; border-style: dashed; border-top-width: 1px; border-bottom-width: 1px;
border-right-width: 1px; border-left-width: 1px;
background-repeat: repeat;}
/* วิธีเรียกใช้สคริปด้านบน
<TABLE WIDTH=300 HEIGHT=0% CELLSPACING=0 CELLPADDING=0 BORDER=0 class=tb>
<TR>
<TD>
ตรง Class ใส่ชื่อคลาส
</TD>
</TR>
</TABLE> */
//////////////////////////////////////////////////////////
เอาภาพเว็บเก่าๆ ที่เคยออกแบบและทำไว้มาให้ดูครับ
ภาพที่ 1 -เป็น theme เว็บที่จะทำเว็บ magazine กับเพื่อนครับ
ทำลวกๆ (ลวกจนสุกเลย 555+)
ภาพที่ 2 -เป็นส่วนที่ถูกตัดมาให้ดูครับไม่ตัวเต็มๆ
เป็น theme เว็บที่กะจะเป็น version 8 ของเว็บรวมผลงานนะครับ
ภาพที่ 3 -เป็นเว็บที่ทำส่งอาจารย์ครับ หัวข้อขายของตกแต่งบ้าน
ทำทั้งเว็บภายใน 2-3 ชม. ครับ T_T ต้องนั่งทำภาพเองด้วย เศร้า
ภาพที่ 4 -เป็นเว็บ chobits ครับ แต่เว็บล่มไปแล้วครับไม่ได้ต่ออายุ +_+
ภาพที่ 5 -เป็น theme เว็บที่ผมจะทำเว็บรวมผลงานภาพถ่ายน่ะครับ
ภาพที่ 6 -เป็น theme เว็บที่เกี่ยวกับพวก interior ครับ
อย่าไปสนใจข้อความข้างในนะครับ ผมก๊อบมาแปะ 55+
-----------------------------------------------------------
หมดแล้วครับผม ^^ entry จะเป็นเรื่องเกี่ยวกับ php ครับ
ถ้าไม่มีอะไรผิดพลาดนะครับ >__<
#1 By ～*+くららちゃん+*～☆彡 on 2006-04-08 12:48