Is there a fix for cropping a round image from a square one that will get rid of my white border left behind.
I am trying to use animation css to rotate an earth image in a stary sky. Right now, I am struggling with a white border left over from cropping my image.
I don't have Photoshop right at the moment and I am having a hard time finding a free photo editor that will suffice. My macbook air 2016 model is supposed to have this feature in the preview mode, but it is not high-lit thus unavailable and I don't know why. Any help would be so appreciated it is ridiculous!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--animationlibrary githib url-->
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css"/>
</head>
<body>
<div>
<img id="starrySky" src="img/stary_nebula.jpg" alt=""/>
</div>
<img id="earth" name="earthRotate" src="img/my_round_earth.jpg" alt=""/>
<style>
img{
position: absolute;
left: -10px;
top: -15px;
height: 175px;
width: 175px;
}
**this is what I have now....**
div#earth{
transform: skew(20px, -10px);
transform: rotate(45deg);
border-radius: 50%;
overflow: hidden;
width:150px;
height:150px;
}
img#earth{
background-image: url("https://s.yimg.com/fz/api/res/1.2 /oaK.yDOhW_y44_tplykRWA--/YXBwaWQ9c3JjaGRkO2g9MTE2ODtxPTk1O3c9MTcwMA--/http://www.heavensgloryobservatory.com/Color_Jpegs/ngc2244NB03.jpg");
}
#earth{
position: absolute;
top: 0px;
left: 600px;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
border-radius: 50%;
-webkit-animation-name: earthOrbit;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 10s;
overflow: visible;
}
#-webkit-keyframes earthOrbit{
from{ -webkit-transform: rotate(0deg); }
to{-webkit-transform: rotate(360deg);}
}
#starrySky{
position: relative;
top: -10px;
left: -10px;
width: auto;
height: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
text-align: center;
font-size: 25px;
}
</style>
</body>
</html>
just specify what size the parent <div> has and use overflow: hidden if necessary.
extra: to crop in different shapes, just transform the parent <div>, e.g.:
transform: skew(20px, -10px),
transform: rotate(45deg),
border-radius: 50%
Related
I want to place a image inside a rectangle and have the image move to the right while the rectangle is being stationary and not moving. My problem is that I cant manage to put the image inside the rectangle without the rectangle moving. I got the result I want with a specific screen size
by using margin and positioning the image but when I resize the window it will not be in the same place.
How to keep it in the image inside the rectangle at the same place?
body {
margin: 0px;
}
.top-shelf {
height: 5vh;
width: 100vw;
background-color: rgb(40, 121, 197);
opacity: 50%;
}
.logo-outline {
border-radius: 35px;
border: 5px solid rgba(4, 22, 29, 0.137);
width: 130px;
height: 130;
margin-top: 1%;
margin-left: 3%;
padding: 30px;
}
.rotate-logo{
position: absolute;
top: 7%;
left: 3%;
transition: all 4s;
-webkit-transition: all 4s;
transform: translate(130px, 0);
-webkit-transform: translate(130px,0);
background-image: url('owl-logo.png');
}
.text-heading{
text-align: center
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Cool Name</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="top-shelf"></div>
<div class="logo-outline">
<img src="https://i.pinimg.com/originals/f1/90/8e/f1908e1ee89bc192c02e5dcb95296f5f.png" class="rotate-logo" width="70" height="70">
</div>
<div class="text-heading">
<h1 style="font-family: courier;">Cool title</h1>
</div>
</body>
</html>
strong text
One thing you could try is just letting the image stay in the div, letting it flow on the page as it normally would. If the image is just in the div, it should automatically be sized to fit its contents. You could then affect the position of the image using CSS properties like margin or transform.
#logo-outline {
border-radius: 35px;
border: 5px solid rgba(4, 22, 29, 0.137);
width: 130px;
padding: 2px;
}
#rotate-logo {
height: 70px;
transition: transform ease 100ms;
}
#logo-outline:hover #rotate-logo {
transform: translateX(60px); /* 130px - 70px width */
}
<div id="logo-outline">
<img src="https://i.pinimg.com/originals/f1/90/8e/f1908e1ee89bc192c02e5dcb95296f5f.png" id="rotate-logo">
</div>
I am just trying to rotate this element whenever the mouse hovers on it. but it also changes its position. please let me know what's the problem in this code. I am not getting why this happens. Anyone, please help. Any documentation is also accepted.
below is my code.
body{
background-color: black;
color:white;
height: 100vh;
}
.spinner{
height: 150px;
width: 200px;
display: inline-block;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
background-color: blue;
border-radius: 50%;
transition:transform 1s ease-in;
}
.spinner span{
display: inline-block;
font-size: 1.7em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-weight: 500;
}
.spinner:hover{
transform: rotate(180deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spinner</title>
<link rel="stylesheet" href="spinner.css">
</head>
<body>
<div class="spinner">
<span>Click me</span>
</div>
</body>
</html>
This happens because you are losing the main transform property from the .spinner element.
.spinner{
transform: translate(-50%,-50%);
}
.spinner:hover{
transform: rotate(180deg);
}
When you hover, your translation property is replaced with the rotation one.
In order to get this to work you need two stack the two transforms in one line, like this:
.spinner:hover{
transform: translate(-50%,-50%) rotate(180deg);
}
Just try changing the values of position and the display property and it will work hopefully.
new to HTML and CSS. Could anyone teach me how to animate my picture from my current point to, another location? For example, moving from "top: 280px: left 600px;" to "top:180px; left 500px;"
Need someone to guide me along, thanks.
Below is my current code:
#robot {
position: fixed;
top: 280px;
left: 600px;
border-radius: 50%;
width: 50px;
height: 60px;
}
body {
height: 100%;
width: 100%;
background-image: url('TPHRG floorplan1.png');
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
<img id="robot" src="https://img.favpng.com/20/7/18/clip-art-robot-free-content-image-vector-graphics-png-favpng-pJhfbKDrGy0yuQsKVTrjEu7br.jpg">
Here is a simplified example of an transition between to positions.
The key is to add the transition rule to your element (#robot), where you set the property you want to animate, the duration of the animation, easing function etc. See documentation for more examples.
Note that if you use the all keyword in the mentioned rule for shorthand convenience, it is adviced to specify which property you want to animate in the additional transition-property rule. This is for performance reasons.
In my example I'm using :hover to trigger the animation, but it might as well be when the page loads or when a certain class is added to your element by some JavaScript.
Hope it helps!
.box {
width: 500px;
height: 150px;
position: relative;
padding: 10px;
border: 5px solid green;
}
.cat {
position: absolute;
top: 50px;
left: 50px;
transition: all 1s ease-in;
transition-property: top, left;
}
.box:hover .cat {
top: 10px;
left: 300px;
}
<div class="box">
Hover me!
<img class="cat" src="https://placekitten.com/100/100" alt="A cat">
</div>
Yes, you can do it by simple using css.
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#robot {
position: fixed;
top: 280px;
left: 600px;
border-radius: 50%;
width: 50px;
height: 60px;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
body {
height: 100%;
width: 100%;
background-image: url('TPHRG floorplan1.png');
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes example {
from {top: 280px;left:600px;}
to {top: 180px;left:500px;}
}
/* Standard syntax */
#keyframes example {
from {top: 280px;left:600px;}
to {top: 180px;left:500px;}
}
</style>
<body>
<img id="robot" src="https://www.w3schools.com/images/compatible_chrome.gif">
<?php ?>
</body>
</html>
i am making a map with points. My project uses bootstrap, if that helps. As my map scales due to the screen size, my points move away, and aren't fixed in the same position in regards to their parent.
I presume i also need to scale down their size as the map gets smaller or larger, in order to keep it accurate. Is there a simple way of doing this?
.pin{
position: absolute;
width: 1em;
height: 1em;
margin: 0.5em 0 0 0.5em;
border-radius: 50%;
background: #F06449;
animation-name: bounce;
animation-fill-mode: both;
animation-duration: 1s;
box-sizing:border-box;
transition: box-shadow 0.3s linear;
}
.map{
width: 40%;
height: 25%;
position: relative;
left: 56%;
background-color: #E5F9E0;
}
and my HTML:
<div>
<img src="img/output-onlinepngtools.png" class="map animated fadeIn slower" alt="Responsive image">
<div id="mapPins">
<span onclick="openOverlay()" class="pin" style="left: 60em; bottom: 30em"><p>Test</p></span>
</div>
</div>
Thanks you! :)
When a element have position: absolute you can use the top and left css properties. They also support percentage so you could do top: 45% and left: 15% to position the pin.
I have corrected it. I should've done the following:
Create a div holder for just the image and additional information. Set both that and image to be relative, and the pin to be absolute. Eg:
<div class = "mapContainer">
<img src="img/output-onlinepngtools.png" class="animated fadeIn slower">
<span onclick="openOverlay()" class="pin" style="top: 66.5%; left: 40%;"><p>Test</p></span>
</div>
Then for my css:
.mapContainer{
position: relative;
width: 50%;
box-sizing: border-box;
margin: 0 auto;
left: 30%;
}
.mapContainer > img{
height: 60%;
width: 80%;
position: relative;
margin: 0;
padding: 0;
background-color: #E5F9E0;
}
With my pin now being set with absolute positioning, as well as percentages for position.
Setting the position of both the pin and the map a position that's in percentages achieves the effect you want. Like this:
html:
<div class="test-background">
<img src="img/output-onlinepngtools.png" class="map animated fadeIn slower" alt="Responsive image"/>
<div id="mapPins">
<span onclick="openOverlay()" class="pin"><p>Test</p></span>
</div>
</div>
css:
.pin{
position: absolute;
width: 1em;
height: 1em;
border-radius: 50%;
background-color: yellow;
animation-name: bounce;
animation-fill-mode: both;
animation-duration: 1s;
box-sizing:border-box;
transition: box-shadow 0.3s linear;
/* give relative positioning */
left: 40%;
top: 20%;
}
.map{
width: 40%;
height: 250px;
position: relative;
display: block;
margin: auto;
background-color: #E5F9E0;
}
Check it out here (added some background colors for clarity and remoevd some of the animation attributes that cluttered up the css): https://codepen.io/jasperdg/pen/oNNVNro
I'm new to web developing, and I'm learning how CSS works as I go along.
I'm creating a fun template to pass time but I noticed my aligning isn't right at all. When scrolling out or resizing browser everything goes way out of proportion. Any help on what's wrong and or what to improve with what I'm doing (again I'm new, so sorry)
I've tried other solutions and I couldn't get it to work.
I directly linked my codepen example.
https://codepen.io/anon/pen/yxWvJO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OSRS - Template</title>
<link rel="icon" href="images/favicon.png" />
<link rel="stylesheet" href="css/custom.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="logo"></div>
<div class="scroll-middle"></div>
<div class="scroll-top"></div>
<div class="scroll-bottom"></div>
<ul>
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
</ul>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/IcgB_OzA_sE?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="discordapp">
<iframe src="https://discordapp.com/widget?id=488699973156864030&theme=dark" width="350" height="380" allowcontrols="true" allowtransparency="true" frameborder="0"></iframe>
</div>
</div>
</body>
</html>
/*
* Defines the body & html attributes
*/
body,
html {
font-family: 'Helvetica', sans-serif;
background-image: url(https://www.runescape.com/img/rsp777/bg2.jpg);
background-size: cover;
text-align: center;
padding: 0;
margin: 0;
}
/*
* Defines the list attributes
*/
ul {
list-style-type: none;
margin: 1;
padding: 0;
position: absolute;
top: 25%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
/*
* Defines the list attributes
*/
li {
float: left;
background-image: url(https://www.runescape.com/img/rsp777/splash/button_small.gif);
top: 117px;
height: 63px;
margin: 5px;
position: relative;
width: 152px
}
/*
* Defines the list attributes
*/
li a {
display: block;
color: grey;
top: 25%;
text-align: center;
padding: 20px 16px;
}
/*
* Defines the list attributes
*/
li a:hover {
color: white;
}
::-webkit-scrollbar {
display: none;
}
.video {
position: absolute;
top: 500px;
left: 50%;
transform: translate(-50%, -50%);
}
.container {
width: 100%;
margin: auto;
overflow: hidden;
}
/*
* Defines the container attributes
*/
.container-right {
position: absolute;
width: 250px;
height: 250px;
border-style: solid;
border-width: 2px;
border-color: silver;
border-radius: 10px;
top: 50%;
left: 90%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
/*
* Defines the title attributes
*/
.title-box {
text-align: center
}
/*
* Defines the logo attributes
*/
.logo {
background-image: url(https://vignette.wikia.nocookie.net/2007scape/images/4/41/Old_School_RuneScape_logo.png/revision/latest?cb=20170406224036);
position: absolute;
width: 250px;
height: 175px;
background-size: 250px 175px;
top: 5%;
left: 40%;
transform: translate(-50%, -50%);
animation: float 6s ease-in-out infinite;
}
.scroll-top {
background-image: url(https://www.runescape.com/img/rsp777/grand_exchange/Scroll-Top.gif);
position: absolute;
width: 770px;
height: 39px;
background-size: 770px 39px;
background-repeat: no-repeat;
top: 250px;
left: 50%;
transform: translate(-50%, -50%);
}
.scroll-middle {
background-image: url(https://www.runescape.com/img/rsp777/scroll/backdrop_745.gif);
background-repeat: repeat-y;
position: absolute;
width: 745px;
height: 800px;
top: 650px;
left: 50%;
transform: translate(-50%, -50%);
}
.scroll-bottom {
background-image: url(https://www.runescape.com/img/rsp777/grand_exchange/Scroll-Top.gif);
position: absolute;
width: 770px;
height: 39px;
background-size: 770px 39px;
background-repeat: no-repeat;
bottom: -429px;
left: 50%;
transform: translate(-50%, -50%);
}
.discordapp {
position: absolute;
bottom: -565px;
left: 50%;
transform: translate(-50%, -50%);
}
/*
* Defines the flating attributes
*/
#keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-20px);
}
100% {
transform: translatey(0px);
}
}
I highly suggest you try out CSS flexes and grids, your code is missing fundamental formatting so when you resize the browser doesn't really know what to do and just moves things around.
Before trying more complex techniques I'd suggest you try to minimize your CSS, using breaks in HTML and understanding how to efficiently and non-redundantly center elements in your pages.
All and all, that's not the worst start, good luck with your learning process!
I'll start from the end - unfortunately you can't except the same result with this code on every device. While it works on computer screens the problams start on smaller screens - mainly because you are using absolute position and pixels unites.
The solution can be either breakpoints (css media query) so you can style differently depend on screen sizes, or to use percentage values (with min-width values), but that is not recommend with that code.
It's a good practice not using frameworks and code by yourself. You should learn html and css in order to gain more tools. I suggest start with w3schools and mdn, but there are lot of other guides out there...
By the way - it look very nice on my laptop! Good luck, and the most important - enjoy coding!
I recomend you to see about CSS Flexbox and Media queries. this links with many tutorials/examples will help you to understand more about css and positioning. Because your code needs to adapt in every screen (mobile and desktops). your site looks good, keep coding!