How do you make width and height of a circle that I made automatically reduced according to its screen size?
I set the width and height to 40px
Code:
.circle {
display: block;
width: 40px;
height: 40px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background-color: #b7b7b7;
margin-right: 2%;
outline: none;
-webkit-transition: ease-in .5s;
-o-transition: ease-in .5s;
-moz-transition: ease-in .5s;
transition: ease-in .5s;
}
I tried using calc for width and height using this
width:calc(100% - 40px);
height:calc(100% - 40px);
But it doesn't seem to work. I heard some sources that calc is the key for this one. I am working with a container of 1920px and minimum screen size is 320px. Is there any proper way to implement calc function for width and height?
Thanks
You can use vw and vh (1% of available width and height respectively) partnered with media query. An example:
#media screen and (max-width: 820px) {
.circle {
width: calc(100% - 5vw);
}
}
Related
I have a parent div wrapped around a scaled child div. The child div starts off with transform:scale(0,0); & expands to transform:scale(1,1); when a button is clicked.
.content-wrapper {
display: inline-block;
background-color: #ddf;
padding: 10px;
clear: both;
}
.content {
padding: 10px;
background-color: #fff;
display: flex-block;
overflow: hidden;
transform:scale(0,0);
transform-origin:top;
transition:transform 1s ease-out;
}
.content.open {
transform:scale(1,1);
}
However the parent div content-wrapper stays at the same size of the child div content - even when the child is "closed".
The desired behaviour is when the child div is closed the parent div shrinks to only wrap around the button.
JSFiddle of Example
Is it possible to wrap the parent div around the child div when it's "closed" in this example?
This will be a little challenging because the background color is attached to the content container. I would remove the background color from the main container, then make it a separate div positioned absolute
<div class="content">
...
<div class="content-bg"> //contains your background color
then manipulate that based on your click handler.
I've updated the JSFiddle http://jsfiddle.net/ztxa5kwu/90/
CSS for the new div:
.content-bg{
position: absolute;
background-color: #ddf;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
transition: all .5s ease;
transform-origin: bottom right;
}
Notice the transform-origin: bottom right; to scale the background towards your button. In the JSFiddle, I made the button take on a border the same color as the background, but you could easily edit the size of the new <div class="content-bg"></div> to fit around your button.
Hope that helps, and gets you in the right direction.
Try this:
.content {
background-color: #fff;
overflow: hidden;
transform:scale(0,0);
transform-origin:top;
transition:transform 1s ease-out;
display: block;
padding: 0;
height: 0; width: 0;
}
.content.open {
padding: 10px;
height: auto; width: auto;
transform: scale(1,1);
}
Edit: Play with this:
.content {
padding: 0;
background-color: #fff;
display: block;
overflow: hidden;
transform-origin:top;
transition: transform 1s ease-out, max-width 0.5s ease-out 0.4s, max-height 1s ease-out;
transform: scale(0,0); max-width: 0; max-height: 0;
}
.content.open {
padding: 10px;
transition: transform 1s ease-out, max-width 1s ease-out, max-height 8s ease-out;
transform: scale(1, 1); max-width: 1920px; max-height: 1080px;
}
I found this comment on an older question:
This method only partially achieves the desired effect but doesn't
actually remove the space. The transformed box acts like a
relatively positioned element - the space is taken up no matter how it
is scaled. Check out this jsFiddle which takes your first one and
just adds some bogus text at the bottom. Note how the text below it
doesn't move up when the box height is scaled to zero. – animuson♦ Jul
29 '13 at 20:37
So with that in mind I used the max-height/ max-width hack to get something close to what I was after: http://jsfiddle.net/BaronGrivet/ztxa5kwu/176/
.content {
padding: 10px;
background-color: #fff;
display: flex-block;
overflow: hidden;
transform:scale(0,0);
transform-origin:top;
transition:all 1s ease-out;
max-width: 0;
max-height: 0;
}
.content.open {
transform:scale(1,1);
max-width: 500px;
max-height: 500px;
}
I am inserting an overlay div with width 100%, but the overlay div is not rendered completely. For some reason, it looks as if it has moved rightward.
Here is fiddle. You can check that the padding on the right side does not show fully.
html
<div class='overlay'>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
css
.overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000000;
background-color: rgba(255, 255, 255, 0.85);
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear;
padding: 20px;
}
Paddings are not calculated in the width in HTML.
That's why when you set the width to 100% (relative to the window), the padding will go outside the window.
If you wish to fit the size, with the padding, you should not set any width property.
But, in your case, your string is a bunch of "A"s, which will affect the property listed above. In this case, you would need to set the width to 40px shorter than the window width. (Because the padding on the left and right are 20px respectively, 20 + 20 = 40)
document.getElementsByTagName("div")[0].style.width = window.innerWidth - 40 + "px";
Apart from that, if you want the "A"s to move to the next line, use this css property:
word-wrap: break-word;
Otherwise, use one of the following two css properties:
overflow: hidden;
white-space: nowrap;
Replace your CSS padding with below code,
.overlay {
padding : 20px 0px;
}
As you are using padding: 20px you need to reduce width and height by 40px, you can do that using calc(100% - 40px).
Also you need to add word-wrap: break-word to break long word in div.
.overlay {
position: fixed;
left: 0;
top: 0;
width: calc(100%-40px);
height: calc(100%-40px);
z-index: 1000000;
background-color: rgba(255, 255, 255, 0.85);
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear;
padding: 20px;
word-wrap: break-word;
}
I'm trying to understand how to use transform-origin to create an even 'growth' with width or height. Why won't it work to expand from the center where I've specified transform origin?
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
transition: height 2s;
-webkit-transform-origin: center center;
transform-origin: center center;
}
div:hover {
height: 300px;
}
<div></div>
transform-origin works only with transformed things, not height or others.
The transform-origin property is used in conjunction with CSS
transforms, letting you change the point of origin of a transform.
.box {
transform: rotate(360deg);
transform-origin: top left;
}
Source
if you want to do this you can use in conjunction with margin-top to have the result that you want:
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */
transition: all 2s;
}
div:hover {
height: 300px;
margin-top: -100px; // (300px - 100px) / 2
}
jsfiddle Demo
I have a :before pseudo element displayed on :hover of a particular element.
I'm using font awesome and want to vertically center the content of the :before, but vertical align, margins etc haven't been of much help.
Any ideas?
.tile:before {
font-family: FontAwesome;
font-size: 150px;
color: white;
text-align: center;
border-radius: 15px;
opacity: 0;
z-index: 9999;
width: 100%;
height: 100%;
content: "\f16b";
position: absolute;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tile:hover:before {
opacity: 1;
}
Here are a few potential suggestions for .tile:before :
1 - use pixel value instead of 100% for height:
height: 100px;
2 - Make sure this is being displayed as an element that can ACCEPT margin, padding, etc.
display: block;
-or-
display: inline-block;
3 - I know you said you tried margins, but did you try padding-top?
padding-top: 20px;
4 - Try setting the overflow to hidden or visible. This often forces elements to behave "better."
overflow:hidden;
I would try all of these TOGETHER and see what happens.
Last, I might try setting a "top:" value since you have "position:absolute;" already. Maybe try this in conjunction with "position:relative;" too.
top: 10px;
Really need all the code (HTML) to tell what would work.
Using :before as the cover background to display on top of the tile element, and an :after with:
.tile:after {
top: 50%;
left: 50%;
/* Both half of font-size */
margin-left: -75px;
margin-top: -75px;
height: 150px;
line-height: 1;
}
Seemed to do the trick. Thanks all.
I have collection of images in a simple gallery that I want to transform from small to large smoothly on mouseover.
I am currently doing this by revealing the actual size of an image when the mouse is over but forcing it to a certain size when it is not and hiding the real size with display:none.
I want to include some webkit transformations to do this over a 1s period to improve the transitions. I understand webkit is to transform an element between two states however is there anyway I can make this happen.
I also want to avoid JavaScript.
.reveal a .preview
{
display: none;
}
.reveal a:hover .preview
{
display: block;
position: absolute;
z-index: 1;
}
.reveal img
{
background: #fff
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}
.reveal li
{
background: #eee;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.reveal .preview
{
border-color: #000;
width: auto;
height: auto;
}
without the html (ie jsfiddle) it's hard for me to insert the solution within your code.. but here is a generic solution http://jsfiddle.net/9QVae/2/
img
{
width:100px;
height:100px;
background:red;
transition:width 1s, height 1s;
-moz-transition:width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */
-webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
-o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */
}
on hover:
img:hover
{
width:200px;
height:200px;
}
so the trick is to specify the css property you want to add an effect to (ie width)
then specify the duration of the event ie transition:width 1s; then you specify the final dimension under the :hover selector
note: transition does not work on IE