การเข้ารหัส - หน้า 19

โมดูล CSS กริดเค้าโครง ใช้การออกแบบที่ตอบสนองต่อไปอีกระดับโดยการแนะนำ ชนิดใหม่ของความยืดหยุ่น ที่ไม่เคยเห็นมาก่อน ตอนนี้เราทำไม่ได้เท่านั้น กำหนดกริดที่กำหนดเอง เร็วอย่างเห็นได้ชัดด้วย CSS อย่างเดียว แต่ CSS Grid ก็มีเช่นกัน อัญมณีที่ซ่อนอยู่มากมาย ที่ช่วยให้เราสามารถปรับแต่งกริดและบรรลุเลย์เอาต์ที่ซับซ้อน. MinMax () ฟังก์ชัน เป็นหนึ่งในคุณสมบัติที่ไม่เป็นที่รู้จักกันอย่างแพร่หลาย ทำให้สามารถกำหนดขนาดของแทร็กกริดได้ เป็นช่วงต่ำสุดถึงสูงสุด เพื่อให้กริดสามารถปรับให้เข้ากับวิวพอร์ตของผู้ใช้แต่ละคนได้อย่างดีที่สุด. วากยสัมพันธ์ ไวยากรณ์ของ MinMax () ฟังก์ชั่นค่อนข้างง่ายใช้เวลา สองข้อโต้แย้ง:...

CSS "Floats" (อิลิเมนต์ลอย) นั้นใช้งานง่าย แต่เมื่อใช้แล้วเอฟเฟกต์ที่มีต่อองค์ประกอบรอบ ๆ บางครั้งอาจไม่สามารถคาดการณ์ได้ หากคุณเคยเจอปัญหาของการหายไปขององค์ประกอบใกล้เคียงหรือลอยที่โผล่ออกมาเหมือนนิ้วหัวแม่มือเจ็บไม่ต้องกังวลอีกต่อไป. โพสต์นี้ครอบคลุมคำถามพื้นฐานห้าข้อที่จะช่วยให้คุณเป็นผู้เชี่ยวชาญในองค์ประกอบแบบลอยตัว. องค์ประกอบใดไม่ลอย? เกิดอะไรขึ้นกับองค์ประกอบเมื่อมันลอย? เกิดอะไรขึ้นกับพี่น้องของ "โฟลต"? เกิดอะไรขึ้นกับผู้ปกครองของ "โฟลต"? คุณจะล้าง "Floats" ได้อย่างไร? สำหรับผู้อ่านที่เพิ่ม TL; dr เข้าใกล้ชีวิตมีบทสรุปใกล้ถึงจุดสิ้นสุด. 1. องค์ประกอบใดไม่ลอย? แน่นอน หรือ องค์ประกอบตำแหน่งคงที่ จะไม่ลอย ดังนั้นในครั้งต่อไปที่คุณพบลอยที่ไม่ทำงานให้ตรวจสอบว่ามันลอยอยู่ position:...

การใช้ margin: อัตโนมัติ การจัดวางองค์ประกอบบล็อกในแนวนอนเป็นศูนย์กลางเป็นเทคนิคที่รู้จักกันดี แต่คุณเคยสงสัยบ้างไหมว่าทำไมหรือได้ผลอย่างไร ในการตอบคำถามนี้ก่อนอื่นเราต้องมาดูวิธีการทำงานของ margin: auto นอกจากนี้ในการผสมคืออะไร รถยนต์ อาจทำในระยะขอบถ้ามันใช้งานได้สำหรับการจัดกึ่งกลางแนวตั้งและปัญหาอื่น ๆ. แต่แรก, อะไรนะ รถยนต์ ทำจริง? ความหมายของ รถยนต์ แตกต่างกันไปด้วย องค์ประกอบ, ประเภทองค์ประกอบ และ บริบท. ในระยะขอบ, รถยนต์ อาจหมายถึงหนึ่งในสองสิ่ง: ใช้พื้นที่ว่างหรือ 0 px ทั้งสองจะ...

การเข้ารหัสด้วย CSS3 มีการเปลี่ยนแปลงภูมิทัศน์อย่างมากในการพัฒนาเว็บส่วนหน้า มีโอกาสมากขึ้นในการสร้างส่วนต่อประสานที่ไม่ซ้ำใครด้วยการไล่ระดับสีวางเงาและมุมที่โค้งมน เอฟเฟกต์ทั้งหมดเหล่านี้กำลังถูกนำมาใช้อย่างช้าๆในเว็บเบราว์เซอร์หลักทุกแห่ง. ในบทช่วยสอนนี้ฉันต้องการแสดงลักษณะพิเศษที่ยอดเยี่ยมของ CSS3 ฉันได้สร้างเว็บฟอร์มง่ายๆโดยใช้ประเภทอินพุต HTML5 ที่ใหม่กว่าบางประเภท การจัดวาง ยังตอบสนอง; มันจะปรับเป็นขนาดหน้าต่างลดลง สถานการณ์นี้เหมาะสำหรับการสร้างเว็บฟอร์มเพื่อรองรับผู้ใช้สมาร์ทโฟน. ตรวจสอบซอร์สโค้ดและดูว่าคุณสามารถทำตามในโครงสร้างไฟล์ได้ไหม ยังสามารถปรับแต่งองค์ประกอบเหล่านี้และคัดลอกไปยังเว็บไซต์ของคุณเอง. การสาธิต ดาวน์โหลดซอร์สโค้ด การสร้างโครงสร้างแบบฟอร์ม เพื่อเริ่มต้นฉันได้สร้างไฟล์หลัก index.html พร้อมกับสไตล์ชีทที่แยกกันสองชุด. style.css มีตัวเลือกเริ่มต้นทั้งหมดในขณะที่ responsive.css จัดการขนาดหน้าต่างที่แตกต่างกัน Doctype ของฉันคือ HTML5 และฉันได้ห่อทั้งฟอร์มไว้ในคอนเทนเนอร์...

