ล่าสุดการพัฒนาเว็บบทเรียน
×

CSS เกี่ยวกับการสอน

CSS บ้าน CSS บทนำ CSS วากยสัมพันธ์ CSS ทำอย่างไร CSS สี CSS ภูมิหลัง CSS พรมแดน CSS อัตรากำไรขั้นต้น CSS การขยายความ CSS สูงกว้าง CSS ข้อความ CSS แบบอักษร CSS การเชื่อมโยง CSS รายการ CSS ตาราง CSS รูปแบบกล่อง ร่าง CSS การแสดงผล CSS CSS ความกว้างสูงสุด CSS ตำแหน่ง CSS ลอย CSS Inline-block CSS เป็นเส้นตรง CSS combinators CSS หลอกชั้น CSS องค์ประกอบหลอก CSS แถบนำทาง CSS เมนูแบบเลื่อนลง CSS คำแนะนำเครื่องมือ CSS แกลเลอรี่ภาพ CSS ภาพทึบ CSS ภาพแบบ Sprite CSS attr Selectors รูปแบบ CSS CSS เคาน์เตอร์

CSS3

CSS3 บทนำ CSS3 มุมโค้งมน CSS3 แสดงสินค้าชายแดน CSS3 ภูมิหลัง CSS3 สี CSS3 การไล่ระดับสี CSS3 เงา CSS3 ข้อความ CSS3 แบบอักษร CSS3 แปลง 2D CSS3 แปลง 3D CSS3 การเปลี่ยน CSS3 ภาพเคลื่อนไหว CSS3 ภาพ CSS3 ปุ่ม CSS3 การให้เลขหน้า CSS3 หลายคอลัมน์ CSS3 หน้าจอผู้ใช้ CSS3 กล่องขนาด CSS3 Flexbox CSS3 สื่อแบบสอบถาม CSS3 ตัวอย่าง MQ

CSS การออกแบบเว็บที่ตอบสนอง

การออกแบบเว็บที่ตอบสนอง แนะนำ การออกแบบเว็บที่ตอบสนอง วิวพอร์ต การออกแบบเว็บที่ตอบสนอง ตารางมุมมอง การออกแบบเว็บที่ตอบสนอง สื่อแบบสอบถาม การออกแบบเว็บที่ตอบสนอง ภาพ การออกแบบเว็บที่ตอบสนอง วิดีโอ การออกแบบเว็บที่ตอบสนอง กรอบ

CSS Examples

CSS ตัวอย่าง CSS ทดสอบ CSS ใบรับรอง

CSS References

CSS การอ้างอิง CSS selectors CSS ฟังก์ชั่น CSS หูอ้างอิง CSS Web Safe แบบอักษร CSS Animatable CSS หน่วย CSS PX-EM แปลง CSS สี CSS ค่าสี CSS ชื่อสี CSS3 สนับสนุนเบราว์เซอร์

 

CSSภาพ


เรียนรู้วิธีการรูปแบบภาพโดยใช้ CSS


รูปภาพที่โค้งมน

ใช้ border-radius คุณสมบัติในการสร้างภาพที่โค้งมน:


ปารีส

ตัวอย่าง

ภาพที่โค้งมน:

img {
    border-radius: 8px;
}
ลองตัวเอง»
ปารีส

ตัวอย่าง

ภาพวงกลม:

img {
    border-radius: 50%;
}
ลองตัวเอง»

ภาพขนาดย่อ

ใช้ border คุณสมบัติในการสร้างภาพขนาดย่อ

ภาพ:

ปารีส

ตัวอย่าง

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

< img src="paris.jpg" alt="Paris" >
ลองตัวเอง»

ภาพการเชื่อมโยง:

ตัวอย่าง

a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}

a:hover {
    box-shadow: 0 0 2px 1px rgba
    (0, 140, 186, 0.5);
}

< a href="paris.jpg" >
  < img src="paris.jpg" alt="Paris" >
< /a >
ลองตัวเอง»

แสดงสินค้าที่ตอบสนองต่อ

ภาพการตอบสนองจะปรับให้พอดีกับขนาดของหน้าจอ

ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูผล:

นอร์เวย์

หากคุณต้องการภาพที่จะไต่ลงถ้ามันมี แต่ไม่เคยไต่ขึ้นจะมีขนาดใหญ่กว่าขนาดเดิมเพิ่มต่อไปนี้:

ตัวอย่าง

img {
    max-width: 100%;
    height: auto;
}
ลองตัวเอง»

เคล็ดลับ: อ่านเพิ่มเติมเกี่ยวกับการออกแบบเว็บที่ตอบสนองของเราใน การสอน CSS RWD


ข้อความรูปภาพ

วิธีการวางตำแหน่งข้อความในภาพ:

ตัวอย่าง

นอร์เวย์
Bottom Left
Top Left
Top Right
Bottom Right
Centered

ลองตัวเอง:

บนซ้าย» ขวาแรก» ซ้ายล่าง» ขวาล่าง» Centered »

Polaroid Images / การ์ด

นอร์เวย์

ลิ้นของ Troll ใน Hardanger, นอร์เวย์

นอร์เวย์

แสงเหนือในนอร์เวย์

ตัวอย่าง

div.polaroid {
    width: 80%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
    text-align: center;
    padding: 10px 20px;
}
ลองตัวเอง»

ตัวกรองภาพ

ซีเอสเอ filter คุณสมบัติเพิ่มผลภาพ (เช่นเบลอและความอิ่มตัว) เพื่อองค์ประกอบ

หมายเหตุ: ตัวกรองคุณสมบัติไม่สนับสนุนใน Internet Explorer, ขอบ 12 หรือ Safari 5.1 และก่อนหน้านี้

ตัวอย่าง

เปลี่ยนสีของภาพทั้งหมดเป็นสีดำและสีขาว (100% สีเทา) นี้:

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}
ลองตัวเอง»

เคล็ดลับ: ไปของเรา อ้างอิงกรอง CSS เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับตัวกรอง CSS


แกลเลอรี่ภาพที่ตอบสนองต่อ

CSS สามารถนำมาใช้ในการสร้างแกลเลอรี่ภาพ ตัวอย่างนี้ใช้คำสั่งสื่ออีกครั้งจัดภาพในขนาดหน้าจอที่แตกต่างกัน ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูผล:

Trolltunga นอร์เวย์
เพิ่มรายละเอียดของภาพที่นี่
ป่า
เพิ่มรายละเอียดของภาพที่นี่
แสงเหนือ
เพิ่มรายละเอียดของภาพที่นี่
ภูเขา
เพิ่มรายละเอียดของภาพที่นี่

ตัวอย่าง

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}
ลองตัวเอง»

เคล็ดลับ: อ่านเพิ่มเติมเกี่ยวกับการออกแบบเว็บที่ตอบสนองของเราใน การสอน CSS RWD


ภาพ Modal (ขั้นสูง)

นี่คือตัวอย่างที่แสดงให้เห็นว่า CSS และ JavaScript สามารถทำงานร่วมกัน

ก่อนใช้ CSS เพื่อสร้างหน้าต่างกิริยา (กล่องโต้ตอบ) และซ่อนมันไว้โดยค่าเริ่มต้น

จากนั้นใช้ JavaScript เพื่อแสดงหน้าต่างกิริยาและเพื่อแสดงภาพภายในกิริยาเมื่อผู้ใช้คลิกที่ภาพนี้:

แสงเหนือ, นอร์เวย์

ตัวอย่าง

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}
ลองตัวเอง»