CSS
Get flash to fully experience Pearltrees
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: 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.
CSS animation
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.
How to recreate the new e-bay site scrolling effect | PEPSized
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
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.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.
Cross Browser HTML5 Progress Bars In Depth
Hint.css is a tooltip library written in SASS which uses only HTML/CSS to create simple tooltips. It does not rely on any JavaScript and rather uses data-* attribute , pseudo elements , content property and CSS3 transitions to create the tooltips. Also it uses BEM naming convention particularly for the modifiers.
hint.css - A tooltip library in CSS
background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
