Develop Reference

Css seeming to have no effect

I am attempting to use css in a small html game I am making for school.
I am blind and use a screen reader to code however the styling of an element is not read out.
I've been told that all my content is in a small rectangle or square in the corner of the screen.
I am using ng-animate which also has no effect.
What am I doing wrong, all my selectors match.
My css:
body {
width: 100%;
height: 100%;}
#canvas{
bottom:0px;
}
.settings.ng-enter{
animation-name: expand;
animation-duration: 2s;
}
#keyframes expand {
0% {
margin-top : 50%;
margin-left : 50%;
margin-bottom : 50%;
margin-right : 50%;
width: 0%;
height: 0%;
}
100% {
margin-top : 0%;
margin-left : 0%;
margin-bottom : 0%;
margin-right : 0%;
width: 100%;
height: 100%;
}}
The animation is meant to expand from the centre into full screen, the rest is meant to be full screen apart from the canvas which I tried setting with js to be a square with screen width being the length of each side. I've tried placing it at the bottom of the screen with the css and setting its width again to screen width but it doesn't do anything

You can try something like this aswell if you just want to animate from the center to the edges into fullscreen!
otherwise you could try with using transform instead of margins (if you need this solution - i can add it later).
you could also give your .ng-enter class display: block since margin: auto (which would be the correct solution to center an object) doesn't work with display: static
.wrapper {
position: relative;
width: 100%;
height: 100vh;
}
.container {
width: 100%;
height: 100vh;
background: black;
position: absolute;
top: 0;
left: 0;
animation-name: expand;
animation-duration: 4s;
}
#keyframes expand{
0% {
width: 0;
height: 0;
left: 50%;
top: 50%;
}
}
100%{
width: 100%;
height: 100vh;
left: 0;
top: 0;
}
}
<div class="wrapper">
<div class="container"></div>
</div>

center div using javascript/jquery

I know there are few way to positon a div center vertically and horizontal using css. But for old phone support, I have to do it with js.
http://jsfiddle.net/ncsy9khf/1/
div{
width:50px;
height:50px;
background:orange;
position:relative;
margin: 0 auto;
display:block;
}
How do I do the calculation to know what value of my margin top to make the box center center?

This is my favorite way:
position:relative;
top: 50%;
transform: translateY(-50%);
left: 50%;
transform: translateX(-50%);
This 5 lines can vertically and horizontally almost anything
Fiddle
I learned this method from this article
Support tables here
You can expect 95% of your users have this work perfectly
More browser friendly way:
position:relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 50%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
Friendly Fiddle

Just use plain CSS:
.parent {
position: relative;
width: 160px;
height: 160px;
background: #eee;
}
.centered {
position: absolute;
width: 50px;
height: 50px;
background-color: #FF9800;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="parent">
<div class="centered"></div>
</div>
The parent element must have position:relative; (In which you are planning to center the div)
Also there's no need to add display:block; to div elements - they are block elements by default

Fill background color in <div> on hover as animation that starts from center point and goes outerwards [duplicate]

This question already has an answer here:
Fill image in a div from center
(1 answer)
Closed 7 years ago.
Color must start from center point and with transition time. I have used all css transitions but no one gave me effect which i want.
Its not a duplicate because i want with css only.

You can do this with a pseudo-element and transition the scale.
div {
width: 200px;
height: 200px;
border: 1px solid grey;
margin: 25px auto;
position: relative;
overflow: hidden;
}
div:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 150%;
height: 150%;
background: #f00;
transition: transform 1s ease;
border-radius: 50%;
}
div:hover:before {
transform: translate(-50%, -50%) scale(1);
}
<div></div>

Convert JQuery Animation to Javascript/CSS3

I'm trying to move a div left and increase the height and width by 100px. I could do this using JQuery but I was wondering how I will do it using JavaScript/CSS3?
$("#button").click(function(){
$("#div").animate({
left: '250px',
height: '+=100px',
width: '+=100px',
});
});
I'm using the translate function to move it
-webkit-transform: translate(100px,0);
But I'm not sure how to go about increasing the size.
Any ideas?
Thank you!

How about keyframes?
#keyframes identifier {
0% { width: 25%; height: 40%; }
30% { width: 30%; height: 30%; }
68%, 72% { width: 75%; }
100% { width: 80%; height: 50%; }
}
One option is scale:
transform: scale(sx[, sy]);
to make 2x:
transform: scale(2);
or 2x width, 3x height:
transform: scale(2,3);

Prevent image distortion with image within transformed div?

I am looking for a way to adjust the transform on the background for this codepen. The goal would be to adjust the placeholder images so that it sits in it's normal position before the mouseenter, but still have the div rotated so it's a diamond square. As you can see, I have a jQuery animation that will come into play as well. Here is the Codepen:
http://codepen.io/pdnellius/pen/EfkHl
EDIT: I've updated my code to reflect my changes that I've made which gets the effect 90% there, however this feels really hacky.
I had to use a <img> tag instead of a background image on a <div> to achieve the desired effect. Can anyone recommend a solution that could center the <img> while maintaining the proportions when it goes 100% width? Usually I would use a background image with a contain property to achieve this effect, but since I've had to use a <img> tag in order to get this effect working, I'm unable to do that. I've updated the Codepen above to reflect my progress.
HTML
<div id="wrapper">
<div class="diamond">
<img src="http://placekitten.com/2100/2800" class="diamond-img">
</div>
</div>
CSS
body {
margin: 0;
top: 0;
left: 0;
right: 0;
}
#wrapper {
margin-top: 15em;
}
.diamond {
width: 30em;
height: 30em;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
background: aquamarine;
margin: 0% 50%;
position: absolute;
overflow: hidden;
}
.diamond:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
.diamond-img {
height: 60em;
-webkit-transform: rotate(45deg);
-webkit-transform-origin-y: 30%;
-webkit-transform-origin-x: 96%;
}
JS
$( document ).ready(function() {
$(".diamond").on("mouseenter", function(){
console.log("entered .diamond");
$(".diamond").animate({
transform: 'rotate(0deg)',
transformOrigin: '0 0',
margin: '0 0',
width: '100%',
height: '40em'
}), $(".diamond-img").animate({
width: '100%',
height: 'auto',
transform: 'rotate(0deg)',
}),
$("#wrapper").animate({
marginTop: '0'
})
}).on("mouseleave", function(){
$(".diamond").animate({
transform: 'rotate(-45deg)',
transformOrigin: '0 100%',
width: '30em',
height: '30em',
margin: '0 50%'
}), $(".diamond-img").animate({
height: '60em',
transform: 'rotate(45deg)',
width: '45em',
// transformOriginX: '30%',
// transformOriginY: '96%'
}),
$("#wrapper").animate({
marginTop: '15em'
})
});
});

Ok, from THIS webpage, we modify your fiddle with a :before kludge to get this - FIDDLE.
Any better?
CSS
#wrapper {
margin-top: 15em;
}
.diamond {
position: relative;
overflow: hidden;
width: 30em;
height: 30em;
margin: 0% 50%;
}
.diamond:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(http://www.placehold.it/2000x2000) 0 0 no-repeat;
background-size: cover;
background-position: center;
}
.diamond:hover:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(http://www.placehold.it/2000x2000) 0 0 no-repeat;
background-size: cover;
background-position: center;
transform: rotate(45deg);
}