I have been experimenting with -webkit-transform: scale(0.5); with objects in a parent and child frame.
I have made a parent frame with a black circle in the child. I would like to reduce the parent by half, by adding -webkit-transform: scale(0.5) and therefore reducing the black circle also by half automatically. That works fine.
However, by using -webkit-transform: scale(0.5), the parent also takes up the same amount of space as if it was not reduced.
I would like to know if the pink background, in the example below, could also be shrinked to the height of the parent frame without using -webkit-transform on the pink background?
.background {
width : 100%;
margin : 0 auto 0 auto;
padding : 0 0 0 0;
background : pink;
}
.example-object-container {
position : relative;
z-index : 0;
width : 400px;
height : 400px;
margin : 0 auto 0 auto;
padding : 0 0 0 0;
background : silver;
}
.example-object {
position : absolute;
z-index : 1;
width : 400px;
height : 400px;
margin : 0 auto 0 auto;
padding : 0 0 0 0;
-webkit-border-radius : 500px;
-moz-border-radius : 500px;
-ms-border-radius : 500px;
-o-border-radius : 500px;
border-radius : 500px;
background : black;
left : 0;
right : 0;
bottom : 0;
top : 50%;
-webkit-transform : perspective(1px) translateY(-50%);
-moz-transform : perspective(1px) translateY(-50%);
-ms-transform : perspective(1px) translateY(-50%);
-o-transform : perspective(1px) translateY(-50%);
transform : perspective(1px) translateY(-50%);
}
<div class="background">
<div class="example-object-container" style="-webkit-transform: scale(0.5);">
<div class="example-object">
</div>
</div>
</div>
Related
I am trying to center an image (the "Coca" of Coca Cola in my fiddle example) that is within an absolute element .itemDisplay which has no fixed width.
I believe the no fixed width is and issue as it seems to stop the image from centering.
There are alot of answers for centering within a absolute element but I can't find any that are for multiple columns rather than just the left 50%, etc answers. .itemDisplay sits within a div called .parentItem that is 32% of the screen with some padding and margins and there are 3 per row.
All 3 column will have it's own image, but I've only done the first one as an example.
When the div containing the coca image is hovered it currently displays a hidden div with cola with the image centered which works correctly, my only issue is centering the coca image.
I have tried all answers and can't seem to get it to work.
Any ideas!?
https://jsfiddle.net/se23vvwu/
Your parent elements need to be relative and have the size of it's children. For that, if you can't have a fixed width, you can use width: fit-content;.
Then I applied left: 0; and right: 0; for the absolute element.
Here is the result (you still need to accomodate the hover state):
#shopShelves {
width : 100%;
padding : 15px;
max-width : 100%;
margin : 0 auto;
}
.parentItem {
height : 200px;
background-color : #e7e7e7;
float : left;
margin-left : 1px;
margin-bottom : 1px;
position: relative;
}
.parentItem a {
position: relative;
width: 100%;
height: 100%;
display: inline-block;
}
.parentItem:hover .hoveredItem {
opacity : 1;
z-index : 1;
}
.parentItem:hover .itemDisplay {
opacity : 0;
}
.I33 {
width : 33.2%;
}
.displayCenter {
position : relative;
width : 33.2%;
background-color : #F00;
}
.parentItem:hover {
opacity : 1;
}
.itemDisplay {
opacity: 1;
transition: opacity 0s 0.2s;
position: absolute;
display: block;
width: fit-content;
left: 0;
right: 0;
margin: 0 auto;
}
.hoveredItem {
opacity : 0;
margin-bottom : 0;
}
.imgcenter {
display : block;
margin : auto;
max-width : 280px;
float : none;
position : relative;
}
width: fit-content; has some compatibility issues with IE. But I'm pretty sure there are workarounds. Some people use display: table;
More browser specific properties:
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
You might have to do a little more research.
Hope this helps!
I try to implement the following effect by using the :before but I have problem with the z-index.
My code is like this:
.container {
background : #FFF;
}
.item {
background-position : 50% 50%;
background-repeat : no-repeat;
background-size: cover;
width : 200px;
height :200px;
position : relative;
}
.item:before {
content : '';
position : absolute;
width : 100%;
height : 100%;
right : -20px;
bottom : -20px;
border : 2px solid #0AF;
z-index : -1;
}
<div class="container">
<div class="item" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200')"></div>
</div>
The problem now, is that the container seems to cover the :before element.
For the moment I don't mind about the "MIDDLE AGE" item.
How can I overcome this issue ?
Add the following CSS styles:
.container {
position: relative;
z-index: 1;
}
Code in JSfiddle: https://jsfiddle.net/5cq5576k/
Try this:
.container {
background : #FFF;
position: relative;
float: left;
}
.item {
background-position : 50% 50%;
background-repeat : no-repeat;
background-size: cover;
width : 200px;
height :200px;
position : relative;
}
.item-border {
content : '';
position : absolute;
width : 100%;
height : 100%;
right : -20px;
bottom : -20px;
border : 2px solid #0AF;
z-index : -1;
}
<div class="container">
<div class="item-border"></div>
<div class="item" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200')"></div>
</div>
I want to clip image from left and right side with some degree of angle. i have used crip css. but in that i am able to clip in 90 degree only
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
is it possible to clip image by 30 degre or more on left and right side.
You can use a css mask, with an image of a rectangle, or with some gradient which looks like a rectangle.
But the more performant way would be to use a wrapping Div, and simply rotate the image inside the div using transform while giving overflow:hidden to your div. something like that http://jsfiddle.net/gK3XL/
img {
-webkit-transform : rotate(45deg);
margin: -30px;
}
div {
-webkit-transform : rotate(-45deg);
width: 100px;
height: 100px;
overflow: hidden;
}
What about matrix transforms?
HTML:
<div class="container">
<img src="http://dwnloadwallpapers.com/wp-content/uploads/2014/05/Final-Fantasy-Rikku.jpg">
</div>
CSS:
body {
background: black;
}
.container {
width: 540px;
margin: 0 auto;
overflow: hidden;
transform: matrix(1, 0, 0.6, 1, 0, 0);
}
.container img {
transform: matrix(1, 0, -0.6, 1, 0, 0);
}
http://codepen.io/raiden-dev/pen/fnjHb?editors=110
I want this result Demo
instead this Demo
Demo jsFiddle
How to move the div menu to end right side of div Container , So the menu will be on the right side.
I dont want position absolute because when you change the width size of the window page, the menu will hide the background of the image background Frog+Snake.
Many Thanks.
The code:
<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
body {
background-color : black;
background-image : url('pic/bg1.png');
background-size : 100% 700px;
background-repeat : no-repeat;
margin : 0;
margin-left : -100px;
padding : 0;
}
.imageContainer {
position : relative;
margin-left : auto;
margin-right : auto;
top : 10px;
background-size : 1000px 500px;
width : 1000px;
height : 500px;
overflow : hidden;
}
#Container {
background-image : url('pic/1/3.jpg');
background-repeat : no-repeat;
z-index : 0;
}
.layer {
position : absolute;
width : 1000px;
height : 500px;
padding : 0;
margin : 0;
}
#parrot {
z-index : 5;
}
#frog_snake {
z-index : 4;
}
#fly {
z-index : 3;
}
#crok {
z-index : 2;
}
#leafvarible {
position : absolute;
padding : 0;
margin-left : auto;
margin-right : auto;
display : block;
top : 10px;
left : 100px;
width : 1px;
height : 1px;
z-index : -1;
}
#pos {
top : 50px;
left : 10px;
color : white;
font-size : 16px;
}
#status {
position : absolute;
top : 350px;
left : -100px;
color : pink;
font-size : 20px;
padding-left : 120px;
}
#status1 {
position : absolute;
top : 375px;
left : -100px;
color : pink;
font-size : 20px;
padding-left : 120px;
}
#status2 {
position : absolute;
top : 400px;
left : -100px;
color : red;
font-size : 20px;
padding-left : 120px;
}
#fps_count {
position : absolute;
top : 10px;
right : 10px;
width : 150px;
font-size : 20px;
color : white;
font-family : 'Happy Sans', cursive;
border : red solid 1px;
}
#loading {
background : blue;
background-image : url('pic/FrogGameBackGround.jpg');
background-repeat : no-repeat;
background-size : 1000px 500px;
z-index : 10;
}
#loading > #barCont {
width : 400px;
height : 20px;
position : absolute;
top : 300px;
left : 50%;
margin : -10px 0 0 -200px;
background : black;
}
#loading > p {
position : absolute;
top : 275px;
left : 50%;
z-index : 11;
}
#bar {
width : 0;
height : 20px;
position : absolute;
left : 0;
background : #F3FF67;
}
#menu {
float : left;
width : 200px;
height : 500px;
position : relative;
left : 10px;
top : 0;
background-image : url('pic/menu.png');
border : red solid 1px;
clear : both;
}
#StartButton {
position : absolute;
right : 25px;
top : 300px;
width : 200px;
text-align : center;
color : white;
font-size : 35px;
text-shadow : 4px 4px 4px black;
cursor : pointer;
}
#speaker {
position : absolute;
right : 150px;
top : 350px;
width : 50px;
}
</style>
</head>
<body>
<div id= "Container">
<canvas id="A1" class="layer"></canvas>
<canvas id="A2" class="layer"></canvas>
<canvas id="A3" class="layer"></canvas>
<canvas id="A4" class="layer"></canvas>
</div>
<div class="imageContainer" id="loading">
<p id="loadText">Loading...</p>
<div id="barCont">
<div id="bar"></div>
</div>
</div>
<canvas id="A5"></canvas>
<div id="menu">
<!-- Button Start Game -->
<input id="StartButton" type="button" value="Start Game"/>
<!-- Loading sounds -->
<div id="speaker">speaker</div>
</div>
<script></script>
</body>
</html>
use position relative instead of absolute and use float:right; and/or float:left;
on both your main page and on your menu.
also what is that A5 thing for?
Remove all position property from #menu and set it to display:flex; and later add following margin margin:0 0 0 auto; . This will make menu align to right side no matter what is screen size is.
I'm building a website and I want to have the header in fixed position.
I've already done that on several website but it doesn't work on firefox. It's ok with safari and Chrome.
Here is a live example (doesn't work only with firefox)
Here is a live example which works with firefox
The only difference is in css :
-moz-transform: scale(1);
-moz-transform-origin: 0 0;
It seems that -moz-transform "removed" the fixed position.
Can you explain me why ?
I'm using -moz-transform: because my client want to have a zoom button. I've explained it's not a good thing but he still wants this functionality.
CSS code :
#conteneur
{
width: 960px;
position: relative;
margin: auto;
zoom: 100%;
-moz-transform: scale(1);
-moz-transform-origin: 0 0;
}
#header
{
position:fixed;
top:0;
z-index:3;
width:960px;
height:81px;
background-color:#ccc;
padding-bottom:8px;
}
ps : You're welcome if you want to edit my post as english is not my 1st language.
Try moving the
-moz-transform: scale(1);
-moz-transform-origin: 0 0;
part from #conteneur to #conteneur > div.
So instead of:
#conteneur {
width: 960px;
position: relative;
margin: auto;
zoom: 100%;
-moz-transform: scale(1);
-moz-transform-origin: 0 0;
}
try
#conteneur {
width: 960px;
position: relative;
margin: auto;
}
#conteneur > div {
zoom: 100%;
-moz-transform: scale(1);
-moz-transform-origin: 0 0;
}
See this Fiddle for a 0.4 scale example: http://jsfiddle.net/XtsRH/2/
Update:
About the > (child) selector:
W3.org selectors
Stack Overflow question (CSS Child vs Descendant selectors)
* is simply the universal selector, that matches the name of any element type.
I've forked your fiddle (modify scale with jQuery): http://jsfiddle.net/AgCSx/ . The jQuery selector is changed from #conteneur to #conteneur > *
recently I found a comment which describes the same issue for containers with any transformation applied, meaning the transformation breaks the fixed effect. Here is an extract of the comment...
“Any value other than ‘none’ for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.” (http://www.w3.org/TR/css3-2d-transforms/)
See Fixed Positioning in Mobile Browsers