mercredi 22 avril 2015

CSS text appears blurry when translated or scaled in webkit browsers

I've been trying to do a menu with transform: translate(-1px, -1px); in the hover state, here is an example.

But in Chrome when the text is translating it appears blurry which is not very pleasant to see, is there a way to fix this?

how to pass context value to css

i have to add background image for my webpage, so i have added below code css for body

body {
    font-family: Verdana, Geneva, sans-serif;
    font-weight: 400;
    color: #666;
    font-size: 12px !important;
    line-height: 20px;
    background-image: url(../resources/img/background_img.jpg);
}

but i have to add background-image as

url(${context}/resources/img/background_img.jpg);

, where context will be passed from jsp (instead of absolute path). put conext param doesnt work, is there any alternative way or am i doing wrongly. Need help

mardi 21 avril 2015

Get visible text in CSS3 columns

Trying to make a method which can read the current visible text inside of a element. The method you see below is as far as i've gotten the past few days.

Is there anything more reliable for getting the visible text in a element other than using a caret/range? Cause the issue I'm having is that i have a lot of overflown text who then also gets selected because caret doesn't catch the textNode but instead the parent container.

An example of what my page looks like & why I'm having issues with current method:

enter image description here

The closest approach so far has been (Gael) "http://jsfiddle.net" - So if you're looking for any reference code to see what I'm trying to archive. There it is.

Not sure I'm making sense here, otherwise let me know :)


function getTextInColumn (rect) {
      var startX = rect.left;
      var startY = rect.top;
      var endX = rect.left + rect.width - 2;
      var endY = rect.top + rect.height - 2;
      var start, end, range = null;
      var i = 0;
      var rangeText = '';

      while ((rangeText === '' && i < 100 && endY > 5)) {
        range = null;

        if (typeof document.caretPositionFromPoint != 'undefined') {
          start = document.caretPositionFromPoint(startX, startY);
          end = document.caretPositionFromPoint(endX, endY);

          if (start !== null && end !== null) {
            range = document.createRange();
            range.setStart(start.offsetNode, start.offset);
            range.setEnd(end.offsetNode, end.offset);
          }
        }
        else if (typeof document.caretRangeFromPoint != 'undefined') {
          start = document.caretRangeFromPoint(startX, startY);
          end = document.caretRangeFromPoint(endX, endY);

          if (start !== null && end !== null) {
            range = document.createRange();
            range.setStart(start.startContainer, start.startOffset);
            range.setEnd(end.startContainer, end.startOffset);
          }
        }

        if (range !== null) {
          rangeText = range.toString();
        }

        endY -= 52;
        i++;
      }

      return rangeText;
}

Jerking animation on css3 spinner

I found one attractive spinner(css3, scss): http://ift.tt/1x1B0Xp.

@for $i from 1 through 6 {
        @keyframes preload-show-#{$i}{
                from{
                        transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
                        border-left-color: #9c2f2f;
                }
        }
        @keyframes preload-hide-#{$i}{
                to{
                        transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
                        border-left-color: #9c2f2f;
                }
        }

        @keyframes preload-cycle-#{$i}{
                
                $startIndex: $i*5;
                $reverseIndex: (80 - $i*5);

                #{$startIndex * 1%}{
                        transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
                        border-left-color: #9c2f2f;
                }
                #{$startIndex + 5%},
                #{$reverseIndex * 1%}{
                        transform: rotateZ(60* $i + deg) rotateY(0) rotateX(0deg);
                        border-left-color: #f7484e;
                }

                #{$reverseIndex + 5%},
                100%{
                        transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
                        border-left-color: #9c2f2f;
                }
        }
}

@keyframes preload-flip{
        0%{
                transform: rotateY(0deg) rotateZ(-60deg);
        }
        100%{
                transform: rotateY(360deg) rotateZ(-60deg);
        }
}

body{
  background: #efefef;
}

