http://www.jsfiddle.net/3vjaxf3p/
I want to have such gradient as background for whole web page. But lines between colored sections are not smooth in most browsers. There are small 1px breaks, shelves (you understand). Is it possible to get this lines smooth?
As alternative, skewed div's technique gives smooth lines.
http://www.jsfiddle.net/6bujer9k/
html:
<div class="mainContainer">
<div class="sector firstSector"></div>
<div class="sector secondSector"></div>
<div class="sector thirdSector"></div>
<div class="sector fourthSector"></div>
<div class="sector fifthSector"></div>
<div class="sector sixthSector"></div>
<div class="sector seventhSector"></div>
<div class="sector eigthSector"></div>
<div class="sector ninthSector"></div>
</div>
css:
body {
overflow: hidden;
}
div.mainContainer {
width: 150%;
height: 780px;
position: absolute;
top: -80px;
left: -300px;
}
div.sector {
display: inline;
float: left;
height: 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
div.firstSector {
width: 9.75%;
background-color: #94C4FF;
}
div.secondSector {
width: 11.5%;
background-color: #FFE6BE;
}
div.thirdSector {
width: 11.5%;
background-color: #94C4FF;
}
div.fourthSector {
width: 11.5%;
background-color: #FFE6BE;
}
div.fifthSector {
width: 11.5%;
background-color: #94C4FF;
}
div.sixthSector {
width: 11.5%;
background-color: #FFE6BE;
}
div.seventhSector {
width: 11.5%;
background-color: #94C4FF;
}
div.eigthSector {
width: 11.5%;
background-color: #FFE6BE;
}
div.ninthSector {
width: 9.75%;
background-color: #94C4FF;
}
I think this fits better. Further I want to d
ynamically change the width of this sections on hover and fill them by some content. Is it completely bad idea to use gradients for this "transitions-animation" purpose?
Well, I've tried to make a repeated gradient as a background, but I think it would be really hard to control the size of a particular section of the background to extend it once you want to show the content, I think you will have more control if you stick to separated elements that you can change on hover.
Also, is there a particular reason for the div.sector to have display:inline;? It's already floated to the left, so it's behaving as a block element, no need to declare it as inline as well.
I hope this helps, and let me know if I did not understood you correctly.
Related
I have two <div> elements. When the user hovers, a transformation of transform: translateY(x, y); is applied. However, a black border also somehow appears (there should only be a red border) when the user hovers.
Resolution: 1920*1080
.link {
display: block;
height: 350px;
width: 200px;
background: black;
border: 1px solid red;
}
.element {
background: white;
height: 100%;
width: 100%;
}
.link:hover {
transform: translateY(-5px)
}
<div class="link">
<div class="element">
test
</div>
</div>
I am not absolutely sure I am understanding the problem, but one way to get rid of the black on hover is to set the background to transparent then. See snippet below.
Note that trying to get exact alignment of very thin borders/lines (1 CSSpx in this case) is not always possible given modern displays use several 'physical' pixels for one CSS pixel. Sometimes zooming in/out shows/doesn't show 1 (display) pixel 'left behind'. And I have seen this in this case, so certain display sizes may show the black.
.link {
display: block;
height: 350px;
width: 200px;
background: black;
border: 1px solid red;
}
.element {
background: white;
height: 100%;
width: 100%;
}
.link:hover {
transform: translateY(-5px);
background: transparent;
}
<div class="link">
<div class="element">
test
</div>
</div>
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'n using translateY() to pull an element up to overlap an element above it.
.element {
transform: translateY(-50%);
}
It leaves space to the bottom. Is there any way to pull up any elements below it?
https://codepen.io/anon/pen/OBYRMe
In the example you can see it overlaps the element on top which is what I want but leaves space on the bottom. I am trying to achieve this without modifying other elements (e.g. use transform on elements on the bottom as well)
Note: using margin -50% does not work because it doesn't bring up the element 50% relative to the element's height. Only transform calculates the height to my knowledge.
You can apply transform on elements on bottom using the following css.I hope this is what you are looking for
.element ~ div {
transform: translateY(-50%);
}
You can use a negative big value in margin-bottom to pull the other elements:
body {
text-align: center;
}
.test, .element {
width: 80%;
padding: 60px 0;
background: green;
display: inline-block;
}
.element {
width: 30%;
background: yellow;
display: inline-block;
transform: translateY(-50%);
margin-bottom:-100vh;
}
<div class="test"></div>
<div class="element">:-)</div>
<div class="test"></div>
<br><br>
<div class="test"></div>
Use margin-top: -50%; instead. Happy coding
You can use the box-shadow properties to solve the your problem otherwise you can use the flex-box or position etc. anyway I gave solution but I'm not sure you want this things or not:)
body {
text-align: center;
}
.test, .element {
width: 80%;
padding: 60px 0;
background: green;
display: inline-block;
}
.element {
width: 30%;
background: yellow;
display: inline-block;
transform: translateY(-50%);
box-shadow:0px 100px yellow;
}
<div class="test"></div>
<div class="element">:-)</div>
<div class="test"></div>
I have an image. And i have to provide different level of opacity in different part for the same image.The part of image can be our choice. Look at the image and it tells more.
NOTE: This is a sample image only used to show an example.
Is this possible??
I think the best way would be to provide a prepared image for this usecase. Nontheless, here is one possiblilty with plain CSS:
http://jsfiddle.net/Sur7D/1/
CSS:
.image1
{
background-image: url("http://lorempixel.com/400/200/");
background-attachment: fixed;
background-position: center center;
background-size:contain;
}
.split-image
{
height: 200px;
}
.split-image > div
{
height: inherit;
width: 33.333%;
float:left;
transform: skewX(-25deg)
}
.split-image > div:nth-child(1){
opacity: 0.8;
}
.split-image > div:nth-child(2){
opacity: 0.5;
}
.split-image > div:nth-child(3){
opacity: 1;
}
HTML:
<div class="split-image">
<div class="image1"></div>
<div class="image1"></div>
<div class="image1"></div>
</div>
I'm trying to make a splash page on my website with 2 large buttons, each a right angled triangle, and both join by the longest side to create a square. Basically I'm looking to find out how to make non-rectangular buttons in css.
I have no idea if this is even possible though, and cannot find anything online explaining similar techniques for buttons which are not rectangular, and i'm not particularly skilled in css. A push in the right direction would be very helpful!
A very old (unanswered question) deserves an answer.
You could use a nested div element in which the parent has an overflow set to hidden, with the child element rotated.
Here is a basic example: (please note: jQuery only required for demo)
$('.tri').click(function() {
alert("triangle clicked!");
});
.wrap {
height: 200px;
width: 200px;
position: relative;
overflow: hidden;
margin: 2px auto;
}
.wrap .tri {
position: absolute;
height: 70%;
width: 70%;
background: tomato;
transform-origin: bottom left;
bottom: 0;
transition: all 0.6s;
left: 0;
cursor: pointer;
transform: rotate(45deg);
}
.wrap2 {
transform: rotate(180deg);
}
.wrap .tri:hover {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="tri"></div>
</div>
<div class="wrap wrap2">
<div class="tri"></div>
</div>