I am changing the height of a SlickGrid header and rotating the text in the header with the following CSS:
.slick-column-name {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.slick-header-columns, .slick-header-column {
height: 200px !important;
}
For a better understanding, please take a look at this:
http://jsfiddle.net/2Nvc3/1/
The rotated text in the header is centered and cut off. How can I change the alignment, so that it starts on the bottom (the text should be left-aligned before the -90° rotation)?
The width of one of the columns is different on purpose.
Link to jsFiddle I played around for a while. Basically the problem was that the origin of rotation was the middle of your text/header. Since "Else else SOmeshing Else" is significantly longer than the other column names, it sticks out on both sides. Either way - changing the origin of location to the beginning of the text solves this issue. Then to center um...horizontally(after the rotation) the text we put a margin-left of 40% - at leat that looks good in Chrome, not exactly sure why it's not 50%. To center the text um...vertically(after the rotation) we just add a text-indent of -235px, which is dictated by the height chosen here to fit the text, which is 250px.
Related
Styled components claim to cover all of css but I've run into this simple but significant issue. I need to enlarge my line-height but in a relative way, otherwise the line gets cut (it's height is smalled than the letters).
When I try to use rem or % as unit, I get an error saying a number type is expected instead of a string.
line-height: 100% means 100% of the font size for that element, not 100% of its height. In fact, the line height is always relative to the font size, not the height, unless its value uses a unit of absolute length (px, pt, etc). another option which you can try is using table-cell
#wrapper{
height: 40px;
width:200px;
display: table-cell;
vertical-align: middle;
text-align: center;
background: red;
}
I am trying to position the control nav in flexslider 2 (the dots for each slide). Default is text-align:center. If you change to the left it positions to the left no problem. If you change to right then while it positions to the right it also shows text numbers of each slide over each dot.
How can I position this to the right WITHOUT the text numbers showing up? Furthermore, why are they showing up when aligned to the right?
You can see this happen out of the box in its default state by just changing the value to the below.
/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: 0px; text-align: right;}
I thought that changing the -9999px to a positive had worked for me, until I realized that it just pushed the text way off the screen. But you could still scroll to it. My fix, leave the text-indent at -9999px; and add
color: rgba(0, 0, 0, 0); .
The last 0 in this controls the alpha, and with it at 0, that makes the numbers completely invisible.
removing width allows positioning without the number issue
I had problems with this, removing the width doesn't work. Here is a solution that does work:
.flex-control-nav {
text-align: right;
}
.flex-control-paging li a {
text-indent: 9999px;
}
When aligning the control nav to the right, you need to change the text indent from negative -9999px to a positive 9999px.
Use this code to adjust the positioning without the numbers.
/* Control Nav */
.flex-control-nav {position: absolute; bottom: 25px; right: 20px;}
This is a very specific bug - however, I would love for someone to show me a workaround! The bug basically consists in IE10 failing to do CSS animation of background-position when these two conditions are met at the same time:
Having multiple backgrounds
Setting background-position in percent
Here's a demo, compare Chrome with IE10:
http://codepen.io/dalgard/pen/LiyIK
You need to put a percentage sign after the zeros.
It must be so:
#keyframes move {
0% { background-position: 0%, 0%; }
100% { background-position: 0%, 100%; }
}
I'm creating a card-flip effect using webkit transformations. I have it working as I like in one section, where I have a DIV that rotates around its center axis giving the look of a card that is flipping over.
I now want to add this same effect to a page transition. I'm using the same CSS and HTML structure, but in this case I'm not getting an effect that rotates around a center axis.
Instead, it looks like the transformation is rotating along the y axis anchored to the left of the object rather than the center (so it looks like a door opening, rather than a card flipping).
I've been reading through the spec's but can't figure out which property controls the rotation axis' position. What do I need to add or change with this to get the flip working?
html structure:
<div id="frontbackwrapper">
<div id="front"></div>
<div id="back"></div>
</div>
and the css (.flip is being added via jQuery to start the effect)
#frontbackwrapper {
position: absolute;
-webkit-perspective: 1000;
-webkit-transition-duration: 1s;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}
#frontbackwrapper.flip {
-webkit-transform: rotateY(180deg);
}
#frontbackwrapper.flip #front,
#frontbackwrapper.flip #back {
-webkit-transform: rotateY(180deg);
-webkit-transition: 1s;
}
#front, #back {
position: absolute;
-webkit-backface-visibility: hidden;
}
#back {
-webkit-transform: rotateY(180deg);
}
Try this on your wrapper
-webkit-transform-origin: 50% 0 0;
Though you may or may not have to have its width explicitly set.
Dear folks.
Imagine a sprite image called icons.png assigned to css class .icons with various 10x10px graphs. Now you want another class which scales up the sprite graphics exactly twice 200% (making them 20x20 pixels on the screen)
How do I achieve this enlargement purely in CSS?
Much appreciated!
.icons, .iconsbig{ /* WORKS FINE */
background-image:url(http://site.org/icons.png);
background-repeat:no-repeat;
vertical-align: middle;
display: block;
height:10px;
}
.iconsbig{ /* make this one twice as big as the original sprite */
background-repeat:no-repeat;
height:20px;
background-size: 20px auto;
image-rendering:-moz-crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
update:
problems with the above code:
It works in IE9, but not in FireFox, by most used browser doesnt know how to resize????
in IE9, the enlargement is smudgy and not neithrest neighbour pixel perfect at all??
It is supported in pretty much everything except for < IE9...
.iconsbig {
-moz-background-size: 20px;
background-size: 20px;
image-rendering:-moz-crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
W3C spec.
Update
Looks like Firefox wants its vendor prefix (-moz) on the property.
You can use the css3 background-size property:
.iconsbig {
background-image:url(http://site.org/icons.png);
background-size: 20px 20px;
}