Archive | CSS RSS feed for this section
Insert Element Every nth Loop
When inside of a loop, you can keep track of the iteration number of the loop (shown below is a simple for loop). Using that iteration number, you can calculate it’s modulus of some number (number left over after an even division). If that modulus is zero, you are at an even division of whatever [...]
Continue reading...Awesome CSS+JS form styling
10. marts 2010
Kommentarer slået fra
Sexy CSS+JS Form I was working on our new open source project that i think you will like and I was working on the registration page. This is what I got in the end and i will walk you trough the process with me. This new tutorial is about styling the forms of your website, I [...]
Continue reading...Making a Mosaic Slideshow With jQuery and CSS
10. marts 2010
Kommentarer slået fra
When designing a product page, it is often necessary to present a number of images in a succession, also known as a slideshow. With the raise of the jQuery library and its numerous plugins, there is an abundance of ready-made solutions which address this problem. However, to make a lasting impression to your visitors, you [...]
Continue reading...Design and Code a Cool iPhone App Website in HTML5
8. marts 2010
Kommentarer slået fra
HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects. HTML5 isn’t here just yet, but the Working [...]
Continue reading...Creative Button Animations with Sprites and JQuery (Part 1: Photoshop)
3. marts 2010
Kommentarer slået fra
This tutorial will show you how to build creative hover animations for buttons using sprites. The particular effect illustrated in this tutorial is inspired by the “Download” buttons on Tutorial9.net. Part 1 of this tutorial explains the design process in Photoshop. In Part 2 we will convert it to XHTML + CSS and as a [...]
Continue reading...Creative Button Animations with Sprites and JQuery (Part 2: CSS, XHTML, JQuery)
3. marts 2010
Kommentarer slået fra
In Part 1 of this tutorial, you designed a button sprite that will be coded with HTML, CSS, and JQuery in this part of the tutorial. If you do not want to complete part one of this tutorial, you can download the source files created in that lesson here. Step 1 – HTML Different people will require a [...]
Continue reading...Design a Prettier Web Form with CSS 3
3. marts 2010
Kommentarer slået fra
Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort. I’ll show you how in today’s tutorial! Our Final Product Subtle background gradients give depth to the fields while shadows lift them from the page. Even more impressive is that [...]
Continue reading...How We’ll be Building Websites in 5 years: HTML5 and CSS3 layout
3. marts 2010
Kommentarer slået fra
Graceful Degradation Since HTML5 and CSS3 aren’t going to be supported in all the browsers, especially not older ones like IE6, we can try and make it work in everything, but it won’t look the same in all of the browsers. For instance, rounded corners wont work in IE or Opera, but it wont affect the [...]
Continue reading...Set iPhone Bookmark Icon
3. marts 2010
Kommentarer slået fra
Place this in your <head> section, and set the href attribute to an image to a 57px x 57px PNG file. <link rel="apple-touch-icon" href="iphone-icon.png"/> Link til artiklen (Læse tid 6 sek) Tags: CSS, fil, image, IP, png
Continue reading...CSS Fundamentals: CSS 3 Transitions
25. februar 2010
Kommentarer slået fra
As CSS3 rolls out around the web, it is bringing some interesting new presentational techniques along with it. Today, we’ll review the basics of using CSS3 transitions and animations to add an extra layer of polish. Tutorial Details Program: A web browser that can utilise CSS3 transistions (Chrome or Safari) Language: CSS Difficulty: Easy Estimated Completion Time: 30 min Step [...]
Continue reading...
10. marts 2010
Kommentarer slået fra