เมื่อเร็ว ๆ นี้ฉันได้ออกแบบเว็บไซต์บล็อกของตัวเองใหม่และตัดสินใจใช้ไอคอนสไตล์ปฏิทินเพื่อแสดงเวลา วิธีการแก้ปัญหาก่อนหน้านี้คือการใช้ภาพพื้นหลัง ขอบคุณ CSS3 ตอนนี้เราสามารถใช้ฟังก์ชั่นดังกล่าวได้โดยใช้ CSS3 ฉันจะใช้คุณสมบัติบางอย่างเช่นเชิงเส้นกราดรัศมีเส้นขอบและเงากล่องเพื่อแทนที่การออกแบบ Photoshop ก่อนหน้า
ไดอะแกรมแนวคิด Photoshopนักออกแบบหลายคนใช้วิธีการออกแบบโดยตรงบนเบราว์เซอร์ แต่ฉันยังคงชอบวิธีการทำไดอะแกรมแนวคิด Photoshop ก่อน แม้ว่าเอฟเฟกต์จำนวนมากสามารถนำไปใช้โดยตรงกับ CSS ในขณะนี้ แต่วิธีการออกแบบเอฟเฟกต์ด้วย Photoshop นั้นง่ายกว่าวิธีการพยายามปรับเปลี่ยน CSS อย่างต่อเนื่องเพื่อให้ได้เอฟเฟกต์ที่คุณต้องการในที่สุด
ก่อนอื่นสร้างสี่เหลี่ยมโค้งมนและตั้งรัศมีมุมโค้งมนเป็น 10px หลังจากนั้นเราจะใช้ทรัพย์สินของ Radius Border ของ CSS
เพิ่มการไล่ระดับสีแนวตั้งลงในสี่เหลี่ยมผืนผ้าสีไล่ระดับสีมาจาก #dad8d8 ถึง #FCFCFC
ตั้งค่าจังหวะ 1 พิกเซลสีคือ #e3e3e3
ในที่สุดก็เพิ่มเอฟเฟกต์เงาลงด้วยความโปร่งใส 20% ระยะทาง 0 พิกเซลและขนาด 15 พิกเซล เอฟเฟกต์เหล่านี้จะถูกนำไปใช้ใน CSS โดยใช้คุณสมบัติ Box-Shadow
คัดลอกสี่เหลี่ยมตอนนี้และลบส่วนบน ปรับเปลี่ยนการไล่ระดับสีสีจาก #790909 เป็น #D40000 เติมสี่เหลี่ยมที่สร้างขึ้นใหม่ซึ่งจะวางข้อมูลเดือน
ตั้งเงาภายในเพื่อเป็นตัวแทนของเส้นขอบด้านบนสีคือ #A13838, ความโปร่งใส 100%, ระยะทาง 3px และขนาด 0px
ใช้เครื่องมือฟอนต์ของ Photoshop เพื่อตั้งค่าเอฟเฟกต์ตัวอักษรของครึ่งแรกของไอคอนปฏิทิน ตัวอักษรคือ helvetica และสีคือ #9e9e9e
ป้อนข้อมูลเดือนในส่วนสีแดงด้านล่างตั้งตัวอักษรให้กว้างและสีเป็นสีขาว
รุ่น Photoshop เสร็จสมบูรณ์ ในอดีตเราจะถ่ายภาพเป็นพื้นหลังและเขียนหมายเลข HTML ลงไป แต่ตอนนี้ทั้งหมดนี้สามารถทำได้ด้วย CSS
โครงสร้าง HTML<div class = วันที่>
<p> 25 <pan> อาจ </span> </p>
</div>
ครั้งนี้ HTML ของไอคอน Demo นั้นง่ายมาก เราจะใช้ div ที่มีคลาส 'วันที่' เป็นคอนเทนเนอร์จากนั้นใช้แท็ก P เพื่อแสดงหมายเลขวันที่ วันและเดือนแสดงด้วยขนาดที่แตกต่างกันในการออกแบบของเราดังนั้นเราจะใช้แท็ก <span> เพื่อรักษาองค์ประกอบที่แตกต่างกัน
สไตล์ CSS.วันที่ {
ความกว้าง: 130px; ความสูง: 160px;
ความเป็นมา: #FCFCFC;
ความเป็นมา: linear-gradient (บนสุด, #fcfcfc 0%, #dad8d8 100%);
ความเป็นมา: -moz-Linear-Gradient (บนสุด, #FCFCFC 0%, #dad8d8 100%);
ความเป็นมา: -webkit-linear-gradient (บนสุด, #fcfcfc 0%, #dad8d8 100%);
-
รูปแบบ CSS ตั้งค่าความสูงและความกว้างของภาชนะทั้งหมดเป็นครั้งแรกและเอฟเฟกต์การไล่ระดับสีสามารถทำได้อย่างง่ายดายผ่านการไล่ระดับสี CSS
.วันที่ {
ความกว้าง: 130px; ความสูง: 160px;
ความเป็นมา: #FCFCFC;
ความเป็นมา: linear-gradient (บนสุด, #fcfcfc 0%, #dad8d8 100%);
ความเป็นมา: -moz-Linear-Gradient (บนสุด, #FCFCFC 0%, #dad8d8 100%);
ความเป็นมา: -webkit-linear-gradient (บนสุด, #fcfcfc 0%, #dad8d8 100%);
ชายแดน: 1px Solid #D2D2D2;
แนวชายแดน: 10px;
-MOZ-Border-Radius: 10px;
-webkit-Border-Radius: 10px;
-
ใช้แอตทริบิวต์เส้นขอบเพื่อให้ได้เอฟเฟกต์ชายแดน 1PX ใน Photoshop จากนั้นใช้ Radius เส้นขอบเพื่อให้ได้เอฟเฟกต์มุมโค้งมน อย่าลืมเพิ่ม -moz- และ -webkit- คำนำหน้าเพื่อเปิดใช้งานความเข้ากันได้กับเบราว์เซอร์รุ่นเก่า
.วันที่ {
ความกว้าง: 130px; ความสูง: 160px;
ความเป็นมา: #FCFCFC;
ความเป็นมา: linear-gradient (บนสุด, #fcfcfc 0%, #dad8d8 100%);
ความเป็นมา: -moz-Linear-Gradient (บนสุด, #FCFCFC 0%, #dad8d8 100%);
ความเป็นมา: -webkit-linear-gradient (บนสุด, #fcfcfc 0%, #dad8d8 100%);
ชายแดน: 1px Solid #D2D2D2;
แนวชายแดน: 10px;
-MOZ-Border-Radius: 10px;
-webkit-Border-Radius: 10px;
Box-Shadow: 0px 0px 15px RGBA (0,0,0,0.1);
-moz-box-shadow: 0px 0px 15px RGBA (0,0,0,0.1);
-Webkit-Box-Shadow: 0PX 0PX 15PX RGBA (0,0,0,0.1);
-
ส่วนสุดท้ายของรหัสคือการบรรลุเอฟเฟกต์เงาที่ต่ำกว่าในการออกแบบ Photoshop ผ่าน Box-Shadow เพิ่ม 0px แนวนอนและออฟเซ็ตแนวตั้งเพื่อเพิ่มความคลุมเครือของ 15px ใช้ RGBA เพื่อควบคุมความโปร่งใส ในการออกแบบ Photoshop 105 จะถูกแทนที่ด้วย 0.1 ที่นี่
.date P {
Font-Family: Helvetica, Sans-Serif;
ขนาดตัวอักษร: 100px; TEXT-ALIGN: CENTER; สี: #9E9E9E;
-
เราใช้แท็ก P เพื่อกำหนดสไตล์เพื่อกำหนดรูปแบบข้อความสำหรับวันที่ ตัวอักษรขนาดข้อความและสีข้อความทั้งหมดถูกคัดลอกมาจาก Photoshop และการจัดแนวข้อความถูกตั้งค่าเป็นศูนย์กลาง แต่สไตล์ก็มีผลกระทบต่อข้อความเดือนและเราจะกำหนดรูปแบบฉลาก Span สำหรับมันแยกกัน
.date P Span {
ความเป็นมา: #D10000;
ความเป็นมา: linear-gradient (บนสุด, #D10000 0%, #7A0909 100%);
ความเป็นมา: -Moz-Linear-Gradient (บนสุด, #D10000 0%, #7A0909 100%);
ความเป็นมา: -webkit-Linear-Gradient (บนสุด, #D10000 0%, #7A0909 100%);
-
การใช้งานของชิ้นส่วนสีแดงทำได้โดยการตั้งค่าแอตทริบิวต์เชิงเส้นกราดสำหรับพื้นหลังของช่วงและค่าสีแดงก็มาจาก Photoshop
.date P Span {
ความเป็นมา: #D10000;
ความเป็นมา: linear-gradient (บนสุด, #D10000 0%, #7A0909 100%);
ความเป็นมา: -Moz-Linear-Gradient (บนสุด, #D10000 0%, #7A0909 100%);
ความเป็นมา: -webkit-Linear-Gradient (บนสุด, #D10000 0%, #7A0909 100%);
ขนาดตัวอักษร: 45px; Font-Weight: ตัวหนา; สี: #FFFF; การเปลี่ยนข้อความ: ตัวพิมพ์ใหญ่;
แสดง: บล็อก;
-
ปรับเปลี่ยนรูปแบบข้อความเพื่อให้ตรงกับการออกแบบกำหนดขนาดเป็น 45px ตั้งค่าเป็นตัวอักษรตัวหนาตั้งค่าสีเป็นสีขาวและใช้การแปลงข้อความเพื่อใช้การแปลงทุน ตั้งค่าแท็ก SPAN เป็นองค์ประกอบบล็อกเพื่อให้ตรงกับขนาดของคอนเทนเนอร์และตั้งค่าพื้นหลังสีแดง
.date P Span {
ความเป็นมา: #D10000;
ความเป็นมา: linear-gradient (บนสุด, #D10000 0%, #7A0909 100%);
ความเป็นมา: -Moz-Linear-Gradient (บนสุด, #D10000 0%, #7A0909 100%);
ความเป็นมา: -webkit-Linear-Gradient (บนสุด, #D10000 0%, #7A0909 100%);
ขนาดตัวอักษร: 45px; Font-Weight: ตัวหนา; สี: #FFFF; การเปลี่ยนข้อความ: ตัวพิมพ์ใหญ่;
แสดง: บล็อก;
ชายแดนด้านบน: 3px Solid #A13838;
แนวชายแดน: 0 0 10px 10px;
-moz-Border-Radius: 0 0 10px 10px;
-webkit-Border-Radius: 0 0 10px 10px;
Padding: 6px 0 6px 0;
-
ส่วนที่เหลือคือการเพิ่มเส้นขอบหัวใช้รูปแบบด้านบนชายแดนเพื่อใช้งานและใช้แอตทริบิวต์แนวชายแดนเพื่อใช้มุมโค้งมนทั้งสองที่ส่วนล่าง แอตทริบิวต์ช่องว่างเล็ก ๆ น้อย ๆ สามารถทำให้ข้อความเดือนมีระยะห่างระหว่างขึ้นและลงและองค์ประกอบอื่น ๆ
ความเข้ากันได้ของเบราว์เซอร์แม้ว่าคุณสมบัติที่ดีขึ้นของ CSS สามารถช่วยให้เราบรรลุผลของการไล่ระดับสีและเงาใน Photoshop แต่เรายังต้องเผชิญกับปัญหาที่นักออกแบบเว็บไซต์ต้องเผชิญในอดีตความเข้ากันได้ของเบราว์เซอร์