How to Make Non-Password Inputs Use Bullets (or Bullet Alternatives)

by in , 0

This works on text inputs (e.g. text, email, etc) but you cannot change actual password inputs. Use case = ???.

input { -webkit-text-security: none; }
input { -webkit-text-security: circle; }
input { -webkit-text-security: square; }
input { -webkit-text-security: disc; /* Default */ }
Here are css code to Make Non-Password Inputs Use Bullets (or Bullet Alternatives)

Tutorial Make “Pre” Text Wrap

by in , 0

Text in <pre> tags doesn't wrap by default. For example, see the code snippet below! If this is causing layout problems, one solution is to give the pre block an overflow property to hide the excess or cause it to scroll. The other solution is to have it wrap.

/* Browser specific (not valid) styles to make preformatted text wrap */		

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Tutorial Link Pseudo-Classes (In Order)

by in , 0

a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}

Link, Visited, Hover, Active
L, V, H, A
LoVe, HAte

Tutorial Layered Paper

by in , 0

<div class="layered-paper">
    Howdy
</div>
.layered-paper {
    background: #eee;
    box-shadow:
        0 1px 1px rgba(0,0,0,0.15), /* The top layer shadow */
        0 10px 0 -5px #eee, /* The second layer */
        0 10px 1px -4px rgba(0,0,0,0.15), /* The second layer shadow */
        0 20px 0 -10px #eee, /* The third layer */
        0 20px 1px -9px rgba(0,0,0,0.15); /* The third layer shadow */
}

View Demo

Reference URL

Tutorial Keyframe Animation Syntax

by in , 0

Basic Declaration & Usage

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+ */
}

For the sake of brevity the rest of the code on this page will not use any prefixes, but real world usage should use all the vendor prefixes from above

Multiple steps

@keyframes fontbulger {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}

#box {
   -animation: fontbulger 2s infinite;
}

If an animation has the same starting and ending properties, one way to do that is to comma-separate the 0% and 100% values:

@keyframes fontbulger {
  0%, 100% {
    font-size: 10px;
  }
  50% {
    font-size: 12px;
  }
}

Or, you could always tell the animation to run twice (or any even number of times) and tell the direction to alternate.

Calling keyframe animation with separate properties

.box {
 animation-name: bounce;
 animation-duration: 4s;
 animation-iteration-count: 10;
 animation-direction: alternate;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
 animation-delay: 2s;
}
timing-function ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))
duration & delay Xs or Xms
duration-count X
fill-mode forwards, backwards, both, none
animation-direction normal, alternate

Animation Shorthand

Just space-separate all the individual values. The order doesn't matter except when using both duration and delay, they need to be in that order. In the example below 1s = duration, 2s = delay, 3 = iterations.

-webkit-animation: test 1s 2s 3 alternate backwards

Combine transform and animation

@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Multiple animations

You can comma-separate the values to declare multiple animations on a selector.

.animate-this {
   animation: 
      first-animation 2s infinite, 
      another-animation 1s;
}

Steps()

The steps() function controls exactly how many keyframes will render in the animation timeframe. Let's say you declare:

@keyframes move {
  from { top: 0; left: 0; }
  to   { top: 100px; left: 100px; }
}

If you use steps(10) in your animation, it will make sure only 10 keyframes happen in the allotted time.

.move {
  animation: move 10s steps(10) infinite alternate;
}

The math works out nicely there. Every one second, the element will move 10px to the left and 10px down, until the end of the animation, and then again in reverse forever.

This can be great for spritesheet animation like this demo by simurai.

Browser Support

Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+

More Resources

MDN Docs MDN: Using CSS Animation Can I Use - Browser Support VIDEO: Intro to CSS Animations

How to add iPad-Specific CSS

by in , 0

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

Tutorial iPad Orientation CSS

by in , 0

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

Reference URL