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

30

ข้อความไม่ชัดหลังจากใช้ CSS transform: scale (); ใน Chrome

ดูเหมือนว่ามีการอัปเดตล่าสุดสำหรับ Google Chrome ซึ่งทำให้ข้อความไม่ชัดหลังจากทำไฟล์transform: scale(). โดยเฉพาะฉันกำลังทำสิ่งนี้: @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } หากคุณไปที่http://rourkery.comใน Chrome คุณจะเห็นปัญหาในพื้นที่ข้อความหลัก ไม่เคยทำเช่นนี้และดูเหมือนจะไม่มีผลกับเบราว์เซอร์ webkit อื่น ๆ (เช่น Safari) มีโพสต์อื่น ๆ เกี่ยวกับผู้ที่ประสบปัญหาคล้ายกันกับการแปลง 3 มิติ แต่ไม่พบอะไรเกี่ยวกับการแปลง 2 …

130 google-chrome css webkit transform css-animations

15

แปลงข้อความเป็นตัวพิมพ์ใหญ่ในตัวพิมพ์ใหญ่ทั้งหมด

นี่คือ HTML ของฉัน: <a href="#" class="link">small caps</a> & <a href="#" class="link">ALL CAPS</a> นี่คือ CSS ของฉัน: .link {text-transform: capitalize;} ผลลัพธ์คือ: Small Caps & ALL CAPS และฉันต้องการผลลัพธ์ที่จะเป็น: Small Caps & All Caps ความคิดใด ๆ

129 css

4

Twitter Bootstrap: div ในคอนเทนเนอร์ที่มีความสูง 100%

ใช้ twitter bootstrap (2) ฉันมีหน้าง่าย ๆ พร้อมแถบนำทางและcontainerฉันต้องการเพิ่ม div ที่มีความสูง 100% (ที่ด้านล่างของหน้าจอ) css-fu ของฉันเป็นสนิมและฉันไม่สามารถทำงานได้ HTML แบบง่าย: <body> <div class="navbar navbar-fixed-top">  </div> <div class="container fill"> <div id="map"></div>  </div> </body> CSS ปัจจุบัน: #map { width: …

129 css twitter-bootstrap height

9

ทำให้ <body> เต็มหน้าจอหรือไม่

ฉันใช้การไล่ระดับสีแบบรัศมีเป็นพื้นหลังบนหน้าเว็บของฉันเช่น: background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000)); ใช้งานได้ แต่เมื่อเนื้อหาไม่เต็มหน้าการไล่ระดับสีจะถูกตัดออก ฉันจะทำให้<body>องค์ประกอบเติมทั้งหน้าได้อย่างไร?

129 html css radial-gradients

6

เชื่อมต่อสตริงใน Less

ฉันคิดว่านี่เป็นไปไม่ได้ แต่ฉันคิดว่าฉันถามในกรณีที่มีวิธี แนวคิดคือฉันมีตัวแปรสำหรับพา ธ ไปยังโฟลเดอร์ทรัพยากรบนเว็บ: @root: "../img/"; @file: "test.css"; @url: @root@file; .px { background-image: url(@url); } ฉันได้รับสิ่งนี้เป็นผล: .px { background-image: url("../img/" "test.css"); } แต่ฉันต้องการให้สตริงรวมกันเป็นสตริงเดียวดังนี้: .px { background-image: url("../img/test.css"); } เป็นไปได้ไหมที่จะต่อสตริงเข้าด้วยกันใน Less?

129 css path web less concat

8

วิธีสร้าง Grid / Tile View

