ออกแบบเว็บไซต์ - หน้า 25

การประมวลผลล่วงหน้าของ CSS เป็นแนวคิดที่นักพัฒนาเว็บส่วนใหญ่เรียนรู้หรืออ่านไปแล้ว เราได้ครอบคลุมการประมวลผลล่วงหน้าของ CSS ในรายละเอียดที่ยอดเยี่ยมเพื่อช่วยให้นักพัฒนาได้อย่างรวดเร็วในเทคโนโลยีที่แพร่หลายนี้ แต่สิ่งที่เกี่ยวกับ โพสต์โปรเซสเซอร์? เครื่องมือที่ค่อนข้างใหม่เหล่านี้มีความคล้ายคลึงกันในแง่ที่พวกเขา ส่งผลกระทบต่อเวิร์กโฟลว์การพัฒนาเว็บ, อย่างไรก็ตามพวกเขาทำงานบน อีกด้านหนึ่งของการพัฒนา CSS (“เสา” การพัฒนา). ในโพสต์นี้ฉันอยากจะแนะนำ พื้นฐานของการประมวลผลภายหลัง, มันทำงานอย่างไรทำไมคุณถึงใช้งานและแบ่งปันไลบรารี / เครื่องมือสองสามอย่างที่คุณสามารถใช้เพื่อเพิ่มเกม CSS ของคุณด้วยการโพสต์. โพสต์กับการประมวลผลล่วงหน้า การปฏิวัติการประมวลผลล่วงหน้า เกิดขึ้นเมื่อ Sass / LESS เข้าฉาก. เครื่องมือเหล่านี้ช่วยให้นักพัฒนาสามารถใช้ตัวแปรลูปฟังก์ชั่นและมิกซ์อินภายใน...

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

บทความนี้เป็นส่วนหนึ่งของเรา "ชุดบทแนะนำ HTML5 / CSS3" - ทุ่มเทเพื่อช่วยให้คุณเป็นนักออกแบบและ / หรือนักพัฒนาที่ดีขึ้น. คลิกที่นี่ เพื่อดูบทความเพิ่มเติมจากซีรี่ส์เดียวกัน. CSS3 เป็นภาษาสไตล์ชีทรุ่นต่อไป มันแนะนำคุณสมบัติใหม่และน่าตื่นเต้นมากมายเช่นเงา, ภาพเคลื่อนไหว, การเปลี่ยน, รัศมีเส้นขอบ ฯลฯ แม้ว่าคุณสมบัติยังไม่เสร็จสมบูรณ์ผู้ผลิตเบราว์เซอร์จำนวนมากได้เริ่มสนับสนุนคุณสมบัติใหม่มากมายแล้ว. ในบทช่วยสอนนี้เราจะสำรวจคุณลักษณะเหล่านี้บางอย่างเช่น ข้อความเงา, border-radius, กล่องเงา และการเปลี่ยนเพื่อสร้างช่องค้นหาโยก. รุ่น photoshop ของช่องค้นหานี้ถูกสร้างขึ้นโดย Alvin Thong และสามารถดาวน์โหลดได้จากที่นี่...

Dribbble เป็นเว็บไซต์ยอดนิยมที่อยู่ในขอบเขตการออกแบบที่คุณสามารถแชร์โครงการ WIP, การออกแบบ, การจำลองและแม้แต่ของว่าง ในทางกลับกันคุณจะได้รับข้อเสนอแนะและคำวิจารณ์จากนักออกแบบเพื่อนซึ่งเป็นการผลักดันการออกแบบของคุณไปสู่อีกระดับ. หากคุณต้องการปรับเปลี่ยนวิธีการแสดงพอร์ตโฟลิโอของคุณคุณสามารถแสดงช็อตภายใต้โดเมนของคุณเอง เพื่อช่วยในเรื่องนี้คุณสามารถทดลองใช้ Dribbbox. Dribbbox เป็นห้องสมุดที่ช่วยให้เราแสดงภาพ Dribbble ภายใต้โดเมนของเราเองจะไม่ยุ่งยาก ลองมาดูกันว่าคุณสามารถตั้งค่า Dribbbox เพื่อจัดแสดงผลงานศิลปะของคุณได้อย่างไร. การติดตั้ง Dribbbox ฉันสมมติว่าคุณมีโดเมนและการตั้งค่าเซิร์ฟเวอร์ของคุณ โฮสติ้งที่ใช้ร่วมกันควรจะทำงานได้ดี มิฉะนั้นคุณสามารถเรียกใช้เซิร์ฟเวอร์ท้องถิ่นหากคุณไม่มี หากคุณต้องการคำแนะนำเกี่ยวกับวิธีการตั้งค่าเซิร์ฟเวอร์ภายในด้วย AMPPS อ่านได้ที่นี่. ดาวน์โหลดแพ็คเกจ ZIP และอัปโหลดเนื้อหาไปยังเซิร์ฟเวอร์ รวม index.html, config.js...

มุมโค้งมนเป็นสิ่งที่ยอดเยี่ยมสำหรับการออกแบบ Web 2.0 RoundPic เป็นเว็บไซต์ที่ช่วยให้คุณปัดมุมของภาพ คุณสามารถ อัปโหลดภาพของคุณเอง หรือ พิมพ์ URL ภาพในช่องข้อความ, จากนั้นคลิก ปัดเศษ! RoundPic มีมุมโค้งมน 12 แบบให้เลือกคุณยังสามารถตั้งค่าของคุณเอง คุณภาพของภาพ, สีพื้นหลัง และ ขนาดภาพ. เพียงคลิกที่ ดูตัวอย่าง ทุกครั้งที่คุณทำการเปลี่ยนแปลง ในที่สุดเปลี่ยนชื่อไฟล์ของคุณและดาวน์โหลด มันง่ายมากจริงๆ. ต่อไปนี้เป็นอีก 3 วิธีที่คุณสามารถทำมุมออนไลน์ได้.

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

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

หนึ่งในฟิลด์ที่ยากที่สุดในการสร้างคือ เลือกวันที่ / เวลา. นักพัฒนามักหันมาเลือกเมนูแบบง่าย ๆ สำหรับเดือน / วัน / ปีหรือใช้ปลั๊กอินต่าง ๆ ในการทำงาน. เลือกเขตข้อมูลทำงานได้ดี แต่พวกเขาจะ clunky เล็กน้อย คุณสามารถแจ๊สแบบฟอร์มของคุณด้วย ปลั๊กอิน Flatpickr. มันคือ ฟรีตัวเลือกปฏิทิน JavaScript แบบโอเพ่นซอร์สที่ไม่มีการพึ่งพาศูนย์. มันเป็น ออกแบบด้วยความเรียบง่ายในใจ, เพื่อให้สามารถพอดีกับเลย์เอาต์ของเว็บไซต์รูปแบบเว็บใด ๆ และควรใช้งานได้จากอุปกรณ์ที่ทันสมัย. สิ่งหนึ่งที่ดีเกี่ยวกับปลั๊กอินนี้คือ...