We Keep Coding

Blurryt text by transform: Rotate in Chrome

I have a list Hexagons In my web page like this
I had to use transform:rotate to have a correct text in it but in chrome text is Blurry ,in Mozilla it shows correctly
I searched a lot but there were no exact way.
I used this article to make these hexagons
http://www.queness.com/resources/html/css3-hexagon/index.html
and this is my html
<div class="hex hex-3">
<div class="inner">
<h4>Energy</h4>
<hr />
<p>
</p>
</div>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
and some part of css which I used transform:rotate in it
.hex {
transform: rotate(30deg);
-webkit-transform:rotate(30deg);
}
.inner {
transform: rotate(-30deg);
-webkit-transform:rotate(-30deg);
}
.hex .corner-1 {
z-index: -1;
transform: rotate(60deg);
}
.hex .corner-2 {
transform: rotate(-60deg);
}
.hex .corner-1:before {
transform: rotate(-60deg) translate(-87px, 0px);
transform-origin: 0 0;
}
.hex .corner-2:before {
transform: rotate(60deg) translate(-48px, -11px);
bottom: 0;
}
any idea how to fix it?

Have been busy and it took me a while to find out but following css solves the issue:
.hex .corner-1,
.hex .corner-2,
.hex .corner-1:before,
.hex .corner-2:before {
backface-visibility: inherit !important;
}
I was just having a similiar issue with a project that had a skewY tranform and found the bug while working on that, though in my project it was caused by a unnecessary rotateZ(0) transform.

CSS pseudo elements in React

I'm building React components. I have added CSS inline in the components as suggested in this brilliant presentation by one of the people behind React. I've been trying all night to find a way to add CSS pseudo classes inline, like on the slide titled "::after" in the presentation. Unfortunately, I do not just need to add the content:""; property, but also position:absolute; -webkit-filter: blur(10px) saturate(2);. The slides show how to add content through {/* … */}, but how would you add other properties?

Got a reply from #Vjeux over at the React team:
Normal HTML/CSS:
<div class="something"><span>Something</span></div>
<style>
.something::after {
content: '';
position: absolute;
-webkit-filter: blur(10px) saturate(2);
}
</style>
React with inline style:
render: function() {
return (
<div>
<span>Something</span>
<div style={{position: 'absolute', WebkitFilter: 'blur(10px) saturate(2)'}} />
</div>
);
},
The trick is that instead of using ::after in CSS in order to create a new element, you should instead create a new element via React. If you don't want to have to add this element everywhere, then make a component that does it for you.
For special attributes like -webkit-filter, the way to encode them is by removing dashes - and capitalizing the next letter. So it turns into WebkitFilter. Note that doing {'-webkit-filter': ...} should also work.

Inline styles cannot be used to target pseudo-classes or pseudo-elements. You need to use a stylesheet.
If you want to generate CSS dynamically, then the easiest way is to create a DOM element <style>.
<style dangerouslySetInnerHTML={{
__html: [
'.my-special-div:after {',
' content: "Hello";',
' position: absolute',
'}'
].join('\n')
}}>
</style>
<div className='my-special-div'></div>

Depending if you only need a couple attributes to be styled inline you can do something like this solution (and saves you from having to install a special package or create an extra element):
https://stackoverflow.com/a/42000085
<span class="something" datacustomattribute="👋">
Hello
</span>
.something::before {
content: attr(datascustomattribute);
position: absolute;
}
Note that the datacustomattribute must start with data and be all lowercase to satisfy React.

