I have vertically rotated span element with some text in it:
span{
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
height: 100%;
}
.container{
width: 40px;
height: 500px; /* <- this can change */
}
How can I make it so the spacing between the letters of the text from the span changes depending on the container's height? Basically I want the text to span over the entire height of the element...
...somewhere, in a javascript file far far away...
$(".container").each(function(idx, el) {
$(el).css("letter-spacing", calculateSpacing(el, $(el).height()));
});
You can use the plugin found here, which contains the calculateSpacing function, albeit it works on width, not height (so some modification may be necessary):
http://heychinaski.com/jquery/js/jquery.charjustify.js
I think you can't do it without javascrit, because sizes in % use width but not height.
Write a script that divide the height of the element by the number of chars inside and set it as letter-spacing.
Related
I am using an image with height: 100vh;, so based on the screen's resolution its size changes. I would like to add a negative left margin to it, equal with the half of its width (which depends on the screen resolution). Any solution to do this only with CSS?
If the negative left position is dependant on (half) the element width you can do like:
transform: translateX(-50%);
*{margin:0;}
.halfThere {
vertical-align: top;
height: 100vh;
transition: 0.4s;
transform: translateX(-50%);
}
.halfThere:hover {
transform: translateX(0%);
}
<img class="halfThere" src="//placehold.it/800x600/0bf">
I have input with set height and width of it in the center of the site (imagine Google) and need its position to be vertically responsive based on the height of the browser window. I was looking for a solution, but couldn't find it.
input {
max-height:4em;
max-width: 25em;
outline: none;
}
One way is to use CSS3 translateY like this..
input {
max-height:4em;
max-width: 25em;
margin:0 auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
http://codeply.com/go/94MsX6EnaO
Make the element position:absolute with a top:50%
Set a height, and a minus margin-top which should be 50% of the height.
How?
The top:50% will push the element top to 50%. But since you want the middle of the element to be in the middle and not the top, you use a negative margin-top to pull the element up the half of it's height.
HTML
<div>
MIDDLE ME
</div>
CSS
div {
height:30px;
top:50%;
position:absolute;
margin-top:-15px;
}
Example:
http://jsfiddle.net/bpa6qgu6/
More detailed: http://jsfiddle.net/bpa6qgu6/1/
Another solution is using jQuery's innerHeight() to set the margin-top;
I have a div which change width depending on browser width, responsive. In the div is an image which in the broadest version of my site is closest to the original image regarding width/height.
When the browser window gets smaller I want the height of the image to remain but overflow of the width to be hidden. The image should be centered in the div. Is this possible?
Full size
Mobile version
Example http://postimg.org/image/v16lb0rft/
It is possible, just use media queries. For example :
#media screen and (max-width: 640px) {
#yourImage{
overflow-x: hidden;
}
}
There is a great jQuery plugin called backstretch. Usually it's used to make full background images like here (clothing website). But it can also be used in a small div of any size.
Backstretch.js
If it's not a problem to hardcode the width of the image then this should work.
img#your-img {
margin: 0 calc(50% - (/* the width of img#your-img */ / 2));
overflow: hidden;
}
I hope this helps, good luck!
I had been trying to find a solution to this for quite some time and finally came across this:
HTML:
<div class="image-wrapper">
<img src="http://placehold.it/350x200">
</div>
CSS:
.image-wrapper {
/* Height 0, padding-bottom, and overflow hidden
give the wrapper height since it won't get a height
from it's child being positioned absolutely */
height:0;
padding-bottom:65%;
position:relative;
overflow:hidden;
width:100%; /* your dimension here (can be px or %) */
}
.image-wrapper img {
display:block;
height:100%;
left:50%;
position:absolute;
top:50%;
width:auto;
/* Negative translate instead of negative margins */
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
I've tested this and it works. If IE is important to you, you may be out of luck, but I hope this helps!
Here is a fiddle
I've got a question concerning webkit marquee. I've got 2 elements of a variable width. (The 2 elements are the same width), and both elements need to be a marquee.
However when the content has overflow (is larger then the element) I need a marquee, if not the text should remain as it is (no scrolling).
I've created a JSFiddle as an example:
http://jsfiddle.net/Vxwed/:
The long and short both need to be marquee'd through CSS3, while the long should scroll and the short one doesn't.
<p class="long">Hi my name is John Doe</p>
<p class="short">Yeah!</p>
Remember, the contents of the elements are variable (filled with javascript), so I cant do actual hardcoding on the elements marquee-behaviour.
Any CSS experts here able to help me? I've been researching this a lot but there is little information about this subject, since it's relatively new.
The only solution that I'm able to think of right now is using jQuery to measure the width of the elements, and then calculate if they need extra spacing. If they need apply marquee, else don't. But that doesn't seem very clean to me, I'd rather do this in HTML/CSS only if possible.
This probably doesn’t do exactly what you want but it was a good problem to look at: http://jsfiddle.net/4hgd8ac1/
It uses CSS animations to animate the transform: translateX percentage as this is based off the width of the element itself. This means we can scroll an element it’s full width left. By then giving the marquee a minimum width we can standardise the shorter text lengths. Then we use calc(100% + 100px) move the item 100% left except the width of the carousel (100px).
It doesn’t quite have the traditional marquee feel with the text scrolling fully but using the animation keyframes it is possible to pause at the end of the text to give the user time to read.
p {
height: 30px;
width: 100px;
background-color: #CCC;
white-space: nowrap;
}
.marquee {
overflow: hidden;
position: relative;
}
.marquee__content {
padding: 5px 0;
margin-right: 100px;
position: absolute;
height: 20px;
animation: scroller 3s linear infinite;
min-width: 100px; /* This needs to match the width of the parent */
}
#keyframes scroller {
0% {
transform: translateX(0%);
}
/* ‘pauses’ the scroller at the start for 20% of the time, adjust to edit timing */
20% {
transform: translateX(0%);
}
/* ‘pauses’ the scroller at the end for 20% of the time */
80% {
/* Translate will use the width of the element so 100% scrolls it’s full length. add the width of the marquee to stop smaller items scrolling */
transform: translateX(calc(-100% + 100px));
}
100% {
transform: translateX(calc(-100% + 100px));
}
}
<p class="marquee"><span class="marquee__content">Hi my name is John Doe</span></p>
<p class="marquee"><span class="marquee__content">Yeah!</span></p>
I have tried using
In HTML:
<img src="../Resources/title.png" />
In CSS:
img {
width: 200%;
height: 200%;
}
But this scales the images based on the parent tag the image is in. If an image is 150px by 150px I want to scale it to 300px by 300px. I want this to work for all images no matter their size or parent tag. And I only want to use CSS. ideas?
You can do this with the scale() 2D transform, but being one of the flashy new CSS3 features support is incomplete at this time and you need vendor prefixes:
img {
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(2);
}
However I don't believe this takes into account the flow of content, as transforms are done on individual elements and as such do not affect layout. See also the transform-origin property.
If you need good browser support, or you need the content to reflow properly, you'll have to make do with an alternative such as using JavaScript or restructuring your HTML, such that the width and height properties will scale it correctly and affect element flow in a natural way.
You can't using CSS < Version 3 only.
When you set the width/height on an element it is relative to it's container.
Update, as it's been quite some time since this answer was posted.
As a commenter points out, this can be achieved by simply using the zoom CSS property. However, it's not recommended, as it was first implemented solely by IE, in the IE6/7 days, and never formalized into the W3C standard. Instead, what's commonly used nowadays is a CSS transform using the scale function.
More on the scale() CSS function:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
Example:
https://jsfiddle.net/2n5zLhz3/
You can enclose the image in a div and then set its size relative to the parent.
<style type="text/css">
.double{
display: inline-block;
}
.double img{
width: 200%;
}
</style>
<div class="double"><img src="../Resources/title.png"></div>
You can use min-width property on your image to force your width to be larger than its parent div, e.g.
.parent {
width: 300px;
height: 200px;
overflow: hidden;
}
img {
min-width: 200%;
/* center image */
margin-left: -50%;
height: auto;
}
<div class="parent">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/Information_example_page_300px.jpg" alt=""/>
</div>
You can double the image by taking the percent you need from window size.
p > img {
width:100%;
height:60vh;
}
"height:100vh;" means 100% from your browsing window.Just have to do the math.
Use the width 110%, because it is in a div and there was extra space.
img {
height: 400px;
width: 110%;
}