Image/Link is stuck to top-left, even when position is changed - html

This is my CSS and HTML.
div.musiclink {
position: relative;
}
a.music {
width: 258px;
height: 117px;
display: block;
background: deepskyblue url('MUSIC-cursive.png') center top no-repeat;
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
-ms-transform: rotate(330deg);
-o-transform: rotate(330deg);
transform: rotate(330deg);
}
a.music:hover {
background-image: url('MUSIC-cursive-hover.png');
}
a.store {
position: relative;
left: 500px;
top: 100px;
width: 220px;
height: 110px;
display: block;
background: deeppink url('STORE-cursive.png') center top no-repeat;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
a.store:hover {
background-image: url('STORE-cursive-hover.png');
}
<div class="musiclink">
</div>
<div class="storelink">
</div>
The thing is I positioned everything successfully when I used images instead of href links, but now nothing is working the way I want it to. I don't want the images/links to move when I resize the browser.

Related

how twelve point star works correctly?

I am new to front-end developer and I am learning css basics , I can understand the following code
#twelve-point-star {
height: 100px;
width: 100px;
margin: 30px;
background: blue;
position: absolute;
}
#twelve-point-star:before {
height: 100px;
width: 100px;
background: blue;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#twelve-point-star:after {
height: 100px;
width: 100px;
background: blue;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
<p>twelve point star</p>
<div id="twelve-point-star"></div>
We have created a different kind of triangle and rotate that position to achieve this position. But what purpose we used :before and :after ?

See...you need total 12 stars. If you apply css only #twelve-point-star, you will get 4 corners...you need 8 corners more...For that you have used the :before to get 4 corners more and :after to get final 4 corners pseudo classes to get total 12 corners..
Try to change the color you will see the real visual.
Stack Snippet
#twelve-point-star {
height: 100px;
width: 100px;
margin:30px;
background: blue;
position: absolute;
}
#twelve-point-star:before {
height: 100px;
width: 100px;
background: red;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#twelve-point-star:after {
height: 100px;
width: 100px;
background: black;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
<body>
<p>
twelve point star
</p>
<div id="twelve-point-star">
</div>
</body>
Reference Link
::before
::after

:before
means that before every #twelve-point-star, the css in #twelve-point-star:before will be applied to #twelve-point-star. Likewise for :after, except that it is place after every #twelve-point-star. So what happens in the code is that you basically make 3 squares that are rotated in different directions, which creates that effect.
W3schools is a great source for you to learn css.

div getting pushed around or not appearing by other divs

I have an animation for a div that looks like a heart and am trying to put some text next to the heart div when the animation finishes. I tried putting text in a div and positioning that next to the heart but the invisible part of the heart keeps pushing it around or sometimes the div with text isn't visible at all. some help would be appreciated. Here is the code:
body {
overflow: ;
}
#heart {
position: relative;
width: 1000px;
height: 900px;
left: 300px;
top: 200px;
color: blue;
z-index: 2;
animation-name: example;
animation-duration: 4s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 5000px 5000px 0 0;
border-radius: 5000px 5000px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
z-index: 2;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
z-index: 2;
}
#keyframes example {
0% {
position: absolute;
z-index: 2;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
50% {
left: 0;
z-index: 2;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
100% {
z-index: 2;
}
#lol {
position: absolute;
right: 100px;
top: 200px;
font-family: Quicksand;
color: black;
}
<html>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" />
<body>
<div id="heart"></div>
<div id="lol">#Forever Alone</div>

You possibly missed the { after . That is,
100%{
z-index:2;
}
#lol {
should be
100% {
z-index: 2;
}
}
#lol {
Hope it helps!

The weird formatting is because you just need to add another closing bracket after you're done declaring your #keyframes (just before #lol).
#heart {
position: relative;
width: 1000px;
height: 900px;
left: 300px;
top: 200px;
color: blue;
z-index: 2;
animation-name: example;
animation-duration: 4s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 5000px 5000px 0 0;
border-radius: 5000px 5000px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
z-index: 2;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
z-index: 2;
}
#keyframes example {
0% {
position: absolute;
z-index: 2;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
50% {
left: 0;
z-index: 2;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
100% {
z-index: 2;
}
}
#lol {
position: absolute;
right: 100px;
top: 200px;
font-family: Quicksand;
color: black;
}

