background preloader

Video Screencasts

Video Screencasts
#130: First Moments with Grunt There are all these tasks that we need to do as front end developers. Concatenate and compress our files. #127: Basics of JavaScript Templating A template is a chunk of HTML that you need to inject onto the page. #126: Using Modernizr Should Modernizr be part of every modern web project? #124: A Modern Web Designer’s Workflow This is a presentation I gave at conferences in late 2012 and early 2013. It talks … #121: The Right CMS is a Customized One The perfect CMS to suite the needs of any non-trivial content-oriented website does not come out-of-the-box. #119: Let’s Answer Forum Posts! In this screencast we live answer more forums posts with no planning whatsoever. #117: Let’s Attempt To Do a “Pull Request” I’ve never in my life submitted a “Pull Request” on GitHub. #115: Don’t Overthink It Grids Even if the layout of a site is simple as a main content area on the left and a sidebar on the right, that’s a grid. #113: Creating and Using a Custom Icon Font Related:  Web development

Online Courses from the World's Experts Have you been thinking about becoming a web developer but don’t know where to start? This course was designed as a comprehensive resource for anyone seeking to learn web development and launch projects of their own. Each section of course includes instructional content, as well as an example project that requires you to build upon your newly learned skills. Become a “Full Stack” Developer and Master These Skills With Lifetime Access How to Make Patch on Clothes » Free Photoshop Tutorials | PhotoshopStar Welcome to! If you find this site useful, you might want to subscribe to our free newsletter for updates on our new Photoshop Tutorials and Articles. Your clothes are broken? Ok, then this tutorial special for you! First of all, create a new document around 1000×500 pixels in size ad fill it with color of #524f2e. Set up Foreground and Background colors as white and black accordingly and then apply Filter > Distort > Diffuse Glow with presets similar to these: Ok, now we have something like this: Press D to set Foreground and Background colors as standard. Now we have a relief like this: Change layer mode to Darken and set opacity to 30% up. Ok, now I would like to bring some gradient to canvas. Next thing to do is add some text to our canvas. In the above image I’ve used Arial Black (130 pt, Sharp) for my font with a very thick weight/setting. Move the text in the middle of canvas: Now find some appropriate fabric texture. See the result: This tutorial is done!

CSS Decorative Gallery Did you like my previous CSS tutorial on how to create gradient text effects? I'm using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. View Demo Gallery Download Demo ZIP What Are The Benefits Of This CSS Trick? Saves Time — You don't have to manually create the decorative template in Photoshop and export the individual image. Basic Concept (see demo) You need to insert an extra <span> tag within the <div> tag, with which we'll apply a background image to create the overlaying effect. Then in the CSS, the key point you have to remember is: specify the div element to position:relative and the span element to position:absolute. IE PNG Hack To make the transparent PNG image work on IE6, I use this wonderful hack. Look and Feel The jQuery Solution (see demo) #1. #1b. #2. #2b. #3. #4. #4b. #5. #5b.

