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

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

ภาพเคลื่อนไหว SVG สามารถทำได้ผ่านองค์ประกอบพื้นฐานเช่น และ . แต่สำหรับผู้ที่คุ้นเคยกับภาพเคลื่อนไหว CSS ไม่ต้องกังวลเรายังสามารถใช้คุณสมบัติภาพเคลื่อนไหว CSS กับ SVG แบบเคลื่อนไหวได้เช่นกัน. CSS Animation อาจเป็นอีกทางเลือกหนึ่งในการใช้ไลบรารี JavaScript เช่น SnapSVG ในโพสต์นี้เราจะเห็นสิ่งที่เราสามารถส่งด้วย CSS Animation ใน SVG. 1. การสร้างรูปร่าง ก่อนอื่นเราจะต้องวาดรูปร่างและวัตถุที่เราต้องการให้เคลื่อนไหว คุณสามารถใช้แอพพลิเคชั่นเช่น ร่าง, Adobe Illustrator,...

ในบทความนี้เราจะมาดูว่าเราสามารถสร้างเอฟเฟกต์ขอบมุม (แนวนอน) บนหน้าเว็บได้อย่างไร โดยพื้นฐานแล้วจะมีลักษณะดังนี้: การมีมุมที่เอียงเล็กน้อยควรทำให้เค้าโครงเว็บของเราดูแข็งแกร่งและน่าเบื่อน้อยลง ในการทำเคล็ดลับนี้เราจะใช้ หลอกองค์ประกอบ ::ก่อน และ ::หลังจาก และ การแปลง CSS3. ใช้องค์ประกอบหลอก เทคนิคนี้ใช้องค์ประกอบหลอก ::ก่อน และ ::หลังจาก เพื่อทำมุมองค์ประกอบขอบ ในตัวอย่างนี้เราจะปรับขอบด้านล่าง. .บล็อก ความสูง: 400px; ความกว้าง: 100%; ตำแหน่ง: ญาติ; พื้นหลัง: การไล่ระดับสีเชิงเส้น (ไปทางขวา,...

บทความนี้เป็นส่วนหนึ่งของเรา "ชุดบทแนะนำ HTML5 / CSS3" - ทุ่มเทเพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้น. คลิกที่นี่ เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน. โลโก้ฟีด RSS เป็นหนึ่งในโลโก้ที่ใช้บ่อยที่สุดในการออกแบบเว็บเนื่องจากฟังก์ชั่นที่อ้างถึง คุณเห็นบทเรียนมากมายเกี่ยวกับการวาดโลโก้ฟีด RSS โดยใช้ซอฟต์แวร์กราฟิกเช่น Photoshop แต่จะเป็นอย่างไร วาดมันอย่างหมดจดโดยใช้ CSS3? อ๋อคุณได้ยินฉัน :-) ในโอกาสนี้ฉันอยากจะแสดงให้คุณเห็นวิธีง่ายๆในการสร้างโลโก้ตัวดึงข้อมูล RSS มาตรฐานด้วย CSS3 ดังนั้นให้ทำตามขั้นตอนและกราฟิกที่ครอบคลุมเพื่อรับโลโก้ตัวดึงข้อมูล CSS3 ตัวแรกของคุณ!...

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

ความนิยมของ เมนูการกระทำลอยตัว ได้รับการเพิ่มขึ้นโดยเฉพาะอย่างยิ่งตั้งแต่ Medium.com นำคุณลักษณะนี้มาสู่ความนิยม โดยย่อเมนูการกระทำลอยตัว ปรากฏขึ้น เมื่อคุณ เลือกข้อความ บนหน้าเว็บ เมนูจะปรากฏขึ้นใกล้กับส่วนที่เลือก, แสดงการกระทำที่แตกต่าง ที่ช่วยให้คุณสามารถจัดรูปแบบไฮไลต์หรือแบ่งปันข้อความที่เลือกได้อย่างรวดเร็ว. ในบทช่วยสอนนี้ฉันจะแสดงวิธีการแสดง เมนูการกระทำสำหรับตัวอย่างข้อความที่เลือก บนหน้าเว็บ เมนูการกระทำของเราจะช่วยให้ผู้ใช้ ทวีตข้อความที่เลือก ถึงผู้ติดตามของพวกเขา. 1. สร้าง HTML HTML เริ่มต้นนั้นง่าย, เราต้องการเท่านั้น ข้อความบางส่วน ผู้ใช้สามารถเลือก สำหรับตัวอย่างฉันจะใช้ “ฮาร์ตและนักล่า” นิทานก่อนนอน...

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

สองสามเดือนที่ผ่านมาฉันแสดงวิธีสร้างโลโก้ฟีด RSS ด้วย CSS3 ฉันคิดว่ามันสนุกที่จะสร้างบางสิ่งที่ซับซ้อนขึ้นเล็กน้อย ในโพสต์ของวันนี้ฉันจะแสดงให้คุณเห็นว่าจะสร้างได้อย่างไร แต่มีโลโก้ Gmail สองแบบโดยใช้ CSS3. ทางลัดไปยัง: Gmail logo CSS tutorial # 1 | ดูตัวอย่าง โลโก้ Gmail สอน CSS # 2 | ดูตัวอย่าง โลโก้ Gmail #...