I'm getting some issues trying to use the transform scale CSS property.
Here's my CSS on hover:
#pricing-table .pricing-column:not(.labels):hover {
position: relative;
z-index: 50;
-webkit-transform: scale(1.02);
-moz-transform: scale(1.02);
-ms-transform: scale(1.02);
-o-transform: scale(1.02);
transform: scale(1.02);
-webkit-box-shadow: 0 0 3px rgba(1, 1, 1, 0.3);
-moz-box-shadow: 0 0 3px rgba(1, 1, 1, 0.3);
box-shadow: 0 0 3px rgba(1, 1, 1, 0.3); }
Here's the result, note the weird grey border on some of the list items:
Screenshot of issue
I've had similar issues with chrome and CSS3 transforms before and have never been able to figure out how to solve them. Would appreciate any insight! Thanks
Here's the live demo:
Demo Link
U can try to add borders. I checked your code and this worked.
#pricing-table .pricing-column:not(.labels) li,
#pricing-table .pricing-column:not(.labels):hover li {
border: 1px solid #FFF;
}
U can use nth child to remove it from first li if that bothers u.
#pricing-table .pricing-column:not(.labels):hover li:first-of-type {
border: none;
}
Related
So to my understanding, using css, animations are activated on view? So when you load the page for the first time, you see the animation play out. However if you wanted to place another animation sequence further down the page (not in the viewport when the page loads), is it possible to have an animation with keyframes play out as you scroll down and see the element for the first time?
This code works on the landing section of the page:
#playing {
padding: 0.1em 1em 0em 0.1em;
font-size: 6em;
font-weight: bolder;
font-family: 'Libre Barcode 39 Text';
color: rgb(255, 255, 255);
-webkit-text-stroke: 2px;
-webkit-text-stroke-color: rgb(109, 4, 4);
background: linear-gradient(90deg, rgba(0,0,0,0.8),rgba(255,2,2,0.4), rgba(255,255,255,0.6), rgba(255,255,255,0.8));
animation: fadeInAnimationfour ease 2.1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeInAnimationfour {
0% {
opacity: 0;
-webkit-text-stroke: 0px;
}
90% {
opacity: 0.2;
-webkit-text-stroke: 0px;
}
100% {
opacity: 1;
box-shadow: 12px 0 15px -4px rgba(255, 255, 255, 1), -12px 0 8px -4px rgba(0, 0, 2, 1);
}
Yet further down the page, the same code doesn't work. Both id's given to elements within a div.
Any ideas very much appreciated!
I've been trying to scale a div, but not the content for a long time now. I've looked at examples and saw ways it was supposed to work, but it seems like it might be impossible to make it work :( the problem is that the image inside the div becomes blurry on scale. (on hover.)
Here's my codepen link
http://codepen.io/SusanneLundblad/pen/5cf90a3d7b3e2f592ebcb0ebb9d07bf9
.child
position: absolute
height: 450px
width: 20%
background-color: #1f2733
border-radius: 0
background-position: 50% 50%
background-size: cover
-webkit-transform: translate3d(0,0,0)
top: 0
overflow: hidden
z-index: 0
transition: all 0.05s ease-in-out
transform: translate3d(0,0,0)
&:hover
transform: scale(1.03)
z-index: 2
border-radius: 4px
cursor: pointer
box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5)
.child__content
transform: translate(-50%,-50%) scale(.947)
thank you for any help
I'm trying to have jQueryUI's draggable on my element:
html:
<div class="draggable"></div>
js:
$('.draggable').draggable();
Until now everything works ok, but when I add css material design styles:
.draggable {
position: absolute;
width: 100px;
height: 50px;
background-color: red;
-webkit-transition: all 250ms;
-moz-transition: all 250ms;
transition: all 250ms;
}
.draggable:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-webkit-transform: translateY(-2px);
-moz-transform: translateY(-2px);
transform: translateY(-2px);
}
div element starts to work in a wrong way - it is locking every some time.
Here's plunker: http://plnkr.co/edit/ovElSXyYHCioitcIcup9?p=preview
I found solution thanks to Tom suggestion:
var memo;
$('.draggable').draggable({
start: function() {
memo = $(this).css('transition');
$(this).css('transition', 'none');
},
stop: function() {
$(this).css('transition', memo);
}
});
Plunker: http://plnkr.co/edit/ovElSXyYHCioitcIcup9?p=preview
My guess is that it needs both the start and end point to do a transition so it is only displayed when it thinks the movement has finished.
I know this isn't an answer but I can't comment yet, sorry.
I have a fixed navbar that I am giving a drop shadow effect. That works fine, however it seems to also be affecting all the text inside and makes the font weight appear slimmer.
How can I make it stop changing the font?
http://jsfiddle.net/dvY4A/1/
HTML
<nav id="nav1" class="dropshadow">Hello World</nav>
<button>toggle drop shadow</button>
CSS
#nav1 {
position:fixed;
width:100%;
font-size:20px;
top: 0;
left: 0;
min-height:20px;
background:white;
}
button {
margin-top:50px;
}
.dropshadow {
-moz-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 6px 0px rgba(0, 0, 0, 0.1);
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
}
I've found the answer and it involves some issues at the operating system level.
I've updated the solution here: http://jsfiddle.net/dvY4A/5/
All it took was adding the property -webkit-font-smoothing: antialiased; to the #nav1 block.
More details about it can be found here: http://lists.w3.org/Archives/Public/www-style/2012Oct/0014.html
But basically, there are two rendering modes for text, grayscale and subpixel-antialiased. For technical reasons, the browser tries to switch between the two during certain operations like hardware acceleration, which the box-shadow must be using.
I'm still using my workaround just in case but I may set this property at some point.
Here is an image I created of a board with a shadow behind it. The board is supposed to be leaning against a wall so the shadow is in a triangular shape on both sides.
Is it possible to create a shadow like this using only CSS? Also, if possible, is the method cross-browser compatible?
Is it possible to create a shadow like this using only CSS?
Yes, using pseudoelements, box shadows, and 2D transformations – specifically, a rotation. An example is at the end of this answer.
Is the method cross-browser compatible?
Sort of. The ideal code isn't fully compatible with older versions of IE. To get that support, you'll need to make some compromises, which I'll list below:
Here's the support breakdown:
:before and :after – IE8+ only. For deeper support, you could replace these with less-semantic div elements.
rotation – IE6+ with IE-specific rules; a reference that shows these rules is in the note at the end of the example
box-shadow – IE9+ To make these shadow work in IE6+, you could use CSSPie.
Example of the ideal code
Here's a very quick example to get you started.
<div id="board">
Place image here!
</div>
CSS
#board {
position: absolute;
left: 50px;
top: 50px;
background: #e5e5e5;
text-align: center;
width: 100px;
height: 100px;
}
#board:before {
z-index: -1;
position: absolute;
content: "";
bottom: 0;
left: 5px;
width: 5px;
height: 50%;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: -5px 0 10px rgba(0,0,0, 0.7);
-moz-box-shadow: -5px 0 10px rgba(0, 0, 0, 0.7);
box-shadow: -5px 0 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-o-transform: rotate(6deg);
-ms-transform: rotate(6deg);
transform: rotate(6deg);
}
#board:after {
z-index: -1;
position: absolute;
content: "";
bottom: 0;
right: 5px;
width: 5px;
height: 50%;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 5px 0 10px rgba(0,0,0, 0.7);
-moz-box-shadow: 5px 0 10px rgba(0, 0, 0, 0.7);
box-shadow: 5px 0 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
transform: rotate(-6deg);
}
Where should I go from here?
You'll want to implement the syntax for rotations in early IEs, or use a Javascript library to add the support, both of which can be read about over here.
You might also want the shadows to cut off like they do in your image. This could be done by covering up the part of the shadow that sticks out with an element that's beneath it.
I also threw that together pretty quickly, so you might want to adjust it to get the shadows looking just like how you want them.