Inline styling does not support pseudos or at-rules (e.g., #media). Recommendations range from reimplement CSS features in JavaScript for CSS states like :hover via onMouseEnter and onMouseLeave to using more elements to reproduce pseudo-elements like :after and :before to just use an external stylesheet.
Personally dislike all of those solutions. Reimplementing CSS features via JavaScript does not scale well -- neither does adding superfluous markup.
Imagine a large team wherein each developer is recreating CSS features like :hover. Each developer will do it differently, as teams grow in size, if it can be done, it will be done. Fact is with JavaScript there are about n ways to reimplement CSS features, and over time you can bet on every one of those ways being implemented with the end result being spaghetti code.
So what to do? Use CSS. Granted you asked about inline styling going to assume you're likely in the CSS-in-JS camp (me too!). Have found colocating HTML and CSS to be as valuable as colocating JS and HTML, lots of folks just don't realise it yet (JS-HTML colocation had lots of resistance too at first).
Made a solution in this space called Style It that simply lets your write plaintext CSS in your React components. No need to waste cycles reinventing CSS in JS. Right tool for the right job, here is an example using :after:
npm install style-it --save
Functional Syntax (JSFIDDLE)
import React from 'react';
import Style from 'style-it';
class Intro extends React.Component {
render() {
return Style.it(`
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
`,
<div id="heart" />
);
}
}
export default Intro;
JSX Syntax (JSFIDDLE)
import React from 'react';
import Style from 'style-it';
class Intro extends React.Component {
render() {
return (
<Style>
{`
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
`}
<div id="heart" />
</Style>
}
}
export default Intro;
Heart example pulled from CSS-Tricks

You can use styled components.
Install it with npm i styled-components
import React from 'react';
import styled from 'styled-components';
const ComponentWithPseudoClass = styled.div`
height: 50px;
position: relative;
&:after {
// whatever you want with normal CSS syntax. Here, a custom orange line as example
content: '';
width: 60px;
height: 4px;
background: orange
position: absolute;
bottom: 0;
left: 0;
}
`;
const YourComponent = props => {
return (
<ComponentWithPseudoClass>...</ComponentWithPseudoClass>
)
}
export default YourComponent

I don't know if this would be considered hacky but it certainly works (using CSS variable):
const passedInlineStyle = { '--color':'blue'}
Then in an imported CSS file:
background:var(--color);

The easiest trick is to add '""' instead of '' in the content property for the pseudo-element.
const styles = {
container: {
// ... Container styling
'&::after': {
display: 'block',
content: '""'
}
}
};

Not a direct answer to the question, but this may help those who are having trouble creating style information using Typescript.
I was getting an error telling me that the following was incorrect:
let iconStyle = {
position: 'relative',
maxHeight: '90px',
top: '25%',
}
The error told me that "types of property 'position' are incompatible". I have no idea why.
I fixed this by adding a strict Typescript declaration, like so:
let iconStyle: CSSProperties = {
position: 'relative',
maxHeight: '90px',
top: '25%',
}
This works.

Flip text with javascript

I had a button that rotated text along the Y axis , giving it a mirrored look. This no longer works for some reason because the button has been placed on the child (popup) and the text to be mirrored is on the parent.
Is there a javascript function i could use to rotate the text on the parent when a button is clicked / rotate it back when its clicked again. (preferably a toggle switch)
This is what I originally had when it was only one the parent page:
HTML link :
<li><a class="button small icon-text-height flipx" href="#" onclick="return false;"></a></li>
The CSS for the div with the text:
article .teleprompter
{
padding: 300px 50px 1000px 100px;
font-size: 30px !important;
line-height: 86px;
z-index: 1;
background-color: #141414;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
The CSS for the flipx part:
article .teleprompter.flipx
{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
z-index: 1;
pointer-events: none;
padding: 300px 50px 1000px 100px !important;
}
JS I Think should work:
<script>
function flipTXT(color)
{
if (parent_window && !parent_window.closed) {
parent_window.document.getElementById("teleprompter").style['-webkit-transform'] = rotateY(180deg);
}
}
</script>

I think one of the two solutions seen in the code at Bin below may work for you:
http://jsbin.com/buqexusamuda/1/
HTML
<p>Card: Flip</p>
<div class="card" href="#">Hello</div>
<p>Card 2: Mirror</p>
<div class="card card2" href="#">Hello</div>
CSS
.card, .card2 {
position: relative;
animation: all 2.5s;
perspective: 1000;
transition: 0.6s;
transform-style: preserve-3d;
width: 90px;
height: 32px;
text-align: center;
line-height: 32px;
z-index: 1;
background-color: #ccc;
color: #666;
}
.card2 { transform-origin: right center; }
.card.flip { transform: rotateY(180deg); }
SCRIPT
jQuery(".card").click(function(){
$(this).toggleClass("flip");
});

The simplest solution would be to use jQuery to add/remove the classes. If you can include jQuery, then you can do something along these lines:
<script>
$(document).ready(function(){
//Since the text is on the parent, you need to access it.
var parentWindow = window.opener;
//This gets the parent's DOM so you can grab the text from the parent window.
var parentDom = parentWindow.document;
//This grabs the text you want to transform.
var targetText = parentDom.getElementsByClassName("teleprompter");
//This toggles the class
$(".button").on('click', function(){
$(targetText).toggleClass("flipx");
});
});
</script>
I used a combination of jQuery and regular javascript so you don't have to roll your own code to add/remove and check for classes.
Here's the code to include jQuery in your page in case you don't have it handy:
This one will work with older non-HTML 5 compliant browsers and modern browsers.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
This one will only work with more modern browsers:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

JS/CSS: Moving span in an animated way

First post here. Hope you can help me out with a problem I'm having:
I am writing a game, where a user needs to guess a word from shuffled letters by clicking on each letter to insert it in the first empty space of a "correct" field.
Now, when a letter is clicked, it needs to move to its new spot in an animated way. As I'm using span to create a separate field for each letter I couldn't figure out how to make this span move to its new location in an animated way using CCS3/JavaScript/JQuery.
The code is in JSFiddle here: http://jsfiddle.net/Pfsqu/
JS:
var randomNumber = Math.floor(Math.random() * words.length);
var word = words[randomNumber];
var chars = word.split('');
chars=_.shuffle(chars);
for (var i in chars) {
$('#shuffled').append('<span>'+chars[i]+'</span>');
$('#correct').append('<span>');
}
$('#shuffled > span').click(function() {
var letter = $(this);
letter.replaceWith('<span>');
$('#correct > span:empty').first().append( letter ); /* this part needs to be animated*/
CSS:
p > span{
background-color: white;
margin: 10px;
-webkit-border-radius: 15px;
border-radius: 15px;
width: 2.5em;
height: 2.5em;
display: inline-block;
text-align: center;
line-height: 2.5em;
vertical-align: middle;
animation: 1000ms move ease-in-out;
-webkit-animation: 1000ms move ease-in-out;
}

I think that it is quite difficult to animate the items the way that you are intending.
The way I would solve it would be keeping the same DOM element, and changing its properties.
For instance, see this
demo
The HTML is
<div class="solution">
<span class="q q4">W</span>
<span class="q q2">O</span>
<span class="q q3">R</span>
<span class="q q1">D</span>
</div>
I have set the letters of WORD in order, and then I have set to them one of the classes q1 to q4. This class will set the span to a specific position on screen.
This is achieved in this CSS (and also the position for the "solved" status
.solution {
margin-top: 100px;
-webkit-transition: all 5s;
position: relative;
}
.solution span {
border: solid 1px green;
padding: 10px;
margin-top: 80px;
-webkit-transition: all 2s;
position: absolute;
background-color: lightgreen;
font-size: 30px;
}
.solution span:nth-child(1) {
-webkit-transform: translate(0px, 0px) rotate(0deg);
}
.solution span:nth-child(2) {
-webkit-transform: translate(80px, 0px) rotate(0deg);
}
.solution span:nth-child(3) {
-webkit-transform: translate(160px, 0px) rotate(0deg);
}
.solution span:nth-child(4) {
-webkit-transform: translate(240px, 0px) rotate(0deg);
}
div.solution span.q {
background-color: yellow !important;
border: solid 1px red;
border-radius: 50%;
}
.solution .q.q1 {
-webkit-transform: translate(0px, -100px) rotate(360deg);
}
.solution .q.q2 {
-webkit-transform: translate(80px, -100px) rotate(360deg);
}
.solution .q.q3 {
-webkit-transform: translate(160px, -100px) rotate(360deg);
}
.solution .q.q4 {
-webkit-transform: translate(240px, -100px) rotate(360deg);
}
Now the jQuery is very easy
$('.q').click(function(){
$(this).removeClass('q');
});
I have used the webkit prefixes, but you can easily set it to work for others browsers
Edited answer:
Changing the nth-child styles to:
.answer1 {
-webkit-transform: translate(0px, 0px) rotate(0deg);
}
.answer2 {
-webkit-transform: translate(80px, 0px) rotate(0deg);
}
.answer3 {
-webkit-transform: translate(160px, 0px) rotate(0deg);
}
.answer4 {
-webkit-transform: translate(240px, 0px) rotate(0deg);
}
and the script to:
var element = 1;
$('.q').click(function(){
$(this).removeClass('q').addClass("answer" + element);
element = element + 1;
});
You got, as per your request, that the letters go to the first available place.
The only remining task is to construct the spans from the array of letters.
I think that you have already some code that does quite a similar job; it's only a matter of adapting it.
updated demo

How to "comment out" CSS code from JavaScript?

Obviously one can't actually comment out the code, but, how, from JavaScript, do I make the following piece of CSS seems as if it were commented out? How do I uncomment it after?
.box:hover div.innercontent {
-webkit-transform: perspective(3000) translateZ(200px);
-moz-transform: scale(1.1);
-moz-perspective: 3000px;
transform: perspective(3000) translateZ(200px) ;
z-index: 90;
box-shadow:0 0 35px 5px black;
}
.box:hover div.innerlabel {
-webkit-transform: perspective(500) rotateX(5deg) translateZ(60px);
-moz-transform: rotateX(5deg) scale(1.1);
-moz-perspective: 500px;
transform: perspective(500) rotateX(5deg) translateZ(60px);
box-shadow:0 0 20px 8px white;
z-index: 100;
}
.box:hover div.labelwrapper {
z-index: 100;
}
Thanks

Remove the css class from the elements.
You can either use jQuery or this other stackoverflow question to accomplish this.

If the CSS makes up the entirity of a CSS file, you can set the disabled attribute on the <link/> element to disable all the styles defined in it. This is probably the easiest way, especially when dealing with :hover styles.

I'll show you how to do one and you can use the same technique for the others:
$(".innercontent")
.addClass('.innercontent-dummy')
.removeClass('.innercontent');
Then to restore
$(".innercontent-dummy")
.addClass('.innercontent')
.removeClass('.innercontent-dummy');
The 'dummy' class doesn't have to have any formatting; you just need it as a placeholder to find the element if you want to restore the original class.

I use a modifier class, like "active," to toggle the on-off state of elements. Bootstrap does this with menus and other elements as well.
For example:
CSS:
.box.active:hover div.innercontent {
-webkit-transform: perspective(3000) translateZ(200px);
-moz-transform: scale(1.1);
-moz-perspective: 3000px;
transform: perspective(3000) translateZ(200px) ;
z-index: 90;
box-shadow:0 0 35px 5px black;
}
.box.active:hover div.innerlabel {
-webkit-transform: perspective(500) rotateX(5deg) translateZ(60px);
-moz-transform: rotateX(5deg) scale(1.1);
-moz-perspective: 500px;
transform: perspective(500) rotateX(5deg) translateZ(60px);
box-shadow:0 0 20px 8px white;
z-index: 100;
}
.box.active:hover div.labelwrapper {
z-index: 100;
}
JavaScript:
$('.box').toggleClass('active');