การเขียนโปรแกรม css

3

ชอบการหดตัวมากกว่าการปลูกในภาชนะบรรจุแบบยืดหยุ่นด้วยการไหลแบบเฟล็กซ์: การพันแถว

การแสดงแกลเลอรี่ภาพที่มีขนาดและสัดส่วนต่างกัน ไม่มีช่องว่าง (ระยะห่าง) ระหว่างรูปภาพ เคารพอัตราส่วนเดิมให้มากที่สุด รูปภาพล้อมรอบด้วยลิงค์ โซลูชันที่ไม่ใช่ JS รูปภาพอาจถูกครอบตัดเล็กน้อย โซลูชันแบบพกพา ชุดของภาพที่แสดงเป็นแบบสุ่ม รูปภาพจะต้องแสดงจากซ้ายไปขวา (ป้องกันการใช้คอลัมน์) ฉันประสบความสำเร็จด้วยโซลูชัน flexbox ต่อไปนี้: แสดงตัวอย่างโค้ด section { display: flex; flex-flow: row wrap; justify-content: center; } section a { flex: auto; } section img { height: 100%; width: 100%; object-fit: cover; } <!DOCTYPE html> <html lang="en"> <head> <title>Controlling flex …

9 css flexbox image-gallery

2

องค์ประกอบจากคงที่ญาติเมื่อเลื่อน

ผมได้ทำเสื้อคลุมที่ฉันได้เคลื่อนไหวผลเช่นเดียวกับแอปเปิ้ลในAirpods Pro หน้าของพวกเขา เป็นวิดีโอเมื่อฉันเลื่อนดูวิดีโอเล่นทีละนิด ตำแหน่งของวิดีโอได้รับการแก้ไขเพื่อให้ข้อความเลื่อนไปทางเหนือ อย่างไรก็ตามข้อความจะมองเห็นได้เฉพาะเมื่อระหว่างออฟเซ็ตของส่วนเฉพาะ (text-display) ส่วนนั้นทำงานได้ดี ตอนนี้ฉันต้องการที่เมื่อผู้ใช้เลื่อนไปที่จุดสิ้นสุดของวิดีโอและทำให้การเคลื่อนไหวเสร็จสิ้นแล้ววิดีโอเอฟเฟ็กต์แรปเปอร์จะเปลี่ยนจากตำแหน่งคงที่ไปยังตำแหน่งสัมพัทธ์ ดังนั้นเว็บไซต์ที่จะเลื่อนเนื้อหาของมันตามปกติหลังจากที่วิดีโอภาพเคลื่อนไหว JSFIDDLE CODE + DEMO นี่คือตัวอย่างของสิ่งที่ฉันได้ลองไปแล้ว: //If video-animation ended: Make position of video-wrapper relative to continue scrolling if ($(window).scrollTop() >= $("#video-effect-wrapper").height()) { $(video).css("position", "relative"); $("#video-effect-wrapper .text").css("display", "none"); } งานประเภทนี้ ... แต่ทุกอย่างก็ราบรื่นยกเว้น และมันก็จำเป็นที่จะต้องย้อนกลับเลื่อนหน้าเว็บไปข้างหลัง ปัญหาที่ฉันพบเมื่อพยายามแก้ไขปัญหานี้: การเลื่อนและการเปลี่ยนจากความต้องการคงที่ไปเป็นความรู้สึกที่เป็นธรรมชาติและราบรื่น เสื้อคลุมตัวเองไม่ได้รับการแก้ไขและมีองค์ประกอบ. text วิดีโอได้รับการแก้ไขเพื่อให้องค์ประกอบ. text สามารถข้ามองค์ประกอบวิดีโอ (การสร้างเอฟเฟกต์) องค์ประกอบ. …

9 javascript jquery html css

2

SVG CSS ภาพเคลื่อนไหวหลายภาพ

