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

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

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

หนึ่งในส่วนที่ยากที่สุดที่จะเป็น responsified บนเว็บไซต์คือ “การนำทาง”, ส่วนนี้มีความสำคัญอย่างยิ่งต่อการเข้าถึงเว็บไซต์เนื่องจากนี่เป็นหนึ่งในวิธีที่ผู้เข้าชมข้ามหน้าเว็บ. จริงๆแล้วมีหลายวิธีในการสร้างการนำทางเว็บไซต์ที่ตอบสนองและแม้กระทั่งบางปลั๊กอิน jQuery ก็สามารถทำได้ในไม่กี่วินาที. อย่างไรก็ตามแทนที่จะใช้วิธีแก้ปัญหาแบบทันทีในโพสต์นี้เราจะแนะนำคุณต่อไป วิธีการสร้างการนำทางอย่างง่ายจากพื้นดิน และใช้คิวรี่สื่อ CSS3 และ jQuery เล็กน้อยเพื่อแสดงในหน้าจอขนาดเล็กเช่นสมาร์ทโฟนอย่างถูกต้อง. ดังนั้นเรามาเริ่มกันเลย. การสาธิต แหล่งดาวน์โหลด HTML ก่อนอื่นให้เพิ่มเมตาวิวพอร์ตภายใน หัว แท็ก นี้ เมตาวิวพอร์ต จำเป็นต้องใช้แท็กสำหรับหน้าเว็บของเราในการปรับขนาดอย่างเหมาะสมภายในขนาดหน้าจอใด ๆ โดยเฉพาะในวิวพอร์ตมือถือ. …แล้วเพิ่มตัวอย่างต่อไปนี้เป็นมาร์กอัปการนำทางภายใน ร่างกาย แท็ก....

รายการแบบเลื่อนลงเป็นวิธีที่เรียบร้อยสำหรับ ตัวเลือกให้ สำหรับฟิลด์อินพุตโดยเฉพาะเมื่อรายการของตัวเลือกที่มีอยู่มีความยาว ผู้ใช้สามารถเลือกตัวเลือกที่พวกเขาต้องการ พิมพ์ลงในช่อง, หรือ มองผ่านตัวเลือกต่างๆ นั่นอาจเป็นการจับคู่สิ่งที่พวกเขากำลังมองหา. ความสามารถในการค้นหาผ่านตัวเลือกต่างๆ, อย่างไรก็ตามเป็นทางออกที่ดี. พฤติกรรมนี้สามารถทำได้ด้วยการ องค์ประกอบ HTML ที่ แสดงคำแนะนำสำหรับการป้อนข้อมูล สำหรับการควบคุมที่แตกต่างกันเช่น แท็ก อย่างไรก็ตาม แสดงตัวเลือกที่มีให้เฉพาะเมื่อผู้ใช้มี พิมพ์อะไรบางอย่างแล้ว ลงในช่องป้อนข้อมูล. เราสามารถทำให้ฟิลด์อินพุตใช้งานได้มากขึ้นถ้าเราเปิดใช้งานผู้ใช้ เข้าถึงรายการตัวเลือกทั้งหมด ตลอดเวลาระหว่างกระบวนการรับอินพุต. ในโพสต์นี้เราจะมาดูวิธีการสร้าง รายการแบบหล่นลงที่สามารถค้นหาได้ตลอดเวลา ใช้ และ องค์ประกอบ HTML...

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

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

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

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