I want to create an interface of this style with HTML & CSS : https://i.pinimg.com/originals/df/1c/11/df1c11c2ec58fce1e8c226bf85ca3a60.jpg
So far, I've got an interface that looks like this : https://i.ytimg.com/vi/B6vhIXDIdMc/maxresdefault.jpg
Those are illustrating pictures, but as you can see, my interface is not leaning as the one in the image. It does not have that "interface-on-a-screen" aspect, that I would like to recreate via CSS.
I tried using skew, but to no avail.
Do you know how I could recreate this effect ?
Thanks in advance.
The parameters can be adjusted by themselves.
div{
width: 300px;
height: 200px;
background: red;
margin: 100px auto;
text-align: center;
perspective: 400px;
}
img{
width: 300px;
height: 200px;
background: yellow;
display: inline-block;
transition: transform,0.8s;
transform-origin: center bottom;
}
img:hover{
transform: rotateX(-20deg) rotateY(-30deg) rotateZ(-20deg);
}
<div>
<img src="https://i.pinimg.com/originals/df/1c/11/df1c11c2ec58fce1e8c226bf85ca3a60.jpg"></img>
</div>
Related
I'm trying to create a online card game, using pure HTML/CSS.
I created a relative hierarchy of objects and I want the user to interact with them.
Probleme is, with CSS rotations (transform: rotateX, transform-style: preserve-3d), hover is not reliable.
Here's a simplified version of what it looks like :
http://jsfiddle.net/qLg9u51e/1/
Here are the main elements :
.container {
transform: rotateX(50deg);
transform-style: preserve-3d;
}
.tile {
position: relative;
}
.object {
position: absolute;
background: orange;
}
.object:hover {
background: red
}
I am expecting the orange object to be red while the mouse is hovering it, but as you can see, that's not always the case. It's a weird behaviour and I do not fully understand it.
By removing either rotateX, preserve-3d or the relative property, the hover property works correctly, but I need these elements.
Why am I doing wrong here ? And if you don't know how to solve my problem, do you know why CSS is acting like this ?
It looks like the row was overlapping the object at some points (not all, which is a bit confusing!).
Adding .row { pointer-events: none; }and .object { pointer-events: all; } fixes the problem:
.master {
perspective: 500px;
width: 200px;
height: 100px;
}
.container {
transform: rotateX(50deg);
transform-style: preserve-3d;
}
.row {
width: 200px;
background: darkgray;
padding: 20px;
pointer-events: none;
}
.tile {
height: 150px;
width: 80px;
margin-left: 60px;
margin-right: 60px;
background: #505050;
position: relative;
}
.object {
position: absolute;
height: 140px;
width: 70px;
margin: 5px;
background: orange;
pointer-events: all;
}
.object:hover {
background: red;
}
<div class="master">
<div class="container">
<div class="row">
<div class="tile">
<div class="object"/>
</div>
</div>
</div>
</div>
It's not ideal since I can't quite pinpoint the root cause, but it works in the meantime!
I want to apply a background-color on an image to put a shadow on it.
Nothing very peculiar for now, I simply put background-color:rgba(23,23,23,0.88); in my CSS.
But on this image, I need to have an other div, who display the real image without the shadow on it and I don't know how I can do it.
I made a fiddle because it must not be very clear: https://jsfiddle.net/Haplo31/aguxfr67/
In this fiddle, I would need to have the blue div "content" displaying the part of the image below without the background-color of the bgContainer, like a window on the image. (I don't need the blue color at all, it's just to highlight the div for the example)
Is this possible?
Thanks a lot for your time and your help
You could be using the box-shadow property, which comes in pretty handy in situations like this. I modified your bg-container class and added a :before selector to apply the shadow.
Text can be inserted through the content css-attribute, you could also create another div-class, apply the same positioning properties and fuel your text into that.
.imgContainer {
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoR1aeLhVEeg-rfmWln8uuNI7t0El3zNY8HHfKT1Qwd2oN8-GPQQ');
background-size: cover;
width: 300px;
height: 200px;
}
.bgContainer {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.bgContainer:before {
content: 'This is some sample text to demonstrate you can get content as well';
color: white;
padding: 5px;
width: 50%;
height: 50%;
position: absolute;
bottom: 25%;
right: 25%;
box-shadow: 0 0 0 300px black;
opacity: 0.88;
}
.content {
width: 100px;
height: 100px;
top: 100px;
background-color: blue;
}
<div class="imgContainer">
<div class="bgContainer">
<!--<div class="content">
</div>-->
</div>
</div>
I am trying to code the attached layout (needs to be responsive and not use JavaScript if possible). I want to support IE8, or if not, a gracefully degrading solution would be great.
I found ways to make the semicircle cutout using pseudo-elements and border-radius, but the background image of the previous div needs to show through and I can't figure out how to do it. Please help!! I have highlighted the area covered by the background image, in case it is not clear. Here is the layout
I got this far: https://jsfiddle.net/dcwoLb7f/
HTML:
<div id="first"><p>IMAGE CREDIT: WIKIPEDIA</p></div>
<div id="second"></div>
CSS:
#first {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/5/5a/VirtuellesStudio_Greenbox.jpg');
background-size: cover;
position: relative;
}
p {
color: white;
text-align: center;
margin: auto;
font-size: 40px;
}
#first, #second {
width: 100%;
height: 200px;
}
#second {
background-color: blue;
}
#first:after {
content: '';
background-color: white;
height: 40px;
width: 40px;
border-radius: 100%;
position: absolute;
bottom: -20px;
left: 50%;
transform: translate(-50%, 0);
}
Here's what I have right now:
background: #FFFFFF url("whitegrid.png") repeat left top;
Here's what I want to achieve.
How do I achieve this split background effect, maintaining the repeating pattern on both colors, and making the top color only fill a fixed percentage (eg. 30%) of the page?
Thanks.
may this help you :
Use CSS Gradient Generator
but pay attention that this supports only in modern browsers
sometimes you can make 2 div like layers:
<div class="gradient">
<div class="pattern">
</div>
</div>
Demo: http://jsfiddle.net/techsin/VpyRy/1/show/
i am not sure if what you are asking is what i am understanding...but if it's as simple as it sounds then background is composed of two divs. You could use multiple backgrounds/images but divs are much easier and appropriate here. http://jsfiddle.net/techsin/32gPX/
*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%; position: relative;}
body { background-color: red;}
.nav {height: 50px; background-color: rgb(64, 47, 71);}
.main {
width: 480px; padding: 40px; background-color: white; height: 400px; margin: auto; margin-top: 30px;
}
.white {
background-color: orange; width: 100%; height: 200px;
position: absolute; top: 50px; z-index: -1;}
I'm trying to use CSS divs to add images to my site. I'm using background-image:url(""); but the image doesn't appear when loading the site.
The images I'm referencing are in the same folder as my style.css, and I quadruple-checked that I wrote the file names correctly.
Any help is very much appreciated. Thank you.
CSS:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
HTML: (Am I missing something here?)
<div id="logo">
</div>
div#logo {
background:url(dm-button2.png) blue;
height: 120px;
width: 120px;
position:absolute;
z-index: 100; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
try this, your second background is rewriting the first
use this:
div#logo {
background-image:url(dm-button2.png);
height: 120px;
width: 120px;
position:absolute;
z-index: 100;
background-color: blue; /* #333333; */
padding: 0px;
margin: 0px auto;
display: inline;
}
Try replacing Background image and background with something like this
background: blue url('dm-button2.png') no-repeat fixed center;
I am not 100% sure but i think having background-image followed by background, background will overwrite the background-image call since it loads in order
example FIDDLE HERE
start small and add the other attributes.
div#logo {
height: 120px;
width: 120px;
background:url(http://flyingmeat.s3.amazonaws.com/acorn4/images/Acorn256.png) 0 0;
}
The background image will not display if there is nothing to put a background image on... for example, all you have a div tags but nothing inbetween them.
Add at least a br tag or something to create some space for the image to be displayed.