I'm trying to draw a cuboid with css (like this http://upload.wikimedia.org/wikipedia/commons/d/dc/Cuboid.png but ONLY 3 visible faces needed)
Lots of stuff checked, but nothing found exactly :S
Can anyone help?
SOLVED. The code is:
<style>
#cubetop {
width: 200px;
height: 40px;
background: green;
-webkit-transform:
translateX(20px)
skew(-45deg, 0deg);
}
#cubeface {
width: 200px;
height: 60px;
background: yellow;
display:block;
float:left;
}
#cuberight {
width: 40px;
height: 60px;
background: navy;
display:block;
float:left;
-webkit-transform:
translateY(-20px)
skew(0deg, -45deg);
}
</style>
<div id="cubetop"></div>
<div id="cubeface"></div>
<div id="cuberight"></div>
If you're ok with css3, you can use transforms. Have 3 separate div elements and apply the transformations on each.
Something like this in Mozilla
-moz-transform: rotate(15deg)
translateX(230px)
scale(1.5);
And Like this in IE
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.4488887394336025, M12=-0.388228567653781, M21=0.388228567653781, M22=1.4488887394336025, SizingMethod='auto expand')";
Alternatively try :
http://www.useragentman.com/tests/cssSandpaper/cube3.html
Related
I have a moving box (a div changed into a tiny box) on a html page. The box is moving in a curve path that I am describing in animation frames of css.
Now I have to draw a line following this box move, just to mimic a pencil move, so it looks like the line has been drawn by the moving box. As the box moves, a line should start appearing behind it, e.g. just like we draw a line by pen or pencil.
Not sure, if it is possible only in css but if you have any suggestion, please feel free to advice me. Thank you.
here is code
test.html
<html>
<head>
<link rel="stylesheet" href="box.css">
</head>
<body style="background-color: white;">
<div id="box">
<div id="line"></div>
</div>
</body>
<script src = "logo.js"></script>
</html>
css file: box.css
body{
width:100%;
height:100vh;
background-color: black;
}
#box {
margin-top:300px;
margin-left:30px;
top:0;
left:0;
width:30px;
height:40px;
background-color: red;
animation:move-line;
animation-duration: 5s;
animation-iteration-count: infinite;
}
#keyframes move-line {
0%{
transform:translateX(0px)translateY(0px) ;
}
50%{
transform:translateX(280px)translateY(0px) ;
}
60%{
transform:translateX(300px)translateY(-100px) ;
}
70%{
transform:translateX(300px)translateY(100px) ;
}
80%{
transform:translateX(320px)translateY(0px) ;
}
90%{
transform:translateX(330)translateY(0px) ;
}
100%{
transform:translateX(400px) ;
}
}
javascript file: logo.js
currently it is empty but if you have a solution feel free to use it with javascript too however css is preferred.
Here is a snippet to demonstrate the idea.
An after pseudo element attached to the red box has a solid white background.
As the box moves, the pseudo element 'goes before it' revealing what is already underneath.
In this demo just the first part of the line has been drawn. You'll need to add the other lines with additional linear-gradients, 3 being at angles and positioned suitably and the last one horizontal again.
Alternatively you could put an image there instead of using linear gradients but I note your question says no SVG so I assume that maybe it isn't allowed a jpg either.
<style>
body {
width: 100%;
height: 100vh;
background-color: black;
}
.container {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
background-image: linear-gradient(transparent 0 calc(300px + 20px), black calc(300px + 20px) calc(301px + 20px), transparent calc(301px + 20px) 100%);
background-size: 280px 100vh;
background-repeat: no-repeat;
background-position: 0 0;
}
#box {
margin-left: 30px;
top: 300px;
left: 0;
width: 30px;
height: 40px;
background-color: red;
animation: move-line;
animation-duration: 5s;
animation-iteration-count: infinite;
position: relative;
}
#box::after {
content: '';
position: absolute;
top: -300px;
left: 100%;
height: 100vh;
width: 100vw;
background-color: white;
display: inline-block;
}
#keyframes move-line {
0% {
transform: translateX(0px)translateY(0px);
}
50% {
transform: translateX(280px)translateY(0px);
}
60% {
transform: translateX(300px)translateY(-100px);
}
70% {
transform: translateX(300px)translateY(100px);
}
80% {
transform: translateX(320px)translateY(0px);
}
90% {
transform: translateX(330)translateY(0px);
}
100% {
transform: translateX(400px);
}
}
</style>
<html>
<head>
<link rel="stylesheet" href="box.css">
</head>
<body style="background-color: white;">
<div class="container">
<div id="box">
</div>
</div>
</body>
<script src="logo.js"></script>
</html>
Long story short, I want my (any) image to change the color on hover, but I can't make it work well on PNG images. The problem is with transparency. I don't want to apply my color on transparent space. My CSS looks like this:
background-blend-mode: color-burn;
background-color: #edeb52;
Here is the full jsFiddle example. All I want is to get rid of that color around the icon, which should be transparent.
6 months late to the party but you could use the mask-image CSS property. Its experimental but fairly well supported:
.maskedimage {
display: inline-block;
width: 200px;
height: 200px;
background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
background-size: cover;
-webkit-mask-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
-webkit-mask-mode: alpha;
-webkit-mask-size: cover;
mask-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
mask-mode: alpha;
mask-size: cover;
}
.maskedimage.blue {
background-blend-mode: luminosity;
background-color: blue;
}
.maskedimage.red {
background-blend-mode: luminosity;
background-color: red;
}
.maskedimage:hover {
background-blend-mode: multiply;
background-color: red;
}
<div class="maskedimage original"></div>
<div class="maskedimage blue"></div>
<div class="maskedimage red"></div>
Alternatively you can get a similar effect using css filters:
.filteredimage {
display: inline-block;
width: 200px;
height: 200px;
background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
background-size: cover;
}
.filteredimage.blue {
filter: sepia(1) hue-rotate(170deg) brightness(45%) saturate(1000%);
}
.filteredimage.red {
filter: sepia(1) hue-rotate(313deg) brightness(45%) saturate(1000%);
}
.filteredimage:hover {
filter: sepia(1) hue-rotate(313deg) brightness(25%) saturate(1000%);
}
<div class="filteredimage original"></div>
<div class="filteredimage blue"></div>
<div class="filteredimage red"></div>
Your mileage may vary.
This can be done with css, but unfortunately browser support is very bad (may be webkit only).
https://jsfiddle.net/devefrontend/fowzemd2/2/
.image .img {-webkit-mask-box-image:'YOURIMAGEURL';}
and this may be the same question as you:
Is there any way to colorize a white PNG image with CSS only?
Its is a Example
you can more learn it
https://www.w3schools.com/howto/howto_css_image_overlay.asp
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
color: white;
font-size: 16px;
width:400px; height:350px;
}
<div class="container">
<img src="http://www.kaptest.co.uk/sites/kaptest.co.uk/files/pictures/icon-lightbulb-grey.png" alt="Avatar" class="image" style="width:100%">
<div class="middle" ">
<div class="text">example</div>
</div>
</div>
Try like this. See if it is helpful. I have used filter property here.
.image {
display: inline-block;
}
.image .img {
width: 375px;
height: 360px;
background-image: url('http://www.kaptest.co.uk/sites/kaptest.co.uk/files/pictures/icon-lightbulb-grey.png');
background-size: cover;
-webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
filter: opacity(.5) drop-shadow(0 0 0 yellow);
}
<div class="image">
<div class="img"></div>
</div>
Does it have to be PNG? Preferably you could use an inline svg. This way you can not only apply a fill color of your choice via css but you also get all the benefits of vector based graphics: Crispy on any size and smaller file (be sure to optimize with svgo)
I want one div in my page whose position will be fixed rotation is 30 degree but when I am doing this its shows like this
I Don't want that empty space in the top while rotation. I want Top same as bottom currently in top its showing some space when i rotate my div.
CSS is
#beta{
position:fixed;
bottom:0;
padding:-30px;
z-index: 1;
width: 15em;
height:3em;
background: #65a9d7;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
You can add transform-orign, which will act as rotating axis.
And if you want this to be at top then add top and remove bottom value and while rotating, the blocks shifts so give left value to the half of its height of appropriate value.
#beta{
position:fixed;
top:0;
z-index: 1;
width: 15em;
height:3em;
left: 1.5em;
background: #65a9d7;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
transform-origin: left top;
}
And one more thing, padding doesn't work with negative value. :)
Have a nice code day.
Take a look at the transform-origin CSS property if you want to set the point at which the object rotates around. In your specific example, the reason there is so much space above is because you've set bottom: 0, which will force a fixed element to snap to the bottom of its parent.
I'm not sure the exact layout you're looking for, but here is something with less white space at the top:
#beta {
position: fixed;
z-index: 1;
width: 15em;
height: 3em;
background: #65a9d7;
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Chrome, Safari, Opera */
transform: rotate(30deg);
margin-top: 4em;
}
<div id="beta">
Beta Version
</div>
Edit: The following snippet is a follow-up to a comment from the original poster.
.container {
border: 5px solid #000;
height: 5em;
overflow: hidden;
position: relative;
width: 15em;
}
.beta {
background: #65a9d7;
height: 3em;
line-height: 3em;
margin-top: -1.5em;
position: absolute;
text-align: center;
top: 50%;
width: 15em;
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Chrome, Safari, Opera */
transform: rotate(30deg);
}
<div class="container">
<div class="beta">
Beta Version
</div>
</div>
Hello ive managed to create a star with css but it is hiding the field that i wat to show on front of the star. I was wondering if anyone coud point me i the right direction to what i should do to fix it. thanks
<div class="views-field views-field-field-freebetamount">
<div class="field-content">
<div id="star12">£200</div>
</div>
</div>
css
.views-field-field-freebetamount {
color:white;
}
#star12 {
background: blue;
width: 40px;
height: 40px;
position: relative;
}
#star12:before, #star12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: blue;
}
#star12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#star12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
the freebetamount field should hopefully appear on top of the star. my limited css skills has lead me to try z-indexs but to no avail.
Anyone?
thanks
you have to define the negative z-index value in :before and :after pseudo element.
#star12 {
background: blue;
width: 40px;
height: 40px;
position: relative;
font-size:1.3em;
}
#star12:before, #star12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: blue;
z-index:-1;
}
Check the Demo.
With css u need to set z-index: 100 or something like that to place something on top of the others
You're going to want to take a look at z-index. Whichever element you want to appear on top of another needs to have a higher CSS z-index number.
in css file;
#yourID {
z-index: 99;
}
I am performing a CSS transform: rotate on a parent, yet would like to be able to negate this effect on some of the children - is it possible without using the reverse rotation?
Reverse rotation does work, but it affects the position of the element, and it may have a negative performance impact (?). In any case, it doesn't look like a clean solution.
I tried the "transform: none" suggestion from this question prevent children from inheriting transformation css3, yet it simply doesn't work - please see the fiddle here: http://jsfiddle.net/NPC42/XSHmJ/
May be you have to write like this:
.child {
position: absolute;
top: 30px;
left: 50px;
background-color: green;
width: 70px;
height: 50px;
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
}
Check this for more http://jsfiddle.net/XSHmJ/1/
Updated:
You can use:after & :before psuedo class for this.
check this http://jsfiddle.net/XSHmJ/4/
I believe that you are going to need to fake it using a second child, the specification does not seem to allow for the behavior you would like, and I can understand why the position of a child element has to be affected by a transform to its parent.
This isn't the most elegant of solutions, but I think you're trying to do something that the specification is never going to allow. Take a look at the following fiddle for my solution:
.parent {
position: relative;
width: 200px;
height: 150px;
margin: 70px;
}
.child1 {
background-color: yellow;
width: 200px;
height: 150px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.child2 {
position: absolute;
top: 30px;
left: 50px;
background-color: green;
width: 70px;
height: 50px;
}
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
If you want to apply transforming effects on a parent without affecting its children, you can simply animate a parent's pseudo-element like this:
.parent {
display: inline-block;
position: relative;
}
.parent::before {
content: "";
background: #fab;
/* positioning / sizing */
position: absolute;
left: 0;
top: 0;
/*
be aware that the parent class have to be "position: relative"
in order to get the width/height's 100% working for the parent's width/height.
*/
width: 100%;
height: 100%;
/* z-index is important to get the pseudo element to the background (behind the content of parent)! */
z-index: -1;
transition: 0.5s ease;
/* transform before hovering */
transform: rotate(30deg) scale(1.5);
}
.parent:hover::before {
/* transform after hovering */
transform: rotate(90deg) scale(1);
}
This actually worked for me. JSFiddle