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..
Not sure I fully understand what you are trying to accomplish without seeing your HTML, but assuming the simplest case this should work. First ad an id attribute to your...
You have to apply the corresponding CSS class: <div class="ui-icon ui-icon-plus"></div> Assuming that you have the correct jQuery UI .css file with those classes defined. If you look at the...
To any interested parties, this seems to sum everything up: http://msdn.microsoft.com/en-us/library/aa338201(office.12).aspx
This works fine, have a look here #horizontal-style li { display: table-cell; vertical-align:middle; height:auto; padding:1%; background:#ebebec; } #horizontal-style li:hover{ background-color:#acce39; } ...
You would not be able to achieve it using from and to in animations but you can use the percentage option like below: @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg);...
You missed this. #gateway { float: left; } ...
Try #box-out{ width:300px; height:400px; border:1px solid black; position: relative; } #box-in{ width:300px; height:100px; background:red; position:absolute; bottom:0; } Demo: Fiddle...
I would suggest you wrap it all in a wrapper div which is centered and has position relative. Then you can position the controls absolute like this: <div class="wrapper" style="margin:...
This was a nasty one. After all I discovered that the application is using sitemesh and uses the <s:head> tag in the final jsp. This means the first 3 CSS...
You cannot edit the file itself. However, you can override styles a number of ways. Create a new style element with the required rules and append to the document. (Example)...
You can modify your script like this: $('#compositingWork').click(function(){ $(this).addClass('active'); $('#portfolioWork').load('portfolioContent.html #PortfolioCompositing'); }); and add this to css: .active { background: url("Images/Nav_Underline.png") repeat-x; background-position: center bottom; } upd. but the easier...
According to the jQuery documentation the hidden selector can return true for any of the following cases They have a CSS display value of none. They are form elements with...
OK, so here's the solution. Go to the GWT Theme Generator choose the color you want choose a name for your style click generate take the jar file it produces,...
Unfortunately currently Stylus doesn't support interpolation inside strings. You should use concatenation in this case: $as-font-path = '../assets/fonts/'; @font-face { font-family: 'FontAwesome'; src: url($as-font-path + 'fontawesome-webfont.eot?v=4.3.0'); } ...
Simply removing the display:inline-block; seems to fix this issue: a.some-link:before { font-family: icons; padding-right: 0.3em; content: 'x'; } JSFiddle. Unfortunately, you need "display: inline-block" to show SVG. Simple solution is...
I believe I found a pure CSS solution that might work for you. From what I understand, you the Parent Div container and a random number of child divs that...
You could ng-class in your case, maintain a scope variable which will used in ng-class expression, there is no need to use jQuery while you have directive like ng-class which...
If you look at the docs explaining the Foundation grid they already use the box-sizing: border-box star hack Since the .row containing your block-gridhas a set max-width of 100% it's...
This is what I could find for you: Using the "chopping" approach you suggested: http://trentrichardson.com/examples/csstooltips/ More examples of tooltips (some are just css and don't use images so you would...
Try this: index.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body ng-app="myApp"> <div ng-controller="newcontroller"> <div ng-class="[myclass]">welcome</div> <button ng-click="newfunction()">click</button>...
To center the element you just add margin:0 to the #squaresWaveG #squaresWaveG{ position:relative; width:240px; height:29px; margin:0 auto; } here is jsfiddle...
Use this. Add all of the code to the bottom of your css page. [ /* Based on: 1. http://stephen.io/mediaqueries 2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */ /* iPhone 6 in portrait & landscape...
Depends how you want to display the item. You could use display: block, or display: initial if you want to display the divs initial state. More display options found here...
You could either use border (which is certainly the obvious choice), but there's also padding and box-shadow: img { background-color: #fff; padding: 4px; } JS Fiddle demo. In this example...
Checkout the JSEnhancements add-on for VS.NET it will let you use #region in css and js. For a list of js and css enhancements in vs.net please read this.
What about a custom styled wrapper? HTML: <div class="select-wrapper"> <select> <option value="" disabled selected>Select your option</option> <option>First option</option> <option>Second really really really long option</option> </select> </div> SCSS:...
your <p> tags in the post-body divs have a top and bottom margin of 1em. that's why there's a lot of space in there. take those out .post-body p {...
This can be achieved easy with jQuery: jQuery: $(document).ready(function(){ var list = $('ul.col_selector_container'); list.css({'min-height':list.parent().height(), 'max-height':list.parent().height()}); $(window).resize(function(){ list.css({'min-height':list.parent().height(),...
Your problem is that you've got css transitions on these affects. Check out line 67 of your style.css file: a, button, .owl-buttons div { -webkit-transition: all .1s ease-in-out; -moz-transition: all...
not sure if this is what you want. $(document).ready(function() { $('li').click(function() { $(this).find('ul').toggleClass('visible'); }); }); But it works for me...