background preloader

CSS3 transitions, transforms and animations

CSS3 transitions, transforms and animations
Browser Support for CSS transitions How to use transitions If you haven't used transitions before, here's a brief introduction. On the element you want to have animate, add the following CSS: There is a lot of duplication due to vendor prefixes - until the specification if finalised, this will persist. Another approach is simply to write the CSS without the prefixes, then use Lea Verou's -prefix-free to add them in at runtime. Something you definitely shouldn't do is to only include the webkit prefix. It's worth noting as well that there isn't an -ms- prefix on these properties. The syntax is pretty straightforward, you specify the property you want to animate, all or border-radius or color or whatever, the time to run, then the transition timing function. Whenever any property changes, then it will animate instead of changing directly. To see the difference in speed, have a look at the speed test. Different timing functions Delays The syntax for a CSS3 transition is of the form: Related:  Programowanieangelinasmithyackey

OOP in JS, Part 1 : Public/Private Variables and Methods This page shows how to create private variables and methods in "classes" in Javascript through the rather simple example of a person. (This is really a very rough approximation of the classical OOP pattern, and not necessarily a "best-practice" for JavaScript programming.) Part 2 covers inheritance. Summary Example In this example, a person's name and race are set at birth and may never be changed. <- click to run the example code below (the code block being run appears after the Person constructor). The Example Code Notes This page copyright ©2003 by Gavin Kistner.

CSS3 Filters: Altering HTML and Images with just CSS CSS3 Filters are a quite interesting offshoot from SVG, allowing you to modify HTML elements and images with blurs, brightness and a lot more. In this quick tutorial we’ll go over exactly how they’re going to work. Using just CSS we can accomplish some pretty complicated effects. These should be applicable to both images and HTML elements, but obviously browsers will vary for the foreseeable future. The property used to control all of this stuff is filter. filter: filter(value); As you might expect though, browser prefixes will be required. -webkit-filter: filter(value);-moz-filter: filter(value);-o-filter: filter(value);-ms-filter: filter(value); There are quite a few filter, so to get a better idea lets take a look at them individually. filter: blur(5px) brightness(0.5); There are a few filters that I won’t outline below, but these can be easily accomplished with already existing CSS (opacity and drop shadows). Blur Ever wanted to do a gaussian blur on an image or text with just CSS? Sepia

Page Transitions with CSS3 In the last few years, we've seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I'm gonna teach you how you can have your own, but instead I'll be using CSS Transitions and the :target property to do all the magic. View demo Download source In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. The Dribbble shots used in the demos are by Matt Kaufenberg. Markup The HTML will contain five main divisions: a header and the four content sections. In the header we will have the main heading and the navigation: The reason for having such an “unordered” structure by adding the header to the end, is that we make the navigation “reachable” using the general sibling selector (~), so that we can color the respective items differently. First we will give style to our header and the navigation. And that’s all you need.

12 Things You Can Do with Lectora and Code | K. Anthony: Instructional Designer Reading Time: 2 minutes I presented at my organizations quarterly Lectora brownbag luncheon this week on using Lectora and code (HTML/CSS/and JavaScript). It was a lot of fun preparing and I believe (hope!) that everyone found it useful. I wanted to post the presentation here as a demo of the types of things I have done and hope to do with code in Lectora. Why Code? There are two main reasons. The first one is that, when I first started using Lectora, I dug through the forums and one of the things I noticed pretty quickly was Lectora could be an extemely powerful and versatile tool. The second reason is that, when I have room to run (which I sometimes do) outside of the constraints of Lectora, knowing how to create cool interactions, interactive infographics, webpages, etc. is one way to create really cool learning objects that aren’t tied to any authoring tool. About the Presentation I also thought about the presentation in terms of simple to complex. The Presentation! To Be Continued…

Resizing images with PHP The following script will easily allow you to resize images using PHP and the GD library. If you’re looking to resize uploaded images or easily generate thumbnails give it a try Update: Looking to resize transparent PNG’s and GIF’s? We’ve updated our original code, take a look at Usage Save the code from the ‘the code’ section below as SimpleImage.php and take a look at the following examples of how to use the script. The first example below will load a file named picture.jpg resize it to 250 pixels wide and 400 pixels high and resave it as picture2.jpg If you want to resize to a specifed width but keep the dimensions ratio the same then the script can work out the required height for you, just use the resizeToWidth function. You may wish to scale an image to a specified percentage like the following which will resize the image to 50% of its original width and height The code Further Information