ตัวอย่างเช่นฉันมีคลาส. บทความและฉันต้องการดูคลาสนี้เป็นมุมมองตาราง ดังนั้นฉันจึงใช้สไตล์นี้: .article{ width:100px; height:100px; background:#333; float:left; margin:5px; } ลักษณะนั้นจะทำให้. article ดูเป็นกระเบื้อง / ตาราง ทำงานได้ดีกับความสูงคงที่ แต่ถ้าฉันต้องการตั้งค่าความสูงเป็นอัตโนมัติ (ยืดโดยอัตโนมัติตามข้อมูลที่อยู่ในนั้น) เส้นตารางจะดูน่ารังเกียจ และฉันต้องการให้มุมมองเป็นแบบนี้:

129 css grid positioning css-float tiles

10

เปลี่ยนสีพื้นหลังของตัวเลือกกล่องเลือก

ฉันมีselectกล่องและฉันกำลังพยายามเปลี่ยนสีพื้นหลังของตัวเลือกเมื่อselectคลิกกล่องแล้วและแสดงตัวเลือกทั้งหมด ดู Fiddle HTML: <select> <option val="">Please choose</option> <option val="1">Option 1</option> <option val="2">Option 2</option> <option val="3">Option 3</option> <option val="4">Option 4</option> </select> CSS: select{ margin:40px; background: rgba(0,0,0,0.3); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.4); }

129 html css html-select background-color

11

รับความกว้างของอุปกรณ์ในจาวาสคริปต์

มีวิธีรับความกว้างอุปกรณ์ของผู้ใช้ซึ่งต่างจากความกว้างของวิวพอร์ตโดยใช้จาวาสคริปต์หรือไม่ แบบสอบถามสื่อ CSS เสนอสิ่งนี้อย่างที่ฉันพูดได้ @media screen and (max-width:640px) { /* ... */ } และ @media screen and (max-device-width:960px) { /* ... */ } สิ่งนี้มีประโยชน์หากฉันกำหนดเป้าหมายสมาร์ทโฟนในแนวนอน ตัวอย่างเช่นบน iOS การประกาศว่า max-width:640pxจะกำหนดเป้าหมายทั้งโหมดแนวนอนและแนวตั้งแม้ใน iPhone 4 นี่ไม่ใช่กรณีสำหรับ Android เท่าที่ฉันสามารถบอกได้ดังนั้นการใช้ความกว้างของอุปกรณ์ในอินสแตนซ์นี้จะกำหนดเป้าหมายทั้งสองทิศทางได้สำเร็จ โดยไม่กำหนดเป้าหมายอุปกรณ์เดสก์ท็อป อย่างไรก็ตามหากฉันเรียกใช้การรวมจาวาสคริปต์ตามความกว้างของอุปกรณ์ดูเหมือนว่าฉันจะถูก จำกัด ให้ทดสอบความกว้างของวิวพอร์ตซึ่งหมายถึงการทดสอบเพิ่มเติมดังต่อไปนี้ if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ } …

129 javascript css media-queries

6

เป็นไปได้ไหมที่จะซ่อนเคอร์เซอร์ในหน้าเว็บโดยใช้ CSS หรือ Javascript

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

129 javascript html css

6

ตั้งค่าน้ำหนักตัวอักษรโดยใช้คลาส Bootstrap

มีคลาส Twitter Bootstrap สำหรับfont-weight: boldและค่าอื่น ๆ ของfont-weightหรือไม่? ฉันจะไม่สร้างใหม่หากสิ่งนี้มีอยู่แล้วใน Bootstrap

129 html css twitter-bootstrap twitter-bootstrap-3

8

วิธีเขียนทับสไตล์ใน Twitter Bootstrap

ฉันจะเขียนทับ stylings ใน Twitter Bootstrap ได้อย่างไร ตัวอย่างเช่นขณะนี้ฉันใช้คลาส. sidebar ที่มีกฎ CSS 'float: left;' ฉันจะเปลี่ยนสิ่งนี้เพื่อให้ไปทางขวาแทนได้อย่างไร ฉันใช้ HAML และ SASS แต่ค่อนข้างใหม่สำหรับการพัฒนาเว็บ

128 css twitter-bootstrap

4

วิธีการเปลี่ยนเคอร์เซอร์จากตัวชี้เป็นนิ้วโดยใช้ jQuery

นี่อาจจะง่ายจริงๆ แต่ฉันไม่เคยทำมาก่อน คุณเปลี่ยนเคอร์เซอร์เป็นนิ้วได้อย่างไร (เช่นสำหรับการคลิกที่ลิงก์) แทนที่จะเป็นตัวชี้ปกติ? และวิธีการทำเช่นนี้กับ jQuery เพราะนั่นคือสิ่งที่ฉันใช้มัน

