The circle I'm making is not totally round, the sides seems to be cropped, when it's bigger than 18px or 10px it looks perfect. the problem seems to be between 10px and 18px. why is that?
Pug:
section.article-main-sidebar
.article-main-sidebar-breadcrumb
ul(class='breadcrumb-list circular-shape_color-category_'+one_badge)
li(class='breadcrumb-list-item1')
a(class= 'breadcrumb-list-item1-shape1')
span(class= 'text text1') text
SASS:
&:hover{
&::after{
content: '';
width:12px;
height: 12px;
left:9px;
top:4px;
position: absolute;
z-index: 20;
border-radius: 50%;
transform-origin: center;
animation: grow 0.2s ease-in-out;
}
}
Related
Webkit animation works fine in firefox, chrome, IE and opera but not correctly in safari. webkit animation not work fine in safari. why?
.t-ads {
margin: 10px auto;
text-align:center;
width: 125px;
height: 125px;
background: #41515a;
border-radius: 10px;
font-size:10px;color:#FFFFFF;
transition-property: width, height, transform, background,color, font-size, opacity;
transition-duration: 1s, 1s, 1s, 1s, 1s, 1s,1s;
}
.t-ads:hover {
margin: 10px auto;
text-align:center;
width: 125px;
height: 125px;
background: #3399FF;
font-size:20px;
color:#000000;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
You need to add -webkit-transform to the transition property list:
.t-ads {
margin: 10px auto;
text-align: center;
width: 125px;
height: 125px;
background: #41515a;
border-radius: 10px;
font-size: 10px;
color:#FFFFFF;
-webkit-transition-property: width, height, -webkit-transform, background, color, font-size, opacity;
transition-property: width, height, -webkit-transform, transform, background, color, font-size, opacity;
-webkit-transition-duration: 1s; /* Only one value needed if all are the same */
transition-duration: 1s;
}
.t-ads:hover {
background: #3399FF;
font-size: 20px;
color: #000000;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
As you seem to want to animate all the properties you change, you could simply specify all for the transition and -webkit-transition properties. For further brevity, use the shorthand syntax to specify all the transition properties at once:
.t-ads {
margin: 10px auto;
text-align: center;
width: 125px;
height: 125px;
background: #41515a;
border-radius: 10px;
font-size: 10px;
color:#FFFFFF;
-webkit-transition: all 1s;
-transition: all 1s;
}
Your original code worked in Firefox and Chrome because they support the unprefixed transform property. Incidentally, you don't need to redefine property values in the :hover state which don't change (you'll notice I've removed margin, text-align, width and height from the :hover block).
JSFiddle
I am getting a odd effect (currently in chrome). I have created my own overlay dialog box. which has a semi transparent background sitting on top of my website with a box on top of that. the top of the bar as you can see has a black background. The main part of the box is white thought.
Its not the easyist to see but it is annoying me.
The white is showing through from behind. (I know as if i change it to red it changes colour) Which you can see in the top right hand corner of the screenshots, just above the "X"
Both the header and the box has a border radius 3px
.blockUI .overlay {
background: #f00;
border-radius: 3px;
margin: 0 auto;
padding: 10px;
overflow: hidden;
position: relative;
top: 20%;
text-align: inherit;
width: 600px;
z-index: 10009;
}
blockUI .overlay h1 {
background: #000;
border-bottom: 2px solid #F48421;
border-radius: 3px 3px 0 0;
color: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: -10px;
padding: 10px;
}
Since overflow: hidden; along with border-radius seems to cause some rendering inconsistencies in some engines (take a look at this), one should use border-radius on both the parent and the child elements to achieve rounded corners.
As you have noticed, you still get some wierd results with extra pixels "shining" through. Just reduce the border-radius of the child (or the other way round) to compensate this.
blockUI .overlay h1 {
border-radius: 2px 2px 0 0;
}
I had same problem. But I solved.
.blockUI .overlay {background:#000;}
and remake some!
You should try on the parent div:
-webkit-background-clip: padding-box;
Finally fixed this completely by adding this on parent and child divs.
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
outline:none;
border:none;
text-decoration:none;
As you can see here (fiddle), a is the parent and is set to overflow: hidden;. span is the child and has box-shadow set. When nothing happens, everything goes well, but when a user hovers the a, its overflow property seems to get overwritten (i.e. the shadow is shown in a square, rather than a circle, as it should). Any idea how to solve this?
Code:
HTML
<span>Hover me</span>
CSS
a {
overflow: hidden;
width: 52px;
height: 52px;
top: 0;
display: block;
position: relative;
margin: 50px;
background: red;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
border-radius: 200px;
opacity: 0.6;
}
a:hover {
opacity: 1;
top: -8px;
}
a > span {
width: 100%;
height: 100%;
display: block;
box-shadow: inset 0 -35px 10px rgba(0,0,0,0.8);
}
a:hover > span {
box-shadow: inset 0 -28px 10px rgba(0,0,0,0.8);
}
your question is not understable but try this if it can help you then....
a {
overflow: hidden;
width: 52px;
height: 52px;
top: 0;
display: block;
position: relative;
margin: 50px;
background: red;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
border-radius: 200px;
opacity: 0.6;
}
a:hover {
overflow: hidden;
opacity: 1;
}
a > span {
overflow: hidden;
width: 100%;
height: 100%;
display: block;
box-shadow: inset 0 -35px 10px rgba(0,0,0,0.8);
}
a:hover > span {
overflow: hidden;
box-shadow: inset 0 -28px 10px rgba(0,0,0,0.8);
}
Trying to have a css3 ease transition work on border radius of an image in Safari.
It just kinda blinks into the hover state instead of smooth transition.
Any help is much appreciated. My code is below:
CSS:
.all a:hover img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
-webkit-filter: grayscale(0%);
}
.all a img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 50%;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
.all a img {
-moz-transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.all a img {
-webkit-filter: grayscale(100%);
transition: border-radius .3s ease;
-moz-transition: -moz-border-radius .3s ease,border-radius .3s ease;
-webkit-transition: -webkit-border-radius .3s ease,border-radius .3s ease;
}
HTML:
<ul class="thumbs">
<li class="all identity">
<img src="https://imjoeybrennan.com/images/logos_t.jpg" alt="Logos"/>
</li>
</ul>
Link to the site:
https://imjoeybrennan.com
The following applied to the parent element with the border radius applied to kick webkit back into line for me:
-webkit-mask-image: -webkit-radial-gradient(white, black);
Another option is to wrap the element in two border radius parents.
Seems hacky to me, but far better than the double wrap option – interested to hear other solutions.
This is a simple fix, Safari does not support the transition from pixels to percentages. If you change your hover styles from 50% to 100px you will see that your transitions will work smoothly.
.all a:hover img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px
border-radius: 100px;
}
You may want to set them to any value that is double the height and width of your images to ensure they will always be rounded when hovered.
Ok, so I have an empty <span> that is nested in side my <li>'s of an unordered list. The span holds a background image that is supposed to appear on :hover. The problem is that while the animation is transitioning, the z-index is wrong, the <span> stacks itself in front of the <a> element which precedes it in the DOM. As soon as the animation completes, however, the stacking order corrects itself. The result is a visual sudden "snap" of the effect and also the link becomes unclickable for the duration of the CSS3 transition.
Can anyone break down what is happening at the DOM level? How can I fix this?
You can see a working example that demonstrates the issue here: http://jsfiddle.net/qZkfw/1/
My HTML
<div id="nav">
<ul id="nav-main">
<li>Home<span></span></li>
<li>About<span></span></li>
<li>Get Fit<span></span>
<ul class="nav-secondary">
<li>Exercise Library</li>
<li>Find An Instructor</li>
<li>Fitness Tools</li>
</ul>
</li>
<li>Find An Instructor<span></span></li>
<li>Get Certified<span></span></li>
</ul>
</div>
my CSS
#nav-main li {
margin:0;
padding:5px;
position: relative;
display: block;
float: left;
margin-left: 10px;
}
#nav-main li a {
color: #97dd6e;
font-size: 1.1em;
text-decoration: none;
text-align: center;
margin-right: -7px;
line-height: 19px;
z-index: 99;
}
#nav-main li span {
height: 28px;
background: transparent url('/images/application/bg_nav_active_repeat.png') repeat-x top center;
display: block;
margin: -22px -5px 0 2px;
padding: 3px 0 0 0;
z-index: 98;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#nav-main li:hover span {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#nav-main li span:before, #nav-main li span:after {
content: '';
height: 28px;
width: 7px;
display: block;
background: transparent url('/images/application/bg_nav_active_before.png') no-repeat left top;
position: absolute;
top: 2px;
left: 0;
z-index: 999;
}
#nav-main li span:after {
background: transparent url('/images/application/bg_nav_active_after.png') no-repeat right top;
left: 100%;
}
Add position:relative; z-index: -1; to #nav-main li span.
Updated jsfiddle.
Edit:
I figured it out.
Static elements do not obey z-index, so you need to add position:relative; to #nav-main li a.
Updated jsfiddle.