.preloader{
  position: absolute;
  top: 50%;
  left: 50%;
        font-size: 20px;
        display: block;
        width: 3.75em;
        height: 4.25em;
        margin-left: -1.875em;
  margin-top: -2.125em;
        transform-origin: center center;
        transform: rotateY(180deg) rotateZ(-60deg);

        .slice{
                border-top: 1.125em solid transparent;
                border-right: none;
                border-bottom: 1em solid transparent;
                border-left: 1.875em solid #f7484e;
                position: absolute;
                top: 0px;
                left: 50%;
                transform-origin: left bottom;
                border-radius: 3px 3px 0 0;
        }

        @for $i from 1 through 6 {
          .slice:nth-child(#{$i}) { 
                transform: rotateZ(60* $i + deg) rotateY(0deg) rotateX(0);
                animation: .15s linear .9 - $i*.08s preload-hide-#{$i} both 1;
          }
        }


        &.loading{
                animation: 2s preload-flip steps(2) infinite both;
                @for $i from 1 through 6 {
                  .slice:nth-child(#{$i}) { 
                        transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0);
                        animation: 2s preload-cycle-#{$i} linear infinite both;
                  }
                }
        }

}
<div class="preloader loading">
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
  <span class="slice"></span>
</div>
But it has the jerking moment(glitch) in the middle of animation: bottom part of hexagon moves to right on one or two pixels.

I took video of this moment: youtu.be/_TwDuxME8wc.

I tried to repair it on my own, but I haven't enough skills. Could you prompt how it can be fixed? Thanks!

:target class repeats previous animation

Could some give me hand with this animation the problem I'm having is with the target class which is on the close button of my messages - line 161 of my codepen.io. The problem I'm having is making the display:block to display none and not re-show the element again - when you click the cross button it disappears but when you click another cross button on another message it show the previous one again - how can this be stopped, could someone give me some help please.

codepen.io

.wrapper:target{    
  -webkit-animation: close_toast 2s ease both;
  -moz-animation: close_toast 2s ease both;
  animation: close_toast 2s ease both;  
}

@-webkit-keyframes close_toast {
  0% { 
    display: block;
    opacity: 1;
    right: 0px;
  } 
  99% {
    opacity: 0;
    right: 0px;     
  }
  100% {
    display: none;
    opacity: 0;    
    right: 0px;    
  }
}

flip after a certain period of time in css

I'm learning to use css to make some animations (start from zero). I saw this cool example on a website. I would like to apply this to my own css. However I'm thinking several changes to this

1) Can I change this by a timer. So it can flip automatically after a certain period (say flip every 10 seconds) without any mouse movement.

2) I have to in my html file that I want to flip from one to anther. Unfortunately they have got the same class (Something like :widget-inner loadable .widget-size-2x1). So can I use #id instead of class in css file?

3) I saw other examples using an extra js file to achieve the flipping animation. Ideally can I just use only a css to do this?

jQuery delay fadeIn taking longer than expected

I have been trying to fade out a CSS3 preloader with jQuery. I have been trying to stop the animation (which is a box rotating), and then fade in a letter inside the box then, have them both fade out, the letter fading out a little later than the box. I have had the problem where the letter fades in way later than I want it to and when it comes on if fades out really fast. Here is the code:

        //<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('.loader-inner').css({'-webkit-animation': 'none'});
$('.loader').delay(100).css({'-webkit-animation': 'none'}); // will first fade out the loading animation
$('.letter').delay(100).fadeIn('slow'); 
$('.preloader').delay(2050).fadeOut('slow');// will fade out the white DIV that covers the website.
$('.letter').delay(2060).fadeOut(900);
$('body').delay(2060).css({'overflow':'visible'});
                });
        //]]>
body, html {
    height: 100%;
    text-align: center;
}

body {
  background-color: #2f2f2f;
  }
.preloader {
 position: fixed;
 

 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 99999;
 background-color: #2f2f2f;
}

.loader {
  display: block;
  width: 60px;
  height: 60px;
  position: fixed;
  border: 5px solid #d5b317;
  top: 50%;
  left:50%;
  -webkit-animation: loader 2s infinite ease;
  z-index: -10;
  overflow: hidden;
  margin-left: -29px
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #d5b317;
  -webkit-animation: loader-inner 2s infinite ease-in;
  z-index: -10;
}
@font-face {
    font-family: 'Adobe Gurmukhi';
    src: url(/fonts/AdobeGurmukhi-Regular.ttf);
}

.letter {
 display:hidden;
 color: #f7d11e;
 font-family: 'Adobe Gurmukhi';
 font-size: 70px;
 position:absolute;  
 top: 50%;
 left: 50%;
 margin-top: -17px;
 margin-left: -19px;
 z-index: -9;

}
@-webkit-keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}
<script type="text/javascript" src="http://ift.tt/15MB7HF">
      </script>
<!--preloader-->
 <div class="preloader">
   <span class="loader"><span class="loader-inner"></span></span>
     </div>
    <span><p class="letter">ਅ</p></span>