บทความนี้เป็นส่วนหนึ่งของเรา "ชุดบทแนะนำ HTML5 / CSS3" - ทุ่มเทเพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้น. คลิกที่นี่ เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน. วันนี้เราจะไปดู “ปะรำ” อีกครั้ง เราได้พูดถึงมันในโพสต์ก่อนหน้าของเราซึ่งพูดคุยเกี่ยวกับการใช้ -WebKit-กระโจม ทรัพย์สิน แต่คราวนี้เราจะนำเรื่องนี้ไปอีกหน่อย. ในโพสต์นี้เราจะสร้าง ปะรำเหมือน ผลกระทบโดยใช้ CSS3 Animation ด้วยวิธีนี้เราจะสามารถเพิ่มฟังก์ชั่นเพิ่มเติมที่ไม่สามารถเข้าถึงได้ด้วย -WebKit-กระโจม. นอกจากว่าคุณคุ้นเคยกับโมดูลภาพเคลื่อนไหว CSS3 แล้วเราขอแนะนำให้คุณดูข้อมูลอ้างอิงต่อไปนี้ก่อนที่จะดำเนินการตามเอกสารนี้: ภาพเคลื่อนไหว CSS3...

หากคุณเป็นนักล่าอิสระคุณมีโอกาสดาวน์โหลดอินเทอร์เฟซผู้ใช้ PSD (UI) มากมาย บางส่วนของพวกเขาน่าทึ่งอย่างแท้จริงและสามารถประหยัดเวลาของเราโดยการสร้างต้นแบบการออกแบบที่เรากำลังทำงานอยู่. ในบทความนี้เราจะเขียนโค้ด PSD UI และเปลี่ยนเป็นสิ่งที่ใช้งานได้มากกว่า เราจะเขียนโค้ด PSD UI Slider ต่อไปนี้เพื่อใช้เป็นชุดรูปแบบ jQuery UI Slider. อย่างไรก็ตาม, โปรดจดบันทึก บทช่วยสอนนี้มีไว้สำหรับ ระดับกลาง จากประสบการณ์ ต้องบอกว่ามันยังค่อนข้างง่ายที่จะติดตามตราบใดที่คุณคุ้นเคยกับ CSS และ jQuery. เอาล่ะมาเริ่มกันเลยดีกว่า. ขั้นตอนที่ 1: jQuery...

บทความนี้เป็นส่วนหนึ่งของเรา "ชุดบทแนะนำ HTML5 / CSS3" - ทุ่มเทเพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้น. คลิกที่นี่ เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน. แบบฟอร์มเข้าสู่ระบบเป็นส่วนสำคัญของเว็บไซต์แบบไดนามิกใด ๆ พวกเขามีกลไกสำหรับผู้ใช้เว็บไซต์ในการเข้าถึงเนื้อหาที่ จำกัด ในบทช่วยสอนนี้เราจะสำรวจคุณสมบัติ CSS3 มากมายเช่น text-shadow, box-shadow, การไล่ระดับสีเชิงเส้นและการเปลี่ยนภาพเพื่อสร้างรูปแบบการเข้าสู่ระบบที่เรียบง่ายและสง่างามด้วยรูปลักษณ์กระดาษซ้อนกัน. ภาพด้านบนแสดงตัวอย่างของแบบฟอร์มเข้าสู่ระบบที่เราจะสร้าง พร้อมดำน้ำแล้วหรือยัง มาเริ่มกันเลย! 1. มาร์กอัป HTML พื้นฐาน มาร์กอัป HTML...

ภาพ CSS-only เปิดเผยเอฟเฟกต์ สามารถแก้ไขได้หลายวิธี จริงๆแล้วมันค่อนข้างง่ายในการเขียนรหัสการออกแบบที่ ภาพดูโดดเด่น (ถูกข้ามโดย) พื้นหลังที่เป็นของแข็ง -คุณเพียงแค่ วางภาพ บนองค์ประกอบขนาดเล็กที่มีพื้นหลังเป็นของแข็ง. คุณสามารถได้รับผลลัพธ์เดียวกันหากคุณใช้ เส้นขอบโปร่งใส, ที่ที่คุณเก็บ ขนาดขององค์ประกอบพื้นหลังเหมือนกัน เช่นเดียวกับเบื้องหน้าและเพิ่มเส้นขอบโปร่งใสเพื่อ สร้างพื้นที่ว่าง สำหรับเบื้องหน้าจะล้นเข้ามา. มี ข้อดีบางประการในการใช้วิธีการหลัง. เนื่องจากมันเป็นเขตแดนที่โปร่งใสที่ให้พื้นที่สำหรับเบื้องหน้าที่จะล้นเราจึงสามารถ ควบคุมทิศทางของการล้น ระหว่างเส้นขอบซ้าย, ขวา, บนและล่าง นอกจากนี้ยังมีขนาดเท่ากันทั้งด้านหน้าและพื้นหลัง ทำให้ง่ายต่อการย้ายองค์ประกอบทั้งสองพร้อมกัน ข้ามหน้า. โดยสรุปเราจะดูวิธีการ สร้างรูปภาพ...