คำถามติดแท็ก css

ในฐานะนักพัฒนาเว็บทั้งสถาปนิก front-end และ back end ฉันทำงานกับนักออกแบบหลายคนและบางครั้งก็พบว่ามันน่าผิดหวังในการทำงานกับ comps ที่ไม่คิดว่าจะทำอย่างไรให้สำเร็จใน CSS และ HTML พื้นฐาน ในทางกลับกันในฐานะนักพัฒนาฉันคาดว่าจะสามารถสร้างโค้ดจากการออกแบบใด ๆ นักออกแบบเว็บไซต์จำเป็นต้องรู้เทคนิค CSS และ HTML พื้นฐานหรือไม่ ทำไมหรือเพราะเหตุใดจึงไม่สำคัญกับนักออกแบบเว็บไซต์ที่โค้งมนอย่างดี ความคิดทั่วไปบางอย่าง: นักพัฒนาเว็บส่วนหน้าควรมีทักษะเพียงพอที่จะเขียนโค้ดออกแบบ นักออกแบบเว็บไซต์ควรมีความเข้าใจว่าผู้ใช้จะโต้ตอบกับการออกแบบอย่างไร ร้านค้าออกแบบค่อนข้างจะมีนักออกแบบและปล่อยให้รหัสทั้งหมดขึ้นอยู่กับนักพัฒนา

31 website-design  css  designers 

ฉันมาที่นี่เพื่อค้นหาความช่วยเหลือหรือคำแนะนำเล็กน้อยเกี่ยวกับวิธีที่ฉันสามารถปรับปรุงสิ่งต่อไปนี้: เช่นเดียวกับชื่อกล่าวว่าฉันมีแบนเนอร์เว็บไซต์ที่มีข้อความหลายข้อความแสดงบนภาพที่แตกต่างกันเป็นพื้นหลัง ตอนนี้เนื่องจากภาพส่วนใหญ่มืดฉันได้ตั้งค่าสีฟอนต์เป็นสีขาว แต่ถึงกระนั้นข้อความบางส่วนก็ไม่สามารถอ่านได้ในสองภาพเช่น: ตั้งแต่ฉันทำงานกับ CSS ฉันได้ลองใช้ตัวเลือกต่าง ๆ เช่น: การเพิ่มเงาข้อความ: CSS: text-shadow: 3px 3px 0px #000; ลองสร้างกล่องกึ่งโปร่งใสรอบข้อความ: การสาธิต ฉันรู้สึกว่ากล่องหนึ่งมองออกไปนอกสถานที่ ฉันได้สร้างซอสำหรับผู้ที่รู้จัก CSS ถ้าไม่โปรดแนะนำให้ฉันตามจินตนาการของคุณคนเดียว PS: คุณสามารถให้คำแนะนำในการใช้แบบอักษรที่แตกต่างกันถ้ามันจะช่วยให้มันโดดเด่นกว่า

30 website-design  color  text  images  css 

ฉันสร้างไอคอน Facebook ที่กำหนดเองโดยใช้ Inkscape และบันทึกเป็น svg มันใช้แบบอักษรเดียวกับชื่อของหน้าของฉันซึ่งใช้แบบอักษร "ubuntutitling-bold-webfont" ซึ่งฉันได้อ้างถึงเป็น. woff ในไฟล์ CSS ฟังก์ชั่นชื่อ แต่ svg ไม่ได้ - มันจะแสดง "f" ในแบบอักษรเริ่มต้นการจัดเรียงบางอย่าง ไฟล์ฟอนต์ตั้งอยู่ที่ ../fonts/ubuntutitling-bold-webfont.woff ในความสัมพันธ์กับ CSS และไฟล์รูปภาพและที่ fonts / ubuntutitling-bold-webfont.woff ในความสัมพันธ์กับหน้าเว็บ ฉันจะฝังแบบอักษรบนเว็บของ Google ลงใน SVG ได้อย่างไร แต่ฉันสับสนเล็กน้อยเกี่ยวกับวิธีการใช้รหัสกับ SVG หากฉันต้องการ SVG สามารถใช้แบบอักษร. woff ที่อ้างอิงในไฟล์ CSS ได้หรือไม่ วิธีที่ฉันเปลี่ยนแบบอักษรด้วยตนเองภายในไฟล์ SVG ถูกต้องหรือไม่? นี่คือรหัสสำหรับ SVG: <?xml version="1.0" …

