I have an absolute positioned link who's text I wish to transform
to either
transform: rotate(315)
or
Get the text to arc on the inside
Here is what I have now: link
I have tried:
SVG path
Libraries like arktext.js
EDIT
It seems that it has nothing to do with it being absolute.
It was just 315 was not a valid value.
If you are going to use transform, you need to specify that you are using degrees.
transform: rotate(315deg);
Updated pen
Put your text inside p tags then transform that.
<a href="#skills" id="top-left-circle" class="panel">
<p>Hello</p>
</a>
a > p {
-ms-transform: rotate(315deg);
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
http://codepen.io/anon/pen/RWKWOj
Related
I am still learning web development and decided to test my skills by making the minecraft.net website again. On one of the links on the main page there is a dropdown menu with an arrow pointed down beside the link. On hover the dropdown menu comes down and the arrow points up. Does anyone know how to code this hover effect for the link and arrow. Also the arrow changes direction and the menu comes down wherever you hover over the link or the arrow beside it. Your help would be much appreciated. Thanks in advance.
img:hover {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
}
If this arrow element (div, img etc) has a class e.g. "dropdown-arrow", you could do something like this:
.dropdown-arrow {
transform: rotate(0deg)
transition: transform 0.3s ease-in-out
}
.dropdown-arrow:hover {
transform: rotate(180deg)
}
Setting two transforms will ensure that when you are not hovering, it will return to its normal rotation. The transition will make this rotation smoother, not an instant change.
You can make an on hover event happen in CSS using the :hover psuedoselector. As for rotating your arrow, this using CSS' rotate() function will work:
#arrow:hover {
transform: rotate(180deg);
}
<div id="arrow">▼</div>
I'm making a website that contains many skewed elements, like this:
This isn't too bad, there are CSS transforms that could skew it. But how about this:
The image isn't distorted, just the frame is cropped in a skewed way. What's the easiest/best way to do this?
I think this should work for you. As a Mark commented on, clip-path is a nice way to go. There are tools for getting just the right path such as Clippy. Once you've got the path, you drop it right into your code. In my demo, I used it on the div wrapping the image, rather than on the image itself. I did it this way to keep border effects—added via pseudo-class—on top of the image.
Demo: http://codepen.io/antibland/pen/eZKxNa
I ended up using the following. It creates a skewed parent, then unskews the child, centering it and making it big enough to fill the skew's stick-out bits.
HTML
<div class="skewed">
<img src="images/sad-kid.jpg">
</div>
CSS
div.skewed {
position: relative;
height: 140px;
transform: skew(-2deg) rotate(2deg);
-webkit-transform: skew(-2deg) rotate(2deg);
-moz-transform: skew(-2deg) rotate(2deg);
overflow: hidden;
}
div.skewed > * {
width: 110%;
position: absolute;
top: 50%;
transform: skew(2deg) rotate(-2deg) translateY(-50%);
-webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
-moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}
OUTPUT
This is similar to Andy Hoffman's method, but supports a greater number of browsers.
Let's say I have 2 pics. Pic A in front of pic B. I want B to rotate when I hover A. Here's my HTML code
<div id="nav">
<img class="button" src="images/ornament.png"/>
<img class="circle" src="images/profile.png"/>
</div>
And my CSS
.circle:hover .button
{
transition: 3s;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate (360deg);
}
Please someone help me with this. Thanks a lot!
CSS currently can't transverse the DOM, therefore it wouldn't be possible in this case. You would need JavaScript in order to do that.
In pure CSS, you could, however, do the opposite. Changing the order of the markup:
<img class="circle" src="//.." />
<img class="button" src="//.." />
EXAMPLE HERE
Either use the adjacent sibling combinator, +, or the general sibling combinator, ~.
.circle:hover + .button {
transition: 3s;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate (360deg);
}
Using the same HTML, you could also change the visual order by floating the element(s) in the opposite direction. (example)
Aside from this, it's worth noting that you were using .circle:hover .button; which will select an element with class button that is a descendant of a element with class .circle this is in the :hover state.
I have a skewed text in HTML/CSS.
Like this: (http://jsfiddle.net/UPeYT/)
p {
-webkit-transform: skew(-8deg);
-moz-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
}
I would like the alignment of the text to skew but the words themselves to not be italic. How whould I do that?
I've built something that I needed, but I'm not sure if it is exactly what you need. Essentially I'm taking a paragraph, skewing it, then splitting each word into it's own span with the skew reversed. I'm sure this is horrid for performance on a repaint though.
fiddle
CSS:
span {
-webkit-transform: skew(-18deg);
-moz-transform: skew(-18deg);
-o-transform: skew(-18deg);
transform: skew(-18deg);
display: inline-block;
position: relative;
}
p {
-webkit-transform: skew(18deg);
-moz-transform: skew(18deg);
-o-transform: skew(18deg);
transform: skew(18deg);
padding:30px;
}
javascript (uses jquery):
$(document).ready(function(){
var words = $('p').text().split(' ');
$('p').empty();
for (var i=0;i<words.length;i++){
if (words[i]!='') {
$('p').append('<span>'+words[i]+'</span> ');
}
}
});
The HTML is simply a P tag with whatever content.
Something like this?
I append parent to <p> element and apply the opposite!
see: http://jsfiddle.net/joseapl/UPeYT/9/
Just a thought, but I guess it's the only right answer:
This is not possible. Let me show you how I came to that answer. I tried it with font-style: italic, which should not change the text if the skew made it italic for me, but it does not make it italic by default. It's just the transformation of the skew that makes it this way. If you change the degree, you'll see it get's straighter. It rotates the text and than it looks like it's italic, but it is not.
Here is what I mean: http://jsfiddle.net/UPeYT/7/
You can see that it's very different than yours: http://jsfiddle.net/UPeYT/10/
You can wrap the lines in a span or p tag. you want to indent and give them a text-indent to achieve what you want.
I have to do a web page with some perspective texts on it's menu and contents. Following is a link to an image of the effect I should achieve. Is it possible? Where to start? I'm clueless and don't even know what's the best to do. I appreciate any help.
http://goo.gl/Wlz5b
Rotating text
If you just need to rotate text elements, that can be done with CSS3, using a 2D-transform rotation.
Supporting IE8 and earlier would require using an IE matrix filter (and some extra work to position the text correctly).
JSFiddle Demo
HTML
<div class="content">
<p class="text text1">This is a short sentence.</p>
<p class="text text2">This is a second sentence.</p>
<p class="text text3">This is a third sentence.</p>
</div>
CSS
.text {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.text1 {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.text3 {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
3D rotation
If you need true 3D perspective (such that the text is larger on one end than the other), that will be tougher to manage cross-browser. The mock-up in the question doesn't appear to have 3D perspective.