CSS multiple octagons

"Ugh, yet another css octagon".
This is something different, I swear. I did read similar questions on StackOverflow.
I would like to have the following on my page:
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.octagon {
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transform: rotate(22.5deg) scale(0.9) translateY(-4px);
-moz-transform: rotate(22.5deg) scale(0.9) translateY(-4px);
-ms-transform: rotate(22.5deg) scale(0.9) translateY(-4px);
-o-transform: rotate(22.5deg) scale(0.9) translateY(-4px);
transform: rotate(22.5deg) scale(0.9) translateY(-4px);
}
div.octagon > * {
position: relative;
overflow: hidden;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background: transparent;
border: 4px solid;
margin: 0;
}
div.octagon > *:after {
position: absolute;
/* There needs to be a negative value here to cancel
* out the width of the border. It's currently -4px,
* but if the border were 5px, then it'd be -5px.
*/
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
content: '';
border: inherit;
}
div.octagon > * > img {
display: block;
-webkit-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-moz-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-ms-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-o-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
transform: rotate(-67.5deg) scale(1.1) translateZ(0);
backface-visibility: hidden;
}
.green .octagon {
color: green;
}
/* Grouping */
.octagons {
position: relative;
display: inline-block;
/* To take dimension of the main octagon */
margin-left: 30px;
font-size: 0;
/* Remove white space */
}
.background.octagon {
position: absolute;
width: 100%;
height: 100%;
}
.background.octagon > * {
width: 100%;
height: 100%;
}
.left.octagon {
left: -30px;
}
.right.octagon {
right: -30px;
}
<div class="green octagons">
<div class="left background octagon">
<div> </div>
</div>
<div class="right background octagon">
<div> </div>
</div>
<div class="octagon">
<p>
<img src="https://placeholdit.imgix.net/~text?txtsize=25&txt=People&w=175&h=175" alt="" width="175" height="175" />
</p>
</div>
</div>
As you probably see, this is a "div soup". Because the main octagon needs to clip the image, it needs to have the same variable dimension as the image. Also, the octagons have border and are responsive, so I can't use "border hack".
The two background octagons only need the borders, but it need to be the same dimension as the image as well.
I can't use SVG because the image will be entered by end-user.
My question is then: Is there a cleaner way to do this?

How make 3 divs skew in css

How to make a 3 div with distortion, as shown in the picture?
I have made this:
.cars {
width: 100%;
height: 500px;
}
.car {
width: 33.33333333%;
height: 100%;
background: #3498db;
position: relative;
-webkit-transform: skewx(-10deg);
-moz-transform: skewx(-10deg);
-o-transform: skewx(-10deg);
-ms-transform: skewx(-10deg);
transform: skewx(-10deg);
transform-origin: top left;
float: left;
display: inline;
}
.car:nth-child(2) {
background: #000
}
.car:nth-child(3) {
background: #ff0000
}
<div class="cars">
<div class="car"></div>
<div class="car"></div>
<div class="car"></div>
</div>
jsFiddle
Left div - left corner straight, right corner slanted
Center div - left and right corner slanted
Right div - left corner slanted, right corner straight

