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

Firefox จะปรับขนาดรูปภาพของคุณโดยอัตโนมัติตามค่าเริ่มต้นหากเกินขนาดหน้าจอ หากคุณต้องการที่จะเห็นมุมมอง 100% และไม่ต้องเลื่อนดูนี่เป็นเรื่องเล็กน้อยที่คุณสามารถทำได้เพื่อปิดใช้งานการปรับขนาดอัตโนมัติ. ชนิด เกี่ยวกับ config ในแถบที่อยู่ Firefox ค้นหา browser.enable_automatic_image_resizing เปลี่ยนเป็น เท็จ

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

ลาด เป็นคุณสมบัติสีที่ยอดเยี่ยมใน CSS3 แทนที่จะเพิ่มเพียงสีเดียวตอนนี้เราสามารถเพิ่มชุดค่าผสมหลายสีในหนึ่งบล็อคการประกาศโดยไม่ต้องอาศัยรูปภาพซึ่งสามารถลดคำขอ HTTP ในเว็บไซต์ของเราทำให้เว็บไซต์โหลดเร็วขึ้น. หากคุณเล่นกับการไล่ระดับสีใน CSS3 คุณอาจคุ้นเคยกับทั้งสองวิธี: การไล่ระดับสีแบบรัศมีและเชิงเส้น โพสต์ของวันนี้จะเกี่ยวกับหลัง. การสร้างการไล่ระดับสี ข้อมูลจำเพาะระบุว่าการไล่ระดับสีใน CSS3 เป็นรูปภาพจึงไม่มีคุณสมบัติพิเศษเช่นการเพิ่มคุณสมบัติใหม่อื่น ๆ ดังนั้นจึงมีการประกาศโดยใช้ ภาพพื้นหลัง ทรัพย์สินแทน. ถ้าเราดูที่ syntax ที่สมบูรณ์สำหรับการไล่ระดับสีมันจะดูเล็กน้อย overstuffed, ซึ่งอาจนำไปสู่ความสับสนสำหรับบางคน. div background-image: -webkit-linear-gradient (บนสุด, # FF5A00...

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

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

บทความนี้เป็นส่วนหนึ่งของเรา "ชุดบทแนะนำ HTML5 / CSS3" - ทุ่มเทเพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้น. คลิกที่นี่ เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน. ตัวเลือกคุณสมบัติ เป็นคุณสมบัติที่มีประโยชน์จริงๆในการเลือกองค์ประกอบโดยไม่ต้องเพิ่มฟุ่มเฟือย รหัส หรือ ชั้นเรียน. ตราบใดที่องค์ประกอบเป้าหมายมีคุณสมบัติเช่นนั้น href, src และ ชนิด เราไม่ต้องทำเช่นนั้น. ตัวเลือกคุณลักษณะนั้นมีอยู่จริง ตั้งแต่ CSS 2.1, และตอนนี้เมื่อมีตัวเลือกแอททริบิวต์เพิ่มอีกสองสามชนิดในสเปค CSS3 เราสามารถกำหนดเป้าหมายคุณลักษณะขององค์ประกอบได้โดยเฉพาะยิ่งขึ้น. และในโพสต์นี้เราจะใช้หนึ่งในไวยากรณ์เพื่อเลือก...

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

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