I was wondering how I could apply shadows to svg images (for example a triangle). I found solutions like polyfill, but it just didn't work the way I wanted it to. I've made a JSFiddle to show you what I would like to give a shadow.
My HTML:
<div class="spikes"></div>
My CSS:
body {
background-color: #ccc;
}
.spikes {
margin-top: 20px;
width: 250px;
transform: rotate(180deg);
background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGFhZ18xIiBkYXRhLW5hbWU9IkxhYWcgMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUgMjUiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogIC AgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZmZmZmZmOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQog IDwvZGVmcz4NCiAgPHRpdGxlPmthcnRlbDwvdGl0bGU+DQogIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyNSAxOS43IDI1IDI1IDAgMjUgMCAyMC4yNSAxMi43NyA3LjQ3IDI1IDE5LjciLz4NCjwvc3ZnPg0K");
height: 20px;
position: absolute;
max-width: 1000px;
transition: 0.75s;
-webkit-box-shadow: -2px -2px 5px 0px rgba(97,97,97,1);
-moz-box-shadow: -2px -2px 5px 0px rgba(97,97,97,1);
box-shadow: -2px -2px 5px 0px rgba(97,97,97,1);
}
You can't apply a shadow to a background-image as it's a CSS property and not an element.
What you can do is apply a filter:drop-shadow to the element instead.
Provided the SVG has transparency / alpha it will look something like this:
body {
background-color: #ccc;
}
.spikes {
margin-top: 20px;
width: 250px;
transform: rotate(180deg);
background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGFhZ18xIiBkYXRhLW5hbWU9IkxhYWcgMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjUgMjUiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjZmZmZmZmOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPHRpdGxlPmthcnRlbDwvdGl0bGU+DQogIDxwb2x5Z29uIGNsYXNzPSJjbHMtMSIgcG9pbnRzPSIyNSAxOS43IDI1IDI1IDAgMjUgMCAyMC4yNSAxMi43NyA3LjQ3IDI1IDE5LjciLz4NCjwvc3ZnPg0K");
height: 20px;
position: absolute;
max-width: 1000px;
transition: 0.75s;
filter: drop-shadow(-1px -1px 1px black);
}
<div class="spikes"></div>
Related
I need to create a header that looks like the firs image, however, it can't be an image. Preferably just css, but open to jQuery if there is a way to do this with jQuery.
I have tried many different things, but cannot create the 45 degree angle on the header(just before Home). This is the closest I have gotten. The colors are wrong in this image but that is intentional so that I could better illustrate the issue.
This is part of my latest attempt make this work and I think I am close with it, but it still isn't right.
#header{
float:left;
margin-top:20px;
overflow: hidden;
padding-bottom: 10px;
background-color:#F1F1F1;
-moz-box-shadow: 3px 3px 5px 0px #ccc;
-webkit-box-shadow: 3px 3px 5px 0px #ccc;
box-shadow: 3px 3px 5px 0px #ccc;
width: 100%;
height:130px;
z-index: 1;
}
#secondHeader{
float:right;
background-color:#ffffff;
width:50%;
height: 80px;
position: relative;
margin-top: -50px;
margin-right:15px;
/* border-radius: 15px 15px 0px 20px; */
/* background-color:#ff0000; */
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
z-index: 10;
}
#secondHeader::before{
height: 80px;
width: 70px;
border-radius: 10px 10px 10px 10px;
background-color: #f1f1f1;
content: "";
position: absolute;
left: 32px;
top: 0px;
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
z-index: -1;
}
What am I doing wrong? I have worked on this for two days and cannot figure it out.
this is pretty close to what you need. Simply using borders to do this:
#menubar {
width: 40vw;
min-height: 100px;
background-color: rgba(0,0,0,0.1);
}
#menubar ul {
margin-left: 55px;
padding-top: 40px;
}
#angle {
position: absolute;
border-top: 102px solid rgba(0,0,0,0.1);
border-right: 52px solid transparent;
border-left: 0px solid transparent;
height: 0;
width: 2px;
}
#angle2 {
position: absolute;
border-top: 100px solid white;
border-right: 50px solid transparent;
border-left: 0px solid transparent;
height: 0;
width: 1px;
}
<div id="menubar"><div id="angle"></div><div id="angle2"></div><ul>Menu here</ul></div>
Below is code that once hovered over the shape words will appear behind. Having two problems here:
1. If I make the font small (24px), the dark grey will not cover the whole shape.
2. I want to include words with the hover, e.g. I want it to display information on the shape before hovering, then fade away with the shape to show the new info behind it. Like a name fading away to give a bio.
I used w2schools to compile this: https://www.w3schools.com/code/tryit.asp?filename=FT2LEOI9SQQN
<html>
<div id="box">
<div id="overlay">
<span id="plus">Hello<br>Hi</span>
</div>
</div>
<style>
body {
background: #e7e7e7;
}
#box {
width: 300px;
height: 200px;
box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background-size: cover;
border-radius: 5px;
overflow: hidden;
}
#overlay {
background: rgba(0, 0, 0, 0.75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
}
#box:hover #overlay {
opacity: 1;
}
#plus {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, 0.85);
font-size: 24px;
}
</style>
</html>
Kindly have a look over the modified Code, It's now covering the whole Div.
I am a bit fuzzy about your second point, hope will solve it also.
I have tested the code, You can test also, next time be careful to use your own Editor for better output.
If the Code Solve your problem, then Vote Up to Acknowledge our effort.
Thank You.
Best Wishes,
<html>
<head>
<title>
</title>
<style>
body {
background: #e7e7e7;
}
#box {
width: 300px;
height: 177px;
box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background-size: cover;
border-radius: 5px;
overflow: hidden;
}
#overlay {
background: rgba(0, 0, 0, 0.75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity 0.25s ease;
-moz-transition: opacity 0.25s ease;
}
#box:hover #overlay {
opacity: 1;
}
#plus {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, 0.85);
font-size: 24px;
}
</style>
</head>
<div id="box">
<div id="overlay">
<span id="plus">Hello<br>Hi</span>
</div>
</div>
</html>
I searched for a while but couldn't find anything useful.I have the following css
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 10px;
background-image: url('http://www.w3schools.com/html/smiley.png'),
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #fefefe),
color-stop(0.49, #dddddd),
color-stop(0.51, #d1d1d1),
color-stop(1, #a1a1a1)
);
background-size:20px;
background-repeat: no-repeat;
}
Now I want to change the background image to some other image src by the help of jquery or plain javascript which I can test from chrome console.So that I have something like:
`background-image: url('http://someotherimage/test.png'),`
Could anyone please mention the correct syntax.
Thanking you in anticipation of favorable response.
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 50px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
height: 50px;
width: 50px;
border-radius: 3px;
background-color: transparent;
background: url(https://i.stack.imgur.com/QneFV.png) center center no-repeat;
cursor: pointer;
-webkit-appearance: none;
margin-top: -23px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
background: #3071a9;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-moz-range-thumb {
height: 50px;
width: 50px;
border-radius: 3px;
background-color: transparent;
background: url(https://i.stack.imgur.com/QneFV.png) center center no-repeat;
cursor: pointer;
-webkit-appearance: none;
margin-top: -23px;
}
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
height: 50px;
width: 50px;
border-radius: 3px;
background-color: transparent;
background: url(https://i.stack.imgur.com/QneFV.png) center center no-repeat;
cursor: pointer;
-webkit-appearance: none;
margin-top: -23px;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}
<input type="range" />
I am posting solution which worked for me for anyone facing the same issue.As I wanted to change the css of the -webkit-slider-thumb on the fly so I did something like this I used a class for the input and added css for this class like this
.first_class::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 10px;
background-image: url('http://www.w3schools.com/html/smiley.png'),
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #fefefe),
color-stop(0.49, #dddddd),
color-stop(0.51, #d1d1d1),
color-stop(1, #a1a1a1)
);
background-size:20px;
background-repeat: no-repeat;
background-position: 50%;
}
I also added the other set of css under a different class name like this
.second_class::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 10px;
background-image: url('http://someotherimage/test.png'),
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #fefefe),
color-stop(0.49, #dddddd),
color-stop(0.51, #d1d1d1),
color-stop(1, #a1a1a1)
);
background-size:20px;
background-repeat: no-repeat;
background-position: 50%;
}
Then using Jquery I changed the classes whenever I needed to change the css, i.e if I remove the first_class and add second_class to the input it will change the image of the -webkit-slider-thumb
Thankyou for all those who tried to help.
I have a little hack way to help you.
Here I have write a same selector as input[type="range"]::-webkit-slider-thumb in a <style> tag, and append it to the last of <head>.
And then, this style will cover the background-image you ever write.
$('<style>input[type="range"]::-webkit-slider-thumb { background-image: url("http://someotherimage/test.png");}<style/>').appendTo('head');
jsFiddle Code
I have updated my anwser as T.J.
There is now a CSS3 way of doing this which I think is much simpler and cleaner.
In your HTML tag you define a style tag such as:
style="--img-path:url('/images/small_blue_inner.svg') no-repeat 8px 8px #fff;"
In your CSS stylesheet your background would then read:
background:var(--img-path);
You can then set your style attribute with jquery the way you normally would:
$(slider).attr('style',"--img-path:url('/images/small_ALT_Img.svg') no-repeat 8px 8px #fff;--img-border:1px solid #11b6d1");
And as you can use these in pseudo elements I believe this is the best solution for 2018.
I need to make my box-shadow appear like a border: If I have a parent with a inset boxshadow and I put a child div in it, the box shadow should go over the child div like shown here with borders:
jsFiddle: http://jsfiddle.net/7rRsw/2/
Is there anything like a z index for this problem, or a css hack?
Thanks
EDIT: I need to use box shadow inset + no borders or box seizings.
I am searching for hacks to make this possible only with box shadow. A possible hack would be to add box shadows left and right on the child div.
If you want a solution in which you don't need any extra markup, you can use the ":before" pseudo class selector: http://jsfiddle.net/7rRsw/8/
HTML
<div class="a"><div class="b">No extra markup needed</div></div>
CSS
.a {
width: 200px;
float: left;
height: 200px;
margin-right: 100px;
background-color: red;
position: relative;
}
.a:before {
content: '';
position: absolute;
left: 0;
right: 0;
width: 200px;
height: 200px;
box-shadow: inset 0px 0px 0px 2px black;
-webkit-box-shadow: inset 0px 0px 0px 2px black;
-moz-box-shadow: inset 0px 0px 0px 2px black;
}
.b {
width: 200px;
height: 100px;
background-color: yellow;
}
It is because your box shadow is inset. Meaning it will appear inside the box.
Whilst your nested div will cover it. Using a border applies to the outside of the "box".
Removing the inset from your CSS will cause the effect you are after.
See updated fiddle with inset remove. fiddle
box-shadow: 0px 0px 0px 2px black;
-webkit-box-shadow: 0px 0px 0px 2px black;
-moz-box-shadow: 0px 0px 0px 2px black;
UPDATE
To have just the inset box shadow visible, you could make the child div 4px pixels smaller in width than the parent. Then use margins to correctly position the div. However I'm not sure this completely achieves what you are after? See this fiddle.
.a{
width: 200px;
float: left;
height: 200px;
margin-right: 100px;
background-color: red;
box-shadow: inset 0px 0px 0px 2px black;
-webkit-box-shadow: inset 0px 0px 0px 2px black;
-moz-box-shadow: inset 0px 0px 0px 2px black;
}
.b {
width: 196px;
height: 100px;
background-color: yellow;
margin:2px auto 0 auto;
}
UPDATE 2
This "Hack" applies an overlay to the two elements with the box shadow. See fiddle.
HTML
<div class="a">
<div class="b">How it is (Yellow div covers the box shadow)</div>
<div class="shadow"> </div>
</div>
CSS
.a{
width: 200px;
float: left;
height: 200px;
margin-right: 100px;
background-color: red;
position:relative;
}
.b {
width: 200px;
height: 100px;
background-color: yellow;
}
.shadow {
box-shadow: inset 0px 0px 0px 2px black;
-webkit-box-shadow: inset 0px 0px 0px 2px black;
-moz-box-shadow: inset 0px 0px 0px 2px black;
position:absolute;
top:0;
width:200px;
height:200px;
}
One way is to not make your box-shadow inset so that it appears outside the box. But if you really want to use an inset box shadow, you can add a padding to the container element equal to the thickness of the shadow:
.a {
...
padding: 2px;
box-shadow: 0 0 0 2px #000000;
}
Add:
z-index: -1; /** less than the parent in general */
To the child element and it should work.
Give your main element position: relative, then create another div within that element that has:
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0px 0px 0px 2px black;
What this does is it creates an invisible div that goes over your content, then you apply your box-shadow to that div and it will lay on top of all the elements that were previously covering the shadow. It's like placing a sheet of glass with the shadow etched on to its edges over your element.
I have some div elements which when I click on them, they show their back (flipcards) and expand to a size of 600px by 600px, I want those divs to also go in the center of the screen when I click on it, then move back again when a click on it again. I would like it to be centered horizontally and vertically. I have tried searching, and so far none of them worked. Most results included something such as:
.flip.cover.flipped{
left: 50%;
margin-top: -300px;
margin-left: -300px;
position: absolute;
height: 600px;
width: 600px;
top: 50%;
}
I've added that to the current css class.flip.cover.flipped which is a class which is toggled on click using javascript, but that only resulted in my div elements to remain where it was on click. See this. Here is the .flip.cover.flipped class in full:
.flip .cover.flipped {
left: 50%;
margin-top: -300px;
margin-left: -300px;
position: absolute;
height: 600px;
width: 600px;
top: 50%;
transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-ms-transform: rotatey(180deg);
-o-transform: rotatey(-180deg);
-webkit-transform: rotatey(-180deg);
z-index: 10;
}
Other results included a custom javascript function, which I couldn't test out. If a custom javascript function works, I just need something to toggle it with (If that's the case, I'm really hoping for something simple such as $(this).find('.cover').toggleClass('flipped');, only for functions)
I'd really appreciate anyone's help as to how I'd be able to do this.
I've recently discovered that the usual way centres the element within its parent element. Problem is that I want to centre the element within the window not within its parent element.
Here is the HTML structure:
<div class="flip">
<div class="cover">
<div class="face front">
<img src="http://farm4.staticflickr.com/3809/8814925510_b53d082ea6_o.jpg" width="125"/>
</div>
<div class="face back">
Hello World!
</div>
</div>
</div>
and this is the javascript to toggle the class:
$('.flip').click(function() {
$(this).find('.cover').toggleClass('flipped');
});
Edit: I was reviewing some of my own questions, and since the link to my example has been changed, I decided on showing the full code of the page here along with the result:
$('.flip').click(function() {
$(this).find('.cover').toggleClass('flipped');
});
/*Sorted alphabetically*/
* {
margin: 0px;
padding: 0px;
}
#backbutton {
background-image: url("http://farm9.staticflickr.com/8538/8781018857_feef1c4e6e_o.png");
background-position: center;
background-repeat: no-repeat;
background-size: 90px 32px;
color: #FFFFFA;
display: inline-block;
font-family: Helvetica, Sans-Serif;
font-size: 26px;
float: left;
min-width: 90px;
padding: 4px 0px;
text-align: center;
text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
z-index: 2;
}
body {
background-image: url('http://farm3.staticflickr.com/2891/8769949843_f6b2b03c89_o.png');
background-repeat: repeat-y;
background-position: 0px 37px;
background-size: cover;
}
#creditsbutton {
background-image: url("http://farm4.staticflickr.com/3726/8769949955_3d28f7be67_o.png");
background-position: center;
background-repeat: no-repeat;
background-size: 100px 32px;
color: #FFFFFA;
display: inline-block;
font-family: Helvetica, Sans-Serif;
font-size: 26px;
float: right;
min-width: 100px;
padding: 4px 0px;
text-align: center;
text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
z-index: 2;
}
.flip {
box-shadow: 0px 15px 6px -6px #2C0600;
-o-box-shadow: 0px 15px 6px -6px #2C0600;
-ms-box-shadow: 0px 15px 6px -6px #2C0600;
-moz-box-shadow: 0px 15px 6px -6px #2C0600;
-webkit-box-shadow: 0px 15px 6px -6px #2C0600;
display: inline-block;
height: 185px;
position: relative;
width: 125px;
perspective: 800;
-o-perspective: 800;
-moz-perspective: 800;
-ms-perspective: 800;
-webkit-perspective: 800;
}
.flip .cover {
height: 100%;
padding: 0px 0px 0px 0px;
position: relative;
text-align: center;
width: 100%;
transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: 0.5s;
-o-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-webkit-transition: 0.5s;
}
.flip .cover .back {
background: white;
color: black;
cursor: pointer;
transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-ms-transform: rotatey(-180deg);
-o-transform: rotatey(-180deg);
-webkit-transform: rotatey(-180deg);
}
.flip .cover.flipped {
left: 50%;
margin-top: -300px;
margin-left: -300px;
position: absolute;
height: 600px;
width: 600px;
top: 50%;
transform: rotatey(-180deg);
-moz-transform: rotatey(-180deg);
-ms-transform: rotatey(180deg);
-o-transform: rotatey(-180deg);
-webkit-transform: rotatey(-180deg);
z-index: 10;
}
.flip .cover .face {
font-family: Helvetica, Sans Serif;
height: 100%;
line-height: 200px;
position: absolute;
text-align: center;
width: 100%;
backface-visibility: hidden;
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backfae-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.flip .cover .front {
background: black;
color: white;
cursor: pointer;
position: absolute;
}
#header {
background-image: url("http://farm9.staticflickr.com/8137/8774763204_453c37e1aa_o.png");
background-repeat: no-repeat;
background-size: cover;
min-width: 673px;
padding: 4px 14px;
z-index: 1;
}
.headerbuttonsegment-centre {
background-image: url("http://farm6.staticflickr.com/5330/8787597480_6696f22a79_o.png");
background-position: center;
background-repeat: no-repeat;
color: #FFFFFA;
display: inline-block;
font-family: Helvetica, Sans-Serif;
font-size: 26px;
padding: 4px 0px;
text-align: center;
text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
z-index: 2;
}
#headerbuttonsegment-left {
background-image: url("http://farm9.staticflickr.com/8560/8787597614_733a58b275_o.png");
background-position: center;
background-repeat: no-repeat;
color: #FFFFFA;
display: inline-block;
font-family: Helvetica, Sans-Serif;
font-size: 26px;
padding: 4px 0px;
text-align: center;
text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
z-index: 2;
}
#headerbuttonsegment-right {
background-image: url("http://farm6.staticflickr.com/5466/8787597568_43fd6869fb_o.png");
background-position: center;
background-repeat: no-repeat;
color: #FFFFFA;
display: inline-block;
font-family: Helvetica, Sans-Serif;
font-size: 26px;
padding: 4px 0px;
text-align: center;
text-shadow: 0px -0.9px 1px #1e160a, -0.9px 0px 1px #1e160a, 0.9px 0px 1px #f5eee2, 0px 0.9px 1px #f5eee2;
z-index: 2;
}
#shelf {
list-style-type: none;
padding: 10px 50px 20px;
position: relative;
}
.spacing {
display: inline-block;
width: 50px;
}
.wrap-centre {
min-width: 603px;
text-align: center;
width: 100%
}
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<body>
<div id='header'>
<a href="http://markscamilleri.tumblr.com">
<div id="backbutton">
Back
</div>
</a>
<div class='wrap-centre'>
<div id="headerbuttonsegment-left" style=" min-width: 150px; background-size: 150px 32px;">
Bookshelf
</div>
<div class="headerbuttonsegment-centre" style=" min-width: 175px; background-size: 175px 32px;">
Want to Read
</div>
<div id="headerbuttonsegment-right" style=" min-width: 150px; background-size: 150px 32px;">
Favourites
</div>
<a href="#" target="_blank">
<div id='creditsbutton'>
Credits
<!--Do not remove Credits!!-->
</div>
</a>
</div>
</div>
<div id="shelf">
<div class="flip">
<div class="cover">
<div class="face front">
<img src="http://farm3.staticflickr.com/2866/8804333739_9d644bcdf6_o.jpg" width="125" />
</div>
<div class="face back">
Hello World!
</div>
</div>
</div>
<div class="spacing">
</div>
<div class="flip">
<div class="cover">
<div class="face front">
<img src="http://farm4.staticflickr.com/3809/8814925510_b53d082ea6_o.jpg" width="125" />
</div>
<div class="face back">
Hello World!
</div>
</div>
</div>
</div>
</body>
Your flip animation is likely to need a lot of work, but I think I've got the centering issue worked out.
Working Example
$(function () {
$('.flip').click(function () {
$(this).find('.cover').toggleClass('flipped');
centered();
});
centered = function () {
var wy = window.innerHeight / 2,
wx = window.innerWidth / 2,
py = 300,
px = 300,
pageTop = wy - py,
pageLeft = wx - px;
if ($('.cover').hasClass('flipped')) {
$('.flipped').css({
position: "absolute",
top: pageTop,
left: pageLeft
});
} else {
$('.flip, .cover').removeAttr('style');
}
};
$(window).resize(centered);
});
I'm not an expert but try with Jquery :)
Create a .centermybox DIV.
Css:
.centermybox{
position:absolute;
left:50%;
top:50%;
z-index:99;
margin: -300px 0 0 -300px;
}
Jquery :
$(document).ready function() {
$(".youdivhere").toggle( function() {
$(this).addClass(".centermybox");
});
});
I spotter two problems
Your div with class flip has a position:relative so the cover is absolute to this and not the shelf.
Your margin-left and margin-top are not calculated correctly. You need to calculate these according to screen and modal size
This is a way to center a div using jquery
This working correctly depends heavily on 1. above
Try adding this to the body
body {
height:100%;
}
and this to the flipped class (changing what is necessary):
position:absolute;
top:50%;
left:50%;
margin-top:-300px;
margin-left:-300px;
You can animate the motion using javascript/jQuery, but I assume you know how to do that. Please comment if you have no clue
EDIT: Here is a jsFiddle showing it works
On a side note you should probably use margins for the spacing in between each book (aka margin-right:50px;, etc.), not another element
Edit 2: Since you're using jQuery already, you can change your jQuery on click function to this:
$('.flip').click(function() {
var midHeight = window.innerHeight/2;
var midWidth = window.innerWidth/2;
$(this).find('.cover').toggleClass('flipped').css({
"position":"absolute",
"top":midHeight,
"left":midWidth,
"margin-top":"-300px",
"margin-left":"-300px"
});
});
With the jsFiddle to prove it works too. However with this method you have would have to do the same type of calculation on window resize if you want it to stay perfectly centered as in
$(window).resize(function() {
var midHeight = window.innerHeight/2;
var midWidth = window.innerWidth/2;
$(this).find('.cover').toggleClass('flipped').css({
"top":midHeight,
"left":midWidth
});
});
But this takes more to process
Keep in mind you need to change the position back to the original value on the next click
Edit three:
Since it seems you don't have enough basic jQuery knowledge to apply what I have given you correctly, here is a fully working jsfiddle. You should be able to switch out the class names/lines I have for the commented out lines and it work, though without directly manipulating your code there could be a couple small errors that you should be able to fix yourself
As for animating the transition, I approximated the result in this jsFiddle by simply moving some of the .css to .animates. You can play around with it to get it functioning a little better
If you're unsure of what anything that I added does, or you have some error you can't resolve after some time of working on it including looking up similar problems, comment and I will try to assist you further