I have used CSS's :after pseudo class to add another red box after the last, slanted one. However this one isn't slanted, thus 'filling in' the bit of the slant that you don't want:
.car:nth-child(3):after {
/* create the box */
content: "";
display: block;
/* make it fill the required space */
width: 80%; /* (this is only 80 because it was a bit large at 100) */
height: 100%;
background: #ff0000;
/* transform it in the opposite direction to counter the -10deg skew of .car */
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: -20%; /* counteract the 80% width */
}
I did the same with the first div, and :before:
.car:nth-child(3):before{
content: "";
display: block;
width: 70%;
height: 100%;
background: #3498db;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: 40%;
}
.cars {
width: 100%;
height: 500px;
margin-left: 100px;
}
.car {
width: 33.33333333%;
height: 100%;
background: #3498db;
position: relative;
-webkit-transform: skewx(-10deg);
-moz-transform: skewx(-10deg);
-o-transform: skewx(-10deg);
-ms-transform: skewx(-10deg);
transform: skewx(-10deg);
transform-origin: top left;
float: left;
display: inline;
}
.car:nth-child(2) {
background: #000;
}
.car:nth-child(3) {
background: #ff0000;
}
.car:nth-child(3):after {
content: "";
display: block;
width: 70%;
height: 100%;
background: #ff0000;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: -30%;
}
.car:nth-child(1):before {
content: "";
display: block;
width: 70%;
height: 100%;
background: #3498db;
-webkit-transform: skewx(10deg);
-moz-transform: skewx(10deg);
-o-transform: skewx(10deg);
-ms-transform: skewx(10deg);
transform: skewx(10deg);
transform-origin: top left;
position: relative;
right: 40%;
}
<div class="cars">
<div class="car first"></div>
<div class="car"></div>
<div class="car last"></div>
</div>
<br><br>

Image (child of div) but outside of it, to not activate the hover effect

So what i want is: when cursor goes over the image (diamond), no to activate the hover of the octagon.
Here is the example:
http://codepen.io/Chrez/pen/yYajGo
<li>
<a href="#">
<div class="octagonFirst">
<div class="octagonIn1">
<div class="octagonIn2">
<div class="octagonIn3"></div>
</div>
</div>
<span class="text First">Startseite</span>
<div class="diamond"></div>
</div>
</a>
</li>
CCS:
body {
background-color: #ba2020;
}
.octagonFirst {
width: 164px;
height: 68px;
position: absolute;
background: black;
top: 200px;
left: 1000px;
color: white;
font-size: 30px;
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-16deg);
-ms-transform: rotate(-16deg);
-o-transform: rotate(-16deg);
transform: rotate(-16deg);
}
.octagonIn1 {
width: 100%;
height: 100%;
background: inherit;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.octagonIn2 {
width: 100%;
height: 100%;
display: inherit;
background: inherit;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.octagonIn3 {
width: 100%;
height: 100%;
display: inherit;
background: inherit;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.text {
display: block;
position: absolute;
z-index: 1000;
-webkit-transform: rotate(16deg);
-moz-transform: rotate(16deg);
-ms-transform: rotate(16deg);
-o-transform: rotate(16deg);
transform: rotate(16deg);
}
.First {
left: 35px;
top: 10px;
}
.octagonFirst:hover {
background: white;
color: black;
}
.diamond {
width: 206px;
height: 202px;
position: absolute;
background-image: url('http://i.imgur.com/Yyv3dht.png');
top: 0;
}

Add pointer-events: none; to .diamond
codepen
body {
background-color: #ba2020;
}
.octagonFirst {
width: 164px;
height: 68px;
position: absolute;
background: black;
top: 200px;
left: 1000px;
color: white;
font-size: 30px;
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-16deg);
-ms-transform: rotate(-16deg);
-o-transform: rotate(-16deg);
transform: rotate(-16deg);
}
.octagonIn1 {
width: 100%;
height: 100%;
background: inherit;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.octagonIn2 {
width: 100%;
height: 100%;
display: inherit;
background: inherit;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.octagonIn3 {
width: 100%;
height: 100%;
display: inherit;
background: inherit;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.text {
display: block;
position: absolute;
z-index: 1000;
-webkit-transform: rotate(16deg);
-moz-transform: rotate(16deg);
-ms-transform: rotate(16deg);
-o-transform: rotate(16deg);
transform: rotate(16deg);
}
.First {
left: 35px;
top: 10px;
}
.octagonFirst:hover {
background: white;
color: black;
}
.diamond {
width: 206px;
height: 202px;
position: absolute;
background-image: url('http://i.imgur.com/Yyv3dht.png');
top: 0;
pointer-events: none;
}
<li>
<a href="#">
<div class="octagonFirst">
<div class="octagonIn1">
<div class="octagonIn2">
<div class="octagonIn3"></div>
</div>
</div>
<span class="text First">Startseite</span>
<div class="diamond"></div>
</div>
</a>
</li>