how to prevent transformation of text inherited from a skewed parent
Tags: html,css,transformation
Problem :
Hie,i am trying to prevent the text inside a link from skewing together with the parent. here is how it looks
.one {
width:300px;
height:250px;
list-style:none;
color:#FFF;
}
.one li {
width: 115px;
height: 100px;
text-align:center;
display: inline-block;
-moz-transform: translate(0px, -1px) skew(0deg, -5deg);
-webkit-transform: translate(0px, -1px) skew(0deg, -5deg);
-o-transform: translate(0px, -1px) skew(0deg, -5deg);
-ms-transform: translate(0px, -1px) skew(0deg, -5deg);
transform: translate(0px, -1px) skew(0deg, -5deg);
background-color:rgba(239,82,85,1.00);
}
.one li a {
-moz-transform: translate(0px, 1px) skew(0deg, 5deg);
-webkit-transform: translate(0px, 1px) skew(0deg, 5deg);
-o-transform: translate(0px, 1px) skew(0deg, 5deg);
-ms-transform: translate(0px, 1px) skew(0deg, 5deg);
transform: translate(0px, 1px) skew(0deg, 5deg);
}<div class="one">
<ul>
<li>
<a href="#">this is the test</a>
</li>
<li>
<a href="#">this is the test</a>
</li>
</ul>
</div>I have read these articles from here with similar problem but seems mine is a bit different. Slant the top of a div using css without skewing text and Reset angle of text in skewed div using CSS. Please help me with the css
Solution :
CSS transforms don't work on inline elements in Webkit browsers (Safari and Chrome). Only "block" and "inline-block" elements can be transformed. (It's sort of like a bug, see https://bugs.webkit.org/show_bug.cgi?id=58965 )
As a workaround, you can add this:
.one li a { display:inline-block; }
Another option would be to add a wrapper div around the anchor element, and apply the transform on that.
CSS Howto..
From your question: I do not know of a way to make the spacing element take up all the remaining space, regardless of the width of the viewing window. This...
You can't. Sprites only work when you can limit the size of the element to the size of the section of the image you want to display. Use separate images....
You have to use position:fixed if you want for the sidebar to be fixed on some position: #sidebar { width: 180px; padding: 10px; position: fixed; top: 50px; bottom: 0; background:...
font[size="2"] { property: value !important; ... } The !important after property values is what you're looking for....
As mentioned in the comment, there is a good reason why you shouldn't be looking for such a tool - javascript. Even though, given selector might not exist in your...
Try setting the background on the .down div and giving it 100% width, and then creating the 'arrow' as an :after pseudo-element. #seperator { background: #34495E; height: 10px; left: 0;...
I'm assuming you're doing this in your theme. Make sure to do this for example to your custom.css, located in your theme's docroot/_diffs/css folder. AFAIK the import statements have to...
You can't do this only with CSS. You'll need Javascript because the selected option of your select is not a sibling of your input-box in the DOM : <select name="mySelect"...
You can set the background-size to 100% 100% to 'stretch' the image instead. Note. canIuse states that prefixes aren't needed for background-size properties. body { background: url(http://placekitten.com/g/300/300) no-repeat center center...
That's what iOS does to select boxes anyway, so just use a select element with some options in it, and it will be fine. Phew!
I found an answer but I dropped using <p:menubar> as well and instead chose a plain/vanilla HTML/CSS menu simply because <p:menubar> officially does not support clickable <p:submenu> inside it which...
Your styles task should depend on the less one to wait for its completion. Doing what you did will run the two tasks in parallel. You can specify an array...
With the following HTML: <div> <span>@someUserName</span> </div> And CSS: span { display: inline-block; position: relative; } span::after { position: absolute; top: 0; bottom: 0; right: 0; width: 3em; content: '';...
Looks like a bug where a pull request already exists https://github.com/angular/angular/pull/6768 i found a bug which is detachView method removing DOM before animateNodeLeave. ...
just like this: changeWidth($("#testbar"), '50%'); it does work for me....
.widget_content { height: 150px !important; /* Or however high you want the div to be */ } This will stop the div changing heights, which I assume is what you...
How do I put an image on top of an image without using absolute positioning? Like so... <div style="background: url(image.png) no-repeat"> <img src="image2.png" alt="" /> </div> ...
So, I got an idea to abuse CSS3 selectors a bit and it seems to be working, though I wonder how legit this is. document.querySelector('div[style*="order: 25;"]') Then to swap two...
I think you can get what you want with pure CSS. I've removed your last selector (using sibling) and pushed it up to the #2 cascade position and changed the...
Using inline SVG. Like this... http://bl.ocks.org/widged/4545199.
I would suggest to use CSS over jquery ( if possible) otherwise you can use something like this $("div.myclass").hover(function() { $(this).css("background-color","red") }); You can change your selector as per your...
I changed it. You can see the differences here : https://www.diffnow.com/?report=diqrj var container = document.getElementById('changeText'); var things = ['investors.','clients.', 'stakeholders.', 'students.', 'properties.']; var t = -1; var thing = '';...
If you number of levels inside .outer is known (or limited) you can extend selector like this: .outer > * > a, .outer > a:not(:last-of-type) { color: red; } <div...
As I said in the comment, you have to use different keyframes for each animation. Then you have full control over the delay between animation, the point is all the...
If you have a look in your layout file you'll see: NavBar::begin([ ... 'options' => [ 'class' => 'navbar-inverse navbar-fixed-top', ], ]); ... If you remove navbar-inverse the navbar bg-color...
You would use the same principles, but edit the style of the element. <div style="position: static;" id="ele"></div> and then: document.getElementById('ele').style.position = "absolute"; or for jQuery: $('#ele').css('position', 'absolute'); ...
Here is a working example of what you have requested: http://jsfiddle.net/ALLew/ In the example: all ULs are yelow items with class rtsULmenuLeft are red items with class rtsULmenuRight are blue...
I don't know p5 too much, but what you want is achievable without CSS at all : First, replace your p5 canvas with a Vanilla one. In your draw, proceed...
Inject the following CSS, which should force the browser to use the style: *{-webkit-text-size-adjust:0 !important} The !important flag causes the declaration to take the highest available precedence. Add the custom...
I stand to be corrected but I don't think you can set the color of the NATIVE title bar. I think what you are seeing in the google results are...