128 javascript jquery css

1

การตั้งค่าที่เหมาะสมที่สุดสำหรับการส่งออก SVG สำหรับเว็บจาก Illustrator หรือไม่

ฉันกำลังมองหาที่จะใช้โลโก้ SVG สำหรับเว็บไซต์ - เพื่อทำให้มันดูดีในการออกแบบที่ตอบสนองต่อทุกอุปกรณ์ แต่เนื่องจากมีปัญหาฉันต้องการสนับสนุนอุปกรณ์และเบราว์เซอร์ให้ได้มากที่สุด ความเร็วในการโหลดก็เป็นสิ่งสำคัญเช่นกัน การตั้งค่าการส่งออกใน Adobe Illustrator มีความสอดคล้องกันอย่างไร ใน Illustrator มีหลายตัวเลือกสำหรับการส่งออก SVG อันดับแรกโปรไฟล์ SVG ใดดีที่สุด? ฉันคิดว่า SVG Tiny มีขนาดไฟล์ที่ต่ำกว่านี้หรือไม่ อุปกรณ์จำนวนมากรองรับ SVG Tiny หรือไม่ ความแตกต่างที่สำคัญที่สุดคืออะไร? (โดยไม่ต้องอ่านสัตว์ประหลาด W3นี้) ประการที่สองฉันถือว่าตัวเลือกที่ดีที่สุดสำหรับตำแหน่งภาพคือ "ลิงก์" (ดูคำอธิบายหลังเครื่องหมายอัศเจรีย์) เบราว์เซอร์รองรับตัวเลือก "ฝัง" อย่างไร ขอบคุณ! PS จะมีตัวเลือกสำรอง alpha-PNG แต่ฉันต้องการให้ SVG ได้รับการสนับสนุนอย่างดีที่สุด (ลองคิดดูว่าตัวเลือกสำรอง - เช่น JPG - น่าจะเป็นตัวเลือกที่ดีที่สุดในกรณีนี้เนื่องจาก alpha-PNG นั้นต้องการโซลูชันสำหรับ …

128 html css image svg adobe-illustrator

25

วิธีเพิ่มคลาส“ active” ใน Html.ActionLink ใน ASP.NET MVC

ฉันกำลังพยายามเพิ่มคลาส "active" ให้กับ bootstrap navbar ใน MVC แต่สิ่งต่อไปนี้ไม่แสดงคลาสที่ใช้งานอยู่เมื่อเขียนแบบนี้: <ul class="nav navbar-nav"> <li>@Html.ActionLink("Home", "Index", "Home", null, new {@class="active"})</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul> สิ่งนี้จะแก้ไขสิ่งที่ดูเหมือนคลาสที่มีรูปแบบถูกต้อง แต่ใช้ไม่ได้: <a class="active" href="/">Home</a> ในเอกสาร Bootstrap ระบุว่าไม่ควรใช้แท็ก 'a' ในแถบนำทาง แต่ข้างต้นเป็นวิธีที่ฉันเชื่อว่าเป็นวิธีที่ถูกต้องในการเพิ่มคลาสให้กับ Html.ActionLink มีวิธีอื่น (เป็นระเบียบ) ที่ฉันสามารถทำได้หรือไม่?

128 asp.net css asp.net-mvc twitter-bootstrap

4

จัดชิดขวาในเซลล์ตารางด้วย CSS

ฉันมีรหัสคลาสสิกเก่าแบบนี้ <td align="right"> ซึ่งทำในสิ่งที่พูด: มันจัดแนวเนื้อหาในเซลล์ให้ถูกต้อง ดังนั้นถ้าฉันใส่ 2 ปุ่มในเซลล์นี้ปุ่มเหล่านี้จะปรากฏที่ตำแหน่งด้านขวาของเซลล์ แต่แล้วฉันก็ปรับโครงสร้างนี้ใหม่เป็น CSS แต่ไม่มีสิ่งที่เรียกว่าการจัดแนวขวา? ฉันเห็นการจัดข้อความเหมือนกันหรือไม่

128 css

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