css3

Smooth scroll to top of page with CSS/HTML only?

由 好久不见. 提交于 2020-01-01 04:09:06
问题 I am not permitted to add in Jquery/Javascript to this site, so I was looking for any way to do a "Back to Top" button, and have it transition to top with CSS/HTML only....don't think it's possible, but checking to see if anyone has come across a solution. 回答1: It wont be a smooth scroll but u can use an achor tag to link to any part of the page. Here is an example from W3 schools. <!DOCTYPE html> <html> <body> <h2><a id="top">There is a link at the bottom of the page!</a></h2> <p>In my

Incomplete borders around div

由 好久不见. 提交于 2020-01-01 03:56:09
问题 I am looking for a way to create an incomplete square with borders with some text and a background with pure css. Here is what I am trying to achieve: My initial idea is to create the shape based on three shapes and then colorize the borders accordingly: But I am a bit concerned about the adaptive version - scaling three shapes. So maybe a better idea, anyone? 回答1: This approach allows you to: add any content and the borders will adapt around it regardless of height or width of the content

Why auto-fit or auto-fill not working properly with minmax?

由 旧巷老猫 提交于 2020-01-01 03:45:12
问题 It doesn't work properly when I add auto-fit or auto-fill instead of a number. grid-template-columns: repeat(auto-fit, minmax(max-content, max-content)); But it works properly when I add number instead of max-content. grid-template-columns: repeat(auto-fit, minmax(50px, max-content)); But I want the size of the grid to be the same(be fit) as the size of the content. Like this: grid-template-columns: repeat(30, minmax(max-content, max-content)); (using auto-fit or auto-fill). How can I do that

Get color value of specific position in colorbar with gradient

由 喜夏-厌秋 提交于 2020-01-01 03:11:47
问题 I generated a gradient colobar with CSS3 styles (fiddle) and now want the color value of a specific location (by x and y coords) in that colorbar. As far as I know there is no direct way to do that. I see two options: Implement the gradient algorithm in JavaScript and calculate the value from scratch. Is there an exact definition how that algorithm works for multiple colors? Does the gradient look the same in every browser? Use a canvas and createLinearGradient method to draw the gradient and

How to code anchor tags as block element to contain other block elements

由 一曲冷凌霜 提交于 2020-01-01 03:11:08
问题 I am experiencing the same problem described in this thread. I'm wondering if there are other ways to achieve the same result and avoid this issue. Apparently Firefox has issues with anchor tags containing block elements even when the display CSS property of the anchor tag is set to "block". The effect that I am trying to achieve is to have a the complete block click-able instead of the the text in the block. It also allows to apply the hover state to the whole block instead of the link part.

Responsively animate page elements while scrolling using JavaScript [EDIT: Parallax Scrolling]

由 ♀尐吖头ヾ 提交于 2020-01-01 03:09:16
问题 I'm certain this has been brought up in the past; however I'm at a loss for a term. On this web page for square, the user scrolls through the section titled "At Square, different disciplines collaborate to design beautifully simple solutions."and the animation is activated to the right at that specific point on the page. As the user scrolls back the image reverts and so on. How are they achieving this? AUG 2013: So it's been nine months since I've asked this question and parallax scrolling

Required pentagon shape with right direction CSS and HTML

由 大兔子大兔子 提交于 2020-01-01 02:45:30
问题 How do i make this type of pentagone without -webkit-clip-path because its doesn't work most of the browser like Firefox, IE9. My code: http://codepen.io/anon/pen/MYbKrQ div { width: 150px; height: 150px; background: #1e90ff; -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%); } /* Center the demo */ html, body { height: 100%; } body { display: flex; justify-content: center; align-items: center; } <div></div>

How to add two background images - left and right from center column

由 余生长醉 提交于 2020-01-01 02:40:15
问题 I have this css: #wrapper1 { min-width:1020px; min-height:100%; } #wrapper2 { height:100%; background: url('img1.jpg') -100px 300px no-repeat, url('img2.jpg') 1165px 300px no-repeat; } #wrapper3 { width:1020px; margin:0 auto; } and this html: <div id="wrapper1"> <div id="wrapper2"> <div id="wrapper3" class="clearfix" <!-- content here --> <p>blah blah blah</p> </div> </div> </div> I need to add 2 images - left and right from center column without center column width changes and that the

extremely slow CSS3 box-shadows in Chrome

由 余生颓废 提交于 2020-01-01 02:04:30
问题 I've been developing an app specifically for modern browsers and have made very heavy use of the box-shadow property. Until recently this has been absolutely fine on all supporting browsers. However about a month ago when testing in Chrome I noticed that scrolling was 'extremely' slow, to the point of being almost unusable. Over the past month I have tried ripping out scripts/messing with my html structure, everything you can think of until finally today I have found the cause. With box

How can I make youtube video responsive along with background image?

由 ￣綄美尐妖づ 提交于 2020-01-01 00:52:07
问题 I have responsive background and I want to have a YouTube video over that background(not in full width). Here I have tried doing it. http://jsfiddle.net/audetwebdesign/EGgaN/#run HTML: <div class="bg-image"> <img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg"> <iframe width="560" height="315" src="//www.youtube.com/embed/R8wHnwfHscw" frameborder="0" allowfullscreen></iframe> </div> CSS: .bg-image { position: relative; } .bg-image img { display: block; width: 100%; max-width:
订阅 css3