ฉันสร้างแอนิเมชั่นแผนที่ขุมทรัพย์ก่อนอื่นมันจะแสดงเส้นทางเป็นสีเทาอ่อน แต่เมื่อภาพเคลื่อนไหวเริ่มขึ้นฉันต้องการให้ขีดสีเทาอ่อนหายไปหรือเปลี่ยนเป็นสีดำเหมือนภาพเคลื่อนไหวเติม ".road" เตะฉันเข้า การดิ้นรนเพื่อให้ได้เส้นประสีเทาอ่อน ". ขั้นตอน" จะหายไปเมื่อภาพเคลื่อนไหวเติมข้ามตำแหน่งนั้น svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .road { stroke-dasharray: 744; stroke-dashoffset: -744; animation: draw-road 10s infinite; } .steps { stroke-dasharray: -744; stroke-dashoffset: 744; animation: draw-steps 10s reverse; } @keyframes draw-road { 0% { …

9 css svg

1

ผลที่กำหนดเองที่จำลองล้อ 3 มิติด้วย Swiper 5

ฉันจำเป็นต้องสร้างม้าหมุนที่มี 12 รายการที่จำลองล้อหมุน 3 มิติอย่างไม่สิ้นสุด เพื่อความชัดเจนฉันต้องสร้างเอฟเฟกต์นี้อย่างแม่นยำ: https://codepen.io/SitePoint/pen/yXWXaw (ดูที่นี่ ) แต่ด้วยคุณสมบัติการเพิ่มเหล่านี้ (บนเดสก์ท็อปและอุปกรณ์เคลื่อนที่โดยเฉพาะ): สไลด์ต้องทำตามการกวาดนิ้วทีละขั้นตอนนั่นคือสไลด์ควรเลื่อนในขณะที่เลื่อน (ตามที่ Swiper ทำ) ด้วยการรูดอย่างรวดเร็วก็ควรเลื่อนภาพนิ่งจำนวนมากที่มีโมเมนตัม (ตามที่ Swiper จะมี freeScroll) จากนั้นเมื่อล้อหยุดหมุนมันจะเลื่อนไปที่สไลด์ด้านหน้า (อย่างที่ Swiper ทำด้วยfreeModeStickyและ centeredSlides) ว่าเป็นล้อที่ถูกเลือกจากผู้ใช้ ฉันต้องการโทรกลับทุกครั้งที่มีการเปลี่ยนแปลงสไลด์ (เช่นเหตุการณ์slideChanged) (ตามที่ Swiper ทำ) ด้วยเหตุผลทั้งหมดนี้ฉันจึงคิดว่าSwiper 5.3.0จะเป็นจุดเริ่มต้นที่ดี ฉันลองวิธีแก้ปัญหาต่าง ๆ ที่ดีกว่าคือการตั้งค่านี้ แต่loop: trueเป็นวิธีแก้ปัญหาอันยิ่งใหญ่และทำให้เกิดปัญหา (ตรวจสอบความคิดเห็น): var swiper = new Swiper(el_class, { slidesPerView: 1.5, spaceBetween: 25, centeredSlides: …

9 javascript css carousel swiper

2

ฉันจะใช้สไตล์การจัดการ Material-UI กับองค์ประกอบที่ไม่ใช่ material-ui และไม่ตอบสนองได้อย่างไร

ฉันมีแอปพลิเคชันที่ฉันใช้ Material UI และผู้ให้บริการธีม (โดยใช้ JSS) ตอนนี้ฉันได้รวมfullcalendar-react เอาไว้ซึ่งไม่ใช่ไลบรารี React ที่สมบูรณ์แบบจริงๆ - มันเป็นเพียง wrapper องค์ประกอบ React บาง ๆ รอบรหัส fullcalendar ดั้งเดิม กล่าวคือฉันไม่สามารถเข้าถึงสิ่งต่าง ๆ เช่นอุปกรณ์ประกอบฉากแสดงผลเพื่อควบคุมลักษณะขององค์ประกอบ อย่างไรก็ตามให้สิทธิ์การเข้าถึงองค์ประกอบ DOM โดยตรงผ่านการติดต่อกลับที่ถูกเรียกเมื่อสร้างการแสดงผล (เช่นเมธอด eventRender ) นี่คือตัวอย่างทดลองพื้นฐาน ตอนนี้สิ่งที่ฉันต้องการทำก็คือทำให้ส่วนประกอบปฏิทินแบบเต็ม (เช่นปุ่ม) แบ่งปันรูปลักษณ์และความรู้สึกเช่นเดียวกับส่วนที่เหลือของแอปพลิเคชันของฉัน วิธีหนึ่งในการทำเช่นนี้คือฉันสามารถแทนที่สไตล์ทั้งหมดด้วยตนเองโดยดูที่ชื่อคลาสที่ใช้และใช้สไตล์ตามนั้น หรือ - ฉันสามารถใช้ชุดรูปแบบ Bootstrap - ตามที่แนะนำในเอกสารประกอบ แต่ปัญหาของการแก้ปัญหาเหล่านี้ก็คือ: มันจะทำงานมาก ฉันจะมีปัญหาการซิงโครไนซ์ถ้าฉันทำการเปลี่ยนแปลงชุดรูปแบบ MUI ของฉันและลืมปรับปรุงชุดรูปแบบปฏิทินพวกเขาจะดูแตกต่างกัน สิ่งที่ฉันต้องการทำคือ: แปลงธีม MUI เป็นธีม Bootstrap …

9 css reactjs fullcalendar jss

5

ใช้ CSS วิธีการ“ จัดแน่น” จัด“ A” ไปที่ด้านล่าง / สิ้นสุดของ“ B” โดยที่“ B” มีความกว้างและการตัดข้อความที่ไม่รู้จัก

ฉันมีตาราง "sortable" ที่ส่วนหัวของคอลัมน์เรียงปัจจุบันแสดงไอคอน: ไอคอนการเรียงจะแสดงที่ท้ายข้อความ (เช่นเรากำลังสนับสนุน LTR / RTL) display:flexฉันกำลังใช้ อย่างไรก็ตามหากความกว้างของตารางลดลงและข้อความส่วนหัวของคอลัมน์เริ่มล้อมรอบฉันทำงานในสถานะที่ไม่ชัดเจนซึ่งไม่ชัดเจนว่าจะเรียงคอลัมน์ใด: ฉันต้องการที่จะปฏิบัติตามข้อกำหนดต่อไปนี้แทน: ไอคอนจะถูก "ชิด" เสมอกับ "จุดสิ้นสุด" ของบรรทัดข้อความที่ยาวที่สุด (แม้ว่าเซลล์ / ปุ่มตัดจะกว้างขึ้น) ไอคอนควรจัดเรียงชิดล่างสุดกับแถวสุดท้ายของข้อความ ไอคอนไม่ควรพันบนบรรทัดของมันเอง ปุ่มต้องมีอยู่และควรขยายความกว้างเต็มของเซลล์ (เป็นสไตล์ภายในและมาร์กอัปสามารถเปลี่ยนแปลงได้ตามต้องการ) CSS และ HTML เฉพาะในกรณีที่เป็นไปได้ทั้งหมด ไม่สามารถพึ่งพาความกว้างของคอลัมน์ที่ทราบ / ชุดหรือข้อความส่วนหัว ตัวอย่างเช่น: ฉันได้รับการทดสอบด้วยพวงของการรวมกันของdisplay: inline/inline-block/flex/grid, position, ::before/::afterและแม้กระทั่งfloat(!) แต่ไม่สามารถรับพฤติกรรมที่ต้องการ นี่คือรหัสปัจจุบันของฉันแสดงให้เห็นถึงปัญหา: .table { border-collapse: collapse; width: 100%; } .thead { border-bottom: 3px solid #d0d3d3; …

9 html css layout html-table alignment

6

แถบด้านข้างเปิดตามค่าเริ่มต้นบนเดสก์ท็อปปิดบนมือถือ

ฉันมีปัญหาจริงบางประการในการพยายามทำให้แถบด้านข้าง / เนื้อหาการนำทางของฉัน (โดยใช้ Bootstrap) เพื่อแสดง (ขยาย) ตามค่าเริ่มต้นบนเดสก์ท็อปและปิดโดยค่าเริ่มต้นบนมือถือและมีไอคอนแสดงบนมือถือเท่านั้น ฉันไม่สามารถทำงานนี้ได้ <nav class="menu menu-open" id="theMenu"> <div class="menu-wrap"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i> </button> <div id="menu-logo"> <img src="Final_Logo.png" width="210" height="214" alt=""> </div> <div id="navbarToggleExternalContent"> <ul id="main-menu"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Writing</a> <a …

9 javascript html css bootstrap-4 responsive-design

1

ผลข้างเคียงของการลบ“ width = ความกว้างของอุปกรณ์” ออกจากเมตาแท็กของวิวพอร์ตเมื่อตั้งค่า“ initial-scale = 1.0”

แม้ว่า<meta name="viewport">แท็กนั้นจะไม่ได้มาตรฐาน แต่ก็เป็น "เบราว์เซอร์มือถือส่วนใหญ่นับถือ ข้อเสียอย่างหนึ่งที่ไม่ใช่มาตรฐานเว็บจริงคือเอกสารรายละเอียดไม่สามารถใช้ได้เหมือนมาตรฐานอื่น ๆ คณะทำงาน CSSมีข้อกำหนดสำหรับนี้จึงเป็นสิ่งที่ผมกำลังส่วนใหญ่ใช้เป็นที่ทำงานเผด็จการ คำถามหลักของฉันคือ: อะไรคือความแตกต่างที่รับรู้ระหว่างการประกาศต่อไปนี้ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="initial-scale=1.0"> ถามอีกทางหนึ่งอะไรคือความแตกต่างระหว่าง@viewport CSS กับกฎเหล่านี้: /* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */ @viewport { zoom: 1.0; min-width: extend-to-zoom; max-width: 100vw; } /* Translated from <meta name="viewport" content="initial-scale=1.0"> */ @viewport { zoom: 1.0; min-width: extend-to-zoom; …

9 css viewport meta-tags meta

4

ส่วนของเส้นขอบ div ถูกตัดออก

ฉันมีองค์ประกอบคอนเทนเนอร์ที่ถือองค์ประกอบอื่น ๆ ไม่กี่ แต่ขึ้นอยู่กับส่วนขนาดหน้าจอของพวกเขาจะถูกตัดออกอย่างลึกลับในส่วนต่างๆ คุณสามารถสังเกตพฤติกรรมในลิงค์แซนด์บ็อกซ์รหัสของฉันเมื่อหน้า HTML ถูกปรับความกว้าง (โดยการคลิกและลาก) ฉันจะมั่นใจได้อย่างไรว่ามีการสร้างการแสดงผลขอบเขตของภาชนะหลักเท่านั้นและองค์ประกอบย่อยจะไม่ส่งผลกระทบ https://codesandbox.io/s/focused-tree-ms4f2 import React from "react"; import styled from "styled-components"; const StyledTextBox = styled.div` height: 15vh; width: 30vw; display: flex; flex-direction: column; margin: 0 auto; border: 1px solid black; background-color: #fff; > * { box-sizing: border-box; } `; const InputBox = styled.span` …

9 javascript css reactjs

3

การเปลี่ยนแปลงแบบยืดหยุ่น: ยืด (หรือหด) เพื่อให้พอดีกับเนื้อหา

ฉันเขียนโค้ดสคริปต์ (ด้วยความช่วยเหลือของผู้ใช้ที่นี่) ซึ่งช่วยให้ฉันขยาย div ที่เลือกและทำให้ div อื่นทำงานตามนั้นโดยยืดให้เท่ากันเพื่อให้พอดีกับพื้นที่ที่เหลือ (ยกเว้นอันแรกที่ความกว้างคงที่) และนี่คือภาพของสิ่งที่ฉันต้องการบรรลุ: เพื่อที่ฉันใช้ดิ้นและการเปลี่ยน ใช้งานได้ดี แต่สคริปต์ jQuery ระบุค่าการยืด "400%" (ซึ่งเหมาะสำหรับการทดสอบ) ตอนนี้ฉันต้องการให้ div ที่เลือกเพื่อขยาย / ย่อขนาดให้พอดีกับเนื้อหาแทนค่าคงที่ "400%" ฉันไม่รู้ว่าจะทำอย่างไร เป็นไปได้ไหม ? ฉันพยายามโคลน div ให้พอดีกับเนื้อหารับค่าจากนั้นใช้ค่านี้เพื่อเปลี่ยน แต่นั่นหมายความว่าฉันมีความกว้างเริ่มต้นเป็นเปอร์เซ็นต์ แต่เป็นค่าเป้าหมายเป็นพิกเซล ไม่ได้ผล และถ้าฉันแปลงค่าพิกเซลเป็นเปอร์เซ็นต์ผลลัพธ์จะไม่ตรงกับเนื้อหาไม่ว่าจะด้วยเหตุผลใดก็ตาม ในทุกกรณีนี่เป็นวิธีที่ซับซ้อนเล็กน้อยในการบรรลุสิ่งที่ฉันต้องการอยู่แล้ว ไม่มีคุณสมบัติยืดหยุ่นใด ๆ ที่สามารถเปลี่ยนเพื่อให้พอดีกับเนื้อหาของ div ที่เลือกหรือไม่ นี่คือรหัส ( แก้ไข / ลดความเรียบง่ายตั้งแต่อ่านดีขึ้น ): var expanded = ''; $(document).on("click", ".div:not(:first-child)", …

9 javascript jquery css flexbox css-transitions

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