I'm trying to create a side tag, as found here in it basic form. http://www.firstforturf.co.uk/quotation.php
I'm trying to do as much of it as possible using CSS rather than just putting in an image however I've encountered a problem.
Upon rotating the side DIV it is moved from the side of the page. I've tried setting the margin to 0 but it doesn't seem to be working.
If it helps, here are the CSS rules for sidetag.
color: #FFF;
height: 50px;
width: 200px;
position: fixed;
background-color: rgb(0,102,204);
font-size: 32px;
line-height: 50px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
top: 50%;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
writing-mode: tb-rl;
Greatful if anyone could help. Cheers.
Use transform-origin:
-moz-transform-origin: 20px;
-ms-transform-origin: 20px;
-o-transform-origin: 20px;
-webkit-transform-origin: 20px;
transform-origin: 20px;
Take a look at -webkit-transform-origin. As your element is fixed, you may need to amend the transform origin accordingly.
You can use transform-orign:
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
try this link
Related
I add some videos to my website and when I tested on Chrome it's working correctly, but when I tested on safari and Firefox it shakes. What is the problem?
This is my CSS code:
.parallax-background video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
When I read about this problem I think the problem in this part
transform: translate(-50%,-50%);
But I don't know how I can fix it.
Try this code
.parallax-background video {
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
The pseudo :before works on Firefox, Safari but not in Chrome.
Its a square box rotated to form a diamond shape. But, using :before the bg is again rotated backwards and given a position fixed. It gives a really nice effect !
Check My Site :
www.wangeltmg.com
When you scroll at first, the background overlaps and creates blurry image to get cleared.. !
All i did is
#element3
{
width: 1000px;
height:1000px;
line-height: 5em;
margin: 0px auto;
border: 0px solid #666;
border-radius: 3px;
margin-top:150px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
overflow: hidden;
left:0; right:0;
top:10%;
}
#element3:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -10%;
z-index: 0;
background: url(../img/custom11.jpg) 0 0 no-repeat fixed;
background-size:135% 135%;
background-position:140px -315px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Is there anything to work on regarding the compatibility with Chorme ?
I would love to have your answers fellas.
Thanks.
Your CSS background is behaving bizarre on chrome because you needed to add:
-webkit-transform CSS 3 transform with prefix for Chrome.
.parallax-two #element3 {
border: 0 solid #666666;
border-radius: 3px;
height: 1000px;
left: 0;
line-height: 5em;
margin: 150px auto 0;
overflow: hidden;
position: absolute;
right: 0;
top: 10%;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 1000px;
}
http://fiddle.jshell.net/mmvdz/6
http://fiddle.jshell.net/mmvdz/6/show/
For Firefox, Chrome, Opera, IE etc. it is preferred to add the vendor prefix CSS3 versions as well. It is needed for older versions of Firefox as well for example.
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
If you use editor like Sublime Text to code manually. You have plugins which add this vendor prefix automatically.
http://www.hongkiat.com/blog/css-automatic-vendor-prefix/
I do see that you have another problem on Chrome. The fixed div has issues with z-index. And it seems it has to do with CSS 3 transform properties for webkit which makes the triangle appear above the fixed div but without the blur effect in Chrome.
#home-wrap {
-webkit-backface-visibility: hidden;
}
I'm trying to display a profile photo like this / - / (the slashes represent slants using skewX, the hyphen represents a horizontally-aligned background image).
The problem is that this code also skews the background image:
.photo {
transform: skewX(35deg);
-ms-transform: skewX(35deg); /* IE 9 */
-webkit-transform: skewX(35deg); /* Safari and Chrome */
width: 100px;
height: 92px;
border-right: 1px solid black;
border-left: 1px solid black;
background-image: url('silhouette.png');
background-repeat: no-repeat;
background-position: top left;
}
...
<div class="photo"></div>
I've tried to reverse the background skew like this:
.photo {
transform: skewX(35deg);
-ms-transform: skewX(35deg); /* IE 9 */
-webkit-transform: skewX(35deg); /* Safari and Chrome */
width: 100px;
height: 92px;
border-right: 1px solid black;
border-left: 1px solid black;
}
.photo div {
transform: skewX(-35deg);
-ms-transform: skewX(-35deg); /* IE 9 */
-webkit-transform: skewX(-35deg); /* Safari and Chrome */
width: 100%;
height: 100%;
background-image: url('silhouette.png');
background-repeat: no-repeat;
background-position: top left;
}
...
<div class="photo"><div></div></div>
...but I get / [-] / (the background doesn't fit flush to the slants).
I've been at this all day, please can you help me? I've got coder's bock!
I'd rather use a pseudo element that's holding the background-image. The key to the solution is using transform-origin:
Example
.photo {
transform: skewX(35deg);
-ms-transform: skewX(35deg); /* IE 9 */
-webkit-transform: skewX(35deg); /* Safari and Chrome */
width: 100px;
height: 92px;
border-right: 1px solid black;
border-left: 1px solid black;
/* new styles */
position: relative;
overflow: hidden;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
}
.photo::before {
content: "";
transform: skewX(-35deg);
-ms-transform: skewX(-35deg); /* IE 9 */
-webkit-transform: skewX(-35deg); /* Safari and Chrome */
background-image: url('http://placekitten.com/200/200');
background-repeat: no-repeat;
background-position: top left;
/* new styles */
position: absolute;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
width: 1000%; /* something ridiculously big */
height: 1000%; /* something ridiculously big */
}
Im trying to rotate a <span> within an <h2> 90 degrees.
right now if I just set it to rotate nothing happens - but if I add a display:block to the span then it rotates. My problem is it pushes the rest of the h2 on to the next line.
Is there any way to have the h2 display on one line with the span rotated in middle of it?
here's how it should look
HTML:
<h2>Join <span class="flip-text">With</span><span class="flip-text">Your</span> Family</h2>
CSS:
span.flip-text{font-size:10px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
Just like Christopher was suggesting, display: inline-block is the way to go:
http://jsfiddle.net/X85b6/
<h2>Join<span>with<br />your</span>Family</h2>
h2 {
font-size: 60px;
text-transform: uppercase;
}
h2 span {
font-size: 15px;
line-height: 16px;
display: inline-block;
position: relative;
bottom: 5px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
So I'm using CSS to rotate some text from horizontal to vertical (90 degrees) like so:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
writing-mode: tb-rl;
filter: flipv fliph;
My problem is that this shifts the text way outside of the container div. Is there a trick to keep it inside the container? Is there some anchor point that I could set? What is a cross browser way to adjust post?
You could pull it back in with a few CSS properties...
#whatever {
position: relative;
top: -4px;
right: -10px;
}
Alternatively, you could play with the transform-origin property:
transform: rotate(-90deg);
transform-origin:20% 40%;
-ms-transform: rotate(-90deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
Alternative method, which is more browser compliant and doesn't need information about amount of text beforehand:
.disclaimer {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 12px;
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
line-height: 15px;
height: 15px;
width: 15px;
overflow: visible;
white-space: nowrap;
}
http://jsfiddle.net/d29cmkej/