Adds an ellipsis if the text is longer than the available space.
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
Width: 150px;
}
</style>
</head>
<body>
<p>This text is longer than the space allows</p>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#ball {
width: 160px;
height: 160px;
border-radius: 80px;
background: rgb(25,100,150);
position: absolute;
-webkit-animation: bounce 1s infinite;
-moz-animation: bounce 1s infinite;
-o-animation: bounce 1s infinite;
-ms-animation: bounce 1s infinite;
animation: bounce 1s infinite;
}
@-webkit-keyframes bounce {
0% {top: 0;
-webkit-animation-timing-function: ease-in;
}
40% {}
50% {top: 140px;
height: 140px;
-webkit-animation-timing-function: ease-out;
}
55% {top: 160px; height: 120px; border-radius: 70px / 60px;
-webkit-animation-timing-function: ease-in;}
65% {top: 120px; height: 140px; border-radius: 70px;
-webkit-animation-timing-function: ease-out;}
95% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
100% {top: 0;
-webkit-animation-timing-function: ease-in;
}
}
@-moz-keyframes bounce {
0% {top: 0;
-moz-animation-timing-function: ease-in;
}
40% {}
50% {top: 140px;
height: 140px;
-moz-animation-timing-function: ease-out;
}
55% {top: 160px; height: 120px; border-radius: 70px / 60px;
-moz-animation-timing-function: ease-in;}
65% {top: 120px; height: 140px; border-radius: 70px;
-moz-animation-timing-function: ease-out;}
95% {
top: 0;
-moz-animation-timing-function: ease-in;
}
100% {top: 0;
-moz-animation-timing-function: ease-in;
}
}
@-ms-keyframes bounce {
0% {top: 0;
-ms-animation-timing-function: ease-in;
}
40% {}
50% {top: 140px;
height: 140px;
-ms-animation-timing-function: ease-out;
}
55% {top: 160px; height: 120px; border-radius: 70px / 60px;
-ms-animation-timing-function: ease-in;}
65% {top: 120px; height: 140px; border-radius: 70px;
-ms-animation-timing-function: ease-out;}
95% {
top: 0;
-ms-animation-timing-function: ease-in;
}
100% {top: 0;
-ms-animation-timing-function: ease-in;
}
}
@keyframes bounce {
0% {
top: 0;
animation-timing-function: ease-in;
}
50% {
top: 140px;
height: 140px;
animation-timing-function: ease-out;
}
55% {
top: 160px;
height: 120px;
border-radius: 70px / 60px;
animation-timing-function: ease-in;
}
65% {
top: 120px;
height: 140px;
border-radius: 70px;
animation-timing-function: ease-out;
}
95% {
top: 0;
animation-timing-function: ease-in;
}
100% {
top: 0;
animation-timing-function: ease-in;
}
}
</style>
</head>
<body>
<div id="ball"></div>
</body>
</html>
Hover over each of the cards in the deck:
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="reset.css">
<script src="prefixfree.min.js"></script>
<script src="modernizr.js"></script>
<link rel="stylesheet prefetch" href="http://weloveiconfonts.com/api/?family=fontawesome">
<link rel="stylesheet prefetch" href="http://fonts.googleapis.com/css?family=Ubuntu">
<style>*,
*:after,
*:before {
box-sizing: border-box;
}
body {
overflow: hidden;
background: #c6c6c6;
-webkit-font-smoothing: antialiased;
}
.deck {
position: absolute;
width: 10em;
height: 13em;
top: 50%;
left: 50%;
margin: -6.5em 0 0 -5em;
-webkit-backface-visibility: hidden;
font-family: 'Ubuntu', "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
text-align: center;
}
.deck__item {
width: 100%;
height: 100%;
position: absolute;
border-radius: .3em;
border: 0.1em solid rgba(0, 0, 0, 0.15);
box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.3), inset 0 6em 6em rgba(255, 255, 255, 0.1);
-webkit-transform-origin: 90% 92%;
transition: .3s;
}
.deck__item:hover ~ .deck__item {
-webkit-transform: rotate(120deg);
}
.deck__item:last-of-type:after {
content: "";
position: absolute;
left: 90%;
top: 92%;
border-radius: 50%;
width: 1.2em;
height: 1.2em;
background: white;
margin: -.6em 0 0 -.6em;
box-shadow: inset 0 1px 1px white, inset 0 -0.3em 0.2em #dddcdb, 0 0 0.6em rgba(0, 0, 0, 0.2);
}
.deck__item:last-of-type:before {
content: "";
position: absolute;
right: .4em;
bottom: .9em;
width: 1.1em;
height: .15em;
background: silver;
background: rgba(0, 0, 0, 0.1);
z-index: 2;
}
.deck__link {
text-decoration: none;
display: block;
color: white;
color: rgba(255, 255, 255, 0.8);
}
.deck__icon {
font-family: 'FontAwesome', sans-serif;
font-size: 4em;
color: black;
color: rgba(0, 0, 0, 0.6);
display: block;
margin: .5em auto;
}
.deck__item--facebook {
background: #3b5998;
-webkit-transform: rotate(-20deg);
}
.deck__item--github {
background: #4183c4;
-webkit-transform: rotate(-10deg);
}
.deck__item--twitter {
background: #00a0d1;
-webkit-transform: rotate(0deg);
}
.deck__item--linkedin {
background: #0e76a8;
-webkit-transform: rotate(10deg);
}
.deck__item--pinterest {
background: #910101;
-webkit-transform: rotate(20deg);
}
.deck__item--googleplus {
background: #db4a39;
-webkit-transform: rotate(30deg);
}
</style>
</head>
<body>
<ul class="deck">
<li class="deck__item deck__item--facebook">
<a class="deck__link" href="#">
<span class="deck__icon fontawesome-facebook"></span>
<span class="deck__label">Facebook</span>
</a>
</li>
<li class="deck__item deck__item--github">
<a class="deck__link" href="#">
<span class="deck__icon fontawesome-github"></span>
<span class="deck__label">GitHub</span>
</a>
</li>
<li class="deck__item deck__item--twitter">
<a class="deck__link" href="#">
<span class="deck__icon fontawesome-twitter"></span>
<span class="deck__label">Twitter</span>
</a>
</li>
<li class="deck__item deck__item--linkedin">
<a class="deck__link" href="#">
<span class="deck__icon fontawesome-linkedin"></span>
<span class="deck__label">LinkedIn</span>
</a>
</li>
<li class="deck__item deck__item--pinterest">
<a class="deck__link" href="#">
<span class="deck__icon fontawesome-pinterest"></span>
<span class="deck__label">Pinterest</span>
</a>
</li>
<li class="deck__item deck__item--googleplus">
<a class="deck__link" href="#">
<span class="deck__icon fontawesome-google-plus"></span>
<span class="deck__label">Google+</span>
</a>
</li>
</ul>
<script style="display: none;">var __links = document.querySelectorAll('a');function __linkClick(e) { parent.window.postMessage(this.href, '*');} ;for (var i = 0, l = __links.length; i < l; i++) {if ( __links[i].getAttribute('target') == '_blank' ) { __links[i].addEventListener('click', __linkClick, false);}}</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
Hide the backside of a rotated div element by hovering over the card below.
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#container {
position: relative;
margin: 10px auto;
width: 120px;
height: 180px;
z-index: 1;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
}
#card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
-o-transform-style: preserve-3d;
-o-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#container:hover #card, #container.hover_effect #card {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.face.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div id="container" class="hover">
<div id="card">
<div class="front face">
<img src="front.png"/>
</div>
<div class="back face">
<img src="back.png"/>
</div>
</div>
</div>
</body>
</html>
Click on the tiles on the right hand side to rotate.
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Rotating Tiles</title>
<style>
#block-1 { background: #d5fcff; }
#block-2 { background: #e1ffd5; }
#block-3 { background: #ffffd8; }
#rotator > div {
position: absolute;
overflow: hidden;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#rotator .active { top: 20px; left: 20px; width: 580px; height: 280px; }
#rotator .non-active-top { top: 20px; left: 620px; height: 130px; width: 320px; }
#rotator .non-active-bottom { top: 170px; left: 620px; height: 130px; width: 320px; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script>
// DOM Ready
$(function() {
var current;
function rotate() {
if (current == 1) {
$("#block-1").removeClass().addClass("active");
$("#block-2").removeClass().addClass("non-active-top");
$("#block-3").removeClass().addClass("non-active-bottom");
} else if (current == 2) {
$("#block-1").removeClass().addClass("non-active-bottom");
$("#block-2").removeClass().addClass("active");
$("#block-3").removeClass().addClass("non-active-top");
} else {
$("#block-1").removeClass().addClass("non-active-top");
$("#block-2").removeClass().addClass("non-active-bottom");
$("#block-3").removeClass().addClass("active");
}
}
$("#rotator div").click(function() {
current = this.id.substr(6);
rotate();
});
});
</script>
</head>
<body>
<div id="rotator">
<div id="block-1" class="active"></div>
<div id="block-2" class="non-active-top"></div>
<div id="block-3" class="non-active-bottom"></div>
</div>
</body>
</html>
Originally taken from the website: http://css-tricks.com/examples/RotatingBlocks/
I have added a nice fade animation to each step of the wizard I created in my previous blog post.
Watch the video below or try out the live demo:
It turned out to be very simple indeed:
1) Add a script reference to the Angular-Animate.js library in your html page
2) Create an Animate.css file which will contain your animation details and add a reference within your html page. I’ll explain the content of this code in a second.
3) Add a css class to the area you are animating, this is so your css code can locate it. I added “fade-animation” class to each of the three wizard steps.
4) Finally add a reference to ngAnimate for Angular
And that’s it. Right, now for the trickiest part, here is the animate.css code:
.fade-animation.ng-hide-remove {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
display:block!important;
}
.fade-animation.ng-hide-add.ng-hide-add-active,
.fade-animation.ng-hide-remove {
opacity:0;
}
.fade-animation.ng-hide-add,
.fade-animation.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}
When you break this down there’s not much to it. The first section is saying I want the animation to take half a second, in all the various browsers. The display:block!important line is telling angular to override it’s default for hiding.
The other two css setters simply show and hide. Now the interesting bit is the css selectors. You’ll recognise the fade-animation selector as our class we are using for identification purposes.
All the ng-hide-* css classes are what Angular adds as it cycles through its event lifecycle for showing and hiding.
This would be the lifecycle for moving for the user moving from Step One to Step Two:
I’ve been playing around with Angular-Wizard, it’s really simple and easy to use.
My online demo featuring bootstrap and Microsoft Modern CSS
<section ng-app="wizard-sample" ng-controller="WizardCtrl" ng-cloak>
<wizard on-finish="finished()" >
<wz-step title="Step One">
... put your html here...
<a wz-next>Next</a>
</wz-step>
<wz-step title="Step Two">
... put your html here...
<a wz-previous>Previous</a>
<a wz-next>Next</a>
</wz-step>
<wz-step title="Finish">
... put your html here...
<a wz-previous>Previous</a>
</wz-step>
</wizard>
</section>
Here is the Official online demo from the creator of Angular-Wizard, who did a great job on this project.
Here is a screenshot of a business form I have written in Angular:
For the source code click here
The validation is coded using the new ngMessage directive which displays the error messages should any be present. Various rules are shown as an example: required, min/max length, regex and a faked database lookup.
ngMessages has only been introduced since AngularJS 1.3.0-beta.8
This example was originally based on a blog post by Year of Moo with a few of my own enhancements to match the behaviour of a previous form I had created.
I’ve customised the CSS to show the user what fields are required, along with what fields have been updated and are valid. Each control only updates when the user leaves the control rather than on every keypress which is the default Angular behaviour.
I also use ngCloak to ensure no output is displayed before Angular has compiled the page.
