I would like to have a div with some text in it. But I'd like the text to flow vertically instead of horizontally. Like this;
M
y
t
e
x
t
Any ideas on how to accomplish this with CSS?
If you have only one line of text you could try using width:1em;letter-spacing:1px (and a space between each letter)
edit: if you want to use no space between each letter width:1em;letter-spacing:1em;word-wrap:break-word
CSS3 has a proposed 'writing-mode' attribute that can be set to 'tb-lr' (write text from top to bottom, write lines from left to right), but I don't know if any browsers support it yet, so its not something to rely on.
div{
text-orientation: upright;
writing-mode: vertical-lr;
}
<div>Jelly</div>
Please find the answer here you can use text-orientation and
.yourtext { -moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform-origin: top right;
-webkit-transform-origin: top right;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Related
Inspired by Design Shack, I wanted to have some linkable photos zoom in slightly when hovered over. However, I want the animations to be centered, so it's like we're zooming in slightly.
In order to keep the image centered, I fiddled with top, left, margin-top, and margin-left to make it work. I'm not even sure how it works :-) but it works...
...except that the animation is actually kind of choppy and jumpy, at least in Safari - worst of all in Safari on 10.9. (Firefox and Chrome do a better job though.)
Check out the example here:
http://jsfiddle.net/MnHVk/1/
The salient piece:
.card img:hover {
height:110%;
width:110%;
top:10%;
left:-10%;
margin-top:-10%;
margin-left:5%;
}
Compare the jumpy animation to the version that doesn't try to center, here:
http://jsfiddle.net/MnHVk/2/
Can anybody think of any other way to do this hover animation that won't result in such a jumpy effect? Perhaps there's some other technique for adjusting the positioning so that when the image is hovered over, it moves smoothly?
If you use transform, it should render thru the GPU, and I think, smoothly
.card img:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
transform-origin:50% 50%;
}
updated demo
I'm unsure if there is a property that does this. But I'm looking to add text vertically in a div on this website- http://chazsouthard.org/. However I want the text to appear to be rotated 90° clockwise.
I attached a screenshot from Photoshop as a example for what I'm trying to accomplish.
If you are using CSS3 I believe you are looking for transform: rotate(90deg);
http://www.w3schools.com/cssref/css3_pr_transform.asp
You will need to use a negative number here to achieve the orientation you desire. Adding the prefixed versions as well for cross-browser compatibility. simple codepen: http://codepen.io/BuoyantMedia/pen/Asdmr
transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
I'm having some problems rotating and positioning a line of text. Now it's just position that works. The rotation also works, but only if I disable the positioning.
CSS:
#rotatedtext {
transform-origin: left;
transform: rotate(90deg);
transform: translate(50%, 50%);
}
The html is just plain text.
The reason is because you are using the transform property twice. Due to CSS rules with the cascade, the last declaration wins if they have the same specificity. As both transform declarations are in the same rule set, this is the case.
What it is doing is this:
rotate the text 90 degrees. Ok.
translate 50% by 50%. Ok, this is same property as step one, so do this step and ignore step 1.
See http://jsfiddle.net/Lx76Y/ and open it in the debugger to see the first declaration overwritten
As the translate is overwriting the rotate, you have to combine them in the same declaration instead: http://jsfiddle.net/Lx76Y/1/
To do this you use a space separated list of transforms:
#rotatedtext {
transform-origin: left;
transform: translate(50%, 50%) rotate(90deg) ;
}
Remember that they are specified in a chain, so the translate is applied first, then the rotate after that.
Be careful on the "order of execution" in CSS3 chains! The order is right to left, not left to right.
transformation: translate(0,10%) rotate(25deg);
The rotate operation is done first, then the translate.
See:
CSS3 transform order matters: rightmost operation first
There is no need for that, as you can use css 'writing-mode' with values 'vertical-lr' or 'vertical-rl' as desired.
.item {
writing-mode: vertical-rl;
}
Something that may get missed: in my chaining project, it turns out a space separated list also needs a space separated semicolon at the end.
In other words, this doesn't work:
transform: translate(50%, 50%) rotate(90deg);
But this does:
transform: translate(50%, 50%) rotate(90deg) ; /*has a space before ";" */
Any one can help me to do double height text and double width text in font style(as like in dot matrix printers) in css without using any images.
Any code other than this?
heading{
font-weight:bold;
width:200%;
}
What I expect is as below.
Thanks.
OP,
Updated fiddle that includes all vendor prefixes for transform and transform-origin:http://jsfiddle.net/LTaAy/1/
See this fiddle: http://jsfiddle.net/LTaAy/
IMG
HTML
<p class="doubleWidth">DOUBLE WIDTH</p>
<p class="doubleHeight">Double Height</p>
<p class="doubleWidthandHeight">Double Width and Height</p>
CSS
p {
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
}
p.doubleWidth {
-webkit-transform: scaleX(2);
-moz-transform: scaleX(2);
}
p.doubleHeight {
-webkit-transform: scaleY(2);
-moz-transform: scaleY(2);
}
p.doubleWidthandHeight {
-webkit-transform: scaleX(2) scaleY(2);
-moz-transform: scaleX(2) scaleY(2);
}
I only included 2 vendors prefixes, but they should be applied as necessary.
- Only true above, This fiddle http://jsfiddle.net/LTaAy/1/ has been updated.
Hope it helps.
CSS transform:scale
Check out transform scale, that should do the trick:
http://www.css3files.com/transform/
-webkit-transform:scale(2,1);
-moz-transform:scale(2,1);
-ms-transform:scale(2,1);
-o-transform:scale(2,1);
transform:scale(2,1);
letteringjs.com can be used to apply this CSS to each letter independently through automatic span injection as you might have an issue with layout if the whole span is text span is stretched.
Additionally, you might be able to get away with width: 50%; on your double width text to restrain it within your layout.
Create your own font
Otherwise edit the font yourself. Use a tool like Font Creator. Just manipulate the scale, and save 2 new fonts, one with 200% width, and one with 200% height. Throw them into Font Squirrel and reference all 3 as unique #font-face font-families.
I have a practical use for the CSS3 skewX property. I have written a simple image accordian-like script with jQuery. Images are skewed (already, not in CSS) as part of the design and in order to make the correct areas clickable, the containing divs need to be skewed.
The problem is that in skewing the div, the image is skewed aswell. Skewing a skewed image does not look good.
One solution I've tried is resetting the skewX value to 0deg on the image, but to no avail. In the fiddle, I haven't included the accordian as this isn't necessary to the solution.
http://jsfiddle.net/yM49N/2/
<div><img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png"></div>
div {
-webkit-transform:skewX(200deg);
-moz-transform:skewX(200deg);
-o-transform:skewX(200deg);
-ms-transform:skewX(200deg);
transform:skewX(200deg);
border:1px solid red;
}
You can apply an inverted skewX on img:
img {
-webkit-transform: skewX(-200deg);
-moz-transform: skewX(-200deg);
-o-transform: skewX(-200deg);
-ms-transform: skewX(-200deg);
transform: skewX(-200deg);
}
To make the div contain the image properly, you also need to add overflow: hidden.
http://jsfiddle.net/thirtydot/yM49N/3/