Using jQuery and Lectora to Customize e-Learning Courses | Trivantis e-Learning This is the fourth and final part of my jQuery in Lectora® series, so we are going to build something exciting and learn something rather complex. But let’s first recap what we’ve learned so far: Part 1—Why jQuery is useful and how to include it in your title. We also enhanced a multiple choice question. Part 2—How to optimize your jQuery workflow and include external scripts. Part 3—We learned about jQuery’s little sister, jQuery UI, and we also built a drag-and-drop exercise from scratch. In this final part we’ll build two exercises that I find extremely useful in many e-learning courses. Image Magnifier First, we add all required scripts and style sheets: Then, we add two images (nashville_300px.jpg for preview and nashville_1024px.jpg for full size): Please note that the bigger image is 370x300px. We assign classes “magnifier-thumb-wrapper” to the smaller image and “magnifier-preview” (full size) to the text box where the larger image will appear. function run_magnifier(zoom) { zoom ?

Overlay-like Effect with jQuery A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. Vapour around me When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary. O my friend -- but it is too much for my strength -- I sink under the weight of the splendour of these visions! I am so happy, my dear friend I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I sink under the weight

the evolution of html5 info turn.js - The page flip effect for HTML5 Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. Let's code <div id="flipbook"><div class="hard"> Turn.js </div><div class="hard"></div><div> Page 1 </div><div> Page 2 </div><div> Page 3 </div><div> Page 4 </div><div class="hard"></div><div class="hard"></div></div> Features ✓ Works on iPad and iPhone. ✓ Simple, beautiful and powerful API. ✓ Allows to load pages dynamically through Ajax requests. ✓ Pure HTML5/CSS3 content. ✓ Two transition effects. ✓ Works in old browsers such as IE 8 with turn.html4.js Requirements jQuery 1.3 or above. Browser Support Safari 5 Chrome 16 Firefox 10 IE 10, 9, 8 Devices ✓ All iOS (iPad, iPhone, iPod) ✓ Android (Chrome for Android) Improvements Turn.js 4 includes a set of significant performance improvements on its core. Complements Support About

How does the Internet work? - HowStuffWorks Even though the Internet is still a young technology, it's hard to imagine life without it now. Every year, engineers create more devices to integrate with the Internet. This network of networks crisscrosses the globe and even extends into space. But what makes it work? To understand the Internet, it helps to look at it as a system with two main components. Other types of hardware that support the Internet include routers, servers, cell phone towers, satellites, radios, smartphones and other devices. These elements are connections. All of this hardware wouldn't create a network without the second component of the Internet: the protocols. We'll take a closer look at protocols and how information travels across the Internet on the next page.

2010 Październik « Michał Urbański Blog Na wstępie chciałem wyjaśnić, że skrót SMS nie ma nic wspólnego z telefonami komórkowymi, tylko jest to skrót od SQL Management Studio. Dla osób korzystających na co dzień z SQL Server nie muszę wyjaśniać, do czego to narzędzie służy, natomiast dla początkujących znajdzie się kilka porad (niekoniecznie przydatnych ;) ). Przede wszystkim, w nawiązaniu do poprzednich postów, znajdujemy się w miejscu, w którym utworzone zostało menu z kategoriami. Na podstawie wyboru odpowiedniej pozycji w menu, użytkownik przenoszony jest za pomocą odnośnika do strony wyświetlającej produkty z danej grupy żywnościowej. Wykorzystany w tym celu został jeden z mechanizmów zarządzaniam stanem sesji, czyli opisane już wcześniej tzw. query strings. Musimy mieć jednak co wyświetlać. Tabele te powiązane są ze sobą relacją jeden-do-wiele. Ograniczenie takie można również prościej wyklikać za pomocą SMS. W swojej tabeli chciałbym, żeby produkty się nie powtarzały.

HTML Responsive Web How to Find or Validate an Email Address The regular expression I receive the most feedback, not to mention "bug" reports on, is the one you'll find right on this site's home page: \b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b. This regular expression, I claim, matches any email address. Most of the feedback I get refutes that claim by showing one email address that this regex doesn't match. As I explain below, my claim only holds true when one accepts my definition of what a valid email address really is, and what it's not. The virtue of my regular expression above is that it matches 99% of the email addresses in use today. If you want to use the regular expression above, there's two things you need to understand. The previous paragraph also applies to all following examples. Trade-Offs in Validating Email Addresses Yes, there are a whole bunch of email addresses that my pet regex doesn't match. To include .museum, you could use ^[A-Z0-9._%+-]+@[A-Z0-9.-]+\. ^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.(? Regexes Don’t Send Email Make a Donation

Related: