I really hope someone can help me with this one.
I have a shape that I'd like to have change background color when hovered over it. I've gotten it to work in all browsers, except Safari.
You can see it here: http://jsfiddle.net/bgLv6L9j/5/
I tried using the following code to make the hover work but it cuts off half the text. I tried adding the dimensions of the shape but that also makes it look wonky.
.shape:hover::before {
background-color: #245a85;
content: "";
position:absolute;
}
I've looked through various other topics with the same issue but can't seem to locate any Safari specific problems (or solutions for that matter).
I'd really appreciate it if someone could quickly take a look and see where I'm going wrong with regard to pseudo elements and getting the background hover to work in Safari.
If you do this:
.shape a {
position: absolute;
}
Instead of relative It seems that will fix the problem.
http://jsfiddle.net/bgLv6L9j/7/
Edit:
I rewrote it with a much simple code based on yours.
HTML
<a class="shape" href="#">Text</a>
CSS
.shape {
border: 2px solid crimson;
border-radius: 5px;
display: table-cell;
text-align: center;
vertical-align: middle;
width: 150px;
height: 75px;
-moz-transform: perspective(40em) rotatex(-45deg);
-ms-transform: perspective(40em) rotatex(-45deg);
-o-transform: perspective(40em) rotatex(-45deg);
-webkit-transform: perspective(40em) rotatex(-45deg);
transform: perspective(40em) rotatex(-45deg);
}
.shape:hover {
background: crimson;
}
That's it. http://jsfiddle.net/8sdqteke/
Related
After working on a page for some months, I noticed a weird behavior in webkit based browsers. I implemented an input element with a technic I asked here Create quadrilateral with specific degree Everything works fine in all browsers, except webkit.
I search for this exact behavior and tried to find existing workarounds. An example for a suggested fix:
#supports (-webkit-overflow-scrolling: touch) {
transform: translate3d(0, 0, 0);
}
However this doesn't work.
I created a glitch project with the problem: https://glitch.com/~safari-bug-overflow
However, I also created more simple example:
<div>
<div class="wrapper">
<div class="background"></div>
<div class="content">
<h1>
Test
</h1>
<h1>
Test
</h1>
<h1>
Test
</h1>
<h1>Test</h1>
</div>
</div>
</div>
<style>
.background {
position: absolute;
transform: rotateX(58.6297041833deg) rotate(45deg);
background-color: green;
top: 96.619312px;
left: 3.4641016151px;
transform-origin: right top;
border-radius: 100px;
width: 500px;
height: 500px;
}
.wrapper {
position: releative;
}
.content {
position: relative;
}
</style>
This is how it looks in most browsers:
This is how it looks in webkit based browsers
Now I need to find a workaround for the issue, because I don't expect any fix in the near future. I am not even sure, whether this is a bug in webkit or a bug in my css. I think it is webkit, because it works in every other browser.
I found a WebKit Bug Report: https://bugs.webkit.org/show_bug.cgi?id=182520
at first, dont use h1 for those purposes, in terms of search engine optimization that would be a disaster. :)
I think your issue is in the content class. Have tryed min-height?
CSS Code
.content {
min-height:300px; /* for example */
}
Otherwise it would be usefull if u provide an js fiddle or anything :)
I found a solution by myself. One day I thought, maybe webkit uses a different z start position. Then I tried to move the div away. And it worked.
You can apply translateZ first on your transformation to fix the bug:
.background {
position: absolute;
transform: rotateX(58.6297041833deg) rotate(45deg);
-webkit-transform: translateZ(-1000px) rotateX(58.6297041833deg) rotate(45deg);
background-color: green;
top: 96.619312px;
left: 3.4641016151px;
transform-origin: right top;
border-radius: 100px;
width: 500px;
height: 500px;
}
.wrapper {
position: releative;
}
.content {
position: relative;
}
Notice the translateZ(-1000px) on -webkit-transform
This question already has answers here:
draw angular side / parallelogram using CSS
(3 answers)
Closed 6 years ago.
I am working on a project where I have to create something similar what is showing in the image below. Concretely, the yellow parallelograms with text that are showing inside the red rectangular (I dont need this red rectangular). As you know the divs by default are rectangular
So then my question is, how could create 3 parallelogram-divs or something similiar?
Any advices or guidelines would be appreciated
Thanks
PS: I cannot use a image as background because, If you do the windows smaller the backround doesn't follow the text
You can use the negative SkewX transform to get the desired effect:
div {
margin: 20px;
width: 200px;
height: 100px;
display: inline-block;
background: yellow;
border: 1px solid black;
transform: skewX(-10deg);
}
<div></div>
weinde almost has it, but 2 problems: You need to set display inline block, and the contents of the div will be skewed. A really lazy way to do this would be:
.para {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
display: inline-block;
vertical-align: top;
}
.unskew {
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
}
<div class="para"><div class="unskew">stuff</div></div>
<div class="para">stuff 2</div>
I feel like the unskew div is unnecessary though.
You could also try playing with css3 background gradients. Apply the gradient to a parent div sitting behind the 3 elements with text, for example. http://www.quirksmode.org/css/images/angles.html
Try this CSS style:
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;}
insted of #parallelogram you can chose your own class name...
For some reason firefox (and firefox alone, this isn't even an issue on ie which is...odd) seems to be ignoring the top:xx% value of a table/table cell element, but only initially, if the value is edited in the console however it immediately works as intended.
.overlay nav {
text-align: center;
position: relative;
display: table-cell;
vertical-align: middle;
top: 50%; /* <---the issue */
height: 100%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
I've settled the issue for the now by switching to top:xxvh, however I'm curious as to why the precentage isn't working so I'm still asking the question to see if anyone can shed some light on the issue.
Codepen showing example, only occurs in firefox
I want to code the below design in HTML&CSS
What I made so far is:
I made it using:
a links
SVG as background
Absolute position and translate(x,y) property in CSS.
Please check this fiddle for the live link
The issues in my design are:
Each item is actually a rectangle, if you notice the highlighted
rectangle in red, this is the area of the selection, so if you hover
over the left corner of m2, it will select m3.
I want to change
the background color of the SVG background when hover, how to
achieve that?
Is there an ideal way to make this concept better?
even if we used JS to position the elements.
Click here to view the SVG shape itself.
CSS code for the items:
.menu #m1 {
right: 100px;
transform: translate(-140px, -160px);
}
.menu #m2 {
right: 295px;
transform: translate(-25px, -80px);
}
.menu #m3 {
right: 400px;
}
.menu #m4 {
right: -60px;
transform: translate(-140px, -160px);
}
.menu #m5 {
right: 140px;
transform: translate(-20px, -80px);
}
.menu #m6 {
right: 240px;
}
.menu #m7 {
right: -95px;
transform: translate(-15px, -160px);
}
.menu #m8 {
right: 0px;
transform: translate(0, -80px);
}
Thanks,
This is how I would do it to keep the boundaries of the shapes based on Responsive grid of diamonds (no JS or svg needed):
DEMO
.wrap{
width:50%;
margin-left:13%;
transform-origin:60% 0;
transform: rotate(-45deg);
}
.wrap > a{
float:left;
width:19%;
padding-bottom:19%;
margin:0.5%;
background:teal;
}
.wrap > a:hover{
background:gold;
}
.wrap > a:nth-child(4){
clear:left;
margin-left:20.5%;
}
.wrap > a:nth-child(7){
clear:left;
margin-left:60.5%;
}
<div class="wrap">
</div>
To insert content in the shapes, you can "unrotate" it with transform: rotate(45deg)
You need to rotate the links themselves. Right now, you're not rotating anything, you're just showing images with rotated boxes. Instead, make the background image unrotated and rotate them with CSS.
For example:
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
A direct answer would be to use the poly attribute of SVG
That was you are not relying on CSS to rotate it.
The svg element once drawn is not manipulated after the css changes the appearance.
Drawing a 'diamond' shape in poly is your best option to avoid the bounding rectangle..
<svg height="250" width="500">
<polygon points="0,25, 25,0, 50,25, 25,50 " style="fill:black" />
</svg>
Basic example
JsFiddle
Update :
The code you have produced is shows it is not the SVG background you are editing..
If you want the SVG background to change you can add the attribute as i have lined up, not edited in CSS.
For my option to work on a hover event for example, you will need an id on each of the svg elements and then :hover on each of those, or javascript.. but its just an option. Other answers look to be more applicable.
My answer only facilitates the drawing onto the SVG.
Did you try css rotate to restrict the rectangle. You could use SVG anyway as the background now.
.m-item {
color: white;
text-decoration: none;
text-transform: uppercase;
border: 2px solid #000;
background-color: black;
padding: 50px;
position: absolute;
transform: rotate(45deg) translate(25px);
}
.m-item span {
position: absolute;
transform: rotate(-45deg) translate(0, -14px);
}
.m-item:hover {
background-color: #AA5;
}
<span>m1</span>
Any ideas on how to make the text appear 'inline'?
I made a polaroid photo effect on my portfolio, the rotate completely ruins the font, unsure if there is a fix.
rest assured, it's not so bad with my current font but other fonts look awful.
Code:
figure.polaroid {
width: 221px;
height: 240px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
background-color: white;
padding: 10px;
box-shadow: 1px 2px 10px black;
margin-top: 25px;
border-radius: 5px;
}
Let me guess, Chrome?
Try -webkit-backface-visibility: hidden;
I've read that some people avoid this issue by applying a 3d transform for rotation, such as transform: rotate3d(1, 2.0, 3.0, 10deg), so that might be a cleaner solution.
You should try to apply text-shadow to make font smooth.
Here you can try different shadows, pick a subtle one and check how it looks with your rotation:
http://www.elfboy.com/text-shadow/