The amazing powers of CSS. Yesterday at the office, we were coming up with strange and magical CSS tricks. Take this one for instance, it makes empty links very visible: Check out the live example at jsFiddle You can also style absolute links differently from relative links: Check out the live example at jsFiddle If you want to have a different style for links pointing out of your domain, you can use the :not() selector.
This is actually how we do the little arrows next to external links at HTML5Rocks. Check out the live example at jsFiddle Just to remind you that you’re not limited to styling links, here’s how to make all PNG images inverted: Moving on from attribute selectors, did you know that you can make the document head visible, along with the other elements there? Or that you can use the awesome power of CSS attr-function to fill in the :after and :before content? Check out the live example at jsFiddle ⟪ How to convert ArrayBuffer to and from StringWriting a flippable book using CSS Regions and 3D transforms ⟫
How to recreate the new e-bay site scrolling effect. In this tutorial we will try to recreate the scrolling effect you’ve seen on the new e-bay site. We’ll create a simple responsive one-page site presenting the beauty and benefits of lavender. No javascript needed – we will use only css. Step 1 – Prerequisities We will need 3 background images, that will stretch to full page width. Mine are about 1800px x 1200px. Step 2 – Html The markup is simple. <! Step 3 – basic css The wrapper class is defined as follows. Since we want each section and the header to behave responsively, we’ll use only percent units. The value of 4.16667% corresponds to 50px when the wrapper has its maximum width. You’ll find the complete stylesheet in the download files. Step 4 – the scrolling effect We don’t use any Javascript, our scrolling effect is obtained purely with css.
We just have to assign the background image to each section Step 5 – last tweaks Since background-attachment:fixed is not supported in mobile Safari we’ll add the following media-query And that’s it! Simulate Realism with CSS3. 16th February, 2010 Tom Kenny Tutorials CSS3 is here to make our lives easier as web designers and developers. While it’s not something we can always rely on heavily for layout purposes just yet, we can use it to enhance certain aspects of our designs by spending a considerably less amount of time doing so. However, CSS3 has not been created for the sole purpose of making it easier and quicker to create a website but also so we can create much better sites than we ever could with CSS before.
Here are a few examples of how CSS3 can improve the web. Polaroids – View Demo Despite not being around today, polaroid images are still iconic and because of this is still a great way to display photos. It’s simple enough to display a basic polaroid image using a white border on all sides with a thicker border for the bottom but we can enhance it with CSS3. Buttons – View Demo Why do buttons exist in web design? The recessed border also uses CSS3 gradient to get the full effect. Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS) Textarea Auto Resize. On a current project, I was trying to find a way to auto-resize a textarea according to some content that would be loaded in dynamically via Ajax. I didn’t know the height of the content and the textarea element doesn’t resize naturally like other HTML elements, so I needed to update the height of the element with JavaScript each time the content changed.
It seemed like a simple task. After doing a search to see what types of plugins and scripts were floating around to do this, the examples I found seemed a little overly complex. While most solutions seemed to incorporate some complex math calculations, I thought of a better way. Using a Hidden Clone Element A <div> element will naturally stretch to fit the height of its content (assuming no floats or absolutely positioned elements are involved). The Code One of the keys to this solution is the CSS. First here’s the CSS for the textarea: Take note that I’ve added a separate class with overflow: hidden, to prevent scrollbars from appearing. Cross Browser HTML5 Progress Bars In Depth. Update (March 9, 2012): I have updated this document to include styling information for Internet Explorer 10. Screenshots of HTML5 progress bars with different styles applied. Details given below. As a web application developer, progress bars are great when you want to show the user that some action is happening, especially when it can take a long time.
They can be animated (like the one in Gmail does when it shows the user how long it is going to take for it to load and initialize), or static (like some shopping cart applications have to show the user how many pages it will take to check out an order). The HTML: Simple The HTML for a Progress bar is dead simple: <progress max="100" value="60"><strong>Progress: 60% done. Note that the HTML inside the <progress> tag is the fallback for browsers that do not support it. Note that: A progress bar can also have an “indeterminate” state, which happens when there is no value attribute. <progress max="100"><strong>Progress: 60% done. That’s Too Basic!
CSS3 Click Chart (CSS3 Support Chart) by Impressive Webs. Original Hover Effects with CSS3. Movement in interaction design | Hover States. Borderとtransitionを使ったエフェクト. Hint.css - A tooltip library in CSS. Layer Styles. Create CSS3 - Easy CSS 3 Code Generator. Ultimate CSS Gradient Generator - ColorZilla.com. CSS3 Generator - By Eric Hoffman & Peter Funk.