28 css  svg  web-fonts 

ฉันมีภาพประกอบสองสามเล่มที่วาดไว้ใน Illustrator และฉันวางแผนที่จะสร้างภาพเคลื่อนไหวสำหรับเว็บไซต์ที่ฉันกำลังทำงานอยู่ฉันได้ยินชื่อชุดเครื่องมือCreate.jsพร้อมแฟลช แต่มันเป็นวิธีที่ดีที่สุดที่จะไปหรือมีอีก " วิธีที่ดีกว่าในการทำ? นี่คือตัวอย่างของประเภทของภาพเคลื่อนไหวที่ฉันต้องการ: http://kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/

27 website-design  css  animation  illustration  adobe-flash 

หมายเหตุนี่เป็นเรื่องเกี่ยวกับการออกแบบมากกว่าการพัฒนา ฉันสร้างเว็บไซต์ตั้งแต่เริ่มต้นด้วย CSS และ HTML ที่เขียนด้วยมืออย่างสมบูรณ์ ฉันรู้เกี่ยวกับเทมเพลต css ที่สร้างไว้ล่วงหน้าเช่นBootstrapหรือHTML5 Boilerplateเป็นระยะเวลาหนึ่ง ฉันได้ดูพวกเขาเมื่อไม่นานมานี้ แต่ไม่เคยใช้มันเพื่ออะไรเลย ฉันไม่มีปัญหาในการรีเซ็ต CSS หรือรวมถึงจาวาสคริปต์เมื่อจำเป็นหรือกำหนดค่าสำหรับวิวพอร์ต เย็นวันนี้ฉันเขียนหน้า HTML5 / CSS พื้นฐาน ไม่มีอะไรที่ทำให้โลกสั่นสะเทือนในแง่ของการจัดวาง เพียงแค่กระโดดออกจากจุด หลังจากนั้นฉันตัดสินใจที่จะให้ Bootstrap วนด้วยเค้าโครงเดียวกัน มันเป็นมาตรฐานขนาด 960px, 3 คอลัมน์พร้อมหน้าภาพฮีโร่ ขณะที่ฉันเปลี่ยน Bootstrap มันเกิดขึ้นกับฉันว่า 80% หรือมากกว่านั้นใช้เวลาในการเรียนรู้ว่าจะใช้คลาสหรือรหัสใดกับสิ่งใดจากนั้นจึงหาสิ่งนั้นใน CSS เพื่อปรับเปลี่ยน เป็นที่ชัดเจนว่า Bootstrap จะไม่ช่วยฉันได้ตลอดเวลา ในความเป็นจริง Bootstrap จะเพิ่มเวลาในการผลิตอย่างมากเนื่องจาก CSS ที่สร้างอุณหภูมิสูงเกินไป * ( โดย "เทมเพลตมากเกินไป" ฉันหมายความว่ามี CSS …

27 website-design  css  website-templates  html 

มีวิธีแก้ไขไฟล์ SVG ใน Illustrator ที่คุณสามารถระบุคลาส CSS สำหรับแต่ละพา ธ ได้ไหม ฉันรู้อยู่แล้วใน Illustrator ว่าถ้าคุณตั้งชื่อเลเยอร์เป็นชื่อจริงแล้ว Illustrator จะใช้ชื่อนั้นเป็น ID ของพา ธ ซึ่งใช้ได้ถ้าคุณไม่ได้วางแผนที่จะใช้ไอคอนซ้ำอีกครั้งในหน้าเดียวกัน วิธีแก้ปัญหาปัจจุบันของฉันคือการใช้เมธอด ID แต่หลังจากนั้นแปลง ID เป็นคลาสในตัวแก้ไขโค้ดของฉัน แต่มันค่อนข้างน่ารำคาญที่ต้องทำทุกครั้งที่สร้างสไปรต์ SVG ของฉัน หากไม่สามารถทำได้ใน Illustrator ในปัจจุบันมีแอพอื่น ๆ ที่จะอนุญาตให้คุณระบุหรือไม่? หรืออาจเป็นแพ็คเกจ Grunt หรือ Gulp? ดูเหมือนว่าคุณอาจจะทำกับ Inkscape ด้วยการแฮ็กดังนั้นฉันอาจดูว่าหากไม่มีวิธีแก้ปัญหาที่ดีอื่น ๆ

21 adobe-illustrator  css  svg 

ฉันเห็นว่านี่อาจเป็นคำถาม noob แต่มันทำให้ฉันสับสนจริงๆ ฉันกำลังอ่านเอกสารจากการออกแบบวัสดุของ Google พร้อมกับการนำไปใช้งานใน css ข้อมูลจำเพาะจะถูกเขียนใน Android dpในขณะที่รหัส css ใช้pxเป็นหน่วยความยาว สิ่งที่ทำให้ฉันสับสนคือการใช้งาน css มักใช้ค่าที่แน่นอนจากข้อมูลจำเพาะตัวอย่างเช่นขนมปังควรมี : ความสูงของสแน็กบาร์แบบบรรทัดเดียว: สูง 48 dp ความกว้างขั้นต่ำ: 288 dp มุมโค้งมน 2 dp CSS ที่เกี่ยวข้อง : min-height: 48px; min-width: 288px; ... border-radius: 2px; ในความเข้าใจปัจจุบันของฉัน Android DPโดยทั่วไปจะแสดงที่ขนาดหนึ่งพิกเซลบนหน้าจอ 160dpi ในขณะที่ CSS pxถูกกำหนดเป็นมุมมองภาพ ดังนั้นสิ่งที่pxเกิดขึ้นจะเหมือนกับdpเมื่อเห็นในระยะไกล? ถ้าเป็นเช่นนั้นเป็นรูปแบบทั่วไปที่ใช้pxเหมือนdpใน css หรือว่าฉันเข้าใจผิดรหัส CSS อย่างสมบูรณ์หรือไม่ ฉันไม่รู้อะไรเลยเกี่ยวกับการพัฒนา …

17 css  android 

ฉันมี PSD ที่มีการออกแบบเว็บ ทุกครั้งที่ฉันปรับแต่งการออกแบบฉันต้องคัดลอกส่วนต่าง ๆ ของภาพด้วยตนเองด้วยความสามารถในการมองเห็นเลเยอร์ที่แตกต่างกัน (เพื่อความโปร่งใส) ลงใน CSS Sprite สามารถอัตโนมัติได้เท่าไหร่?

14 adobe-photoshop  export  css  sprite 

ฉันได้พบสคริปต์ที่ทำอย่างนั้น (สร้าง CSS และ HTML สำหรับเลเยอร์และเสนอตัวเลือกในการส่งออกในค่า%) และตัดงานสำหรับ web-dev ครึ่งหนึ่งสำหรับ Photoshop ตอนนี้ฉันอยากรู้อยากเห็นถ้าใครเจอหรือมีปลั๊กอินหรือชี้ให้ฉันไปที่คุณสมบัติดั้งเดิมเช่นนั้นสำหรับแอป Sketch การขาดงานดังกล่าวทำให้ฉันเปลี่ยนไปใช้ Sketch ได้อย่างเจ็บปวดอีกครั้ง หรือเป็นสิ่งใหม่สำหรับ Sketch ฉันเพิ่งขาดสิ่งที่แตกต่างในเชิงอุดมคติเกี่ยวกับวิธีที่ Sketch ทำงานกับ CSS และ HTML

13 css  html  sketch-app  plugin 

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

13 adobe-photoshop  website-design  css 

ฉันพยายามหลีกเลี่ยงการใช้ภาพพื้นหลัง (หรือวิธีแก้ปัญหาภาพ) เพื่อสร้างสิ่งนี้อย่างมีประสิทธิภาพ: หมายเหตุ: ลูกศรสีแดงเพิ่งชี้ไปที่เส้นขอบที่เป็นปัญหา ลูกศรไม่ควรรวมอยู่ในคำตอบของคุณ ฉันจะสร้างเส้นขอบรูปทรงที่ไม่สม่ำเสมอนี้ด้วย CSS บริสุทธิ์ (ไม่มีภาพ) ได้อย่างไร หากรูปภาพไม่สามารถหลีกเลี่ยงได้คำตอบที่สั้นและกระชับที่สุดจะได้รับการอัปเดตและยอมรับ

12 css  borders 

โมดูลตกแต่งข้อความของ CSS3 มีคุณสมบัติtext-underline-positionซึ่งระบุว่าขีดเส้นใต้ควรอยู่ในตำแหน่งด้านล่างข้อความทั้งหมด: หรือต่ำกว่าเส้นฐานปล่อยให้ปะทะกับตัวคั่นข้อความ: โอเคเราทุกคนรู้วิธีขีดเส้นใต้ควรใช้เป็นทางเลือกสุดท้าย แต่…หากคุณจะใช้มันเป็นวิธีที่พบบ่อยที่สุดในการทำมันได้อย่างไร อะไรคือข้อดีและข้อเสียของแต่ละสไตล์ขีดเส้นใต้?

12 typography  css 

ฉันพบเธรดที่มีประโยชน์สองสามรายการในฟอรัมนี้เกี่ยวกับปัญหาที่เกิดจาก (แสดง) รูปภาพในลายเซ็นอีเมล - ที่นี่เช่น - และฉันค้นหาทั่วทั้งเว็บ แต่ก็ยังไม่พบวิธีแก้ปัญหาที่ดี จัดการปัญหาอย่างเพียงพอ ลูกค้าของฉันต้องการเพียงแค่โลโก้ของ บริษัท ของเขารวมอยู่ในลายเซ็นอีเมลของเขาและปัญหาที่ฉันพบสามารถสรุปได้ดังนี้: ฉันสามารถส่งโลโก้ rasterized จาก AI ที่ขนาดจริงและมันจะดูคมชัดบนเดสก์ท็อป แต่ตัวหนังสือ / พร่ามัวบนความหนาแน่นสูง (เช่น "เรตินา") เช่น iPhone ตามที่แนะนำในเธรดที่ฉันอ้างถึงฉันสามารถส่งออกโลโก้ได้ 2-3 เท่าของขนาดจริงที่แสดงเพื่อกำหนดเป้าหมายการแสดงความหนาแน่นสูง แต่โลโก้จะดูนุ่มนวลบนหน้าจอที่ไม่มีความหนาแน่นสูงเมื่อลดขนาดลง . นี่เป็นปัญหาที่เกิดขึ้นเป็นพิเศษในกรณีนี้เนื่องจากโลโก้มีข้อความอยู่ซึ่งดูแย่มากเมื่อวางกับข้อความจริงในเบราว์เซอร์ / ไคลเอนต์อีเมล ฉันถือว่า.svgเป็นตัวเลือก แต่เห็นได้ชัดว่าการสนับสนุนไม่ดี และในกรณีนี้ฉันสมมติว่าผู้ใช้ส่วนใหญ่ที่อ่านอีเมลของลูกค้ารายนี้จะใช้ Outlook ดังนั้นสิ่งที่แสดงเฉพาะอย่างถูกต้องใน iOS / webkit / etc นั้นไม่ใช่ตัวเลือกที่ทำงานได้ ฉันกำลังสูญเสียที่จุดนี้และสงสัยว่ามีตัวเลือกที่เป็นไปได้อื่น ๆ ออกมี ตัวอย่างเช่นฉันไม่แน่ใจว่าถ้าเป็นไปได้ที่จะใช้ภาพความหนาแน่นสูงที่มีทางเลือก lo-res ในลายเซ็นอีเมล? ข้อเสนอแนะ …

11 css  image-quality  html  retina 

ฉันต้องการทราบว่าคุณสามารถใช้ขนาดแบบอักษรสำหรับเว็บไซต์ได้กี่ขนาด บางคนบอกกับฉันว่าจะดีกว่าที่จะไม่ใช้ขนาดแบบอักษรที่แตกต่างกันมากกว่า 3 ขนาด (เช่น 16px สำหรับหัวเรื่อง, 11px สำหรับข้อความและ 13 px สำหรับหัวเรื่องขนาดเล็ก) เป็นความคิดที่ดีหรือไม่ดีที่จะใช้ขนาดตัวอักษรมากกว่า 3 ขนาดต่อหน้าเว็บ (เช่น 4) ฉันแค่ถามเพราะฉันกำลังพิจารณาใช้อันที่สี่ แต่ไม่รู้ว่ามันจะทำลายการออกแบบของฉันหรือไม่

11 website-design  typography  css 

Bootstrap เป็นเฟรมเวิร์กที่ยอดเยี่ยมและฉันต้องการทราบว่ามีเครื่องมือที่ช่วยให้คุณสามารถลากส่วนประกอบ html, ปรับขนาดและย้ายมันใหม่, เปลี่ยนสีได้หรือไม่ในขณะที่สร้างโค้ด bootstrap html ฉันไม่ต้องการใช้ Dreamweaver เพราะคุณต้องไปและเพิ่มคลาสและรหัสลงใน html ซึ่งบางครั้งอาจทำให้เกิดความเจ็บปวด

11 website-design  css  html