I just want to route a arrow down.
My CSS:
.arrow-admin{
bottom: -130px;
right: -240px;
width: 0;
height: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 18px solid #666;
position:relative;
}
with css property transform. This property allows you to rotate, scale, move, skew, etc., elements.
.arrow-admin{
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
-moz-transform: rotate(90deg); /* mozilla */
transform: rotate(90deg);
}
Related
I make an arrow, using two borders of a box and rotating the box. When clicking it, the arrow should point up instead of down, and use a transition.
In Chrome/Safari/Firefox this works corretly. In IE11 however, it rotates weirdly. It ends up in the correct orientation, but gets there differently/around other axis than in the other browsers.
button:after {
/* make a box with two borders */
content: "";
border-left: 1.5px solid blue;
border-top: 1.5px solid blue;
transition: all 1s;
width: 10px;
height: 10px;
display: inline-block;
margin-left: 0.5rem;
/* rotate to give illusion of arrows */
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform-origin: 25% 25%;
-webkit-transform-origin: 25% 25%;
}
/* change direction of arrow */
button.open:after {
transform: rotateX(180deg) rotateZ(-135deg);
-webkit-transform: rotateX(180deg) rotateZ(-135deg);
}
Interactive example, click the button:
https://jsfiddle.net/b51sctnu/1/
In general, it's a good idea to keep the changes easy for the browser to understand
In your case, use 2 transforms that are the most similar posible.
Since the final step is
transform: rotateX(180deg) rotateZ(-135deg);
in the initial step use:
transform: rotateX(0deg) rotateZ(-135deg);
The 0deg rotation seems useless, but matches the final transform
Example, changing the new state to a hover to make easier to go back and forth
button:after {
content: "";
border-left: 1.5px solid blue;
border-top: 1.5px solid blue;
transition: all 1s;
width: 10px;
height: 10px;
display: inline-block;
margin-left: 0.5rem;
-webkit-transform-origin: 25% 25%;
-webkit-transform: rotate(-135deg);
transform-origin: 25% 25%;
transform: rotateX(0deg) rotateZ(-135deg);
}
button:hover:after {
-webkit-transform: rotateX(180deg) rotateZ(-135deg);
transform: rotateX(180deg) rotateZ(-135deg);
}
button {
border: 0px;
background: grey;
padding: 20px;
}
<button>asdasd</button>
I have a css to draw a half square box
.box-tri {
width: 0;
height: 0;
border-right: 30px solid rgb(217, 224, 231);
border-top: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 30px solid rgb(217, 224, 231);
}
Now what i should do if i want to write a text parallel to the diagonal of the box but inside the box.
I added a child element to contain the text and rotated it with CSS transform:
<div class="box-tri">
<span>Label</span>
</div>
.box-tri {
width: 0;
height: 0;
border-right: 30px solid rgb(217, 224, 231);
border-top: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 30px solid rgb(217, 224, 231);
}
.box-tri span {
position:relative;
display:block;
transform: rotate(-45deg) translate(-15px, -18px);
-moz-transform: rotate(-45deg) translate(-15px, -18px);
-webkit-transform: rotate(-45deg) translate(-15px, -18px);
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
text-align:center;
line-height:1em;
width:60px;
height:1em;
overflow:hidden;
}
One caveat is that longer text does not work very well. My version truncates it.
WORKING EXAMPLE
In response to the other jsfiddle you found, I made the following changes to make the ribbon go from the top-right to the bottom-right:
.ribbon-wrapper-green {
...
top: -3px // removed
bottom: -3px; // added
}
.ribbon-green {
...
-webkit-transform: rotate(45deg); // removed
-moz-transform: rotate(45deg); // removed
-ms-transform: rotate(45deg); // removed
-o-transform: rotate(45deg); // removed
-webkit-transform: rotate(-45deg); // added
-moz-transform: rotate(-45deg); // added
-ms-transform: rotate(-45deg); // added
-o-transform: rotate(-45deg); // added
...
top: 15px // removed
top: 45px; // added
}
It's not perfect, but try tweaking those values to polish it.
WORKING EXAMPLE
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 */
}
UPDATE
here is a js-fiddle with images available: http://jsfiddle.net/TBwWw/
I am using a tutorial that I found here.
I have an unordered list that simply links the image to a larger one and also displays the image on the page.
<ul class="polaroids">
<li>
<a href="http://www.flickr.com/photos/zurbinc/3971679981/" title="Roeland!">
<img src="example/cyan_hawk.jpg" alt="Roeland!">
</a>
</li>
</ul>
And then css that is supposed to be adjusting the image size, add the polaroid effect and a whole lot more.
ul.polaroids a:after {
content: attr(title);
}
/* By default, we tilt all our images -2 degrees */
ul.polaroids a {
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
transform: rotate(-2deg);
}
/* Rotate all even images 2 degrees */
ul.polaroids li:nth-child(even) a {
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-moz-transform: rotate(2deg);
transform: rotate(2deg);
}
/* Don't rotate every third image, but offset its position */
ul.polaroids li:nth-child(3n) a {
-webkit-transform: none;
-o-transform: none;
-ms-transform: none;
-moz-transform: none;
transform: none;
position: relative;
top: -5px;
}
/* Rotate every fifth image by 5 degrees and offset it */
ul.polaroids li:nth-child(5n) a {
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-moz-transform: rotate(5deg);
transform: rotate(5deg);
position: relative;
right: 5px;
}
/* Keep default rotate for every eighth, but offset it */
ul.polaroids li:nth-child(8n) a {
position: relative;
top: 8px;
right: 5px;
}
/* Keep default rotate for every eleventh, but offset it */
ul.polaroids li:nth-child(11n) a {
position: relative;
top: 3px;
left: -5px;
}
/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
ul.polaroids a:hover {
-webkit-transform: scale(1.25);
-ms-transform: scale(1.25);
-o-transform: scale(1.25);
-moz-transform: scale(1.25);
transform: scale(1.25);
position: relative;
z-index: 5;
}
/* Add drop shadows and smooth out the transition (Safari only) */
ul.polaroids a {
-webkit-transition: 0 .15s linear;
-moz-transition: 0 .15s linear;
-o-transition: 0 .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
box-shadow: 0 3px 6px rgba(0,0,0,.25);
}
/* On hover, darken the shadows a bit */
ul.polaroids a {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
box-shadow: 0 3px 6px rgba(0,0,0,.5);
}
The end result is supposed to be:
But they are just appearing with just the unordered list text decoration and the after title effects like so:
Everyone else in the comments on the tutorial said it worked just fine. I don't understand why it isn't working for me. I do have the css in an external style sheet that is linked and being found correctly. Finally, the Google Chrome console is showing no errors. I have tried it in Google Chrome and Internet Explorer.
Try this:
http://jsfiddle.net/jC84f/1/
ul.polaroids { width: 970px; margin: 0 0 18px -30px; }
ul.polaroids li { display: inline; }
ul.polaroids a { background: #fff; display: inline; float: left; margin: 0 0 27px 30px; width: auto; padding: 10px 10px 15px; text-align: center; font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333; font-size: 18px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); -webkit-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; -moz-transform: rotate(-2deg); }
ul.polaroids img { display: block; width: 190px; margin-bottom: 12px; }
ul.polaroids a:after { content: attr(title); }
ul.polaroids li:nth-child(even) a { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); }
ul.polaroids li:nth-child(3n) a { -webkit-transform: none; position: relative; top: -5px; -moz-transform: none; }
ul.polaroids li:nth-child(5n) a { -webkit-transform: rotate(5deg); position: relative; right: 5px; -moz-transform: rotate(5deg); }
ul.polaroids li:nth-child(8n) a { position: relative; right: 5px; top: 8px; }
ul.polaroids li:nth-child(11n) a { position: relative; left: -5px; top: 3px; }
ul.polaroids li.messy a { margin-top: -375px; margin-left: 160px; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); }
ul.polaroids li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }
code { background: rgba(0,0,0,.5); padding: 2px 3px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.75); -webkit-border-radius: 3px; -moz-border-radius: 3px; }
ol.code { background: rgba(0,0,0,.75); margin-bottom: 18px; border: solid rgba(0,0,0,.75); border-width: 1px 1px 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5); }
ol.code li, ol.code li code { font-size: 14px !important; }
ol.code code { background: none; }
First off, all the images are supposed to be in a single ul, not separate ones as you have in your fiddle. Second, you're missing the list styles, and display/float properties to make things wrap.
I was able to get your example to wrap by adding the following CSS:
ul { list-style: none; }
ul li { display: inline; }
ul a {
display: inline;
float: left;
}
ul img { display: block; }
I think this is essentially what you're missing, so you'll probably want to adjust things to how you like (including spacing, classes, etc.). Here is my fiddle: http://jsfiddle.net/jC84f/3/
Does anyone have any ideas to achieve this angled heading effect with CSS only?
The box shadow shouldn't be a problem using a generator like this, but I'm unsure on the angled edges - perhaps CSS3's transform?
Write this:
h1{
font-size:24px;
display:inline-block;
position:relative;
margin:20px;
}
h1:after{
content:'';
position:absolute;
top:0;
bottom:0;
left:-10px;
right:-10px;
background:red;
z-index:-1;
-moz-transform: skew(-25deg);
-webkit-transform: skew(-25deg);
box-shadow:3px 3px 0 0 #000;
-moz-box-shadow:3px 3px 0 0 #000;
-webkit-box-shadow:3px 3px 0 0 #000;
}
Check this http://jsfiddle.net/RP356/
You can achieve that with just transform:skew():
transform:skew(-30deg,0);
-ms-transform:skew(-30deg,0); /* IE 9 */
-moz-transform:skew(3-0deg,0); /* Firefox */
-webkit-transform:skew(-30deg,0); /* Safari and Chrome */
-o-transform:skew(-30deg,0); /* Opera */
As you can see here.
P.S. However keep in mind the “Heading” text and the skewed part have to be separate elements to avoid affecting the text too.
(In case the text is a child, you could set it straight using the opposite transformation: transform:skew(30deg,0).)
Yes it is transform. Following css does it for -20 degrees. and a white shadow
.box {
-moz-transform: scale() rotate(0deg) translate(0px, px) skew(-20deg, deg);
-webkit-transform: scale() rotate(0deg) translate(0px, px) skew(-20deg, deg);
-o-transform: scale() rotate(0deg) translate(0px, px) skew(-20deg, deg);
-ms-transform: scale() rotate(0deg) translate(0px, px) skew(-20deg, deg);
transform: scale() rotate(0deg) translate(0px, px) skew(-20deg, deg);
-webkit-box-shadow: 10px 10px 5px 5px #ffffff;
-moz-box-shadow: 10px 10px 5px 5px #ffffff;
box-shadow: 10px 10px 5px 5px #ffffff;
}
In order to #SvenBieder answer, it is better to use something like this:
body {
background: #ddd;
}
h1 {
position: relative;
font-family: sans-serif;
color: #fff;
width: 400px;
margin: 20px;
padding: 5px;
}
/* In CSS3 it is ::before, but IE doesn't support this */
h1:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -5px;
z-index: -1;
background: #555;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
-ms-transform: skew(-20deg);
transform: skew(-20deg);
-webkit-box-shadow: 10px 10px 0px 3px #ffffff;
-moz-box-shadow: 10px 10px 0px 3px #ffffff;
box-shadow: 10px 10px 0px 3px #ffffff;
}
Live example: http://jsfiddle.net/fjPbr/1/
It's better because it don't skew the content and it has less code.