<div>Text here</div>
Let say I have a div with a textfield in it and I want the div to smoothly make Height/Width transition as I type in more text and make linebreaks. Is there any simple way to do this transition with css without Javascript involved?
How would the text be edited? Javascript or AJAX call.
Clever solution, albeit with caveats:
you must know a height you can set at the beginning (0 will work)
not exactly the cleanest.
use max-height, not height. start with something small, whatever the default height of the div's content is, then set it to something rather high, as it will only expand to match your content. you will probably also want overflow: hidden so you can actually see the masking as it transitions.
.test{
overflow: hidden;
transition: 1s linear;
}
.test.begin{
max-height: 15px;
}
.test.end{
max-height: 400px;
}
note that the animation speed is based off of the difference between the max heights. even if you are only animating over 100px of content in 1 sec, the speed of the reveal will be as if you were animating over 385px in 1 second.
edit: I havent had my morning coffee yet, but are you sure you don't want a, you know...
<textarea>
?
The easiest way to get a box that expands as you type is with the contenteditable attribute.
<div contenteditable>Type here...</div>
Here is a demonstration.
I don't think a smooth, gradual transition effect can be achieved as text is typed into the contenteditable element, though. Transitioning on dynamic element heights is already quite difficult due to the lack of browser support for transitioning height: auto and percentage heights.
Sadly the transition effect you're looking for will most likely require JavaScript, unless someone comes up with a very clever CSS solution.
Related
I want a cool scrolling effect on my website like this:
There are two background images that scroll much slower than the rest of the page, divided by another element with a higher z-index value and unmodified scroll speed.
I have managed to do so in Firefox using 3d transform and overflow: hidden (as you can see, the two background images do not overlap). Here's the significant part of the code:
HTML:
<div class="container-container">
<div class="container">
<div class="slow-scroll">
<img src="...">
</div>
</div>
</div>
CSS:
.container-container {
perspective: 100px;
}
.container {
transform-style: preserve-3d;
overflow: hidden;
}
.slow-scroll {
transform: translateZ(-900px) scale(10.5);
}
My intention was to do the same as in the GIF - have a container with regular scroll speed that would contain the slower scrolling background, so that the overflow could be hidden, thus making it impossible for the two background images to overlap.
However, this doesn't work for Chrome or Microsoft Edge - the background images act as if the translateZ() value was absent (the scale still works normally though). This happens if I set overflow: hidden to any value except initial, revert, or unset.
Can this be fixed? Is there a workaround?
Note: I have looked around and saw this question, but it's outdated and the accepted answer does not work for me.
Based on your description, and the sample images provided, I think what you're looking for is a parallax scrolling effect. Simply refer to this tutorial below, which contains a simple example. I think it will help you.
How TO - Parallax Scrolling
Edit:
And according to your description, you mentioned that translateZ() not work in Edge, I created a simple demo and tested it, and I found it works normally in Edge(version 97.0.1072.55). I think maybe there is some problem with the code, such as this line:
transform: transform: translateZ(-900px) scale(10.5);
And if you want to implement this requirement, you could try to create multiple layers and set different translateZ() values for them. Simply refer to this example: Pure CSS Parallax Websites - Demo3
I'm designing a homepage in which I'm trying to display the same image 4 times in a single row (to make a kind of decorative banner). I have set each images' width to take up 25% of the screen. Theoretically, this means each image should take up a quarter and fit perfectly within a single row. However, I suspect Bootstrap is adding some kind of spacing between my images causing the 4th to spill over into the next one.
I have tried setting their margin to 0, setting their padding to 0, and setting their border-style to none. I figured setting the properties this way would override any defaults Bootstrap might place on the <img> tag, but this spacing does not seem to be going away. Additionally, checking the Developer Tools on my browser confirms that there is in fact no margin, padding, or border affecting my images. I'm not sure what else I can target to try and resolve this issue.
Any advice would be greatly appreciated. Thank you for your time in advance.
NOTE: I am not using Grid. I figured what I am attempting to do is simple enough to avoid having to use it.
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
.back-banner {
width: 25%;
opacity: .5;
padding: 0;
margin: 0;
}
Image is inline element by default. This causes it to add some white space. You can transform it to block element by using display: block, but then you need to use float: left to make them appear in one row.
Even better is to use modern css like flexbox by adding display: flex on wrapping element.
I need to construct something like this: https://youtu.be/-pv77UW1w6g
But I'm facing problems to set div side by side with no space between them.
I made a wireframe to help to show my idea like the video above: https://dl.dropboxusercontent.com/u/9095670/multiple-divs.jpg
It's important to say that I'm using bootstrap and it's a responsive project. So, I don't want use fixed width or heigh (if possible) to do that. I've tried use display: inline, but I got many holes between them due the fixed min-height.
Thanks a lot for the help.
The issue lies in the fact that you markup likely has whitespace between the elements, the simplest way to avoid this is to set font-size: 0px; in the document body, then add a class to each child div that re-sets the font size back to whatever you want.
just do this:
<div class="wrap">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
</div>
http://codepen.io/damianocel/pen/PPEqJm
Ok here you go.
You can comment out the keyframes, but I have put a bit animation in it, your video made me:-).
To explain this...as you see, there is no height declaration on the divs, only on the main wrapper div. And on the img tags, for demo purposes.
As you can see the divs will adapt height to whatever content is placed in to them.
Same for the pictures, you make them the size you want.
With the flexbox layout as it is there, I make the divs being placed as column, i.e. vertically. There is a height declaration on the main div, this one you will need if you want to display it like this, but only this one, without a height on main div, flexbox would never create a next column, it would just stack them one over the next. This way, as soon the height is reached, it creates a new horizontal column. This would be possible in other ways as well and takes some understanding of the flexbox model, do look into it, i thinks it is the future of layout.
And you set a width on the children class, i set it to 30% here, for 3 rows(flex will still create a 4th,5th etc, but these would fall out of the wrap div, so, a bit calculation is needed on your part.
Play around with it and see what happens if you change the children class width, or put more/less text in it, careful with margin, margin is bit odd with flexbox, this is beyond the scope here though.
Do not be afraid when flexbox creates a new row, don't try to fix it with margins when it looks odd(new or od row having a gap etc, you will see what i mean).
And this will be fully responsive as it is.
* {
box-sizing: border-box;
}
#keyframes bro{
1% {transform: skew(5deg, 6deg);}
25% {transform: skew(10deg, 5deg);}
75% {transform: skew(15deg,9deg);}
90% {transform: rotate(720deg) scale(0.1);}
}
http://codepen.io/damianocel/pen/PPEqJm
If you have any question, ask anytime.
Thanks for all help, but I solved my problem with Masonry as hungerstar said. The Masonry is good if you're using Angular.js too.
I'm working on a photography site with a lot of images and they have no fixed height and width as I want this site to be 100% fluid: how do you work around the ugly Chrome repaint of the images? (i.e. Images are first displayed at zero height and then rescaled to their final size moving around the entire layout)
I've tried pretty much everything and my last option is to hide the image repaint with a black div and then set its opacity to 0 when images are finished loading (BTW, I've tried this with a (document).ready call but it seems too soon: how would you do it?)
Specify your image's height and width attribute / its dimensions.
<img src="img.jpg" width="125" height="60" alt="My First Photograph ever">
This helps the browser avoid a second pass to layout your page and it optimizes page load as well! :)
Chrome (or any browser really) cannot avoid this 'repainting', since they don't know on forehand what size your images will be.
Thus, you will need to explicitly specify the sizes of your images, either in the image width and height properties itself, or via CSS.
I know I am more than two years late, but how about the practice suggested here?
<div class="embed-container ratio-16-9">
<img src="imgage.jpg"/>
</div>
.embed-container {
position: relative;
height: 0;
overflow: hidden;
background-color:black;
}
.ratio-16-9{
padding-bottom:56.25%; /* 9/16*100 */
}
.ratio-4-3{
padding-bottom:75%; /* 3/4*100 */
}
.ratio-1-1{
padding-bottom:100%; /* ... */
Also, an important remark from the comments section to pay attention to, and improve upon the original technique:
Nice trick. However, if I was you, I would replace the "img" tag with
a background image on your div (and background-size: cover or
contain). That would avoid you the position trick, the overflow trick,
and a lot of work for the browser.
I hope someone will find this useful.
It’s hard to test, but you could try setting width/height in CSS
img {display: block; width: 100%; height: auto;}
if you want the images to be full-width. This might prevent a full-page repaint, but of course there’ll be some repaint regardless as images load. You can also investigate what’s happening with Chrome’s --show-paint-rects
Hope that helps
I have a form of width 450px with one item that has to take the full page's width (990px).
position:absolute is a problem because this wide item needs to fit in the flow of elements inside the form. margin-left:-270px seems a bit hackish and likely to break down with future rule changes. Is there a better solution?
How can I get an element in the form's flow that takes up the whole page's width?
If you're using fixed width layouts, I don't really see a margin-left of -270 as being hackish. If you hadn't posted it yourself, it would be the answer I would suggest.
To make it seem less hackish, an alternative might be to use Less - it's effectively a CSS based language that compiles to plain CSS. You could then specify the rule so that changes to the form or page width will automatically sort out your margin also:
#page_width: 990px;
#form_width: 450px;
...
.full_width_form_element {
margin-left: (#form_width - #page_width) / 2;
}
http://lesscss.org/
Use the overflow property of CSS. overflow: auto to cause scrolling, overflow: visible to allow it to leak out of the box. overflow: hidden to hide whatever part of it leaks outside the box.