Any ideas on how to make the text appear 'inline'?
I made a polaroid photo effect on my portfolio, the rotate completely ruins the font, unsure if there is a fix.
rest assured, it's not so bad with my current font but other fonts look awful.
Code:
figure.polaroid {
width: 221px;
height: 240px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
background-color: white;
padding: 10px;
box-shadow: 1px 2px 10px black;
margin-top: 25px;
border-radius: 5px;
}
Let me guess, Chrome?
Try -webkit-backface-visibility: hidden;
I've read that some people avoid this issue by applying a 3d transform for rotation, such as transform: rotate3d(1, 2.0, 3.0, 10deg), so that might be a cleaner solution.
You should try to apply text-shadow to make font smooth.
Here you can try different shadows, pick a subtle one and check how it looks with your rotation:
http://www.elfboy.com/text-shadow/
Related
I want to create this dialog window in CSS:
The only way I managed to come close to this was to copy the dialog window several times, tilt it with transform: rotate(..) and play a bit with z-indexes.
Could this be achieved with borders or box shadows without having to copy the original dialog window? It doesn't have to literally be there three times, of course. It can just be an illusion.
I don't think you'd be able to do it with just borders, though you could use pseudo-elements to avoid actually having to copy the element and some Z transforms to achieve this:
#modal, #modal:before, #modal:after{
width: 500px;
height: 300px;
background: whitesmoke;
border-radius: 10px;
box-shadow: 0 0 5px 5px #eee;
content: " ";
position: absolute;
}
#modal:before{
transform: rotate(-3deg) translateZ(-1px);
}
#modal:after{
transform: rotate(-6deg) translateZ(-2px);
}
#modal{
transform-style: preserve-3d;
position: relative;
margin: 50px auto;
}
<div id='modal'></div>
This basically creates two pseudo-copies of your modal and pushes them behind the original with slightly different rotation.
I'm trying to create a CSS transition which gives the desired result in Chrome, but IE (10 and 11) and Firefox (41) differ (each gives a different result, but they all fail to display the border, see for yourself in the Codepen linked below):
<div class="box"></div>
.box {
width: 200px;
height: 200px;
background: green;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
transition: all 1s ease-out;
box-sizing:border-box;
border: 0px dotted green;
box-shadow:1px 1px 20px black;
}
.box:hover {
border: 99px dotted green;
background-color: red;
border-radius: 500px;
cursor: pointer;
transition: all 0.5s ease-out;
transform: rotate(2turn)
}
http://codepen.io/anon/pen/EVvrYx
Would you say this a bug in both IE and Firefox? Because the definition of border seems quite straight forward and consistent with the behavior in Chrome.
Yet both FF and IE show nothing at all in the final transition state.
(btw also fun effects if you hover over the edge of the figure in Firefox, not a bug though I guess but only occurs in FF)
To have a round div you set the border to 50% of the width/height, more might cause unpredictable result, which might explain the border differences.
If you change the border from 99px to 9px and set the border-radius to 100px it seems to work in IE/Edge/FF/Chrome equally, though the dotted border differs.
And according to this, Firefox has a border/radius bug, https://bugzilla.mozilla.org/show_bug.cgi?id=382721, where when you combine border-radius and dotted style, it shows a solid border instead of a dotted.
The Version of the browser might be the issue, I was using IE8 previously and telerik controls were not updated in it. Make sure you update your browser and check if you can see similar behavior.
I'm trying to create a border like /. I'm using following code. It displays fine in the Firefox, but display in opposite direction in the Chrome/Safari (starts from top and ends at right. How can I fix it?
.box {
width: 100px;
height: 100px;
border-left: 1px solid;
transform: skew(-45deg);
-webkit-transform: rotate(-45deg);
transform-origin: top left;
-webkit-transform-origin: top left;
}
JSFiddle:
http://jsfiddle.net/Lo3pjjrj/2/
You are using different transform functions (skew and rotate) for prefixed and unprefixed code. Use the same function, with only prefix as a difference. Also, it's recommended to write the unprefixed line after the prefixed one, since modern browsers may have both stable (preferred) and experimental implementations, and CSS applies the code that comes last.
Here:
.box {
transform: rotate(45deg);
/* add all applicable vendor prefixes here */
}
I really hope someone can help me with this one.
I have a shape that I'd like to have change background color when hovered over it. I've gotten it to work in all browsers, except Safari.
You can see it here: http://jsfiddle.net/bgLv6L9j/5/
I tried using the following code to make the hover work but it cuts off half the text. I tried adding the dimensions of the shape but that also makes it look wonky.
.shape:hover::before {
background-color: #245a85;
content: "";
position:absolute;
}
I've looked through various other topics with the same issue but can't seem to locate any Safari specific problems (or solutions for that matter).
I'd really appreciate it if someone could quickly take a look and see where I'm going wrong with regard to pseudo elements and getting the background hover to work in Safari.
If you do this:
.shape a {
position: absolute;
}
Instead of relative It seems that will fix the problem.
http://jsfiddle.net/bgLv6L9j/7/
Edit:
I rewrote it with a much simple code based on yours.
HTML
<a class="shape" href="#">Text</a>
CSS
.shape {
border: 2px solid crimson;
border-radius: 5px;
display: table-cell;
text-align: center;
vertical-align: middle;
width: 150px;
height: 75px;
-moz-transform: perspective(40em) rotatex(-45deg);
-ms-transform: perspective(40em) rotatex(-45deg);
-o-transform: perspective(40em) rotatex(-45deg);
-webkit-transform: perspective(40em) rotatex(-45deg);
transform: perspective(40em) rotatex(-45deg);
}
.shape:hover {
background: crimson;
}
That's it. http://jsfiddle.net/8sdqteke/
Have a client request for irregular corners in CSS. Is that even a thing? So far I had experimented with CSS triangles ( http://css-tricks.com/snippets/css/css-triangle/ ) but no bueno.
https://dl.dropbox.com/u/4031469/irreg.png
Thinking I'll probably have to do it with images sadly... unless y'alls know of any way to pull it off.
The main parameters: Needs to be at least flexible in height, preferably flexible in width too, but not required. Current solution: Top capper that extends potentially above the box enough to make the corner effect work on the secondary box... with the lower descender pieces right absolutely aligned pushing below.
My closest attempt so far (uses image for top): https://dl.dropbox.com/u/4031469/fs.html
Stealing from http://nicolasgallagher.com/pure-css-speech-bubbles/
http://jsfiddle.net/aBYHX/
EDIT :- Second attempt. Simpler, less css and on the same side as your example pic.
http://jsfiddle.net/aBYHX/1/
<div class="content">
<p class="triangle-isosceles">This only needs one HTML element.</p>
<p class="irregular-corner"> ---- </p>
</div>
Css:
.content
{
padding: 15px;
}
.triangle-isosceles, .irregular-corner
{
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c;
}
.triangle-isosceles:after {
content:"";
position:absolute;
bottom: 0;
right: 0;
border-width: 25px 50px 0 0;
border-style: solid;
border-color: transparent white;
/* reduce the damage in FF3.0 */
display:block;
}
.irregular-corner:before
{
content:"";
position:absolute;
top: -25px;
right: 0px;
border-width: 25px 50px 0 0;
border-style:solid;
border-color:transparent #f3961c;
/* reduce the damage in FF3.0 */
display:block;
}
Under CSS3, as far as I've researched, the particulars of this look make it not yet possible.
This look has a subtle gradient and inner glow, which we've accomplished using an inset box shadow... that seems to not work with the prior css triangle effects.
CSS Masks look like they might be able to assist in many circumstances, but in circumstances requiring box-shadow: inset, images are the only way to go.
Today I got this working using the -webkit-clip-path property, which has varying browser support.
.entry{
background-color: blue;
width: 500px;
height: 200px;
-webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 40%, 100% 100%, 0 100%);
-webkit-transform: translateY(-30px);
top: 10px;
left: 0;
}
body{
background-color: green;
}
http://codepen.io/randallb/pen/tmlAH
Nora Brown wrote a lovely article on the CSS3 border-image property. It's worth a quick read...
If you're worried about cross-browser support (and you should be), then offer a graceful fallback. Perhaps just having a border with no "crazy corners" would do as a fallback situation, perhaps not.
This method isn't cross-browser, but some find it nice to be "progressive".