How to make a text with skewed line but not letters? - html

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.

Related

Copyleft symbol

Is there any easy way to print the copyleft symbol?
https://en.wikipedia.org/wiki/Copyleft
For example as simple as:
© ©
It might be:
&anticopy; &anticopy;
What about some CSS ?
.copyleft {
display:inline-block;
transform: rotate(180deg);
}
<span class="copyleft">©</span>
It was just added as part of Unicode 11.0.
Code point: U+1F12F 🄯 COPYLEFT SYMBOL
html entity: 🄯 or 🄯
As smnbbrv said in his answer, it is unavailable. However, with some styling you can achieve the desired result:
span {
font: 18px Arial, sans-serif;
display: inline-block;
transform: rotate(180deg);
}
<span>©</span>
You have an html tag in your post, so I assume it's for webbased ends. This might be something you can use.
Simpler,
CSS:
.copyleft {
display: inline-block;
transform: rotate(180deg);
}
.copyleft::after {
content: "\00a9";
}
HTML:
<span class="copyleft"/>
Notes:
It uses CSS's content property to draw the copyleft symbol (CSS code) -- see table of special characters with their symbols
According to the article,
The copyleft symbol is a backwards C in a circle (copyright symbol ©
mirrored). It has no legal significance.[49]
Because it is unavailable on Unicode, it can be approximated with
character U+2184 ↄ LATIN SMALL LETTER REVERSED C or the more widely
available character U+0254 ɔ LATIN SMALL LETTER OPEN O between
parenthesis '(ɔ)' or, if supported by the application, by combining it
with the character U+20DD ↄ⃝ COMBINING ENCLOSING CIRCLE: 'ↄ⃝'.[50] A
discussion on the Unicode mailing list in July 2012, contended that
there are other ways to insert the copyleft symbol, so it need not be
encoded.[51]
You need to read the articles you give till the end.
What you can always do is using CSS with 3d transformations, use for your letter:
transform: rotateY(180deg);
but of course be aware of vendor prefixes / browsers which do not support it
if your are familiar with font awesome you can use:
<i class="fa fa-copyright fa-flip-horizontal"></i>
These answers are good, but I found that the copyleft symbol would be very low relative to other characters of text on a given line, due to the nature of the rotation. To fix this, I added relative positioning so that I could slide my copyleft symbol up in order to be in-line with all of the text.
.copyleft {
position: relative;
top: -5px;
display:inline-block;
transform: rotate(180deg);
}
Tweak top as needed.
This solution is a little more expressive than the other options provided. By doing it this way, we have much cleaner HTML code.
copyleft:before {
content: "©";
}
copyleft {
font-weight:100;
opacity:0.7;
vertical-align:middle;
display:inline-block;
transform: rotate(180deg);
}
The final result in the HTML would be:
<copyleft />
Here is the code I use which just flip horizontally the © symbol.
/* Copyleft
-------------------------------------------------- */
.copyleft {
display: inline-block;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
<span class="copyleft">©</span>
As not every font is encoding the Unicode copyleft character, a trick using previous answers:
normal text <style>.copyleft {
display: inline-block;
transform: rotateY(180deg);
}
.copyleft::after {
content: "\00a9";
}
</style>
<span class="copyleft"></span>normal text again
Strangely, on Thunderbird, after <span class="copyleft"/> normal text is mirrored but <span class="copyleft"></span> works smoothly.
Inline CSS is not the best but for Thunderbird it does the trick and you can just insert <span class="copyleft"></span> for following occurrences.

(CSS) skew img frame without distorting image

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.

Style text with transform

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

Transform creating wavy text in Firefox

Folks, I have text on a div that has transform: rotate(3deg). In Firefox, the text is rendered wavy. Removing the transform to the div fixes the waviness. Is there a way for me to have my cake and eat it too?
HTML:
<div class="card turn-right">
<div class="card-text">
<p>Blah. Blah. Blah.</p>
</div>
</div>
CSS:
.card {
display: block;
width: 550px;
height: 375px;
}
.turn-right {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
Edit:
Additional information: I have to use a #font-face for this project.
Screenshot:
Try adding perspective
.turn-right {
-webkit-transform: perspective(9999px) rotate(3deg);
transform: perspective(9999px) rotate(3deg);
}
No need for -moz-transform in modern browsers
By the way, the same bug is present in webkit browsers.
Why does this work ?
I don't have a real answer, because I don't have the source for the browser. But my guess is the following. The browsers have a very good rendering engine, that can do lots of things, and does it pretty well. But doing all this is most of the time expensive (read: makes the browser slow). So, most of the time it is trying to guess: is this really necessary ? Do I really need to calculate the xxxx of the yyyy in the zzzz to display this ?
And some of the bugs come from that guess being incorrect, and omiting a necesary calculus.
The solution then, is to put there something that makes the browser rendering engine think "wait, I really need to calculate that, that is not the easy case".
Also in this line are fixes like translate3d(0,0,0) or translateZ(0) or backface-visibility hidden . What is the sense in translating something 0px ? They force the browser to do something the complicated way instead of the easy way, and solve - optimize the result.

Making checkbox bigger in size

I'm trying to make the checkbox bigger in size. The regular size is too small
Try CSS 'transform'
input[type=checkbox] {
-ms-transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
transform: scale(2); }
But it will not work on IE8.
http://www.w3schools.com/cssref/css3_pr_transform.asp
You can make use of the images to change the style of checkboxes.
You can also use the following CSS which has been tested in Chrome. But this won't work in Firefox:
input[type='checkbox'] {
width: 4em;
height: 4em;
}
For a demo visit: http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/
This is tough to achieve if you want to maintain cross-browser compatiblity.
You may want to consider an input replacement plugin such as this one.
http://blogs.digitss.com/javascript/jquery-javascript/jquery-fancy-custom-radio-and-checkbox/