I am making a yatzy game, and trying to put the dices in each div box but it wont show up.
You can wath my code at jsfiddle: http://jsfiddle.net/bneRe/
OR
Here is the HTML:
<div id="dice" title="Click on a dice to lock or unlock it">
<div class="dice1"><div></div></div>
<div class="dice2"><div></div></div>
<div class="dice3"><div></div></div>
<div class="dice4"><div></div></div>
<div class="dice5"><div></div></div>
<div class="dice6"><div></div></div>
</div>
And here is the CSS:
#dice {
height: 40px;
width: 240px;
}
#dice div {
height: 40px;
width: 40px;
float: left;
}
.dice1 { background-image:url('http://imm.io/9YdM.jpg');
background-position: 0 0;
}
.dice2 { background-image:url('http://imm.io/9YdY.jpg');
background-position: 0 0;
}
.dice3 { background-image:url('http://imm.io/9Ye4.jpg');
background-position: 0 0;
}
.dice4 { background-image:url('http://imm.io/9Ye9.jpg');
background-position: 0 0;
}
.dice5 { background-image:url('http://imm.io/9Yed.jpg');
background-position: 0 0;
}
.dice6 { background-image:url('http://imm.io/9Yef.jpg');
background-position: 0 0;
}
The URLs you are providing aren't actual images. They are pages with images. Use: http://i.imm.io/9YdY.jpeg, ..., etc instead:
#dice {
height: 40px;
width: 240px;
}
#dice div {
height: 40px;
width: 40px;
float: left;
}
.dice1 { background-image:url('http://i.imm.io/9YdM.jpeg');
background-position: 0 0;
}
.dice2 { background-image:url('http://i.imm.io/9YdY.jpeg');
background-position: 0 0;
}
.dice3 { background-image:url('http://i.imm.io/9Ye4.jpeg');
background-position: 0 0;
}
.dice4 { background-image:url('http://i.imm.io/9Ye9.jpeg');
background-position: 0 0;
}
.dice5 { background-image:url('http://i.imm.io/9Yed.jpeg');
background-position: 0 0;
}
.dice6 { background-image:url('http://i.imm.io/9Yef.jpeg');
background-position: 0 0;
}
After you make that change, note that each div isn't big enough to hold a full die's image. The images are 111x111 pixels, and your divs are 40x40 pixels.
Related
This question already has answers here:
Transparent text cut out of background
(14 answers)
Cut-out text with CSS
(3 answers)
How to apply inverse text mask with CSS
(4 answers)
Cut out text in CSS. Possible? [duplicate]
(1 answer)
transparent text but opaque background in css [duplicate]
(1 answer)
Closed 3 years ago.
Let's say I have an image like this:
and I want to fill an <h1> tag with that image to look something like this:
I guess I could do something like this to start...
div {
width: 100%;
height: 100%;
background: url(https://i.stack.imgur.com/n8gtc.jpg) 50% 0 no-repeat;
background-size: cover;
}
h1 {
color: white;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<div>
<h1>404</h1>
</div>
Should I have another 'absolute' div white covering the image and a transparent font over? Does anyone know how to accomplish this?
background-clip might be an option
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
div {
width: 100%;
height: 100%;
}
h1 {
color: transparent;
font-size: 28vmax;
background-size: cover;
background: url(https://i.stack.imgur.com/n8gtc.jpg) 50% 0 no-repeat;
background-clip: text;
}
<div>
<h1>404</h1>
</div>
or mix-blend-mode:
https://css-tricks.com/almanac/properties/m/mix-blend-mode/
The mix-blend-mode property defines how an element’s content should blend with its background. This means that any images or text, borders or headings will be influenced by this property.
also
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
* {
margin: 0;
}
div {
width: 100%;
height: 100vh;
background: url(https://i.stack.imgur.com/n8gtc.jpg) 50% 0 no-repeat;
background-size: cover;
}
h1 {
font-size: 15vmax;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
color: black;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
background: white;
mix-blend-mode: screen;
}
<div>
<h1>404</h1>
</div>
You can try using -webkit-background-clip: text;
This is called Knockout Text but you should be able to get the outcome you want with it.
Here are a few examples, but it might be easier to do it in photoshop and then insert the image. (Just an alternative)
/*
Based from this article from Divya Manian -
http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html
*/
* {
margin: 0;
padding: 0;
}
*,
:before,
:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
min-height: 100%;
}
body {
font-family: 'Oswald', sans-serif;
color: #fff;
background-color: #000;
}
.wrapper {
text-align: center;
}
.title {
font-size: 2em;
position: relative;
margin: 0 auto 1em;
padding: 1em 1em .25em 1em;
text-align: center;
text-transform: uppercase;
}
.title:after {
position: absolute;
top: 100%;
left: 50%;
width: 240px;
height: 4px;
margin-left: -120px;
content: '';
background-color: #fff;
}
/* Clip text element */
.clip-text {
font-size: 6em;
font-weight: bold;
line-height: 1;
position: relative;
display: inline-block;
margin: .25em;
padding: .5em .75em;
text-align: center;
/* Color fallback */
color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.clip-text:before,
.clip-text:after {
position: absolute;
content: '';
}
/* Background */
.clip-text:before {
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: inherit;
}
/* Text Background (black zone) */
.clip-text:after {
position: absolute;
z-index: -1;
top: .125em;
right: .125em;
bottom: .125em;
left: .125em;
background-color: #000;
}
/* Change the background position to display letter when the black zone isn't here */
.clip-text--no-textzone:before {
background-position: -.75em 0;
}
.clip-text--no-textzone:after {
content: none;
}
/* Use Background-size cover for photo background and no-repeat background */
.clip-text--cover,
.clip-text--cover:before {
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
background-position: 50% 50%;
}
/* Background image from http://thepatternlibrary.com/ and http://lorempixel.com */
.clip-text_one {
background-image: url(https://picsum.photos/480/200?random);
}
.clip-text_two {
background-image: url(https://picsum.photos/480/200?grayscale);
}
.clip-text_tree {
background-image: url(https://picsum.photos/480/200?grayscale&random=2);
}
.clip-text_four {
background-image: url(https://picsum.photos/480/200?grayscale&blur=3);
}
.clip-text_five {
background-image: url(https://picsum.photos/480/200?grayscale);
}
.clip-text_six {
background-image: url(https://picsum.photos/480/200?random=3);
}
.clip-text_seven {
background-image: url(https://picsum.photos/480/200?random=4);
}
.clip-text_eight {
background-image: url(https://picsum.photos/480/200?random=6);
}
.clip-text_nine {
background-image: url(https://picsum.photos/480/200?random=5);
}
.clip-text_ten {
background-image: url(https://picsum.photos/480/200?random=7);
}
.clip-text_eleven {
background-image: url(https://picsum.photos/480/200?random=8);
background-size: cover;
}
.clip-text_twelve {
background-image: url(https://picsum.photos/480/200?random=9);
}
.clip-text_thirteen {
background-image: url(https://picsum.photos/480/200?random=10);
}
.clip-text_fourteen {
background-image: url(https://picsum.photos/480/200?random=11);
}
.clip-text_fifteen {
background-image: url(https://picsum.photos/480/200?random=12);
}
<div class="wrapper">
<p class="title">Play with background-clip text</p>
<div class="clip-text clip-text_one">TEST</div>
<div class="clip-text clip-text_fifteen clip-text--no-textzone">TEST</div>
<div class="clip-text clip-text_twelve clip-text--cover">TEST</div>
<div class="clip-text clip-text_tree clip-text--no-textzone">TEST</div>
<div class="clip-text clip-text_two">TEST</div>
<div class="clip-text clip-text_fourteen clip-text--cover">TEST</div>
<div class="clip-text clip-text_tree">TEST</div>
<div class="clip-text clip-text_eleven clip-text--cover">TEST</div>
<div class="clip-text clip-text_four">TEST</div>
<div class="clip-text clip-text_five">TEST</div>
<div class="clip-text clip-text_six">TEST</div>
<div class="clip-text clip-text_seven">TEST</div>
<div class="clip-text clip-text_eight">TEST</div>
<div class="clip-text clip-text_nine">TEST</div>
<div class="clip-text clip-text_ten">TEST</div>
<div class="clip-text clip-text_thirteen clip-text--cover">TEST</div>
</div>
Let me know if you have any questions! The implementation is fairly straight forward I made sure to include options for you to look at, here is a link for more information:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
I have parallax background that's moving at a certain speed with javascript. I need to put the text inside those background divs, so each background has its own text block. But when I put the text inside it goes to the top of the page, despite the container it's located. Something in the positions needs to change but I'm not sure what exactly. Any ideas?
HTML
<div id='hero'>
<div class='layer-bg layer' data-depth='0.10' data-type='parallax'>
<img class="logo" />
</div>
<div class='layer-1 layer' data-depth='0.20' data-type='parallax'>
</div>
<div class="relative">
<div class='layer-2 layer' data-depth='0.30' data-type='parallax'>
<div class="video">
Text
</div>
</div>
</div>
<div class='layer-3 layer' data-depth='0.40' data-type='parallax'></div>
</div>
<div id='hero-mobile'></div>
CSS
body {
padding: 0;
margin: 0;
background-color: $bronze;
font-family: 'Playfair Display', serif;
color: $white;
}
//
#hero {
height: $heroHeight;
overflow: hidden;
position: relative;
}
#content {
background-color: $bronze;
}
.layer {
background-position: bottom center;
background-size: auto;
background-repeat: no-repeat;
width: 100%;
height: $heroHeight;
position: fixed;
z-index: -1;
}
.first-section {
padding: 50px 0 20px 0;
}
.text-header {
font-size: 50px;
text-align: center;
}
h1 {
line-height: 120%;
margin-bottom: 30px;
}
p {
color: #ede0d5;
font-size: 18px;
line-height: 150%;
}
// #hero, .layer {
// min-height: 800px;
// }
.layer-bg {
background-image: url('');
height: 4000px!important;
background-position: top center;
width: 100%;
}
.layer-1 {
background-image: url('
');
height: 3000px;
}
.layer-2 {
background-image: url('');
height: 5500px;
}
.layer-3 {
background-image: url('
');
height: 8000px;
}
.layer-4 {
background-image: url('
');
background-position: center bottom;
}
.layer-overlay {
background-image: url('
');
}
.relative {
position: relative;
}
.logo {
margin: 0px auto;
max-width: 600px;
margin-top: 100px;
display: block;
}
JS
(function() {
window.addEventListener('scroll', function(event) {
var depth, i, layer, layers, len, movement, topDistance, translate3d;
topDistance = this.pageYOffset;
layers = document.querySelectorAll("[data-type='parallax']");
for (i = 0, len = layers.length; i < len; i++) {if (window.CP.shouldStopExecution(1)){break;}
layer = layers[i];
depth = layer.getAttribute('data-depth');
movement = -(topDistance * depth);
translate3d = 'translate3d(0, ' + movement + 'px, 0)';
layer.style['-webkit-transform'] = translate3d;
layer.style['-moz-transform'] = translate3d;
layer.style['-ms-transform'] = translate3d;
layer.style['-o-transform'] = translate3d;
layer.style.transform = translate3d;
}
window.CP.exitedLoop(1);
});
}).call(this);
I don't why you are using 8000px height in your CSS but
check the link may be it will be helpful for you
https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm
Its because you fixed the position of every .layer class div that's why they all are in same position of your DOM.
And overflow: hidden; of your main div #hero
Solution
You have to remove fixed position of your .layer class and overflow: hidden;.
Example:- see fiddle
I use a image sprite for each post type. I call a image by using:
The markup that I am using is:
.format {
height: 60px;
width: 60px;
margin: 0 auto;
float:left;
background: #d7354a url(http://i.imgur.com/sVTJJMV.png) no-repeat 0 top;
}
span.format:hover {
background: #FFF url(http://i.imgur.com/sVTJJMV.png) no-repeat 0 bottom;
}
.format.image { background-position: 0 0; }
.format.location { background-position: -60px 0; }
.format.text { background-position: -120px 0; }
.format.profile { background-position: -180px 0; }
.format.sound { background-position: -240px 0; }
.format.link { background-position: -300px 0; }
<span class="format image"></span>
<span class="format location"></span>
<span class="format text"></span>
As you can see it will display three icons. When you hover over one span, the background change to white and the icon to red. The only problem is that .format:hover use the same x-as as for the normal state. I can create for each format type an hover state css, but I was wondering if it is also possible with only one hover, where the x-as will be the one of that format. Is this possible?
Thanks in advance.
When you update the background property on hover, you will actually have to redeclare all the x- and y- positions for each link element individually. background is simply a shorthand property and therefore will not intelligently "merge" with any exisitng background property values, but override it.
You can of course use background-position-y to override only the y positioning of the element, but it is not supported in some browsers. It is only recently (ca. 2014) introduced to the W3C specifications. An alternative would be using pseudo-elements, but I consider the solution posted by #nicooga as the best.
With regards to the pseudo-element solution, you can do it as follow:
The trick is to double the height of the pseudo-element (using bottom: -100%), and then moving the pseudo-element upwards by its own height (using top: -100%) on hover. In that case, you will only have to declare your background positions once for all your elements.
.format {
height: 60px;
width: 60px;
margin: 0 auto;
float: left;
position: relative;
overflow: hidden;
}
.format::before {
background: #d7354a url(http://i.imgur.com/sVTJJMV.png) no-repeat 0 top;
content: '';
display: block;
position: absolute;
top: 0;
bottom: -100%;
left: 0;
right: 0;
}
span.format:hover::before {
background-color: #fff;
top: -100%;
bottom: 0;
}
.format.image::before {
background-position: 0 0;
}
.format.location::before {
background-position: -60px 0;
}
.format.text::before {
background-position: -120px 0;
}
.format.profile::before {
background-position: -180px 0;
}
.format.sound::before {
background-position: -240px 0;
}
.format.link::before {
background-position: -300px 0;
}
<span class="format image"></span>
<span class="format location"></span>
<span class="format text"></span>
The background property is a short hand to set a bunch of other properties.
When you use it again in span.format:hover you are overriding some of the properties that make it look like you want. Just change the properties you need.
Use this as a rule of thumb: if you are repeating code you are probably doing something wrong.
http://www.w3schools.com/cssref/css3_pr_background.asp
.format {
height: 60px;
width: 60px;
margin: 0 auto;
float:left;
background-image: url("http://i.imgur.com/sVTJJMV.png");
background-color: rgb(215, 53, 74);
}
span.format:hover {
background-position-y: 100%;
background-color: rgb(255, 255, 255);
}
.format.image { background-position: 0 0; }
.format.location { background-position: -60px 0; }
.format.text { background-position: -120px 0; }
.format.profile { background-position: -180px 0; }
.format.sound { background-position: -240px 0; }
.format.link { background-position: -300px 0; }
<span class="format image"></span>
<span class="format location"></span>
<span class="format text"></span>
I'm trying to create in HTML/CSS the following menu inside of a sidebar:
myimage http://img1.firenex.net/9Z0eupHnvV7LIPQd950r.png
Every button has its own corresponding pressed/non-pressed image, and when hovered its opacity moves from 0.8 to 1.0 via CSS.
The problem is that I get is this:
myimage2 http://img1.firenex.net/nooUcfe0HvvfMaCmz6N8.png
Not quite the result I expected :)
This is my HTML:
<div id="homepageBtn"></div>
<div id="progressiBtn"></div>
<div id="interessiBtn"></div>
<div id="friendzoneBtn"></div>
<div id="emailBtn"></div>
This is my CSS:
#homepageBtn {
background:url(img/buttons/homepage_btn.png) no-repeat;
opacity: 0.8;
width: 88px;
height: 79px;
margin-left: 30px;
float: left;
}
#homepageBtn:hover {
background:url(img/buttons/homepage_btn.png) no-repeat;
opacity: 1.0;
}
#homepageBtn:active {
background:url(img/buttons/homepage_btn_pressed.png) bottom right no-repeat;
}
#progressiBtn {
background:url(img/buttons/progressi_btn.png) no-repeat;
opacity: 0.8;
width: 88px;
height: 79px;
margin-left: 10px;
float: left;
}
#progressiBtn:hover {
background:url(img/buttons/progressi_btn.png) no-repeat;
opacity: 1.0;
}
#progressiBtn:active {
background:url(img/buttons/progressi_btn_pressed.png) bottom right no-repeat;
}
#interessiBtn {
background:url(img/buttons/interessi_btn.png) no-repeat;
opacity: 0.8;
width: 88px;
height: 79px;
margin-left: 30px;
margin-top: 10px;
clear: left;
float: left;
}
#interessiBtn:hover {
background:url(img/buttons/interessi_btn.png) no-repeat;
opacity: 1.0;
}
#interessiBtn:active {
background:url(img/buttons/interessi_btn_pressed.png) bottom right no-repeat;
}
#friendzoneBtn {
background:url(img/buttons/friendzone_btn.png) no-repeat;
opacity: 0.8;
width: 88px;
height: 79px;
margin-left: 10px;
margin-top: 10px;
float: left;
}
#friendzoneBtn:hover {
background:url(img/buttons/friendzone_btn.png) no-repeat;
opacity: 1.0;
}
#friendzoneBtn:active {
background:url(img/buttons/friendzone_btn_pressed.png) bottom right no-repeat;
}
#emailBtn {
background:url(img/buttons/email_btn.png) no-repeat;
opacity: 0.8;
width: 188px;
height: 29px;
margin-left: 30px;
margin-top: 10px;
clear: left;
}
#emailBtn:hover {
background:url(img/buttons/email_btn.png) no-repeat;
opacity: 1.0;
}
#emailBtn:active {
background:url(img/buttons/email_btn_pressed.png) bottom right no-repeat;
}
I really don't know if I am using the correct method to do this, I would appreciate any solutions at this point... thanks in advance.
PS: this happens with Chrome, with IE for example I get it showed correctly
You are using clear property incorrectly. you can use this code.
<div id="homepageBtn"></div>
<div id="progressiBtn"></div>
<div style="clear:both;border:0px"></div>
<div id="interessiBtn"></div>
<div id="friendzoneBtn"></div>
<div style="clear:both;border:0px"></div>
<div id="emailBtn"></div>
And Remove Clear:left from following CSS
#interessiBtn {
background:url(img/buttons/interessi_btn.png) no-repeat;
opacity: 0.8;
width: 88px;
height: 79px;
margin-left: 30px;
margin-top: 10px;
clear: left; <-- Remove this
float: left;
}
Demo Code
margin-top:.. or padding top but even a better solution is that do the following amendment ,
Add a new and do it like this
<div id="upper">//further divide it in two parts
<div id="homepageBtn"></div>//here goes homepage button
<div id="progressiBtn"></div>
</div > //end of upper
and do same thing for bottom Div
<div id="bottom">//further divide it in two parts
<div id="friendzoneBtn"></div>
<div id="emailBtn"></div>
</div > // end of bottom
and not whatever the dimensions you set for upper div or then bottom div your content will be easily adjustable there
please help me arrange these 3 buttons horizontally like this photoshopped image:
Please take a look at the code here.
CSS:
a.facebookbt {
background: url(http://i1068.photobucket.com/albums/u445/neobx/bonus5.png) no-repeat 0 0;
width: 132px;
height: 52px;
display: block;
}
a.facebookbt:hover { background-position: 0 -52px; }
a.facebookbt:active { background-position: 0 -104px; }
a.twitterbt {
background: url(http://i1068.photobucket.com/albums/u445/neobx/bonus5.png) no-repeat -132px 0;
width: 132px;
height: 52px;
display: block;
}
a.twitterbt:hover { background-position: -132px -52px; }
a.twitterbt:active { background-position: -132px -104px; }
a.abpbt {
background: url(http://i1068.photobucket.com/albums/u445/neobx/bonus5.png) no-repeat -265px 0;
width: 286px;
height: 50px;
display: block;
}
a.abpbt:hover { background-position: -265px -52px; }
a.abpbt:active { background-position: -265px -104px; }
HTML:
<a class="facebookbt" href="javascript:;"></a>
<a class="twitterbt" href="javascript:;"></a>
<a class="abpbt" href="javascript:;"></a>
a { float:right; margin-left: 5px;}
and change the html markup to this way:
<a class="abpbt" href="javascript:;"></a>
<a class="twitterbt" href="javascript:;"></a>
<a class="facebookbt" href="javascript:;"></a>
This way the layout will be aligned to the right, and in the correct order like in your screenshot.
Demo: http://jsfiddle.net/FzYkJ/12/
How about:
a {
float:left;
}
or
a {
display:inline-block !important;
}
You can add
float:left;
to each button
http://jsfiddle.net/FzYkJ/2/