Learn HTML and CSS. Well designed tutorial
30 Jan
Really liked the way this HTML5/CSS3 tutorial is heading. Everything is super clear with corresponding examples.
Archive by Author
Javascript Microframeworks
29 Jan
Micro-frameworks are definitely the pocketknives of the JavaScript
library world: short, sweet, to the point. And at 5k and under,
micro-frameworks are very very portable. A micro-framework does one
thing and one thing only — and does it well. No cruft, no featuritis,
no feature creep, no excess anywhere.
HTML Kickstart – If you know how to type HTML & CSS This is for You
29 Jan
HTML KickStart includes everything you need to rapidly create website layouts – things like slideshows, menus, flexible grids, image placeholders, buttons, and more – saving you a ton of time so you can produce faster and make more money.
CoffeeScript solves your Javascript problems
26 Jan
Sam Stephenson speaking at the Future of Web Apps London 2011 runs through how to write cleaner and faster JavaScript with CoffeeScript and where this is leading in the future.
Stitches An HTML5 sprite sheet generator
24 Jan
Drag and drop image files into the space below and click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only currently compatible with the latest versions of Chrome and Firefox.
CSSrefresh – Automatically refresh CSS files
24 Jan
CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.
Free Icons
19 Oct
Get 200+ free “Reflection” icons, well suited for mobile apps and Web sites. It’s a simple no-cost download.
Free CoffeeScript Book
17 Jun
Found this nice coffeescript book through the podcast of Jason Seifer (javascriptshow.com). This was my first reference to coffeescript and I have to say that is really easy to learn and makes you write super clean code. Coffeescript compiles down to Javascript and the syntax was inspired by Ruby and Python.
Learning JQuery
10 Jun
4 videos to get your started with the basic concepts of JQuery. Some of these are for intermediate developers. You will definitely find valuable information on them. I certainly did, specially the deferred concepts.
Pure CSS alternatives to Javascript
19 May
A list of good alternatives if you want to substitute Javascript with CSS. They’re not meant to replace them for better execution but as an alternative if you want to get something very similar by just coding in CSS. Maybe you want to fall back to CSS for those users that have Javascript disabled.
via. speckyboy
Easy zoom in a picture with jQuery
15 May
A simple jQuery script that zooms into an image after 1 second.
check out the demo here
THE CSS
We define a masked area of 200×200 and an absolute position of the main picture to create
a viewport
1 2 3 4 5 6 7 8 9 10 11 12 13 | #window { width: 200px; height: 200px; overflow: hidden; position: relative; } #window img { width: 500px; position: absolute; top: -150px; left: -300px; } |
THE HTML
1 2 3 | <div id="window">
<img src="http://ufomuffin.com/files/etc/tree.jpg">
</div> |
THE JQUERY
We wait a second using delay(1000) and then we use the animate function from jQuery to change the width of the image creating a zoom effect. Notice that at the same time we’re going to the positions top: -150 and , left: -300 to position the viewport in a specific region.
1 2 3 4 5 6 7 8 | $(document).ready(function() { $('#window img').delay(1000).animate({width: 800}, 800, function() { $(this).css({ top: '-150px', left: '-300px' }) }) }); |
The Whole Thing
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Jquery Zoom / UFOMUFFIN.COM</title>
<style>
#window {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
#window img {
width: 500px;
position: absolute;
top: -150px;
left: -300px;
}
</style>
</head>
<body>
<div id="window">
<img src="http://ufomuffin.com/files/etc/tree.jpg">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#window img').delay(1000).animate({width: 800}, 800, function() {
$(this).css({
top: '-150px',
left: '-300px'
})
})
});
</script>
</body>
</html> |
39 Creative CSS3 uses of shadows
15 May
Really creative usage of the css3 effects, try to apply some of these in your designs.
CSS Transitions made simple
2 Apr
Now that we can use CSS transitions in all the modern browsers, let’s make them pretty. I love the classic Penner equations with Flash and jQuery, so I included most of those. If you’re anything like me*, you probably thought this about the default easing options: “ease-in, ease-out…yawn.” The mysterious cubic-bezier has a lot of potential, but was cumbersome to use. Until now. Also, touch-device friendly!
A solid foundation to the basics of JQUERY
23 Mar
If you’re new to JQuery, please take the time to read this article by Mike Gleason. He takes a different approach explaining the foundations, how it works (visual approach), compares it to other frameworks, and he even goes in to what AJAX is. Not your usual JQuery tutorial, recommended.
Social Links