Double Body Background CSS Trick | The Blog of Joren Rapini So, you just created this awesome fancy background for a website. The top part of the background is large and in charge, while everything below it is going to be a repeating background that goes all the way down to the bottom of the page and helps define your website’s borders. The goal is to make sure the top background sits on top of the repeating background so that you cannot see the repeating background until the top one is done, but how do you utilize 2 centered background images without the browser creating a horizontal scrollbar? For an example of what we’re creating, click here. You could just use a transparent PNG background that repeats over top of the large background using DD Belated PNG, but that would be much more load intensive than we want to shoot for. First of all, the structure of the HTML is simple. 01.body { 02. background:#fff url(background.jpg) repeat-y top center; 03. margin:0px; 04. padding:0px; 06. 07. background:url(background-top.jpg) no-repeat top center;

NoJPEG Using Style Sheets Review the W3C CSS standard recommendation. This article is an overview of Cascading Style Sheets (CSS), providing some explanations of how it works and showing how you can use style sheets more effectively. It's not a reference or compatibility guide (although links to some good references and compatibility notes are provided throughout) and it's not a tutorial. But if you've used CSS to some extent and want to learn more, you should find the information here useful. What Style Sheets Are Not Style sheets are often touted as a means to separate style from content. HTML (hypertext markup language) defines the structure of a document, the organization of text and images and other data into individual elements (via tags). What CSS does is to define how these elements are displayed in terms of typography, color, spacing, etc. The Advantage of Style Sheets All tags in HTML have a default style. <p style="float:right;margin-left:1em;width:50%">Some text. Including Style Sheets Defining Style Rules

DD_roundies: Code-only rounded HTML boxes 2011/4/8: It is high time I update the documentation here. This plugin got as far as supporting IE8 Release Candidate 1. That was a while ago. I spent some time away from the project before IE8 final was released. Foolishly, I never wrote anything to this effect because I'd hoped to give it a new college try at some point. Turns out I like riding my bicycle during my free time more than maintaining this project. That said, IE9 is supposedly offering itself as an update. This was a neat experiment, but note that I never took the version numbers out of "alpha" mode. If I were truly sore on this subject, I would take this page down; I will leave it up for posterity instead. This is a Javascript library that makes creation of rounded-corner HTML boxes easier, with a focus on Internet Explorer. IE is supported through use of VML. Since Opera doesn't currently (time of writing: 2009-01-01) support border-radius, this library doesn't do anything in Opera. Table of Contents Quick summary:

About Dynamic Properties As of Windows Internet Explorer 8, dynamic properties have been deprecated and are only supported for Web pages displayed in IE5 (Quirks) mode or IE7 Standards mode. Microsoft Internet Explorer 5 offers an easy-to-use new feature that enables Web authors and developers to vastly improve the appearance and rendering of their Web pages. Using the power of dynamic properties, it is now possible to declare property values not only as constants, but also as formulas. The formulas used in a dynamic property can reference property values from other elements, thereby allowing authors unique flexibility when designing their Web pages. A few examples of the things you can do with dynamic properties are: Innovative Web authors can easily expand beyond this list of simple examples and create impressive and clever Web pages by exploiting the capabilities of dynamic properties. This article covers the following topics. Benefits of Dynamic Properties Implementing Dynamic Properties Click to view sample.

colourcode - find your colour scheme Internet Explorer and the CSS box model One of the differences between Internet Explorer and standards compliant Web browsers that cause a lot of trouble for CSS beginners is the CSS box model. Since the box model is what browsers use to calculate an element’s total width and height, it is quite understandable that different browsers producing different results can be both confusing and frustrating. How the CSS box model works has been explained by others many times already. Nonetheless I still see questions related to the CSS box model on forums and mailing lists, and frequently encounter sites that expect browsers to use Internet Explorer’s non-standard way of calculating box dimensions. If you already know how the different box models work and how to handle Internet Explorer, there is nothing new for you here. The CSS box model diagram Here is a simple diagram showing how the dimensions of an element are related in CSS: The W3C Box model The IE Box model total width = margin-left + width + margin-right IE versions 1. 2. 3. 4.

DD_belatedPNG: Medicine for your IE6/PNG headache! 2011/4/8: This is no longer an actively maintained project. I apologize, I must move on with current events. This is a Javascript library that sandwiches PNG image support into IE6 without much fuss. You can use PNGs as the SRC of an <IMG/> element or as a background-image property in CSS. If you attempt the latter, you will find that, unlike with vanilla usage of AlphaImageLoader, background-position and background-repeat work as intended. As a bonus, "fixed" elements will respond to a commonly used set of Javascript style assignments, as well as the A:hover pseudo-class. Table of Contents Long story short, this uses Microsoft's implementation of VML instead of Microsoft's AlphaImageLoader filter. The intended implementation is pretty easy: Download a copy of the DD_belatedPNG Javascript file - please do not hotlink mine, I am on a shared host. Due to popular demand, here is some documentation for how to "fix" elements on a pick-and-choose basis. (Based on the normal usage approach)

The Psychology of Web Design A great website design is so much more than just delivering content and making it look good. When visitors come to your site, they produce a set of feelings about your website and your organization. The type of feelings they produce – positive or negative – are entirely in your hands and should not be overlooked when designing content. Over the years, there has been a body of knowledge produced to help designers create effective visuals that play into the psychology of their viewers. In order to achieve this, one must understand how different design elements and how we use them affect the mood, attitude and experience the visitor will have while browsing our website. Below are four major areas of website design and development that have the biggest impacts on the psychology of website visitors. Content For websites, content drives the design you see on screen. In addition, the type of content you present sets a tone for you and your organization. Space Color Typography via